Skip to content
Advertisements

CSS Web Design Codes


HTML CODE:

<!DOCTYPE html>
<html>
<head>
    <title>page</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="1.page.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
    <script type="text/javascript">
    function openSlideMenu(){
        document.getElementById("menu").style.width = "200px";
        document.getElementById("content").style.marginLeft = "200px";
    }
    function closeSlideMenu(){
        document.getElementById("menu").style.width = "0px";
        document.getElementById("content").style.marginLeft = "0px";
    }
</script>
</head>
<body>
    
    <div class="webpage">
        <!----------------------- top container -------------------->
        <nav class="top">
            <div id="content">
                <span class="slide">
                    <a href="#" onclick="openSlideMenu()">
                        <i class="fas fa-bars"></i>
                    </a>
                </span>
                <div class="nav" id="menu">
                    <a href="#" class="close" onclick="closeSlideMenu()">
                        <i class="fas fa-times"></i></a>
                    <a href="#">Home</a>
                    <a href="#">About</a>
                    <a href="#">Services</a>
                    <a href="#">Portfolio</a>
                    <a href="#">Contact</a>
                </div>
            </div>
            <div class="name">DIGEST</div>
            <div class="search">
                    <i class="fas fa-search"></i>
                <input type="text" name="" class="inp" placeholder="Search">
            </div>
        </nav>

        <!------------------------- header ------------------------>
        <section class="container">
            <header class="boxes">
                <div class="box1">  
                    <div class="slider">
                        <input type="radio" id="i1" name="images" checked />
                        <input type="radio" id="i2" name="images" />
                        <input type="radio" id="i3" name="images" />
                        <input type="radio" id="i4" name="images" />        
                        <div class="slide_img" id="one">                        
                                <img src="https://images.pexels.com/photos/1204649/pexels-photo-1204649.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">         
                                    <label class="prev" for="i4"><span>‹</span></label>
                                    <label class="next" for="i2"><span>›</span></label>          
                        </div>  
                        <div class="slide_img" id="two">        
                                <img src="https://images.pexels.com/photos/1170412/pexels-photo-1170412.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" >            
                                    <label class="prev" for="i1"><span>‹</span></label>
                                    <label class="next" for="i3"><span>›</span></label>      
                        </div>          
                        <div class="slide_img" id="three">
                                <img src="https://images.pexels.com/photos/1080865/pexels-photo-1080865.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">             
                                    <label class="prev" for="i2"><span>‹</span></label>
                                    <label class="next" for="i4"><span>›</span></label>
                        </div>
                        <div class="slide_img" id="four">
                                <img src="https://images.pexels.com/photos/990817/pexels-photo-990817.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">               
                                    <label class="prev" for="i3"><span>‹</span></label>
                                    <label class="next" for="i1"><span>›</span></label>
                        </div>
                        <div id="nav_slide">
                            <label for="i1" class="dots" id="dot1"></label>
                            <label for="i2" class="dots" id="dot2"></label>
                            <label for="i3" class="dots" id="dot3"></label>
                            <label for="i4" class="dots" id="dot4"></label>
                        </div>      
                            <h2>Anders Lindn</h2>
                            <p>future</p>
                            <i class="fas fa-heart"></i>
                    </div>
                            
                </div>

                <div class="box2">
                    <p class="text1">Sorry I have been<br>out of touch this<br>week.There was a<br>snowstorm and I<br>have been<br>watching movies.</p>
                    <p class="text2">Leonardo da Vinci</p>
                </div>
                <div class="box3">
                    <p class="text1">Sarah Allen 14/15</p>
                    <p class="text2">STYLE</p>
                    <i class="fas fa-heart">355</i>
                    <p class="text3">READ POST > </p>
                </div>
                <div class="box4">
                    <p class="text1">Airfield</p>
                    <p class="text2">PHOTOGRAPHY</p>
                    <i class="fas fa-heart">478</i>
                    <p class="text3">READ POST > </p>
                </div>
                <div class="box5">
                    <p class="text1">Lapka Bam</p>
                    <p class="text2">GEAR</p>
                    <i class="fas fa-heart">877</i>
                    <p class="text3">READ POST > </p>
                </div>
                <div class="box6">
                    <p class="text1">Ziliro Orbit</p>
                    <p class="text2">Clock</p>
                    <i class="fas fa-heart">947</i>
                    <p class="text3">READ POST > </p>
                </div>
                <div class="box7">
                    <p class="text1">FEATURED</p>
                    <p class="text2">Are Self Driving<br>Cars The Future?</p>
                    <p class="text3">READ POST > </p>
                </div>
                <div class="box8">
                    <p class="text1">Smieg</p>
                    <p class="text2">TECHNOLOGY</p>
                    <i class="fas fa-heart">872</i>
                    <p class="text3">READ POST > </p>
                </div>
                <div class="box9">
                    <p class="text1">Balloon Bench</p>
                    <p class="text2">Design</p>
                    <i class="fas fa-heart">142</i>
                    <p class="text3">READ POST > </p>
                </div>
            </header>
        </section>

    </div>

