Skip to content
Advertisements

CSS WebSite Design-Canard

HTML CODE:

<!DOCTYPE html>
<html>
<head>
    <title>Canard Homepage</title>
    <meta charset="utf-8">
    <meta name="description" content="web page">
    <meta name="keyword" content="HTML, CSS">
    <meta name="author" content="codeblogger">
    <link rel="stylesheet" type="text/css" href="canard.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
</head>
<body>

    <!--====================  TOP BOX ====================-->
    <div class="top">
        <div class="top-text">
            <ul>
                <li>HTML Elements</li>
                <li>Image Alignment and Styles</li>
                <li>Readability</li>
                <li>About Canard</li>
            </ul>
        </div>
        <div class="social">
            <i class="fab fa-facebook-f"></i>
            <i class="fab fa-twitter"></i>
            <i class="fab fa-instagram"></i>
            <i class="fab fa-linkedin-in"></i>
            <i class="fab fa-google-plus-g"></i>
        </div>
    </div>
    <!--==================== HEADER ====================-->
    <header>
        <div class="web-title">Canard</div>
        <div class="menu">
            <ul>
                <li><a href="#">Architecture</a></li>
                <li><a href="#">Cars</a></li>
                <li><a href="#">Food</a></li>
                <li><a href="#">Technology</a></li>
                <li><a href="#">Web</a></li>
            </ul>
            <div class="search">
                <i class="fas fa-search"></i>
                <div class="search-box">
                    <input type="text" placeholder="search...">
                </div>
            </div>
        </div>
    </header>

    
    <main>
        <!--====================  GALLERY BOX ====================-->
        <div class="gallery-boxes">
            <div class="gal-box-left">
                <div class="gal-box-1">
                    <div class="category">ARCHITECTURE</div>
                    <div class="box-name">New York City</div>
                </div>
                <div class="gal-box-2">
                    <div class="category">TECHNOLOGY</div>
                    <div class="box-name">DJ Tools</div>
                </div>
                <div class="gal-box-3">
                    <div class="category">FOOD</div>
                    <div class="box-name">Homemade Muffins</div>
                </div>
            </div>
            <div class="gal-box-right">
                <div class="gal-box-4">
                    <div class="category">TECHNOLOGY</div>
                    <div class="box-name">Phone test</div>
                </div>
                <div class="gal-box-5">
                    <div class="category">CARS</div>
                    <div class="box-name">Retro cars are back!</div>
                </div>
            </div>
        </div>

        <!--==================== COL-2 BOX ====================-->
        <div class="col-2">
            <div class="left">
                <!-- left-main-box-1 -->
                <div class="left-main-box-1">
                    <p class="main-category">TECHNOLOGY</p>
                    <h2 class="main-title">Wide Angle Lense</h2>
                    <p class="main-text">Few western wonders are more inspiring than the beauties of an Arizona moonlit landscape; the silvered mountains in the distance, the strange lights and shadows upon hog back and arroyo, and the grotesque details of the stiff, yet beautiful cacti form a picture at once enchanting and inspiring; as though one were catching for the first time a glimpse of some dead and forgotten world, … <b>Continue reading</b></p>
                    <div class="avatar"></div>
                    <div class="avatar-text">JOAN SMITH / MARCH 17, 2018</div>
                </div>
                <!-- left-box 1,2,3 -->
                <div class="left-box-1">
                    <div class="left-image-1"></div>
                    <p class="left-category">WEB</p>
                    <h2 class="left-title">The best prototyping apps?</h2>
                    <p class="left-text">
                        Unable longer to resist the temptation to escape this horrible place I leaped quickly through the opening into the starlight of a clear Arizona night. The crisp, fresh mountain air outside the cave acted as an immediate tonic and I felt new life and new courage coursing through me. Pausing upon the brink of the ledge I upbraided myself for what now seemed to me … <b>Continue reading</b>
                    </p>
                    <div class="avatar"></div>
                    <div class="avatar-text">JOAN SMITH / MARCH 27, 2018</div>
                </div>
                <div class="left-box-2">
                    <div class="left-image-2"></div>
                    <p class="left-category">ARCHITECTURE</p>
                    <h2 class="left-title">San Francisco</h2>
                    <p class="left-text">
                        I replied in our good old English tongue merely to convince him that neither of us could understand the other; but I noticed that when I smiled slightly on concluding, he did likewise. This fact, and the similar occurrence during my first talk with Tars Tarkas, convinced me that we had at least something in common; the ability to smile, therefore to laugh; denoting a … <b>Continue reading</b>
                    </p>
                    <div class="avatar"></div>
                    <div class="avatar-text">JOAN SMITH / MARCH 12, 2018</div>
                </div>
                <div class="left-box-3">
                    <div class="left-image-3"></div>
                    <p class="left-category">TECHNOLOGY</p>
                    <h2 class="left-title">Gamepad</h2>
                    <p class="left-text">
                        Late in the afternoon my horse, which had been standing with dragging rein before the cave, started slowly down the trail, evidently in search of food and water, and I was left alone with my mysterious unknown companion and the dead body of my friend, which lay just within my range of vision upon the ledge where I had placed it in the early morning. … <b>Continue reading</b>
                    </p>
                    <div class="avatar"></div>
                    <div class="avatar-text">JOAN SMITH / MARCH 8, 2018 / 2 COMMENTS</div>
                </div>

                <!-- left-main-box-2 -->
                <div class="left-main-box-2">
                    <p class="main-category">FOOD</p>
                    <h2 class="main-title">The perfect cocktail</h2>
                    <p class="main-text">
                        We had gone perhaps ten miles when the ground began to rise very rapidly. We were, as I was later to learn, nearing the edge of one of Mars’ long-dead seas, in the bottom of which my encounter with the Martians had taken place. In a short time we gained the foot of the mountains, and after traversing a narrow gorge came to an open … <b>Continue reading</b>
                    </p>
                    <div class="avatar"></div>
                    <div class="avatar-text">JOAN SMITH / MARCH 17, 2018</div>
                </div>

                <!-- left-box 4 -->
                <div class="left-box-4">
                    <div class="left-image-4"></div>
                    <p class="left-category">WEB</p>
                    <h2 class="left-title">The State of the Word 2014</h2>
                    <p class="left-text">
                        If you just want the bullet points, here are the big things Matt discussed and announced: There will be 81 WordCamps in 2014. This was the 9th and final WordCamp San Francisco in its current form. We’ve maxed out the venue for years, so next year we’ll do a WordCamp US at a location and date to be determined. Milestone: 2014 was the first year non-English … <b>Continue reading</b>
                    </p>
                    <div class="avatar"></div>
                    <div class="avatar-text">JOAN SMITH / MARCH 8, 2018 / 2 COMMENTS</div>
                </div>

            </div>
            <div class="right">
                <ul class="right-menu">
                    <li><a href="">HTML Elements</a></li>
                    <li><a href="">Image Alignment and Styles</a></li>
                    <li><a href="">Readability</a></li>
                    <li><a href="">About Canard</a></li>
                </ul>

                
                <div class="news">
                    <h2>Latest News</h2>
                    <p class="news-title">New York City</p>
                    <p class="news-date">MARCH 25, 2018</p>

                    <p class="news-title">DJ Tools</p>
                    <p class="news-date">MARCH 22, 2018</p>

                    <p class="news-title">Retro cars are back!</p>
                    <p class="news-date">MARCH 19, 2018</p>

                    <p class="news-title">Wide Angle Lense</p>
                    <p class="news-date">MARCH 17, 2018</p>

                    <p class="news-title">The best prototyping apps?</p>
                    <p class="news-date">MARCH 14, 2018</p>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <div class="tags">
            <h2>Tags</h2>
            <p>
                #alcohol #breakfast #california #cms #comparison #computer #dessert #dinner #drinks #economy #electronic #music #featured #headphones #health #holiday #jack #mixer #mobile #nutrition #nyc #photography #recipe #review #software #summer #sunshine #test #trend #tutorial #united #kingdom #video #game #vintage #winter #wordcamp #wordpress
            </p>
        </div>

        <div class="Archives">
            <h2>Archives</h2>
            <p>March 2015</p>
            <p>February 2015</p>
            <p>January 2015</p>
        </div>

        <div class="blog">
            <h2>Follow Blog via Email</h2>
            <p>Click to follow this blog and receive notifications of new posts by email.
            <br><br><br>
            Join 667 other followers</p>
            <input type="button" value="FOLLOW">
        </div>

        <div class="canard">
            <h2>Canard</h2>
            <p>A flexible and versatile theme perfect for magazines, news sites, and blogs.</p>
        </div>
    </footer>

    <div class="bottom">
        <div>powwered by codeblogger</div>
    </div>

