Skip to content
Advertisements

CSS Web Design Codes


HTML CODE:

<!DOCTYPE html>
<html>
<head>
    <title>page</title>
    <link rel="stylesheet" type="text/css" href="web6.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
</head>
<body>

    <!-- TOP -->
    <div class="top">
        <i class="fas fa-map-marker-alt"></i>
        <a>66 Nicholson St Buffalo New York Us</a>
    </div>
    <div class="mainpage">
        <img src="https://cdn.pixabay.com/photo/2017/01/28/13/23/color-circle-articles-2015356_960_720.png">
        <a class="title">H&K</a>
        <p class="phone">
        <i class="fas fa-phone"></i>
        </p>
        <a class="phonetext">Call Us Now</a>
        <div class="skype">
        <i class="fab fa-skype">1-888-345-6789</i>
        </div>
        <div class="clock">
        <i class="far fa-clock"></i>
        </div>
        <a class="time1">Opening times</a>
        <a class="time2">Mon-Sat:7.00 - 18.00</a>
        <a class="button">Request a quote</a>
    </div>

    <!-- MAIN -->
    <main class="main">
        <div class="image">
            <!-- HEADER -->
        <header class="head">
        <div class="home">
            <i class="fas fa-home"></i>
        </div>
        <!-- Menu -->
        <div class="menu">
            <ul>
                <li><a href="#">Services</a>
                    <ul>
                        <li><a href="#">Section-1</a></li>
                        <li><a href="#">Section-2</a></li>
                        <li><a href="#">Section-3</a></li>
                    </ul></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Projects</a>
                    <ul>
                        <li><a href="#">Section-1</a></li>
                        <li><a href="#">Section-2</a></li>
                        <li><a href="#">Section-3</a></li>
                    </ul>
                </li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Extra</a></li>
            </ul>
        </div>
        <div class="social">
            <i class="fab fa-facebook"></i>
            <i class="fab fa-twitter-square"></i>
            <i class="fab fa-linkedin"></i>
            <i class="fab fa-twitter-square"></i>
        </div>
        <div class="shopping">
            <i class="fas fa-shopping-cart"></i>
        </div>
        <div class="search">
            <i class="fas fa-search"></i>
        </div>
        </header>
            <p class="maintitle1">Decoration & Furniture</p>
            <p class="maintitle2">Living Room</p>
            <p class="maintitle3">We offer home in a variety of styles
            for every room in<br> your house home decorators collection.</p>
            <label>
            <p class="mainbutton1">Read More</p>
            <p class="mainbutton2">Our Services</p>
            </label>
        </div>
        <div class="cardbox">
            <div class="box">
                <h3 class="maintitle">We are Specialized</h3>
                <p>HnK a solid reputation for
                delivering exceptional
                architectural and interior
                design services to private
                sector and industrial clients.</p>
                <div class="btn">View all Services</div>
            </div>
            <div class="card1">
                <img src="https://wpblink.com/sites/default/files/wallpaper/man-made/70419/furniture-wallpapers-hd-70419-3358902.png">
                <h6 class="maintitle">Architectural Planning</h6>
                <p class="title">Architecture is our passion, turning idead
                into reality and giving buildings a timeless
                footprint in a community are the values
                HnK was built on.</p>
            </div>
            <div class="card2">
                <img src="https://avatars.mds.yandex.net/get-pdb/163339/96928bbe-45dc-4878-9788-7af71c79bd5a/orig">
                <h6 class="maintitle">Decoration & Furniture</h6>
                <p class="title">Architecture is our passion, turning idead
                into reality and giving buildings a timeless
                footprint in a community are the values
                HnK was built on.</p>
            </div>
            <div class="card3">
                <img src="https://wallpaperscraft.com/image/living_graphics_design_balcony_lighting_furniture_80096_3840x2400.jpg">
                <h6 class="maintitle">Landscape Design</h6>
                <p class="title">Architecture is our passion, turning idead
                into reality and giving buildings a timeless
                footprint in a community are the values
                HnK was built on.</p>
            </div>
        </div>
    </main>

</body>
</html>

CSS CODE:

body{
    background: #d9d9d9;
    padding:0;
    margin: 0;
    padding-bottom: 40px;
}


/*----------------------------- TOP -----------------------------*/
.top{
    width: 100%;
    height: 25px;
    background:#007a99;
    margin: 0;
}
.top i{
    color:#fff;
    padding-left: 6%;
    padding-top: 4px;
    text-shadow: 1px 1px 1px #000;
}
.top a{
    margin-left: 50px;
    color:#fff;
    padding-top: 3px;
    font-family: sans-serif;
    font-size: 14px;
    text-shadow: 1px 1px 1px #000;
}

/*----------------------------- MAINPAGE -----------------------------*/
.mainpage{
    width: 84%;
    height: 80px;
    background-color: #fff;
    padding-left: 8%;
    padding-right: 8%;
    display: grid;
    grid-template-columns:4fr 2fr 3fr 5fr;
    grid-template-rows: 80px;
    grid-template-areas: 
        "area1 area2 area3 area4"
}
.mainpage img{
    grid-area: area1;
    margin-top: 15px;
    width: 50px;
    height: 50px;
}
.mainpage .title{
    padding-left: 55px;
    grid-area: area1;
    margin-top: 15px;
    font-family: verdana;
    font-weight: bold;
    font-size: 36px;
}
.mainpage .phone{
    grid-area: area2;
    margin-top: 25px;
    align-content: center;
    font-size: 30px;
    color: #007a99;
}
.mainpage .phonetext{
    grid-area: area2;
    padding-top: 23px;
    padding-left: 40px;
    font-size: 16px;
    color: rgba(0,0,0,.6);
    font-family: arial;
}
.mainpage .skype{
    grid-area: area2;
    padding-top: 40px;
    padding-left: 40px;
    font-size: 16px;
    color: #007a99;
    font-family: arial; 
}
.mainpage .clock{
    grid-area: area3;
    padding-top: 23px;
    padding-left: 0px;
    font-size: 38px;
    color: #007a99;
    padding-right: 15%;
}
.mainpage .time1{
    grid-area: area3;
    padding-top: 25px;
    padding-left: 44px;
    font-size: 16px;
    color: rgba(0,0,0,.6);
    font-family: arial;
}
.mainpage .time2{
    grid-area: area3;
    padding-top: 45px;
    padding-left:44px;
    font-size: 15px;
    color:#007a99;
    font-family: arial;
}
.mainpage .button{
    grid-area: area4;
    margin-right: 0px;
    margin-top: 15px;
    width: 120px;
    height: 20px;
    padding: 15px;
    color:#fff;
    font-size: 16px;
    font-family: sans-serif;
    display: flex;
    text-align: center;
    justify-content: center;
    background:#007a99; 
    border-radius: 1px;
}

/*----------------------------- HEADER -----------------------------*/
.head{
    background: linear-gradient(rgba(0,0,0,.9),rgba(0,0,0,.2));
    padding-left: 7%;
    padding-right: 5%;
    display: grid;
    border-bottom: 1px solid #b3b3b3;
    grid-template-columns:1fr 6fr 3fr 2fr 2fr;
    height: 50px;
    grid-template-areas: 
        "home menu social shopping search"
}

/* Home */
.image .home{
    position: relative;
    z-index: 1;
    padding-top: 5%;
    grid-area: home;
    color: #007a99;
    font-size: 35px;
}

/* Menu */
.image .menu{
    grid-area:menu;
}
.image .menu ul{
    display: flex;
}
.image .menu ul li{
    list-style: none;
}
.image .menu ul li a{
    position: relative;
    z-index: 1;
    display: block;
    text-decoration: none;
    padding-right:50%; 
    color: #fff;
    font-family: arial;
    font-size: 16px;
}
.image .menu ul li ul li a{
    display: none;
}
.image .menu ul li ul{
    display: inline-block;
    margin-left: -33%;
    margin-top: 10%;
}
.image .menu ul li ul li{
    display: block;
}
.image .menu ul li:hover ul li a{
    display:block;
}
.image .social{
    grid-area:social;
    font-size: 35px;
    color: rgb(230, 230, 230,.9);
    padding-top: 2%;
    padding-left: 20%;
    cursor: pointer;
}
.image .shopping{
    grid-area:shopping;
    font-size: 25px;
    color: #007a99;
    padding-top: 6%;
    padding-left: 50%;

}
.image .search{
    grid-area:search;
    font-size: 25px;
    color: #007a99;
    padding-top: 6%;
    padding-left: 0;
    cursor: pointer;
}
/*----------------------------- MAİN-İMAGE-------------------------------*/
.image{
    /*url:http://cdn.home-designing.com/wp-content/uploads/2016/01/artistic-black-living-room-ideas.jpg*/
    background: url(http://cdn.home-designing.com/wp-content/uploads/2016/01/artistic-black-living-room-ideas.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    height: 600px;
    cursor: pointer;
}

.image .maintitle1{
    padding-top: 7%;
    padding-left: 7%;
    padding-bottom: 0;
    margin-bottom: 0;
    font-family: sans;
    font-size: 40px;
    color: #007a99;
    text-shadow: 1px 1px 3px #000,-1px -1px 3px #000;
    cursor: pointer;
}
.image .maintitle2{
    padding-top: 0;
    margin-top: 0;
    padding-left: 7%;
    font-family:sans;
    font-size: 36px;
    color: #fff;
    text-shadow: 1px 1px 3px #000,-1px -1px 3px #000;
    cursor: pointer;
}
.image .maintitle3{
    padding-top: 0;
    margin-top: 0;
    padding-left: 7%;
    font-family:verdana;
    font-size: 15px;
    color: #fff;
    text-shadow: 1px 1px 10px #000,-1px -1px 10px #000;
    cursor: pointer;
}
.image .mainbutton1{
    padding: 1%;
    margin-top: 0;
    margin-left: 7%;
    font-family:verdana;
    font-size: 15px;
    color: #fff;
    display: block;
    background:#007a99;
    width:80px;
    border-radius: 4px;
    cursor: pointer;
}
.image .mainbutton2{
    margin-left: 7.5%;
    padding-bottom: 3px;
    font-family:verdana;
    font-size: 15px;
    color: #fff;
    text-shadow: 1px 1px 10px #000,-1px -1px 10px #000;
    border-bottom: 2px solid #007a99;
    width: 100px;
    cursor: pointer;
}

/*----------------------------- CARDBOX -------------------------------*/
.cardbox{
    padding-top: 30px;
    padding-left: 80px;
    padding-right: 80px;
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 
        "box card1 card2 card3"
}
.cardbox .box{
    grid-area: box;
    cursor: pointer;
}
.cardbox .card1{
    grid-area: .card1;
    background:#fff;
    box-shadow: 5px 5px 15px #000;
    cursor: pointer;
}
.cardbox .card1 h6{
    color:#262626;
    font-family: sans-serif;
    font-size: 20px;
    padding:5px 0 0 10px;
    margin: 0;
}
.cardbox .card2{
    grid-area: .card2;
    background:#fff;
    box-shadow: 5px 5px 15px #000;
    cursor: pointer;
}
.cardbox .card2 h6{
    color:#262626;
    font-family: sans-serif;
    font-size: 20px;
    padding:5px 0 0 10px;
    margin: 0;
}
.cardbox .card3{
    grid-area: .card3;
    background:#fff;
    box-shadow: 5px 5px 15px #000;
    cursor: pointer;
}
.cardbox .card3 h6{
    color:#262626;
    font-family: sans-serif;
    font-size: 20px;
    padding:5px 0 0 10px;
    margin: 0;
}
.cardbox img{
    width: 100%;
    height: 200px;
    cursor: pointer;
}
.box{
    width: 90%;
    padding: 0 10px 10px 10px;
}
.box h3{
    color: #262626;
    font-family: arial;
    font-size: 35px;
    border:3px solid #262626;
    padding: 5px;
    text-align: center;
    cursor: pointer;
}
.box p{
    font-family: arial;
    font-size: 16px;
    color: #262626;
    text-align: center;
    cursor: pointer;
}
.title{
    padding: 0 10px 10px 10px;
}
.box .btn{
    margin: 0 20px 0 20px;
    text-align: center;
    padding: 10px 0 10px 0;
    background:#007a99;
    color: #fff;
    font-family: verdana;
    cursor: pointer;
}

/*----------------------------- MEDİA -------------------------------*/

@media(min-width:400px) and (max-width:1200px){
.mainpage{
        width:90%;
        height: 65px;
        background-color: #fff;
        padding-left: 2%;
        display: grid;
        grid-template-columns:2fr 2fr 2fr 2fr;
        grid-template-rows: 80px;
        grid-template-areas: 
            "area1 area2 area3 area4"
}
    .mainpage img{
    margin-top: 12px;
    width: 40px;
    height: 40px;
}
.mainpage .title{
    margin-top: 12px;
    font-size: 30px;
}
.mainpage .phone{
    margin-top: 14px;
    font-size: 30px;
}
.mainpage .phonetext{
    padding-top: 14px;
    padding-left: 40px;
    font-size: 16px;
}
.mainpage .skype{
    padding-top: 32px;
    font-size: 16px;
}
.mainpage .clock{
    padding-top: 10px;
    font-size: 38px;
}
.mainpage .time1{
    padding-top: 15px;
    font-size: 14px;
}
.mainpage .time2{
    padding-top: 33px;
    font-size: 13px;
}
.mainpage .button{
    margin-top: 8px;
}
.image{
    /*url:http://cdn.home-designing.com/wp-content/uploads/2016/01/artistic-black-living-room-ideas.jpg*/
    background: url(mainimage.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    height: 500px;
    cursor: pointer;
}
.image .menu ul li a{
    position: relative;
    z-index: 1;
    display: block;
    text-decoration: none;
    padding-right:50%; 
    color: #fff;
    font-family: arial;
    font-size: 13px;
}
.head{

    grid-template-areas: 
        "home menu shopping search"
        ". . . social"
}
.head .shopping{
    font-size: 25px;
    padding-top: 12px;
}
.head .search{
    font-size: 25px;
    padding-left: 20px;
    padding-top: 12px;
}
.head .social{
    padding-left: 20px;
}
.cardbox{
    padding-top: 30px;
    padding-left: 80px;
    padding-right: 80px;
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
        "box card1"
        "card2 card3"
}
}
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: