P4-Landing Page Tasarımı

The Kerberos

Forum Yöneticisi
Yönetici
Süper Admin
Bu çalışmada "Landing Page" tasarımı gerçekleştiricez.Landing page , bir web sayfasına tıkladığınızdaki açılış sayfasıdır.Landing pagelerin tasarımı şık ve sade olmalıdır ki kullanıcı site içerisinde boğulmasın.Wrb sitenizin şık bi landing page'e sahip olması demek kullanıcıların sitede daha fazla gezinmesi ve markanızı en iyi şekilde göstermeniz demektir.SEO ya uyumlu şekilde kodlanmalıdır.

Html kodlarınız :

HTML:
<body>
    <header class="header">
      
        <nav>
            <ul>
                <li class="nav-item"><a href="#">Home</a></li>
                <li class="nav-item"><a href="#services">Services</a></li>
                <li class="nav-item"><a href="#">Our Work</a></li>
                <li class="nav-item"><a href="#">About Us</a></li>
                <li class="nav-item"><a href="#">Contact</a></li>
                <li class="nav-item"><a href="#">Login</a><i class="far fa-user"></i></li>
            </ul>
        </nav>
    </header>
    <div id="fullPage">
        
        <section class="section s1">
           <img src="images/logo.svg" class="logo"></img>
           <div class="name">
            <p class="text1" >ROCK'N ROLL</p>
            <p class="text2" >Vintage Car Specialist</p>
           </div>
           <div class="social-buttons">
             <a href="#"><i class="fab fa-facebook-f facebook" ></i></a>
             <a href="#"><i class="fab fa-twitter twitter"></i></a>
             <a href="#"><i class="fab fa-youtube youtube"></i></a>
           </div>
           <div class="mouse"></div>           
        </section>



Css veriniz :



CSS:
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    text-decoration: none;
    list-style-type: none;
}

.header{
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    background-color: rgb(32, 32, 32);
    height:65px;
}   
.header nav ul{
    display: flex;
    flex-direction: row;
    height:70px;
    align-items: center;
    
}
.header nav ul li{
    padding:10px;
    
}
.header nav ul a {
    padding:15px;
    color:white;
    font-size:18px;
    font-family: Arial, Helvetica, sans-serif;
}
.header nav ul i {
    color:white;
}

/*////////////////////////////////////*/
.s1{
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.74) 0%, rgba(29, 29, 29, 0.46) 100%),url("images/bg.svg");
    background-size: cover;
    z-index: -1;
    
}
.s1 .logo{
    position: absolute;
    top:20%;
    left:50%;
    transform: translate(-50%,-20%);
    width:250px;

}
.text1{
    position: absolute;
    top:40%;
    left:50%;
    transform: translate(-50%,-20%);
    font-style: bold;
    color:white;
    font-size:64px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.text2{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-20%);
    font-style: bold;
    color:white;
    font-size:24px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

}
.social-buttons{
    position: absolute;
    top:90%;
    left:50%;
    transform: translate(-50%,-80%);
}

.social-buttons i{
    width:25px;
    height:25px;
    
    margin:8px;
    
}
.facebook{
    color:#353CE1;
}
.youtube{
    color:#FE0303
}
.twitter{
    color:#39B2F5
}

.mouse{
    position: absolute;
    left:50%;
    transform: translate(-50%);
    bottom:30%;
    width:30px;
    height:50px;
    border:2px solid white;
    border-radius:40px;
}
.mouse::before{
    content: "";
    width:5px;
    height:5px;
    border:2px solid white;
    background-color: whitesmoke;
    border-radius:5px;
    position:absolute;
    left:50%;
    top:10%;
    transform: translate(-50%);
    animation: mouse 2s infinite;
}

@keyframes mouse{
    from{
        opacity:1;
        top:10%;
    }
    to{
        opacity:0;
        top:50%;
    }
}

Landing pagenizin görüntüsü


Ek Açıklama 2020-07-31 150142.png
 
Üst