Langsung ke konten utama

ETS PWEB A 2021

EVALUASI TENGAH SEMESTER PWEB A 2021 

Nama : Jonathan Leonardo Hasiholan Simanjuntak

NRP : 05111940000150

  • No 1 & 2 :

  • No 3 : (Edited on 17 November 2021 0:57 WIB)
    Buatlah halaman web, menggunakan desain yang ditunjukkan.

    Jawab :
    Jawaban dapat diakses lewat link ini.

    Tampilan Halaman Website beserta codenya :
    • Halaman Utama (index.html)





      Source Code :

      • index.html
        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ETS PWEB A - 2021</title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <link rel="stylesheet" href="css/style.css">
        <link href="http://fonts.cdnfonts.com/css/josefin-sans" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lato-font/3.0.0/css/lato-font.min.css" integrity="sha512-rSWTr6dChYCbhpHaT1hg2tf4re2jUxBWTuZbujxKg96+T87KQJriMzBzW5aqcb8jmzBhhNSx4XYGA6/Y+ok1vQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        </head>
        <body>
        <div class="containerContent">
        <div class="content">
        <!-- Top Bar Site -->
        <div class="top-bar">
        <div class="container">
        <div class="row">
        <div class="col-sm-4 hidden-xs">
        <span class="nav-text">
        <i class="fa fa-phone" aria-hidden="true"></i> +123 4567 8910 &nbsp;&nbsp;
        <i class="fa fa-envelope" aria-hidden="true"></i> pweb_A@gmail.com</span>
        </div>
        <div class="col-md-8 text-right hidden-xs">
        <ul class="tools">
        <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-globe" aria-hidden="true"></i> English<span class="caret"></span></a>
        </li>
        <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-dollar-sign" aria-hidden="true"></i> USD<span class="caret"></span></a>
        </li>
        <li class="dropdown">
        <a class="" href="content/login.html"><i class="fa fa-user" aria-hidden="true"></i> Log In</a>
        </li>
        <li class="dropdow">
        <a class="" href=""><i class="fa fa-heart" aria-hidden="true"></i> Wishlist</a>
        </li>
        <li class="dropdow">
        <a class="" href=""><i class="fa fa-cart-plus" aria-hidden="true"></i></a>
        </li>
        </ul>
        </div>
        </div>
        </div>
        </div>
        <!-- Header Hekto -->
        <div class="navbar navbar-expand-xl">
        <div class="container">
        <div class="logo">
        <a href="" class="logo-light">Hekto</a>
        </div>
        <div>
        <ul class="navbar-nav ml-auto navbar-center main_menu onepage_nav">
        <li class="nav-item active">
        <a class="nav-link" href="#home">Home</a>
        </li>
        <li class="nav-item">
        <a class="nav-link" href="#about">Page</a>
        </li>
        <li class="nav-item">
        <a class="nav-link" href="#skill">Products</a>
        </li>
        <li class="nav-item">
        <a class="nav-link" href="content/faq.html">Blog</a>
        </li>
        <li class="nav-item">
        <a class="nav-link" href="#portfolio">Shop</a>
        </li>
        <li class="nav-item">
        <a class="nav-link" href="content/about.html">Contact</a>
        </li>
        </ul>
        </div>
        </div>
        </div>
        <!-- Carousel -->
        <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
        <div class="carousel-item active">
        <img style="height: 600px;" class="d-block w-100" src="https://www.cakrawalabalifurniture.co.id/wp-content/uploads/2021/01/amazon-rivet-furniture-1533048038.jpg" alt="First slide">
        <div class="carousel-caption hidden-xs">
        <h3>New Collection touch of Karbin</h3>
        <p>The atmosphere of Chania has a touch<br> of Deutch and Denmark.</p>
        <button class="btn btn-danger">READ MORE</button>
        </div>
        </div>
        <div class="carousel-item">
        <img style="height: 600px;" class="d-block w-100" src="https://indo-remotecache.99.co/20201201/145214/14a793bc6e9dde9c5e20dc0992ca88ea/beli%20furniture%20online.jpg" alt="Second slide">
        <div class="carousel-caption hidden-xs">
        <h3>New Collection touch of Chania</h3>
        <p>The atmosphere in Chania has a touch<br> of Florence and Venice.</p>
        <button class="btn btn-danger" >READ MORE</button>
        </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleSlidesOnly" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleSlidesOnly" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
        </a>
        </div>
        <br><br>
        </div>
        <div class="featured-products">
        <div class="titlefeatured">
        <h1>Featured Products</h1>
        </div>
        <div class="container mb-5 mt-5">
        <div class="row">
        <div class="col-md-4">
        <div class="card mt-3">
        <div class="product-1 align-items-center p-2 text-center"> <img src="https://www.homestratosphere.com/wp-content/uploads/2017/12/wayfair-armchair-120417.jpg" class="rounded" width="160">
        <h5>Alexa</h5>
        <div class="mt-3 info"> <span class="text1 d-block">Single seat sofa with</span> <span class="text1">leather and syntethic rubber</span> </div>
        <div class=" watchcost mt-3 text-dark"> <span>$80</span>
        <div class=" star mt-3 align-items-center"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div>
        </div>
        </div>
        <div class="p-3 bg-danger text-center text-white mt-3 cursor"> <span class="text-uppercase">Add to cart</span> </div>
        </div>
        </div>
        <div class="col-md-4">
        <div class="card mt-3">
        <div class="product-1 align-items-center p-2 text-center"> <img src="https://www.staging.casa/wp-content/uploads/2017/05/shop-19.jpg" class="rounded" width="160">
        <h5>Lilianne</h5>
        <div class="mt-3 info"> <span class="text1 d-block">Comfortable pillow chair</span> <span class="text1">with luxurious color </span> </div>
        <div class=" watchcost mt-3 text-dark"> <span>$60</span>
        <div class=" star mt-3 align-items-center"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i></div>
        </div>
        </div>
        <div class="p-3 bg-danger text-center text-white mt-3 cursor"> <span class="text-uppercase ">Add to cart</span> </div>
        </div>
        </div>
        <div class="col-md-4">
        <div class="card mt-3">
        <div class="product-1 align-items-center p-2 text-center"> <img src="https://secure.img1-fg.wfcdn.com/im/19556338/resize-h600-w600%5Ecompr-r85/3444/34441276/Kitchen+%26+Dining+Chairs.jpg" class="rounded" width="160">
        <h5>Geraldino</h5>
        <div class="mt-3 info"> <span class="text1 d-block">Affordabe dining chair</span> <span class="text1">with best material needed </span> </div>
        <div class=" watchcost mt-3 text-dark"> <span>$35</span>
        <div class=" star mt-3 align-items-center"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div>
        </div>
        </div>
        <div class="p-3 bg-danger text-center text-white mt-3 cursor"> <span class="text-uppercase ">Add to cart</span> </div>
        </div>
        </div>
        </div>
        </div>
        </div>
        <div class="leatest-product">
        <div class="titleleatest">
        <h1>Leatest Products</h1>
        </div>
        <div class="container mb-5 mt-5">
        <div class="row">
        <div class="col-md-3">
        <div class="card mt-3">
        <div class="product-1 align-items-center p-2 text-center"> <img src="https://cdn.connox.com/m/100030/252317/media/hay/About-A-Chair/AAC123/Hay-About-A-Chair-AAC-123-Eiche-matt-lackiert--Bolgheri-LGG60-frei.jpg" class="rounded" width="160">
        <h5>Julien</h5>
        <div class="mt-3 info"> <span class="text1 d-block">Single seat sofa with</span> <span class="text1">leather and syntethic rubber</span> </div>
        <div class=" watchcost mt-3 text-dark"> <span>$80</span>
        <div class=" star mt-3 align-items-center"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div>
        </div>
        </div>
        <div class="p-3 bg-danger text-center text-white mt-3 cursor"> <span class="text-uppercase">Add to cart</span> </div>
        </div>
        </div>
        <div class="col-md-3">
        <div class="card mt-3">
        <div class="product-1 align-items-center p-2 text-center"> <img src="https://chairforce.com.au/wp-content/uploads/2020/10/wilma_angled_chairforce.jpg" class="rounded" width="160">
        <h5>Sylphie</h5>
        <div class="mt-3 info"> <span class="text1 d-block">Comfortable pillow chair</span> <span class="text1">with luxurious color </span> </div>
        <div class=" watchcost mt-3 text-dark"> <span>$25</span>
        <div class=" star mt-3 align-items-center"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i></div>
        </div>
        </div>
        <div class="p-3 bg-danger text-center text-white mt-3 cursor"> <span class="text-uppercase ">Add to cart</span> </div>
        </div>
        </div>
        <div class="col-md-3">
        <div class="card mt-3">
        <div class="product-1 align-items-center p-2 text-center"> <img src="https://media.istockphoto.com/photos/old-wooden-chair-picture-id1288259097?b=1&k=20&m=1288259097&s=170667a&w=0&h=J6H9f5HTSNxxlf5ffiRpYZWQakQENYWXmUhg8XaBjBk=" class="rounded" width="160">
        <h5>Kara</h5>
        <div class="mt-3 info"> <span class="text1 d-block">Affordabe dining chair</span> <span class="text1">with best material needed </span> </div>
        <div class=" watchcost mt-3 text-dark"> <span>$30</span>
        <div class=" star mt-3 align-items-center"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div>
        </div>
        </div>
        <div class="p-3 bg-danger text-center text-white mt-3 cursor"> <span class="text-uppercase ">Add to cart</span> </div>
        </div>
        </div>
        <div class="col-md-3">
        <div class="card mt-3">
        <div class="product-1 align-items-center p-2 text-center"> <img src="https://www.dan-form.com/media/1jlbarz0/cloud-chair-pebble-green-boucle-fabric-with-black-conical-metal-legs-100800209-01-main.png?width=1920&mode=crop&heightratio=1" class="rounded" width="160">
        <h5>Geronimo</h5>
        <div class="mt-3 info"> <span class="text1 d-block">Comfortable pillow chair</span> <span class="text1">with luxurious color </span> </div>
        <div class=" watchcost mt-3 text-dark"> <span>$35</span>
        <div class=" star mt-3 align-items-center"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i></div>
        </div>
        </div>
        <div class="p-3 bg-danger text-center text-white mt-3 cursor"> <span class="text-uppercase ">Add to cart</span> </div>
        </div>
        </div>
        </div>
        </div>
        </div>
        <footer>
        &copy; 2021 Jonathan Leonardo | Pemrograman Web
        </footer>
        </div>
        </div>
        </body>
        </html>
        view raw index.html hosted with ❤ by GitHub

      • style.css
        .containerContent {
        width: 99%;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid whitesmoke;
        border-radius: 15px;
        background-color: whitesmoke;
        }
        .content {
        width: 98%;
        border-radius: 10px;
        overflow: hidden;
        margin-top: 0.8%;
        margin-bottom: 0.8%;
        margin-left: auto;
        margin-right: auto;
        }
        body {
        background: linear-gradient(to top, lightgrey 80%, purple 20%);
        }
        /* Header Hekto */
        .logo {
        height: 41px;
        padding: 7px 0px;
        margin-bottom: 20px;
        }
        .logo-light {
        font-size: 32px;
        font-weight: 700;
        color: black;
        font-family: "josefin sans";
        }
        .logo-light:hover {
        text-decoration: none;
        color: #fb2e86;
        }
        .main_menu {
        position: relative;
        }
        .main_menu li a:hover {
        color: #fb2e86;
        }
        .main_menu li a {
        color: #111;
        font-size: 14px;
        }
        .main_menu a {
        text-decoration: none;
        }
        .navbar-nav.ml-auto.navbar-center.main_menu.onepage_nav li.active a {
        color: #fb2e86;
        }
        /* Top Bar */
        .top-bar {
        background-color: purple;
        min-height: 40px;
        padding-top: 5px;
        padding-bottom: 0px;
        font-family: "lato";
        }
        .top-bar .nav-text {
        color: white;
        display: block;
        margin-top: 5px;
        }
        .top-bar .tools {
        margin: 0px;
        padding: 0px;
        list-style-type: none;
        }
        .top-bar .tools li {
        list-style-type: none;
        display: inline-block;
        }
        .top-bar .tools li a {
        display: block;
        text-decoration: none;
        color: #fff;
        padding-left: 15px;
        padding-top: 5px;
        }
        /* Carousel */
        .carousel-caption {
        font-family: "josefin sans";
        position: absolute;
        right: 15%;
        bottom: 35px;
        width: 60%;
        left: 15%;
        z-index: 10;
        padding-top: 20px;
        padding-bottom: 20px;
        color: #fff;
        text-align: left;
        text-shadow: -1px -1px black, 1px -1px 0 black, -1px 1px 0 black,
        1px 1px 0 black;
        }
        /* Featured Product */
        .titlefeatured {
        font-family: "josefin sans";
        }
        .titlefeatured h1 {
        font-weight: bolder;
        text-align: center;
        }
        .card {
        border: none;
        border-radius: 0px;
        background-color: #fff;
        }
        .text1 {
        font-size: 13px;
        color: #cbcbcb;
        }
        .info {
        line-height: 17px;
        }
        .star {
        color: #fbc02d;
        }
        .watchcost span {
        color: #286783;
        font-weight: bold;
        font-size: 20px;
        }
        .cursor {
        cursor: pointer;
        }
        /* Leatest Product */
        .titleleatest {
        font-family: "josefin sans";
        }
        .titleleatest h1 {
        font-weight: bolder;
        text-align: center;
        }
        footer {
        text-align: center;
        font-size: 80%;
        padding: 7px 0px 0px 20px;
        height: 40px;
        }
        view raw style.css hosted with ❤ by GitHub


    • Halaman Login (login.html)



      Source Code :
      • login.html
        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ETS PWEB A - 2021</title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <link rel="stylesheet" href="../css/login.css">
        <link href="http://fonts.cdnfonts.com/css/josefin-sans" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lato-font/3.0.0/css/lato-font.min.css" integrity="sha512-rSWTr6dChYCbhpHaT1hg2tf4re2jUxBWTuZbujxKg96+T87KQJriMzBzW5aqcb8jmzBhhNSx4XYGA6/Y+ok1vQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        </head>
        <body>
        <div class="containerContent">
        <!-- Top Bar Site -->
        <div class="top-bar">
        <div class="container">
        <div class="row">
        <div class="col-sm-4 hidden-xs">
        <span class="nav-text">
        <i class="fa fa-phone" aria-hidden="true"></i> +123 4567 8910 &nbsp;&nbsp;
        <i class="fa fa-envelope" aria-hidden="true"></i> pweb_A@gmail.com</span>
        </div>
        <div class="col-md-8 text-right hidden-xs">
        <ul class="tools">
        <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-globe" aria-hidden="true"></i> English<span class="caret"></span></a>
        </li>
        <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-dollar-sign" aria-hidden="true"></i> USD<span class="caret"></span></a>
        </li>
        <li class="dropdown">
        <a class="" href="./login.html"><i class="fa fa-user" aria-hidden="true"></i> Log In</a>
        </li>
        <li class="dropdow">
        <a class="" href=""><i class="fa fa-heart" aria-hidden="true"></i> Wishlist</a>
        </li>
        <li class="dropdow">
        <a class="" href=""><i class="fa fa-cart-plus" aria-hidden="true"></i></a>
        </li>
        </ul>
        </div>
        </div>
        </div>
        </div>
        <!-- Header Hekto -->
        <div class="navbar navbar-expand-xl">
        <div class="container">
        <div class="logo">
        <a href="../index.html" class="logo-light">Hekto</a>
        </div>
        <div>
        <ul class="navbar-nav ml-auto navbar-center main_menu onepage_nav">
        <li class="nav-item active">
        <a class="nav-link" href="../index.html">Home</a>
        </li>
        <li class="nav-item">
        <a class="nav-link" href="#about">Page</a>
        </li>
        <li class="nav-item">
        <a class="nav-link" href="#skill">Products</a>
        </li>
        <li class="nav-item">
        <a class="nav-link" href="faq.html">Blog</a>
        </li>
        <li class="nav-item">
        <a class="nav-link" href="#portfolio">Shop</a>
        </li>
        <li class="nav-item">
        <a class="nav-link" href="about.html">Contact</a>
        </li>
        </ul>
        </div>
        </div>
        </div>
        <div class="my-account">
        <div class="container">
        <div class="text">
        <h5>My Account</h5>
        <p>Home. Pages. <span style="color: #fb2e86;">My Account</span></p>
        </div>
        </div>
        </div>
        <div class="login">
        <div class="loginText">
        <h6>Login</h6>
        <p>Please enter your email and password</p>
        </div>
        <div class="login-form">
        <div class="main-div">
        <form id="Login">
        <div class="form-group">
        <input type="email" class="form-control" id="inputEmail" placeholder="Email Address">
        </div>
        <div class="form-group">
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
        <div class="forgot">
        <a href="">Forgot password?</a>
        </div>
        <button type="submit" class="btn btn-primary" style="margin-bottom: 20px;">Login</button>
        <a href="" class="botto-text">Don't have an account? Create Account</a>
        </form>
        </div>
        </div>
        </div>
        <footer>
        &copy; 2021 Jonathan Leonardo | Pemrograman Web
        </footer>
        </div>
        </div>
        </body>
        view raw login.html hosted with ❤ by GitHub
      • login.css
        .content {
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
        }
        /* Header Hekto */
        .logo {
        height: 41px;
        padding: 7px 0px;
        }
        .logo-light {
        font-size: 32px;
        font-weight: 700;
        color: black;
        font-family: "josefin sans";
        }
        .logo-light:hover {
        text-decoration: none;
        color: #fb2e86;
        }
        .main_menu {
        position: relative;
        }
        .main_menu li a:hover {
        color: #fb2e86;
        }
        .main_menu li a {
        color: #111;
        font-size: 14px;
        }
        .main_menu a {
        text-decoration: none;
        }
        .navbar-nav.ml-auto.navbar-center.main_menu.onepage_nav li.active a {
        color: #fb2e86;
        }
        /* Top Bar */
        .top-bar {
        background-color: rgba(153, 51, 153, 1);
        min-height: 40px;
        padding-top: 5px;
        padding-bottom: 0px;
        font-family: "lato";
        }
        .top-bar .nav-text {
        color: white;
        display: block;
        margin-top: 5px;
        }
        .top-bar .tools {
        margin: 0px;
        padding: 0px;
        list-style-type: none;
        }
        .top-bar .tools li {
        list-style-type: none;
        display: inline-block;
        }
        .top-bar .tools li a {
        display: block;
        text-decoration: none;
        color: #fff;
        padding-left: 15px;
        padding-top: 5px;
        }
        /* MY ACCOUNT */
        .my-account {
        height: 200px;
        background-color: lightgrey;
        margin-top: 40px;
        }
        .my-account .text {
        font-family: "josefin sans";
        padding-top: 50px;
        }
        .my-account .text h5 {
        color: darkblue;
        font-weight: bolder;
        font-size: 40px;
        }
        .my-account .text p {
        font-weight: bold;
        font-size: 20px;
        }
        /* Login */
        .login .loginText {
        font-family: "josefin sans";
        text-align: center;
        margin-top: 60px;
        }
        .login .loginText h6 {
        font-size: 40px;
        font-weight: bolder;
        }
        .login .loginText p {
        color: #777777;
        font-size: 14px;
        margin-bottom: 30px;
        line-height: 24px;
        }
        .login-form .form-control {
        background: #f7f7f7 none repeat scroll 0 0;
        border: 1px solid #d4d4d4;
        border-radius: 4px;
        font-size: 14px;
        height: 50px;
        line-height: 50px;
        }
        .main-div {
        background: #ffffff none repeat scroll 0 0;
        border-radius: 2px;
        margin: 10px auto 30px;
        max-width: 38%;
        padding: 50px 70px 70px 71px;
        }
        .login-form .form-group {
        margin-bottom: 10px;
        }
        .login-form {
        text-align: center;
        }
        .forgot a {
        color: #777777;
        font-size: 14px;
        text-decoration: underline;
        }
        .login-form .btn.btn-primary {
        background: #fb2e86 none repeat scroll 0 0;
        border-color: #fb2e86;
        color: #ffffff;
        font-size: 14px;
        width: 100%;
        height: 50px;
        line-height: 50px;
        padding: 0;
        }
        .forgot {
        text-align: left;
        margin-bottom: 30px;
        }
        .botto-text {
        color: #777777;
        font-size: 14px;
        margin: auto;
        }
        .login-form .btn.btn-primary.reset {
        background: #fb2e86 none repeat scroll 0 0;
        }
        .back {
        text-align: left;
        margin-top: 10px;
        }
        .back a {
        color: #444444;
        font-size: 13px;
        text-decoration: none;
        }
        footer {
        text-align: center;
        font-size: 80%;
        padding: 7px 0px 0px 20px;
        margin-bottom: 20px;
        }
        view raw login.css hosted with ❤ by GitHub


    • Halaman About Us (about.html)



      Source Code :
      • about.html
        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ETS PWEB A - 2021</title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <link rel="stylesheet" href="../css/about.css">
        <link href="http://fonts.cdnfonts.com/css/josefin-sans" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lato-font/3.0.0/css/lato-font.min.css" integrity="sha512-rSWTr6dChYCbhpHaT1hg2tf4re2jUxBWTuZbujxKg96+T87KQJriMzBzW5aqcb8jmzBhhNSx4XYGA6/Y+ok1vQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        </head>
        <body>
        <div class="containerContent">
        <!-- Top Bar Site -->
        <div class="top-bar">
        <div class="container">
        <div class="row">
        <div class="col-sm-4 hidden-xs">
        <span class="nav-text">
        <i class="fa fa-phone" aria-hidden="true"></i> +123 4567 8910 &nbsp;&nbsp;
        <i class="fa fa-envelope" aria-hidden="true"></i> pweb_A@gmail.com</span>
        </div>
        <div class="col-md-8 text-right hidden-xs">
        <ul class="tools">
        <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-globe" aria-hidden="true"></i> English<span class="caret"></span></a>
        </li>
        <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-dollar-sign" aria-hidden="true"></i> USD<span class="caret"></span></a>
        </li>
        <li class="dropdown">
        <a class="" href="./login.html"><i class="fa fa-user" aria-hidden="true"></i> Log In</a>
        </li>
        <li class="dropdow">
        <a class="" href=""><i class="fa fa-heart" aria-hidden="true"></i> Wishlist</a>
        </li>
        <li class="dropdow">
        <a class="" href=""><i class="fa fa-cart-plus" aria-hidden="true"></i></a>
        </li>
        </ul>
        </div>
        </div>
        </div>
        </div>
        <!-- Header Hekto -->
        <div class="navbar navbar-expand-xl">
        <div class="container">
        <div class="logo">
        <a href="../index.html" class="logo-light">Hekto</a>
        </div>
        <div>
        <ul class="navbar-nav ml-auto navbar-center main_menu onepage_nav">
        <li class="nav-item">
        <a class="nav-link" href="../index.html">Home</a>
        </li>
        <li class="nav-item">
        <a class="nav-link" href="#about">Page</a>
        </li>
        <li class="nav-item">
        <a class="nav-link" href="#skill">Products</a>
        </li>
        <li class="nav-item">
        <a class="nav-link" href="faq.html">Blog</a>
        </li>
        <li class="nav-item">
        <a class="nav-link" href="#portfolio">Shop</a>
        </li>
        <li class="nav-item active">
        <a class="nav-link" href="about.html">Contact</a>
        </li>
        </ul>
        </div>
        </div>
        </div>
        <div class="my-account">
        <div class="container">
        <div class="text">
        <h5>About Us</h5>
        <p>Home. Pages. <span style="color: #fb2e86;">About Us</span></p>
        </div>
        </div>
        </div>
        <div class="story">
        <div class="container">
        <p align="left">
        <img class="img" src="https://www.jobstreet.co.id/career-resources/cara-menulis-cv-untuk-business-analyst/business-analysis-program-1200x800/" alt="" width="360px" height="500px">
        <div class="details">
        <h3>Know About Our Ecomerce <br>Business, History</h3>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat maecenas volutpat blandit aliquam. Gravida neque convallis a cras semper auctor.</p>
        </div>
        <button type="submit" class="btn btn-primary" style="margin-bottom: 20px;">Login</button>
        </p>
        </div>
        </div>
        <div class="our-features">
        <div class="titlefeatures">
        <h1>Our Features</h1>
        </div>
        <div class="container mb-5 mt-5">
        <div class="row">
        <div class="col-md-3">
        <div class="card mt-3">
        <div class="product-1 align-items-center p-2 text-center"> <img src="https://static.vecteezy.com/system/resources/previews/002/795/098/original/delivery-truck-design-flat-design-illustration-vector.jpg" class="rounded" width="160">
        <h5>Free Delivery<br></h5>
        <div class="mt-3 info" style="text-align: center;"> <span class="text1 d-block">Lorem ipsum dolor sit amet, consectetur </span> <span span class="text1">adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></div>
        <br>
        </div>
        </div>
        </div>
        <div class="col-md-3">
        <div class="card mt-3">
        <div class="product-1 align-items-center p-2 text-center"> <img src="https://image.freepik.com/free-vector/cashback-concept-illustration-flat-design_23-2148458120.jpg" class="rounded" width="160">
        <h5>100% Cashback<br></h5>
        <div class="mt-3 info" style="text-align: center;"> <span class="text1 d-block">Lorem ipsum dolor sit amet, consectetur </span> <span span class="text1">adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></div>
        <br>
        </div>
        </div>
        </div>
        <div class="col-md-3">
        <div class="card mt-3">
        <div class="product-1 align-items-center p-2 text-center"> <img src="https://st2.depositphotos.com/9657654/12456/v/950/depositphotos_124561846-stock-illustration-vector-trophy-cup-flat-design.jpg" class="rounded" width="160">
        <h5>Quality Product <br></h5>
        <div class="mt-3 info" style="text-align: center;"> <span class="text1 d-block">Lorem ipsum dolor sit amet, consectetur </span> <span span class="text1">adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></div>
        <br>
        </div>
        </div>
        </div>
        <div class="col-md-3">
        <div class="card mt-3">
        <div class="product-1 align-items-center p-2 text-center"> <img src="https://st4.depositphotos.com/30935530/37929/v/950/depositphotos_379298148-stock-illustration-call-icon-trendy-flat-style.jpg" class="rounded" width="160">
        <h5>24/7 Support <br></h5>
        <div class="mt-3 info" style="text-align: center;"> <span class="text1 d-block">Lorem ipsum dolor sit amet, consectetur </span> <span span class="text1">adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></div>
        <br>
        </div>
        </div>
        </div>
        </div>
        </div>
        <footer>
        &copy; 2021 Jonathan Leonardo | Pemrograman Web
        </footer>
        </div>
        </body>
        view raw about.html hosted with ❤ by GitHub
      • about.css
        .content {
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
        }
        /* Header Hekto */
        .logo {
        height: 41px;
        padding: 7px 0px;
        }
        .logo-light {
        font-size: 32px;
        font-weight: 700;
        color: black;
        font-family: "josefin sans";
        }
        .logo-light:hover {
        text-decoration: none;
        color: #fb2e86;
        }
        .main_menu {
        position: relative;
        }
        .main_menu li a:hover {
        color: #fb2e86;
        }
        .main_menu li a {
        color: #111;
        font-size: 14px;
        }
        .main_menu a {
        text-decoration: none;
        }
        .navbar-nav.ml-auto.navbar-center.main_menu.onepage_nav li.active a {
        color: #fb2e86;
        }
        /* Top Bar */
        .top-bar {
        background-color: rgba(153, 51, 153, 1);
        min-height: 40px;
        padding-top: 5px;
        padding-bottom: 0px;
        font-family: "lato";
        }
        .top-bar .nav-text {
        color: white;
        display: block;
        margin-top: 5px;
        }
        .top-bar .tools {
        margin: 0px;
        padding: 0px;
        list-style-type: none;
        }
        .top-bar .tools li {
        list-style-type: none;
        display: inline-block;
        }
        .top-bar .tools li a {
        display: block;
        text-decoration: none;
        color: #fff;
        padding-left: 15px;
        padding-top: 5px;
        }
        /* MY ACCOUNT */
        .my-account {
        height: 200px;
        background-color: lightgrey;
        margin-top: 40px;
        }
        .my-account .text {
        font-family: "josefin sans";
        padding-top: 50px;
        }
        .my-account .text h5 {
        color: darkblue;
        font-weight: bolder;
        font-size: 40px;
        }
        .my-account .text p {
        font-weight: bold;
        font-size: 20px;
        }
        /* story */
        .story {
        margin-top: 80px;
        margin-bottom: 80px;
        }
        .img {
        width: 400px;
        height: 200px;
        border: 2px solid #fff;
        -moz-box-shadow: 10px 10px 5px darkblue;
        -webkit-box-shadow: 10px 10px 5px darkblue;
        box-shadow: 10px 10px 5px darkblue;
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        float: left;
        }
        .details {
        position: relative;
        left: 70px;
        font-family: "josefin sans";
        }
        .details h3 {
        font-weight: bolder;
        color: darkblue;
        }
        .details p {
        text-align: justify;
        }
        .story .container .btn.btn-primary {
        background: #fb2e86 none repeat scroll 0 0;
        border-color: #fb2e86;
        color: #ffffff;
        font-size: 14px;
        width: 10%;
        height: 50px;
        line-height: 50px;
        padding: 0;
        position: relative;
        left: 70px;
        }
        /* Our Features */
        .titlefeatures {
        font-family: "josefin sans";
        }
        .titlefeatures h1 {
        font-weight: bolder;
        text-align: center;
        }
        .col-md-3 :hover {
        border-bottom-color: yellow;
        }
        .form-area {
        background-color: pink;
        padding: 10px 40px 60px;
        margin: 10px 0px 60px;
        border: 1px solid GREY;
        }
        footer {
        text-align: center;
        font-size: 80%;
        padding: 7px 0px 0px 20px;
        margin-bottom: 20px;
        }
        view raw about.css hosted with ❤ by GitHub


    • Halaman FAQ (faq.html)

      Source Code :
      • faq.html
        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ETS PWEB A - 2021</title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <link rel="stylesheet" href="../css/faq.css">
        <link href="http://fonts.cdnfonts.com/css/josefin-sans" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lato-font/3.0.0/css/lato-font.min.css" integrity="sha512-rSWTr6dChYCbhpHaT1hg2tf4re2jUxBWTuZbujxKg96+T87KQJriMzBzW5aqcb8jmzBhhNSx4XYGA6/Y+ok1vQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        </head>
        <body>
        <div class="containerContent">
        <!-- Top Bar Site -->
        <div class="top-bar">
        <div class="container">
        <div class="row">
        <div class="col-sm-4 hidden-xs">
        <span class="nav-text">
        <i class="fa fa-phone" aria-hidden="true"></i> +123 4567 8910 &nbsp;&nbsp;
        <i class="fa fa-envelope" aria-hidden="true"></i> pweb_A@gmail.com</span>
        </div>
        <div class="col-md-8 text-right hidden-xs">
        <ul class="tools">
        <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-globe" aria-hidden="true"></i> English<span class="caret"></span></a>
        </li>
        <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-dollar-sign" aria-hidden="true"></i> USD<span class="caret"></span></a>
        </li>
        <li class="dropdown">
        <a class="" href="./login.html"><i class="fa fa-user" aria-hidden="true"></i> Log In</a>
        </li>
        <li class="dropdow">
        <a class="" href=""><i class="fa fa-heart" aria-hidden="true"></i> Wishlist</a>
        </li>
        <li class="dropdow">
        <a class="" href=""><i class="fa fa-cart-plus" aria-hidden="true"></i></a>
        </li>
        </ul>
        </div>
        </div>
        </div>
        </div>
        <!-- Header Hekto -->
        <div class="navbar navbar-expand-xl">
        <div class="container">
        <div class="logo">
        <a href="../index.html" class="logo-light">Hekto</a>
        </div>
        <div>
        <ul class="navbar-nav ml-auto navbar-center main_menu onepage_nav">
        <li class="nav-item">
        <a class="nav-link" href="../index.html">Home</a>
        </li>
        <li class="nav-item">
        <a class="nav-link" href="#about">Page</a>
        </li>
        <li class="nav-item">
        <a class="nav-link" href="#skill">Products</a>
        </li>
        <li class="nav-item active">
        <a class="nav-link" href="faq.html">Blog</a>
        </li>
        <li class="nav-item">
        <a class="nav-link" href="#portfolio">Shop</a>
        </li>
        <li class="nav-item">
        <a class="nav-link" href="about.html">Contact</a>
        </li>
        </ul>
        </div>
        </div>
        </div>
        <div class="my-account">
        <div class="container">
        <div class="text">
        <h5>FAQ</h5>
        <p>Home. Pages. <span style="color: #fb2e86;">FAQ</span></p>
        </div>
        </div>
        </div>
        <div class="story">
        <div class="container">
        <p align="left">
        <div class="container d-flex">
        <div class="row my-2 mx-2">
        <div class="col-md-6">
        <div class="details">
        <h3>General Information</h3>
        <div class="info" style="margin-top: 50px;">
        <h5>Eu dictumst cum at sed euismood condimentum?</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, <br>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="info" style="margin-top: 50px;">
        <h5>Magna bibendum est fermentum eros.</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, <br>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="info" style="margin-top: 50px;">
        <h5>Odio muskana hak eris conseekin sceleton?</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, <br>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="info" style="margin-top: 50px;">
        <h5>Elit id blandit sabara boi velit gua mara?</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, <br>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        </div>
        </div>
        <!--col-->
        <div class="col-md-6">
        <div class="formUI">
        <h2 class="form-title">Ask A Question</h2>
        <form>
        <div class="form-group pt-2 pl-1"> <label for="exampleInputName">Your name</label> <input type="text" class="form-control" id="exampleInputName"> </div>
        <div class="form-group pl-1"> <label for="exampleInputEmail1">Subject</label> <input type="text" class="form-control" id="exampleInputEmail1"> </div>
        <div class="form-group pl-1"> <label for="exampleFormControlTextarea1">Type Your message</label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="5"></textarea> </div>
        <div class="row">
        <p align="left">
        <button type="submit" class="btn btn-primary" style="margin-bottom: 20px;">Send Mail</button>
        </p>
        </div>
        </form>
        </div>
        </div>
        </div>
        </div>
        </p>
        </div>
        </div>
        <footer>
        &copy; 2021 Jonathan Leonardo | Pemrograman Web
        </footer>
        </div>
        </body>
        view raw faq.html hosted with ❤ by GitHub
      • faq.css
        .content {
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
        }
        /* Header Hekto */
        .logo {
        height: 41px;
        padding: 7px 0px;
        }
        .logo-light {
        font-size: 32px;
        font-weight: 700;
        color: black;
        font-family: "josefin sans";
        }
        .logo-light:hover {
        text-decoration: none;
        color: #fb2e86;
        }
        .main_menu {
        position: relative;
        }
        .main_menu li a:hover {
        color: #fb2e86;
        }
        .main_menu li a {
        color: #111;
        font-size: 14px;
        }
        .main_menu a {
        text-decoration: none;
        }
        .navbar-nav.ml-auto.navbar-center.main_menu.onepage_nav li.active a {
        color: #fb2e86;
        }
        /* Top Bar */
        .top-bar {
        background-color: rgba(153, 51, 153, 1);
        min-height: 40px;
        padding-top: 5px;
        padding-bottom: 0px;
        font-family: "lato";
        }
        .top-bar .nav-text {
        color: white;
        display: block;
        margin-top: 5px;
        }
        .top-bar .tools {
        margin: 0px;
        padding: 0px;
        list-style-type: none;
        }
        .top-bar .tools li {
        list-style-type: none;
        display: inline-block;
        }
        .top-bar .tools li a {
        display: block;
        text-decoration: none;
        color: #fff;
        padding-left: 15px;
        padding-top: 5px;
        }
        /* MY ACCOUNT */
        .my-account {
        height: 200px;
        background-color: lightgrey;
        margin-top: 40px;
        }
        .my-account .text {
        font-family: "josefin sans";
        padding-top: 50px;
        }
        .my-account .text h5 {
        color: darkblue;
        font-weight: bolder;
        font-size: 40px;
        }
        .my-account .text p {
        font-weight: bold;
        font-size: 20px;
        }
        /* Geneeral Information */
        .story {
        width: 100%;
        margin: auto;
        margin-top: 100px;
        }
        .details {
        padding-right: 100px;
        font-family: "josefin sans";
        }
        .details h3 {
        font-weight: bolder;
        color: darkblue;
        }
        .info {
        margin-bottom: 5px;
        }
        .info h5 {
        font-weight: bolder;
        color: darkblue;
        font-size: 12;
        }
        .info p {
        text-align: justify;
        }
        /* Form */
        .text-muted {
        font-size: 13px;
        font-weight: bold;
        }
        .form-title {
        font-weight: bold;
        }
        .form-group label {
        font-size: 11px;
        font-weight: bold;
        padding-left: 5px;
        color: #828282;
        }
        .form-control {
        border: none;
        border-radius: 20px;
        background: rgba(165, 147, 69, 0.075);
        box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.2);
        }
        .btn {
        width: 100%;
        font-size: 12px;
        margin-top: 10px;
        background-color: rgba(56, 147, 243, 0.67);
        text-align: center;
        border-radius: 5px;
        }
        .form-control:focus {
        color: #495057;
        border-color: #fff !important;
        outline: 0;
        box-shadow: 0 1px 1px 1px rgba(0, 123, 255, 0.25) !important;
        }
        .formUI {
        background-color: whitesmoke;
        padding: 50px 50px 50px 50px;
        border: 1px solid whitesmoke;
        border-radius: 15px;
        background-color: whitesmoke;
        }
        .formUI h2 {
        font-family: "josefin sans";
        color: darkblue;
        }
        .formUI form {
        margin-top: 120px;
        }
        .btn.btn-primary {
        background: #fb2e86 none repeat scroll 0 0;
        border-color: #fb2e86;
        color: #ffffff;
        font-size: 14px;
        width: 120%;
        height: 50px;
        line-height: 50px;
        padding: 0;
        position: relative;
        left: 20px;
        }
        footer {
        text-align: center;
        font-size: 80%;
        padding: 7px 0px 0px 20px;
        margin-bottom: 20px;
        }
        view raw faq.css hosted with ❤ by GitHub
        Video Demo :
       

Label

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 1 Pemrograman Web A

Profil & Portofolio Pribadi Nama    : Jonathan Leonardo Hasiholan Simanjuntak NRP      : 05111940000150 Kelas     : Pemrograman Web A 2021 Link Profil : Ardo Profile Link Repo : Profile Repository Pada tugas ini, saya membuat profil dan portofolio pribadi dengan memanfatkan tema yang disediakan di plaform Hugo (Static Site Generator)yaitu Hugo Profile v3 . Kemudian, saya hosting -kan resource yang berhasil di generate lewat Github Pages. Berikut ini adalah tampilan hasilnya,   Tahapan Pembuatan Profile Berikut adalah penjelasan singkat mengenai tahapan - tahapan yang saya lakukan untuk membuat halaman profil pribadi saya,  Pertama - tama, install Hugo terlebih dahulu. Panduan instalasinya bisa dilihat di Install Hugo . Setelah Hugo berhasil di-instal. Buka command promopt pada perangkat anda dan jalankan perintah : hugo version Jika perintah "hugo" sudah dikenali, maka proses instalasi hugo telah berhasil. Gambar 2.1 Hugo be...
Posting Komentar
Baca selengkapnya

Tugas 6 Pemrograman Web A

News Website Using Bootstrap Nama     : Jonathan Leonardo Hasiholan Simanjuntak NRP       : 05111940000150 Kelas      : Pemrograman Web A 2021 Pada pertemuan ketujuh kelas PWEB A, kami diberikan tugas untuk mengembangkan sebuah website redaksi berita dengan memanfaatkan penggunaan Bootstrap. Setelah website berhasil di susun secara lokal, website yang kita susun tersebut juga akan di  hosting -kan. Pada tugas ini,  hosting  website dilakukan menggunakan Github Pages. Websitenya sendiri dapat diakses lewat link  ini . Berikut adalah tampilan dari hasil websitenya : Tampilan Halaman Utama Website Tampilan Halaman Contact Us Tampilan Pop Up Login Form   Source Code Untuk source code dari webnya, terdapat empat file source code yang saya gunakan untuk menyusun website tersebut. Dua diantaranya adalah index.html dan contact.html. Pada halaman index.html terdapat list berita yang tersusun kedalam 2 buah image...
Posting Komentar
Baca selengkapnya

Tugas 3 Pemrograman Web A

Warung Tegal HTML 5 Nama     : Jonathan Leonardo Hasiholan Simanjuntak NRP       : 05111940000150 Kelas      : Pemrograman Web A 2021 Pada pertemuan ketiga kelas PWEB A, kami diberikan tugas untuk mengembangkan sebuah website rumah makan "Warung Tegal" dengan memanfaatkan HTML5. Kami juga diminta untuk menambahkan image carousel  dan video player  pada website yang akan kami kembangkan. Adapun hasilnya dapat di akses lewat  Warung Tegal Website . Berikut adalah tampilan dari hasilnya : Tampilan Beranda Tampilan Daftar Masakan Tampilan Katering Tampilan Tentang Tampilan Kontak Source Code Untuk source code dari webnya, masing - masing halaman tampilan source code HTML-nya saya pisahkan. Di dalam setiap file HTML, terdapat masing - masing styling yang digunakan untuk halaman tersebut. Berikut source code dari kelima tampilan diatas : Halaman Beranda Halaman Daftar Masakan Halaman Katering Halaman Tentang Halaman Ko...
Posting Komentar
Baca selengkapnya