</body>
</html>

CSS CODE

body{
    margin: 0;
    padding: 0;
}
/*===================== TOP =====================*/
.top{
    margin-top: -18px;
    padding: 0;
    width: 100%;
    height: 40px;
    background: #262626;
}
.top-text{
    line-height: 40px;
    margin-left: 8%;
}
.top-text ul li{
    float: left;
    display: block;
    color: #ccc;
    font-family:serif;
    font-weight: bold;
    font-size: 15px;
    padding-left: 15px;
    padding-right: 15px;
    border-left: 1px solid rgba(255,255,255,.5);
    cursor: pointer;
    transition: .5s;
}
.top-text ul li:hover{
    color: #fff;
}
.social{
    display: block;
    float: right;
    color: #ccc;
    font-size:18px;
    line-height: 40px;
    margin-right:15%;
}
.social .fab{
    padding-left: 13px;
    cursor: pointer;
    transition: .5s;
}
.social .fab:hover{
    transform: scale(1.2);
    color: #fff;
}

/*===================== HEADER =====================*/
header{
    width: 100;
}
.web-title{
    padding-top: 40px;
    padding-bottom: 40px;
    width: 300px;
    margin: 0 auto;
    text-align: center;
    color: #990000;
    font-weight: bold;
    font-size: 56px;
    cursor: pointer;
    transition: .5s;
}
.web-title:hover{
    color: #262626;
}
.menu{
    line-height: 60px;
    width: 100%;
    height: 60px;
    border-top: 1px solid rgba(0,0,0,.2);
    border-bottom: 1px solid rgba(0,0,0,.2);
    box-sizing: border-box;
    display:inline-block;
    margin-bottom: 30px;
}
.menu ul{
    width: 500px;
    margin: 0 auto;
    display: block;
}
.menu li{
    float: left;
    list-style: none;
    padding-left: 15px;
    padding-right: 15px;
    transition: .5s;
}
.menu a{
    text-decoration: none;
    color: #404040;
    font-weight: bold;
    font-size: 19px;
    outline: none;
    transition: .5s;
}
.menu li:hover{
    transform: scale(1.2);
}
.menu a:hover{
    color: #990000;
    padding-top: 14px;
    padding-bottom: 13px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}
.search{
    position: relative;
    transition: .5s;
}
.search .fas{
    margin-top: 15px;
    margin-left: 20px;
    padding: 9px;
    float: left;
    font-size: 16px;
    box-shadow: 0px 0px 10px rgba(0,0,0,.5);
    border-radius: 50%;
    text-align: center;
    transition: .5s;
}
.search-box{
    display: none;
    position: absolute;
    top:10px;
    left:5%;
    width:90%;
    height:40px;
    background: #990000;
    transition: .5s;
}
.search-box input{
    width:90%;
    height: 25px;
    font-size: 17px;
    color: #333;
    margin-bottom: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    outline: none;
    border: none;
    background:#fff;
    padding-left: 10px;
    transition: .5s;
}
.search:hover > .search-box{
    display: block;
}

/*===================== MAIN =====================*/
main{
    margin:0 auto;
    padding:0;
    width:80%;
}
.gallery-boxes{
    border-bottom: 1px solid rgba(0,0,0,.3);
    cursor: pointer;
    display: grid;
    grid-gap: 25px;
    width: 100%;
    height: 820px;
    grid-template-columns: 2fr 1fr;
    grid-template-areas: 
        "gal-box-left gal-box-right"
}
.gal-box-1{
    position: relative;
    box-shadow: inset 1000px 1000px 200px rgba(0,0,0,.2);
    width: 100%;
    height: 500px;
    background: url(https://canarddemo.files.wordpress.com/2015/03/photo-1424296308064-1eead03d1ad9.jpeg?w=1920&h=768&crop=1);
    background-position: center;
    background-size: cover;
    margin-bottom: 25px;
    transition: .5s;
    overflow: hidden;
}
.gal-box-2{
    position: relative;
    box-shadow: inset 1000px 1000px 200px rgba(0,0,0,.2);
    width: 48%;
    height: 250px;
    background: url(https://canarddemo.files.wordpress.com/2015/03/photo-1426869884541-df7117556757.jpeg?w=1920&h=768&crop=1);
    background-position: bottom bottom;
    background-size: cover;
    float: left;
    margin-right:30px;
    transition: .5s;
    overflow: hidden;
}
.gal-box-3{
    position: relative;
    box-shadow: inset 1000px 1000px 200px rgba(0,0,0,.2);
    width: 48%;
    height: 250px;
    background: url(https://canarddemo.files.wordpress.com/2015/03/photo-1425315283416-2acc50323ee6.jpeg?w=1920&h=768&crop=1);
    background-position: center;
    background-size: cover;
    float: left;
    transition: .5s;
    overflow: hidden;
}
.gal-box-4{
    position: relative;
    box-shadow: inset 1000px 1000px 200px rgba(0,0,0,.2);
    width: 100%;
    height: 372px;
    background: url(https://canarddemo.files.wordpress.com/2015/03/6icr9farmmtjthqtzk8z_dsc_0123.jpg?w=1920&h=768&crop=1);
    background-position: center;
    background-size: cover;
    float: left;
    margin-bottom: 30px;
    transition: .5s;
    overflow: hidden;
}
.gal-box-5{
    position: relative;
    box-shadow: inset 1000px 1000px 200px rgba(0,0,0,.2);
    width: 100%;
    height: 372px;
    background: url(https://canarddemo.files.wordpress.com/2015/03/photo-1421473634087-a7e9e8e6c5bb.jpeg?w=1920&h=768&crop=1);
    background-position: center;
    background-size: cover;
    float: left;
    transition: .5s;
    overflow: hidden;
}
.category{
    height: 100%;
    color: #fff;
    font-family: verdana;
    font-weight: bold;
    font-size: 15px;
    text-shadow: 0px 0px 5px rgba(0,0,0,.6);
    position: absolute;
    top: 70%;
    left: 20px;
    transition: .5s;
}
.box-name{
    height: 100%;
    text-shadow: 0px 0px 5px rgba(0,0,0,.6);
    color: #fff;
    font-size: 30px;
    font-family: serif;
    font-weight: bold;
    position: absolute;
    top: 78%;
    left: 20px;
}
.gal-box-1:hover,.gal-box-2:hover,.gal-box-3:hover,.gal-box-4:hover,.gal-box-5:hover{
    box-shadow: inset 1000px 1000px 200px rgba(255,255,255,.2);
}

/*=============================================================*/
.col-2{
    margin-top: 40px;
    display: grid;
    grid-gap: 40px;
    grid-template-columns: 3fr 1fr;
    grid-template-areas: 
        "left right"
}
.left-main-box-1{
    width:95%;
    height: 300px;
    background: url(https://canarddemo.files.wordpress.com/2015/03/photo-1415845607032-3b6061235765.jpeg?w=1920&h=768&crop=1);
    background-size: cover;
    padding-left: 30px;
    padding-top: 30px;
    margin-right: 30px;
    cursor: pointer;
}
.main-category{
    color: #fff;
    font-size: 15px;
    font-family: arial;
    font-weight: bold;
}
.main-title{
    font-size:34px;
    color: #fff;
}
.main-text{
    color: #fff;
    font-family: sans-serif;
}
.left-title{
    color: #262626;
}
.left{
    padding-right: 20px;
    border-right: 1px solid rgba(0,0,0,.3);
}
.avatar{
    width: 30px;
    height: 30px;
    background: url(https://1.gravatar.com/avatar/4fdb3b572ac7dd8d7a58ba70317efa14?s=30&d=identicon&r=G);
    float: left;
    border-radius: 50%;
    position: relative;
}
.avatar-text{
    color: #262626;
    line-height:35px;
    display: flex;
    padding-left: 10px;
    text-shadow: 0px 0px 5px #fff;
}
.left-box-1{
    box-shadow: 0px 0px 20px rgba(0,0,0,.3);    
    width: 95%;
    height:250px;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 50px;
    transition: .5s;
    cursor: pointer;
}
.left-box-1:hover{
    transform: scale(1.05);
    box-shadow: 0px 0px 500px #000;
}
.left-image-1{
    width: 250px;
    height: 250px;
    margin-right: 20px;
    background: url(https://canarddemo.files.wordpress.com/2015/03/photo-1429051781835-9f2c0a9df6e4.jpeg?w=1024&h=910&crop=1);
    background-position: center;
    background-size: cover;
    float: left;
    transition: .5s;
}
.left-box-1:hover > .left-image-1{
    transform: translate(-16px,-26px);
    width: 280px;
    height: 300px;
}
.left-box-2{
    box-shadow: 0px 0px 20px rgba(0,0,0,.3);    
    width: 95%;
    height:250px;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 50px;
    transition: .5s;
    cursor: pointer;
}
.left-box-2:hover{
    transform: scale(1.05);
    box-shadow: 0px 0px 500px #000;
}
.left-image-2{
    width: 250px;
    height: 250px;
    margin-right: 20px;
    background: url(https://canarddemo.files.wordpress.com/2015/03/photo-1419407118704-43ccfda4036d.jpeg?w=1024&h=910&crop=1);
    background-position: center;
    background-size: cover;
    float: left;
    transition: .5s;
}
.left-box-2:hover > .left-image-2{
    transform: translate(-16px,-26px);
    width: 280px;
    height: 300px;
}
.left-box-3{
    box-shadow: 0px 0px 20px rgba(0,0,0,.3);    
    width: 95%;
    height:250px;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 50px;
    transition: .5s;
    cursor: pointer;
}
.left-box-3:hover{
    transform: scale(1.05);
    box-shadow: 0px 0px 500px #000;
}
.left-image-3{
    width: 250px;
    height: 250px;
    margin-right: 20px;
    background: url(https://canarddemo.files.wordpress.com/2015/03/wii.jpg?w=1024&h=910&crop=1);
    background-position: center;
    background-size: cover;
    float: left;
    transition: .5s;
}
.left-box-3:hover > .left-image-3{
    transform: translate(-16px,-26px);
    width: 280px;
    height: 300px;
}
.left-main-box-2{
    margin-top: 50px;
    width:95%;
    height: 300px;
    background: url(https://canarddemo.files.wordpress.com/2015/03/photo-1414450397866-85f90db48714.jpeg?w=1920&h=768&crop=1);
    background-size: cover;
    padding-left: 30px;
    padding-top: 30px;
    margin-right: 30px;
    cursor: pointer;
}
.left-box-4{
    box-shadow: 0px 0px 20px rgba(0,0,0,.3);    
    width: 95%;
    height:250px;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 50px;
    transition: .5s;
    cursor: pointer;
}
.left-box-4:hover{
    transform: scale(1.05);
    box-shadow: 0px 0px 500px #000;
}
.left-image-4{
    width: 250px;
    height: 250px;
    margin-right: 20px;
    background: url(https://canarddemo.files.wordpress.com/2015/03/state-of-the-word-2014.jpg?w=1024&h=910&crop=1);
    background-position: center;
    background-size: cover;
    float: left;
    transition: .5s;
}
.left-box-4:hover > .left-image-4{
    transform: translate(-16px,-26px);
    width: 280px;
    height: 300px;
}
/*===========================  RIGHT MENU ==================================*/
.right{
    width: 100%;
}
.right-menu{
    list-style: none;
    margin-left: -40px;
}
.right-menu li{
    padding-bottom: 10px;
    padding-top: 10px;
    border-bottom: 1px solid rgba(0,0,0,.5);
    width: 100%;
    transition: .5s;
}
.right-menu a{
    text-decoration: none;
    color: #990000;
    font-weight: bold;
    font-size: 18px;
}
.right-menu li:hover {
    transform: scale(1.05);
}
.news h2{
    margin-top: 100px;
    font-size: 30px;
    color: #333;
    cursor: pointer;
}
.news-title{
    color: #900;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 0;
    cursor: pointer;
}
.news-date{
    margin-top: 0;
    color: #262626;
    font-size: 16px;
    cursor: pointer;
}

/*=========================== FOOTER ==================================*/

footer{
    border-top: 1px solid rgba(0,0,0,.5);
    padding-top: 20px;
    width: 70%;
    margin:50px auto;
    display: grid;
    grid-gap:80px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
footer h2{
    color: #262626;
    font-size: 26px;
    transition: .5s;
    cursor: pointer;
    margin-bottom:30px;
}
footer h2:hover{
    letter-spacing: 3px;
}
footer p{
    color: #900;
    font-size: 18px;
    cursor: pointer;
}
.Archives p{
    padding-bottom: 10px;
    padding-top: 0;
    border-bottom: 1px solid rgba(0,0,0,.3);
}
.blog p{
    color: #333;
}
.blog input{
    background: #900;
    color: #fff;
    font-family: verdana;
    outline: none;
    padding: 10px;
    font-size:18px;
    border: none;
    transition: .5s;
}
.blog input:hover{
    background: #333;
}
.canard p{
    color: #333;
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: