Nike Web Tampak Depan

         Assalamualaikum kali ini saya ingin mengumpulkan tugas membuat desain web tampak halaman depan, disini saya juga masih belajar dengan cara melihat tutorial di youtube.

Berikut ini file dan codenya, untuk hasil nya bisa dirun melalui kodenya.


HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nike Website</title>
    <link rel="stylesheet" href="style.css"/>

</head>
<body>
    <div class="navigation-container">
    <div class="menu menu-left">
        <a href="#" class="logo"><img src="image/nike logo.png"> </a>
        <ul>
            <li><a herf="#">Women</a></li>
            <li><a herf="#">Men</a></li>
            <li><a herf="#">Kids</a></li>
            <li><a herf="#">Accessories</a></li>
        </ul>
    </div>

    <div class="search-box menu-right">

        <input type="search" placeholder="Search Something Here">
    </div>
    </div>

    <div class="slider-container">
    <div class="slide-box">

    <div class="slider-text">
        <h6>N E W &emsp; C O L L E C T I O N</h6>
        <h2>NEW NIKE &emsp; RACT FLYKNIT</h2>
        <p>The search a softer ,springer,lighter,and more double foam led to a break through in cushioning</p>
<div class="categories">
    <select>
<option value="">QNT</option>
<option value="quantity1">1</option>
<option value="quantity2">2</option>
<option value="quantity3">3</option>
    </select>
   
    <select>
        <option value="">SIZE</option>
        <option value="size-30">30</option>
        <option value="size-32">32</option>
        <option value="size-34">34</option>
           
    </select>

    <a href="#">100$</a>

</div>
   
</div>
    <div class="slider-img">

    <a href="#"><img src="image/shoe.png"></a>

    </div>


    </div>


    <div class="cart">
        <a href="#">ADD TO CART</a>
    </div>
    <div class="brand">
        <a href="#"><img src="image/lr shoes.png"></a>
    </div>
    </div>
</body>
</html>



CSS

@charset "UTF-8";
body{
    margin:0px;
    padding:0px
    font-family:montserrat,sans-serif;
    background-color:#161821;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

.navigation-container{
    position:absolute;
    width:100%;
    padding:10px;
    box-sizing:border-box;
}

.logo img{
    float:left;
    height:60px;
    padding:0px 20px;
    box-sizing:border-box;
}

.menu-left{
    float:left;
    margin:10px 50px;
}

.menu-right{
    float:right;
}

.menu ul{
   
    margin:0px 20px;
    display:flex;
}

.menu ul li a{
    display:block;
    margin:10px 0px;
    text-decoration:none;
    font-weight:200;
    color:#FFFFFF;
    font-size:12px;
    padding:10px 25px;
}

.search-box{
    height:18px;
    padding:10px;
    border-bottom:1px solid #FCFCFC;
    margin:10px 50px;
    background-color:transparent;
}
input[type=search]{
    background-color:transparent;
    width:170px;
    border:none;
    outline:none;
    text-align:center;
    color: #FFFFFF;
}

.slider-container{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100vh;
    box-sizing:border-box;
}

.slide-box{
    margin:80px;
    display:flex;
    justify-content:space-between;
}

.slider-text{
    flex-basis:400px;
    color:#FFFFFF;
}

.slider-text p{
    color:rgba(110,105,105,1.00)
    line-height:20px;
}

h6{
    font-size:15px;
    word-spacing:5px;
    line-height:20px;
    color:#dc721f;
    flex-wrap:wrap;
}

h2{
    font-size:50px;
    word-spacing:-2px;
}
    .slider-img{
        height:450px;
    }
    .slider-img img{
        max-height:100%;
        max-width:100%;
}
    .categories{
        display:flex;
    }
    .categories select{
        width:90px;
        height:40px;
        border:2px solid #828282;
        box-sizing:border-box;
        background-color:transparent;
        color:#ffffff
        outline:none;
        margin-right:20px;
        margin-left:0px;
    }
        .categories option{
            color:#000000;
            text-align:center;
        }
        .categories a{
            text-decoration:none;
            font-size:20px;
            display:flex;
            justify-content:center;
            align-items:center;
            font-weight:550;
            border:2px solid #dc721f;
            color:#dc721f;
            height:40x;
            width:90px;
            box-sizing:border-box;
        }
.cart{
    position:absolute;
    bottom:0px;
    right:0px;
    display:flex;
    justify-content:center;
    align-items:center;
    width:250px;
    height:50px;
    background-color:rgba(54,53,53,1.00);
    border:1px solid rgba(54,53,53,1.00);
}
.cart a{
    text-decoration:none;
    color:#dc721f;
}
.brand-img{
    position:absolute;
    left:70px;
    bottom:5px;
    height:35px;
}
.cart:hover a{
    color:#FFFFFF;
}
.cart:hover{
    background-color:#dc721f;
    transition:all ease 0.5s;



Komentar

Posting Komentar

Postingan populer dari blog ini

Operator Penugasan, Perbandingan, Logika, dan Ternary pada PHP

Gambar
 Assalamualaikum, Halo semuanyaa! Apakabar?? Sehat kan? Semoga semua sehat-sehat aja yaa!     Oke jadi kali ini saya ingin memberikan sebuah penjelasan tentang operator seperti operator penugasan, perbandingan, logika, dan ternary dan juga pasti dengan contohnya. Kurang dong kalo ngasih teori tanpa ada praktek! Jadi simak terus yaaa! Apasih Operator itu?? Operator adalah suatu simbol yang memberikan sebuah compiler atau interpreter untuk bisa melakukan operasi tertentu seperti operasi matematika, rasional atau logis agar bisa menghasilkan hasil akhir seperti yang diinginkan.  Operator juga bisa dibilang sebagai dasar dari sebuah bahasa pemrograman jenis apapun. 1. Operator Penugasan Operator penugasan  “=”  ini berfungsi untuk memberikan nilai pada suatu variabel. Macam-macam operator penugasan Contoh : Pengisian dan Penambahan Pengisian dan Pengurangan Pengisian dan Perkalian Pengisian dan Pemangkatan Pengisian dan Pembagian Pengisian dan Sisa bagi 2. Oper...
Baca selengkapnya

Tugas PART 2

Gambar
  VARIABEL adalah suatu wadah/tempat untuk menyimpan data sementara. Data variabel sewaktu waktu bisa dipanggil, ditampilkan, diubah atau diganti nilainya. Jadi selama browser belum di tutup, maka data variabel masih tersimpan di memory komputer. Data yang di simpan di variabel tidak permanen. Cara  menulis Variable : Variabel diawali dengan tanda dolar $ Nama variabel tidak boleh ada spasi Nama variabel lebih dari satu kata dipisah menggunakan underscore/garis bawah _ Karakter pertama setelah $ tidak boleh menggunakan angka hanya boleh dengan huruf dan underscore/garis bawah _ Didalam variabel tidak boleh mengandung karakter-karakter khusus seperti : % @  #  ;  ! Nama Variabel bersifat case sensitive karena PHP membedakan huruf besar dan kecil. Disini saya akan memberikan contoh cara menggunakan variable pada PHP, berikut conoth codingnya. <?php $nama = "Salman Ramadhan A" ; $umur = "OTW 17" ; $jeniskelamin = "Pria" ; $sekolah = "SMK N 1 JKT...
Baca selengkapnya

FORMULIR SEKOLAH MAS SALMAN

Gambar
  < html > < head >< tittle >FORMAT FORMULIR SEKOLAH SALMAN</ tittle ></ head > < body >     < form method = "Post" >         < table border = 0 width = "75%" > < tr >             < td width = "20%" >NISN</ td >             < td >< Input Type = "Text" Name = "NISN" MaxLength = "10" Size = "11" ></ td > < tr > </ tr >                 < td width = "20%" > Nama Peserta Didik</ td >                 < td >< Input Type = "Text" Name = "Name Peserta Didik" MaxLength = "25" Size = "25" > </ td ></ tr > < tr >                     < td width = "20%" >Alamat</ td >               ...
Baca selengkapnya