</body>
</html>

CSS CODE:

body{
    padding: 0;
    margin: 0;
    background: url(http://autobedrijfschrama.nl/wp-content/uploads/2017/04/dark.jpg);
    background-size: cover;
}
.webpage{
    min-width: 500px;
    max-width: 800px;
    margin:1% auto 2% auto;
}

/*---------------------------------- TOP-CONTAINER ----------------------------------*/
.top{
    position: relative;
    display: grid;
    height: 80px;
    width: 100%;
    grid-template-columns: 1fr 10fr 1fr;
    grid-template-areas: 
        "menu name search"
}
/*----------- MENU -----------*/
.nav{
    height:300px;
    width: 0;
    position:absolute;
    z-index: 100;
    top: 0;
    left:0%;
    background-color: #111;
    opacity: .92;
    overflow-x: hidden;
    padding-top: 60px;
    transition: .6s; 
}
.nav a{
    display: block; 
    padding: 15px 20px;
    font-size: 20px;
    text-decoration: none;
    color: #ccc;
    font-family: sans-serif;
}
.nav a:hover{
    color: #fff;
    transition: .4s;
}
.nav .close{
    position: absolute;
    top: 0;
    right: 22px;
    margin-left: 50px;
    font-size: 30px;
    color: #fff;
}
.slide a{
    color: #fff;
    font-size: 36px;
}
#content{
    padding: 20px;
    transition: margin-left 0.6s;
    overflow: hidden;
}


/*----------- NAME -----------*/
.name{
    grid-area: name;
    color:#fff;
    font-family: arial;
    text-align: center;
    font-size: 33px;
    margin: auto 0 auto 0;
    letter-spacing: 5px;
    cursor: pointer;
    font-weight: bold;
}
/*----------- SEARCH -----------*/  
.search{
    grid-area: search;
    color: #fff;
    font-size: 24px;
    margin: auto 0 auto 0;
    cursor: pointer;
}
.inp{
    opacity: 0;
    transform: scaleX(0);
    position: absolute;
    top: 27%;   
    right: 0;
    width: 250px;
    height:27px;
    color: #000;
    font-size: 15px;
    font-family: sans-serif;
    background-color:#cccccc;
    outline: none;
    border:none;
    box-shadow: 5px 5px 10px #000;
    border-radius: 50px;
    transition: .6s;
    text-indent: 10px;
}
.search:hover > .inp{
    opacity: 1;
    transform: scaleX(1);
}

/*---------------------------------- CONTAINER ----------------------------------*/
.boxes{
    display: grid;
    height: 100%;
    grid-template-rows: 3fr 2fr 2fr 2fr 2fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
    grid-template-areas: 
        "box1 box1 box1"
        "box2 box3 box3"
        "box4 box4 box5"
        "box6 box7 box5"
        "box8 box9 box9"
}
/*---------------------------------- BOX-1 ----------------------------------*/
.box1{
    grid-area: box1;
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    transform: scale(1);
    transition: .5s;
}
.box1:hover{
    transform: scale(1.05);
}
.box1 .slider h2{
    position: relative;
    z-index: 98;
    margin: 0;
    font-family: arial;
    font-weight: bold;
    width: 50%;
    padding-top: 4%;
    padding-left: 6%;
    font-size: 32px;
    color: white;
    text-shadow: 1px 1px 3px #000;
    transition: .5s;
    transform: scale(1.1);
}
.box1 .slider h2:hover{
    color: #1a1a1a;
    text-shadow: 1px 1px 1px #fff;
    transform: scale(1.15) translateX(10px);
}
.box1 .slider p{
    position: relative;
    z-index: 99;
    font-family: arial;
    font-weight: bold;
    color: #fff;
    width: 50%;
    padding-top: 0%;
    padding-left: 6.1%;
    margin: 0;
    font-size:12px;
    transition: .5s;
    transform: scale(1.1);
    text-shadow: 1px 1px 3px #000;
}
.box1 .slider p:hover{
    color: grey;
    text-shadow: 1px 1px 1px #fff;
    transform: scale(1.15) translateX(10px);
}
.box1 .slider .fas{
    position: relative;
    z-index: 99;
    margin-top: 30%;
    font-size: 22px;
    color: #fff;
    margin-left: 5%;
    transition: .5s;
    transform: scale(1);
}
.box1 .slider .fas:hover{
    color: #f00;
    text-shadow: 0px 0px 5px #f00;
    transform: scale(1.2);
}
@import url('https://fonts.googleapis.com/css?family=Just+Another+Hand');
body, html{
    width: 100%;
    height: 100%;   
    margin: 0;
    font-family: 'Just Another Hand', cursive;
    overflow-X: hidden;
}
#i1, #i2, #i3, #i4{
    display: none;
}
.slider{
    margin:0;
    position: relative;
    width: 100%;
    height: 100%;
    user-select: none;
    background:#262626;
}
.slider .slide_img{
    position: absolute;
    width: 100%;
    height: 100%;
}
.slider .slide_img img{
    width: inherit;
    height: inherit;
}
.prev, .next{
    width: 12%;
    height: inherit;
    position: absolute;
    top:0; 
    background-color: rgba(88, 88, 88,.1);
    color:rgba(244, 244, 244,.9);
    z-index: 89;
    transition: .45s;
    cursor: pointer;
    text-align: center;
}
.next{
    right: 0;
}
.prev{
    left: 0;        
}
label span{
    position: absolute;
    font-size: 50pt;
    top: 50%;
    transform: translateY(-50%);
}
.prev:hover, .next:hover{
    transition: .3s;
    background: rgba(88,88,89,.5);
    color: #ffffff; 
}
.slider #nav_slide{
    width: 100%;
    bottom: 12%;
    height: 11px;
    position: absolute;
    text-align: center;
    z-index: 89;
    cursor: default;
}
#nav_slide .dots{
    top: -5px;
    width: 12px;
    height: 12px;
    margin: 0 4px;
    position: relative;
    border-radius: 100%;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.6);
    transition:.5s;
}
#nav_slide .dots:hover{
    cursor: pointer;
    background: rgba(255, 255, 255, 0.9);
    transition: .25s;
}
.slide_img
{z-index: -1;}

#i1:checked ~ #one  ,
#i2:checked ~ #two  ,
#i3:checked ~ #three,
#i4:checked ~ #four{
    z-index: 9;
    animation: ani 1s ease-in-out;
}
background: rgba(255,255,255,.9)

