Page layout Test

Page layout Test

by raregamer

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Home Page</title>
    <link rel="stylesheet" href="css/backgroundgrid.css">
    <script src="js/javascript.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing+Script" type='text/css'>


</head>

<body>

    <header>

        <nav>
            <div id="sideNavBar" class="sidenav">

                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                <a href="index.html">Home</a>
                <a href="resume.html">Resume</a>
                <a href="#">Page 2</a>
                <a href="#">Page 3</a>

            </div>

            <!-- Use any element to open the sidenav -->
            <span style="font-size:35px;cursor:pointer;margin-left:.5em;" onclick="openNav()">&#9776; </span>

            <span id="logo">
                <img src="images/logosamuelsmall.png">
            </span>


        </nav>


    </header>

    <main>
        <div>gfdgdf</div>

        <div>
            <div class="card-container">
                <div class="card">
                    <div class="side">
                        <h3 class="heading-banner head-text">Background</h3>
                    </div>

                    <div class="side back">

                        <ul>
                            <li>I'm an aspiring software engineer who loves creating new software that is playful, interactive
                                and has heart. I've lived in lots of different places and have worked in lots of different
                                jobs. I’m excited to work on teams that support, learn, and build the amazing. </li>
                            <li>I've been working with technology, customer support and sales for 10+ years. </li>
                            <li>I love music, cooking and learning</li>
                        </ul>
                    </div>
                </div>
            </div>
       ...

CSS

body {
    background: tomato;

    /* font-family: Helvetica, Arial, sans-serif;
    line-height: 1.5; */
    font: normal 1em/1.5 Helvetica, Arial, sans-serif;
    margin: 0px auto;
    padding: 0px;
    width:80%
    }

    html{
        background: linear-gradient(to right, palegreen,paleturquoise, plum);

    }


    

    /* nav top bar  */
nav{
    width: 100%;
    overflow: auto;
    background: rgba(255, 255, 255, 0.507);
    display:grid; 
    grid-template-columns: repeat(3, 1fr);
    height: 50px;;
    position: fixed;
    top:0;

    

}

/* logo adjustments */

#logo{
    text-align: center; 

}

 #logo > img{
    
    border-radius: 20%;
    height: 35px;
    margin: .5em;
 }

/* main */
main{
    width: 85%;
    height: 80px;
    margin:.5em  auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 1em;
}

main > div:nth-child(odd){
    background: peachpuff;

}

main > div {
    background: palegreen;
    padding: 1em;
    border-radius: 20px;

}


/* Side navigation menu */

.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;  /* Stay on top */
    left: 0;
    background-color: #111; /*black*/
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    overflow-x: hidden;

}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}