Scribd Logo
Upload

Welcome to Scribd!

  • Tugasweb2css B F1D019011

    Uploaded by

    FAL CONE
    7 views7 pages

    Original Title

    Tugasweb2css_B_F1D019011

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    7 views7 pages

    Tugasweb2css B F1D019011

    Uploaded by

    FAL CONE

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 7

    Nama : Arya Agung Laksamana Dwikananda Sedana Putra

    NIM : F1D019011
    Kelas : B

    Genuine GamingStation Web


    1. Index.html
    <!DOCTYPE html>
    <html>
    <head>
    <title>Genuine</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">

    <!-- <style></style> -->


    </head>
    <body>
    <!-- header -->
    <header>
    <h1><a href="index.html">Genuine For Life</a></h1>
    <div class="option-bar">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="TopUp.html">Top Up</a></li>
    <li><a href="About.html">About</a></li>
    <li><a href="login.html">Login</a></li>
    </ul>
    </div>
    </header>
    <section>
    <div class="page">
    <p>WELCOME TO NEW WORLD</p>
    </div>
    </section>
    </body>
    </html>

    2. style.css
    *{
    padding: 0;
    margin: 0;
    font-family: fantasy;
    }
    a{
    color: #1b2327;
    text-decoration: none;
    }

    .option-bar{
    padding: 13px 0;
    background-color: #75d5e3;
    text-align: center;
    }

    .option-bar ul li{
    display: inline-block;
    }

    .box{
    }

    header ul li a{
    padding: 15px 25px;
    display: inline-block;
    }

    header ul li a:hover{
    background-color: white;
    }

    .page{
    height: 75vh;
    background-image: url('img.jpg');
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    }

    header{
    background-color: #2d5d83;
    color: white;
    text-align: center;
    }

    header h1 a{
    color: white;
    }
    .page p{
    text-align: center;
    font-size: 40px;
    color: white;
    }
    3. Login.html
    <!DOCTYPE html>
    <html>
    <head>
    <title>Genuine</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="loginstyle.css">

    <!-- <style></style> -->


    </head>
    <body>
    <!-- header -->
    <header>
    <h1><a href="index.html">Genuine For Life</a></h1>
    <div class="option-bar">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="TopUp.html">Top Up</a></li>
    <li><a href="About.html">About</a></li>
    <li><a href="login.html">Login</a></li>
    </ul>
    </div>
    </header>
    <section>
    <div class="page">
    <div class="loginbox">
    <h2>LOGIN</h2>
    <div class="input-group">
    <span>Username</span>
    <input type="Username" required="">
    </div>
    <div class="input-group">
    <span>Password</span>
    <input type="Password" required="">
    </div>
    <div class="input-group">
    <div class="logbutton">
    <input type="submit" value="Login">
    </div>
    <div class="subbutton">
    <input type="submit" value="Sign In">
    </div>
    </div>
    </div>
    </div>
    </section>
    </body>
    </html>

    4. Loginstyle.css
    *{
    padding: 0;
    margin: 0;
    font-family: fantasy;
    }

    a{
    color: #1b2327;
    text-decoration: none;
    }

    .option-bar{
    padding: 13px 0;
    background-color: #75d5e3;
    text-align: center;
    }

    .option-bar ul li{
    display: inline-block;
    }

    .box{
    }

    header ul li a{
    padding: 15px 25px;
    display: inline-block;
    }

    header ul li a:hover{
    background-color: white;
    }

    .page{
    height: 75vh;
    background-image: url('img.jpg');
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    }

    header{
    background-color: #2d5d83;
    color: white;
    text-align: center;
    }

    header h1 a{
    color: white;
    }

    .page p{
    text-align: center;
    font-size: 40px;
    color: white;
    }

    .loginbox{
    background-size: width:50px height:60px;
    padding: 60px;
    position: relative;
    text-align: center;
    justify-content: center;
    }

    .loginbox:after{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(255,255,255, .6);
    }

    .loginbox .input-group{
    position: relative;
    width: 100%;
    margin-bottom: 13px;
    z-index: 1;
    }
    .loginbox .input-group input{
    height: 40px;
    width: 100%;
    padding: 0 8px;
    box-sizing: border-box;
    }

    .loginbox h2{
    position: relative;
    z-index: 1;
    font-size: 30px;
    padding-bottom: 30px;
    }

    .loginbox .input-group span{


    padding: 0px;
    text-transform: capitalize;
    transition: 0.5s;
    }

    You might also like