#i1:checked ~ #dot1 ,
#i2:checked ~ #dot2 ,  
#i3:checked ~ #dot3 ,
#i4:checked ~ #dot4 {
    background: rgba(255,255,255,.9);
}
@keyframes ani{
    0%{ opacity:.4;}
    100%{opacity:1;}
}   
@media screen and (max-width: 685px){
    .slider{
        border: none;
        width: 100%;
        height: 0;
        padding-bottom: 55%; 
    }   
    
    label span { 
        font-size: 50pt; }
    
    .prev, .next{
        width: 15%;
    }   
    #nav_slide .dots{
        width: 12px;
        height: 12px;
    }
}
@media screen  and(min-width: 970px){
    .me{ display: none;}
}
/*---------------------------------- BOX-2 ----------------------------------*/
.box2{
    grid-area: box2;
    background: url(https://vignette.wikia.nocookie.net/glee/images/7/70/Light_Red_Background_by_Vik_for_Stuff.png/revision/latest?cb=20140529222632);
    background-size: cover;
    background-position:center;
    transform: scale(1);
    transition: .5s;
}
.box2:hover{
    transform: scale(1.02);
}
.box2 .text1{
    color: #fff;
    font-family: serif;
    font-weight: normal;
    font-size: 26px;
    position: relative;
    width: 100%;
    padding-left: 25px;
    margin-bottom: 0;
    padding-bottom: 0;
    transition: .5s;
    cursor: pointer;
}
.box2 .text1:hover{
    color: #000;
}
.box2 .text2{
    color: #fff;
    font-family: arial;
    font-weight: normal;
    font-size: 13px;
    position:relative;
    padding-left: 25px;
    cursor: pointer;
    transition: .6s;
}
.box2 .text2:hover{
    font-size: 18px;
    color: #000;
    font-weight: bold;
}

/*---------------------------------- BOX-3 ----------------------------------*/

.box3{
    grid-area: box3;
    background:url(https://images.pexels.com/photos/875862/pexels-photo-875862.png?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
    background-size: cover;
    background-position:center;
    transform: scale(1);
    transition: .5s;
}
.box3:hover{
    transform: scale(1.02);
}
.box3 .text1{
    color: #fff;
    position: relative;
    width: 200px;
    font-family: sans-serif;
    letter-spacing: 1px;
    font-size: 20px;
    padding-left: 10px; 
    padding-bottom: 0;
    margin-bottom: 0;
    cursor: pointer;
    transition: 0.5s;
    transform: scale(1);
}
.box3 .text1:hover{
    color:#000;
    transform: scale(1.1);
    margin-left: 10px;
}
.box3 .text2{
    color: #fff;
    font-size: 12px;
    font-family: arial;
    font-weight: bold;
    position: relative;
    padding-left: 10px;
    margin-top: 3px;
    width: 80px;
    cursor: pointer;
    transition: .5s;
}
.box3 .text2:hover{
    color: #ccc;
}
.box3 .fas{
    color: #fff;
    position: relative;
    margin-top: 120px;
    margin-left: 20px;
    font-weight: normal;
    margin-bottom:10px;
    padding-bottom: 0;
    transform: scale(1);
    transition: .5s;
    cursor: pointer;
}
.box3 .fas:hover{
    color: #f00;
    transform: scale(1.05);
    font-weight: bold;
}
.box3 .text3{
    color: #fff;
    position: relative;
    margin-left: 20px;
    margin-top: 0;
    font-size: 15px;
    font-weight: normal;
    padding: 5px;
    width: 110px;
    text-align: center;
    border: 2px solid #fff;
    font-family: sans-serif;
    transition: .5s;
    transform: scaleX(1);
    cursor: pointer;
}
.box3 .text3:hover{
    border: 3px solid #fff;
    color: #fff;
    transform: scaleX(1.05);
}

/*---------------------------------- BOX-4 ----------------------------------*/

.box4{
    grid-area: box4;
    background:url(https://images.pexels.com/photos/417344/pexels-photo-417344.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
    background-size: cover;
    background-position:center;
    transform: scale(1);
    transition: .5s;
}
.box4:hover{
    transform: scale(1.02);
}
.box4 .text1{
    color: #fff;
    position: relative;
    width: 200px;
    font-family: sans-serif;
    letter-spacing: 1px;
    font-size: 20px;
    padding-left: 10px; 
    padding-bottom: 0;
    margin-bottom: 0;
    cursor: pointer;
    transition: 0.5s;
    transform: scale(1);
}
.box4 .text1:hover{
    color:#000;
    transform: scale(1.1);
    margin-left: 10px;
}
.box4 .text2{
    color: #fff;
    font-size: 12px;
    font-family: arial;
    font-weight: bold;
    position: relative;
    padding-left: 10px;
    margin-top: 3px;
    width: 80px;
    cursor: pointer;
    transition: .5s;
}
.box4 .text2:hover{
    color: #ccc;
}
.box4 .fas{
    color: #fff;
    position: relative;
    margin-top: 120px;
    margin-left: 20px;
    font-weight: normal;
    margin-bottom:10px;
    padding-bottom: 0;
    transform: scale(1);
    transition: .5s;
    cursor: pointer;
}
.box4 .fas:hover{
    color: #f00;
    transform: scale(1.05);
    font-weight: bold;
}
.box4 .text3{
    color: #fff;
    position: relative;
    margin-left: 20px;
    margin-top: 0;
    font-size: 15px;
    font-weight: normal;
    padding: 5px;
    width: 110px;
    text-align: center;
    border: 2px solid #fff;
    font-family: sans-serif;
    transition: .5s;
    transform: scaleX(1);
    cursor: pointer;
}
.box4 .text3:hover{
    border: 3px solid #fff;
    color: #fff;
    transform: scaleX(1.05);
}
/*---------------------------------- BOX-5 ----------------------------------*/

.box5{
    grid-area: box5;
    background: url(https://images.pexels.com/photos/33779/hand-microphone-mic-hold.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
    background-size: cover;
    background-position:80% 0;
    transform: scale(1);
    transition: .5s;
}
.box5:hover{
    transform: scale(1.02);
}
.box5 .text1{
    color: #fff;
    position: relative;
    width: 200px;
    font-family: sans-serif;
    letter-spacing: 1px;
    font-size: 20px;
    padding-left: 10px; 
    padding-bottom: 0;
    margin-bottom: 0;
    cursor: pointer;
    transition: 0.5s;
    transform: scale(1);
}
.box5 .text1:hover{
    color:#fff;
    transform: scale(1.1);
    margin-left: 10px;
}
.box5 .text2{
    color: #fff;
    font-size: 12px;
    font-family: arial;
    font-weight: bold;
    position: relative;
    padding-left: 10px;
    margin-top: 3px;
    width: 80px;
    cursor: pointer;
    transition: .5s;
}
.box5 .text2:hover{
    color: #ccc;
}
.box5 .fas{
    color: #fff;
    position: relative;
    margin-top: 380px;
    margin-left: 20px;
    font-weight: normal;
    margin-bottom:10px;
    padding-bottom: 0;
    transform: scale(1);
    transition: .5s;
    cursor: pointer;
}
.box5 .fas:hover{
    color: #f00;
    transform: scale(1.05);
    font-weight: bold;
}
.box5 .text3{
    color: #fff;
    position: relative;
    margin-left: 20px;
    margin-top: 0;
    font-size: 15px;
    font-weight: normal;
    padding: 5px;
    width: 110px;
    text-align: center;
    border: 2px solid #fff;
    font-family: sans-serif;
    transition: .5s;
    transform: scaleX(1);
    cursor: pointer;
}
.box5 .text3:hover{
    border: 3px solid #fff;
    color: #fff;
    transform: scaleX(1.05);
}

/*---------------------------------- BOX-6 ----------------------------------*/

.box6{
    grid-area: box6;
    background: url(https://images.pexels.com/photos/19155/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
    background-size: cover;
    background-position: 40%;
    transform: scale(1);
    transition: .5s;
}
.box6:hover{
    transform: scale(1.02);
}
.box6 .text1{
    color: #fff;
    position: relative;
    width: 200px;
    font-family: sans-serif;
    letter-spacing: 1px;
    font-size: 20px;
    padding-left: 10px; 
    padding-bottom: 0;
    margin-bottom: 0;
    cursor: pointer;
    transition: 0.5s;
    transform: scale(1);
}
.box6 .text1:hover{
    color:#fff;
    transform: scale(1.1);
    margin-left: 10px;
}
.box6 .text2{
    color: #fff;
    font-size: 12px;
    font-family: arial;
    font-weight: bold;
    position: relative;
    padding-left: 10px;
    margin-top: 3px;
    width: 80px;
    cursor: pointer;
    transition: .5s;
}
.box6 .text2:hover{
    color: #ccc;
}
.box6 .fas{
    color: #fff;
    position: relative;
    margin-top: 120px;
    margin-left: 20px;
    font-weight: normal;
    margin-bottom:10px;
    padding-bottom: 0;
    transform: scale(1);
    transition: .5s;
    cursor: pointer;
}
.box6 .fas:hover{
    color: #f00;
    transform: scale(1.05);
    font-weight: bold;
}
.box6 .text3{
    color: #fff;
    position: relative;
    margin-left: 20px;
    margin-top: 0;
    font-size: 15px;
    font-weight: normal;
    padding: 5px;
    width: 110px;
    text-align: center;
    border: 2px solid #fff;
    font-family: sans-serif;
    transition: .5s;
    transform: scaleX(1);
    cursor: pointer;
}
.box6 .text3:hover{
    border: 3px solid #fff;
    color: #fff;
    transform: scaleX(1.05);
}

/*---------------------------------- BOX-7 ----------------------------------*/

.box7{
    grid-area: box7;
    background: url(https://images.pexels.com/photos/1293120/pexels-photo-1293120.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
    background-size: cover;
    background-position: center;
    transform: scale(1);
    transition: .5s;
}
.box7:hover{
    transform: scale(1.02);
}
.box7 .text1{
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
    font-family: arial;
    letter-spacing: 1px;
    transition: 0.5s;
    cursor: pointer;
    position: relative;
}
.box7 .text1:hover{
    color: #000;
    font-size: 13px;
}
.box7 .text2{
    position: relative;
    margin-top: 60px;
    font-size: 25px;
    color: #fff;
    text-shadow: 2px 3px 10px #000;
    font-family: sans-serif;
    text-align: center;
    transition: .5s;
    cursor: pointer;
}
.box7 .text2:hover{
    letter-spacing: 3px;
}
.box7 .text3{
    color: #fff;
    position: relative;
    margin: 45px auto 5px auto;
    font-size: 15px;
    font-weight: normal;
    padding: 5px;
    width: 110px;
    text-align: center;
    border: 2px solid #fff;
    font-family: sans-serif;
    transition: .5s;
    transform: scaleX(1);
    cursor: pointer;
}
.box7 .text3:hover{
    border: 3px solid #fff;
    color: #fff;
    transform: scaleX(1.05);
}

/*---------------------------------- BOX-8 ----------------------------------*/

.box8{
    grid-area: box8;
    background: url(https://images.pexels.com/photos/823841/pexels-photo-823841.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
    background-size: cover;
    background-position: 0%;
    transform: scale(1);
    transition: .5s;
    position: relative;
}
.box8:hover{
    transform: scale(1.02);
}
.box8 .text1{
    color: #000;
    position: relative;
    width: 200px;
    font-family: sans-serif;
    letter-spacing: 1px;
    font-size: 20px;
    padding-left: 10px; 
    padding-bottom: 0;
    margin-bottom: 0;
    cursor: pointer;
    transition: 0.5s;
    transform: scale(1);
}
.box8 .text1:hover{
    color:#000;
    transform: scale(1.1);
    margin-left: 10px;
}
.box8 .text2{
    color: #000;
    font-size: 12px;
    font-family: arial;
    font-weight: bold;
    position: relative;
    padding-left: 10px;
    margin-top: 3px;
    width: 80px;
    cursor: pointer;
    transition: .5s;
}
.box8 .text2:hover{
    color: #ccc;
}
.box8 .fas{
    color: #000;
    position: relative;
    margin-top: 120px;
    margin-left: 20px;
    font-weight: normal;
    margin-bottom:10px;
    padding-bottom: 0;
    transform: scale(1);
    transition: .5s;
    cursor: pointer;
}
.box8 .fas:hover{
    color: #f00;
    transform: scale(1.05);
    font-weight: bold;
}
.box8 .text3{
    color: #000;
    position: relative;
    margin-left: 20px;
    margin-top: 0;
    font-size: 15px;
    font-weight: normal;
    padding: 5px;
    width: 110px;
    text-align: center;
    border: 2px solid #000;
    font-family: sans-serif;
    transition: .5s;
    transform: scaleX(1);
    cursor: pointer;
}
.box8 .text3:hover{
    border: 3px solid #000;
    color: #fff;
    transform: scaleX(1.05);
}

/*---------------------------------- BOX-9 ----------------------------------*/

.box9{
    grid-area: box9;
    background: url(https://images.pexels.com/photos/219922/pexels-photo-219922.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
    background-position: center;
    background-size: cover;
    transform: scale(1);
    transition: .5s;
}
.box9:hover{
    transform: scale(1.02);
}
.box9 .text1{
    color: #fff;
    position: relative;
    width: 200px;
    font-family: sans-serif;
    letter-spacing: 1px;
    font-size: 20px;
    padding-left: 10px; 
    padding-bottom: 0;
    margin-bottom: 0;
    cursor: pointer;
    transition: 0.5s;
    transform: scale(1);
}
.box9 .text1:hover{
    color:#fff;
    transform: scale(1.1);
    margin-left: 10px;
}
.box9 .text2{
    color: #fff;
    font-size: 12px;
    font-family: arial;
    font-weight: bold;
    position: relative;
    padding-left: 10px;
    margin-top: 3px;
    width: 80px;
    cursor: pointer;
    transition: .5s;
}
.box9 .text2:hover{
    color: #ccc;
}
.box9 .fas{
    color: #fff;
    position: relative;
    margin-top: 120px;
    margin-left: 20px;
    font-weight: normal;
    margin-bottom:10px;
    padding-bottom: 0;
    transform: scale(1);
    transition: .5s;
    cursor: pointer;
}
.box9 .fas:hover{
    color: #f00;
    transform: scale(1.05);
    font-weight: bold;
}
.box9 .text3{
    color: #fff;
    position: relative;
    margin-left: 20px;
    margin-top: 0;
    font-size: 15px;
    font-weight: normal;
    padding: 5px;
    width: 110px;
    text-align: center;
    border: 2px solid #fff;
    font-family: sans-serif;
    transition: .5s;
    transform: scaleX(1);
    cursor: pointer;
}
.box9 .text3:hover{
    border: 3px solid #fff;
    color: #fff;
    transform: scaleX(1.05);
}
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: