web: Not able to widen the margins in CSS, code copied from net and trying to modify it as per requirement

i am working on a project for my degree course. I copied the code for split screen from net and now trying to modify the page as per the project requirements. i am stuck with modifying css class for changing the margin settings.

<html lang="en" class="no-js">
    <head> 
        <title>Admin Console</title>
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/component2.css" />
        <!--link rel="stylesheet" type="text/css" href="css/home.css" /-->
        <script src="js/modernizr.custom.js"></script>
    </head>
    <body>
            <div class="container">
                <div class="side side-left">
                <header class="codropsheader clearfix">
                            <span>
                                <img height=100px width=90px src="img/profile2.jpg" alt="profile2" align="left">
                                </span>
                            <h1>College Of Telecommunication</h1>
                        </header>



                <div class="side side-right">
                <header class="codropsheader clearfix">
                            <span>
                                <img height=100px src="img/profile1.jpg" alt="profile2" align="right">
                                </span>
                            <h1>Engineering,</h1>
                        </header>

The CSS file for this is:

html, body, 
.container {
    position: relative;
    width: 100%;
    height: 100%;
}

body {
    overflow-y: scroll;
    background: #333;
}

.splitlayout {
    position: relative;
    overflow-x: hidden;
    min-height: 100%;
    width: 100%;
}

/* Intro sides */
.side {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 50%;
    height: 100%;
    text-align: center;
    -webkit-backface-visibility: hidden;
}

.open-left .side,
.open-right .side {
    cursor: default;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 499;
    visibility: hidden;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.side-left .overlay {
    background: rgba(0,0,0,0.7);
}

.side-right .overlay {
    background: rgba(0,0,0,0.3);
}

.side-left {
    left: 0;
    background: #47a3da;
    color: #fff;
    outline: 1px solid #47a3da; /* avoid gap */
}

.side-right {
    right: 0;
    background: #fff;
    color: #47a3da;
    outline: 1px solid #fff; /* avoid gap */
}

/* Intro content, profile image and name, back button */
.intro-content {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0 1em;
    width: 50%;
    cursor: pointer;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}

.profile {
    margin: 0 auto;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #47a3da;
}

.profile img {
    max-width: 100%;
    border-radius: 50%;
    opacity: 0.6;
}

.intro-content h1 > span {
    display: block;
    white-space: nowrap;
}

.intro-content h1 > span:first-child {
    font-weight: 300;
    font-size: 2em;
}

.intro-content h1 > span:nth-child(2) {
    position: relative;
    margin-top: 0.5em;
    padding: 0.8em;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8em;
}

.intro-content h1 > span:nth-child(2):before {
    position: absolute;
    top: 0;
    left: 25%;
    width: 50%;
    height: 2px;
    background: #fff;
    content: '';
}

.side-right .intro-content h1 > span:nth-child(2):before {
    background: #47a3da;
}

.back {
    position: fixed;
    top: 2.6em;
    z-index: 500;
    display: block;
    visibility: hidden;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #47a3da;
    text-align: center;
    font-size: 22px;
    line-height: 44px;
    opacity: 0;
    pointer-events: none;
}

.mobile-layout .back { /* fixed positioning will make this not clickable after scrolling on some mobile devices */
    position: absolute;
}

.back-left {
    left: 12.5%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.back-right {
    right: 12.5%;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    color: #fff;
}

.open-right .back-left,
.open-left .back-right {
    visibility: visible;
    opacity: 1;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
    pointer-events: auto;
}

.back:hover {
    color: #ddd;
}

/* Pages */
.page {
    position: relative;
    top: 0;
    overflow: auto;
    min-height: 100%;
    width: 75%;
    height: auto;
    font-size: 1.4em;
    -webkit-backface-visibility: hidden;
}

.page-right {
    left: 25%;
    outline: 5px solid #ecf0f1; /* avoid rounding gaps */
    background: #ecf0f1;
    color: #97a8b2;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

.splitlayout.open-right {
    background: #ecf0f1;
}

.page-left {
    left: 0;
    outline: 5px solid #34495e; /* avoid rounding gaps */
    background: #34495e;
    color: #fff;
    text-align: right;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.splitlayout.open-left {
    background: #34495e;
}

/* Inner page content */
.page-inner {
    padding: 2em;
}

.page-inner section {
    padding-bottom: 1em;
}

.page-inner h2 {
    margin: 0 0 1em 0;
    font-weight: 300;
    font-size: 2.4em;
}

.page-inner p {
    font-weight: 300;
    font-size: 1.2em;
}

/* All transitions */
.side,
.page {
    -webkit-transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
}

.overlay {
    -webkit-transition: opacity 0.6s, visibility 0.1s 0.6s;
    transition: opacity 0.6s, visibility 0.1s 0.6s;
}

.intro-content {
    -webkit-transition: -webkit-transform 0.6s, top 0.6s;
    transition: transform 0.6s, top 0.6s;
}

.intro-content h1,
.back {
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

/* Open and close */

/* We need to set the position and overflow for the respective page scroll */
.reset-layout .page,
.splitlayout.open-right .page-left,
.splitlayout.open-left .page-right,
.splitlayout.close-right .page-left,
.splitlayout.close-left .page-right {
    position: absolute;
    overflow: hidden;
    height: 100%;
}

.splitlayout.open-right .page-right,
.splitlayout.open-left .page-left {
    position: relative;
    overflow: auto;
    height: auto;
}

.open-right .side-left .overlay,
.open-left .side-right .overlay {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity 0.6s;
    transition: opacity 0.6s;
}

/* Right side open */
.open-right .side-left {
    -webkit-transform: translateX(-60%);
    transform: translateX(-60%);
}

.open-right .side-right {
    z-index: 200;
    -webkit-transform: translateX(-150%);
    transform: translateX(-150%);
}

.close-right .side-right {
    z-index: 200;
}

.open-right .side-right .intro-content {
    -webkit-transform: translateY(-50%) translateX(0%) scale(0.6);
    transform: translateY(-50%) translateX(0%) scale(0.6);
}

.open-right .page-right {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}

/* Left side open */
.open-left .side-right {
    -webkit-transform: translateX(60%);
    transform: translateX(60%);
}

.open-left .side-left {
    z-index: 200;
    -webkit-transform: translateX(150%);
    transform: translateX(150%);
}

.close-left .side-left {
    z-index: 200;
}

.open-left .side-left .intro-content {
    -webkit-transform: translateY(-50%) translateX(-100%) scale(0.6);
    transform: translateY(-50%) translateX(-100%) scale(0.6);
}

.open-left .codropsheader {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s, visibility 0.1s 0.3s;
    transition: opacity 0.3s, visibility 0.1s 0.3s;
}

.open-left .page-left {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}

/* Media Queries */
@media screen and (max-width: 83em) {
    .intro-content { font-size: 60%; }
}

@media screen and (max-width: 58em) {
    body { font-size: 90%; }
}

@media screen and (max-width: 49.4375em) {
    .open-right .side-right {
        -webkit-transform: translateX(-175%);
        transform: translateX(-175%);
    }

    .open-right .side-left {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    .open-left .side-right {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    .open-left .side-left {
        -webkit-transform: translateX(175%);
        transform: translateX(175%);
    }

    .page {
        width: 100%;
    }

    .page-right {
        left: 0;
        padding-left: 15%;
    }

    .page-left {
        padding-right: 15%;
    }

    .intro-content {
        width: 100%;
    }

    .open-right .side-right .intro-content {
        top: 100%;
        -webkit-transform: translateY(-150px) translateX(-12.5%) scale(0.5);
        transform: translateY(-150px) translateX(-12.5%) scale(0.5);
    }

    .open-left .side-left .intro-content {
        top: 100%;
        -webkit-transform: translateY(-150px) translateX(-87.5%) scale(0.5);
        transform: translateY(-150px) translateX(-87.5%) scale(0.5);
    }

    .open-right .intro-content h1,
    .open-left .intro-content h1 {
        opacity: 0;
    }

    .back-left {
        left: 6.25%;
    }

    .back-right {
        right: 6.25%;
    }
}

@media screen and (max-width: 42.5em) {
    body { font-size: 80%; }
    .intro-content { font-size: 50%; }
}

@media screen and (max-height: 41.125em) {
    .intro-content {
        -webkit-transform: translateY(-25%) translateX(-50%);
        transform: translateY(-25%) translateX(-50%);
    }
}

@media screen and (max-width: 39.375em) {
    .intro-content .profile { -webkit-transform: scale(0.5); transform: scale(0.5); }
}

@media screen and (max-width: 320px) {
    body { font-size: 70%; }
}

When i am trying to add a text after it is not taking full width of the split screen. any help appreciated

web

vendredi 10 février 2017

Not able to widen the margins in CSS, code copied from net and trying to modify it as per requirement

Aucun commentaire:

Enregistrer un commentaire