Scribd
Upload
36 views31 pages

Ilham Uas

This document contains the code for a website homepage created by Ilham Arifin Setiawan (NIM 20040153) for their final semester exam in Web Programming. The code includes HTML markup for the website layout including navigation menus, headers, images, and product listings. It contains the student's name, student ID, and major listed at the top.

Uploaded by

Mega Lidia Lubis
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
36 views31 pages

Ilham Uas

This document contains the code for a website homepage created by Ilham Arifin Setiawan (NIM 20040153) for their final semester exam in Web Programming. The code includes HTML markup for the website layout including navigation menus, headers, images, and product listings. It contains the student's name, student ID, and major listed at the top.

Uploaded by

Mega Lidia Lubis
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 31

UJIAN AKHIR SEMESTER PEMWEB

NAMA : Ilham Arifin Setiawan

NIM : 20040153

JURUSAN : Teknik Informatika

Berikut Hasil Program:


Perintah :
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title> ilham</title>

<meta content="width=device-width, initial-scale=1.0" name="viewport">

<meta content="eCommerce HTML Template Free Download" name="keywords">

<meta content="eCommerce HTML Template Free Download" name="description"

<!-- Favicon -->

<link href="img/favicon.ico" rel="icon">

<!-- Google Fonts -->

<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,400|Source+Code+Pro:700,900&dis
play=swap" rel="stylesheet">

<!-- CSS Libraries -->

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
rel="stylesheet">

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css"
rel="stylesheet">

<link href="lib/slick/slick.css" rel="stylesheet">

<link href="lib/slick/slick-theme.css" rel="stylesheet">

<!-- Template Stylesheet -->

<link href="css/style.css" rel="stylesheet">

</head>

<body>

<!-- Top bar Start -->

<div class="top-bar">

<div class="container-fluid">

<div class="row">

<div class="col-sm-6">
<i class="fa fa-envelope"></i>

Nama : Ilham Arifin Setiawan

</div>

<div class="col-sm-6">

<i class="fa fa-phone-alt"></i>

Nim : 20040153

</div>

</div>

</div>

</div>

<!-- Top bar End -->

<!-- Nav Bar Start -->

<div class="nav">

<div class="container-fluid">

<nav class="navbar navbar-expand-md bg-dark navbar-dark">

<a href="#" class="navbar-brand">MENU</a><img


src="C:/Users/THOSIBA/Pictures/gambar/88.jpg" style="width:100px;height:100px ;

<button type="button" class="navbar-toggler" data-toggle="collapse" data-


target="#navbarCollapse">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">

<div class="navbar-nav mr-auto">

<a href="index.html" class="nav-item nav-link active">Home</a>

<a href="product-list.html" class="nav-item nav-link">Products</a>

<a href="product-detail.html" class="nav-item nav-link">Product Detail</a>

<a href="checkout.html" class="nav-item nav-link">Checkout</a>

<a href="my-account.html" class="nav-item nav-link">My Account</a>

</div>

</div>

<div class="navbar-nav ml-auto">


<div class="nav-item dropdown">

<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">User Account</a>

<div class="dropdown-menu">

<a href="#" class="dropdown-item">Login</a>

<a href="#" class="dropdown-item">Register</a>

</div>

</div>

</div>

</div>

</nav>

</div>

</div>

<!-- Nav Bar End -->

<!-- Bottom Bar Start -->

<div class="bottom-bar">

<div class="container-fluid">

<div class="row align-items-center">

<div class="col-md-3">

<div class="logo">

<a href="index.html">

<img src="img/logo.png" alt="Logo">

</a>

</div>

</div>

<div class="col-md-6">

<div class="search">

<input type="text" placeholder="Search">

<button><i class="fa fa-search"></i></button>

</div>

</div>

<div class="col-md-3">
<div class="user">

<a href="wishlist.html" class="btn wishlist">

<i class="fa fa-heart"></i>

<span>(0)</span>

</a>

<a href="cart.html" class="btn cart">

<i class="fa fa-shopping-cart"></i>

<span>(0)</span>

</a>

</div>

</div>

</div>

</div>

</div>

<!-- Bottom Bar End -->

<!-- Main Slider Start -->

<div class="header">

<div class="container-fluid">

<div class="row">

<div class="col-md-3">

<nav class="navbar bg-light">

<ul class="navbar-nav">

<li class="nav-item">

<a class="nav-link" href="#"><i class="fa fa-home"></i>Home</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#"><i class="fa fa-female"></i>Fashion & Beauty</a>

</li>

<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-child"></i>Kids & Babies Clothes</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#"><i class="fa fa-tshirt"></i>Men & Women


Clothes</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#"><i class="fa fa-mobile-alt"></i>Gadgets &


Accessories</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#"><i class="fa fa-microchip"></i>Electronics &


Accessories</a>

</li>

</ul>

</nav>

</div>

<div class="col-md-6">

<div class="header-slider normal-slider">

<div class="header-slider-item">

<img src="img/slider-1.jpg" alt="Slider Image" />

<div class="header-slider-caption">

<p>ayo belanja online </p>

<a class="btn" href=""><i class="fa fa-shopping-cart"></i>Shop Now</a>

</div>

</div>

<div class="header-slider-item">

<img src="img/slider-2.jpg" alt="Slider Image" />

<div class="header-slider-caption">

<p>mudah dan terjamin</p>

<a class="btn" href=""><i class="fa fa-shopping-cart"></i>Shop Now</a>

</div>
</div>

<div class="header-slider-item">

<img src="img/slider-3.jpg" alt="Slider Image" />

<div class="header-slider-caption">

<p> gak ribet </p>

<a class="btn" href=""><i class="fa fa-shopping-cart"></i>Shop Now</a>

</div>

</div>

</div>

</div>

<div class="col-md-3">

<div class="header-img">

<div class="img-item">

<img src="C:/Users/THOSIBA/Pictures/gambar/22.jpg" />

<a class="img-text" href="">

</a>

</div>

</a>

</div>

</div>

</div>

</div>

</div>

</div>

<!-- Category End-->

<!-- Call to Action Start -->

<div class="call-to-action">

<div class="container-fluid">

<div class="row align-items-center">

<div class="col-md-6">
<h1>silakan Hibungi</h1>

</div>

<div class="col-md-6">

<a href="tel:0123456789">0858-3226-8280</a>

</div>

</div>

</div>

</div>

<!-- Call to Action End -->

<!-- Featured Product Start -->

<div class="featured-product product">

<div class="container-fluid">

<div class="section-header">

<h1>Berikut beberapa gambar yang dijual:</h1>

</div>

<div class="row align-items-center product-slider product-slider-4">

<div class="col-lg-3">

<div class="product-item">

<div class="product-title">

<a href="#"> Baju Couple Aima </a>

<div class="ratting">

<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 class="product-image">

<a href="product-detail.html">
<img src="C:/Users/THOSIBA/Pictures/gambar/23.jpg" alt="Product Image">

</a>

<div class="product-action">

<a href="#"><i class="fa fa-cart-plus"></i></a>

<a href="#"><i class="fa fa-heart"></i></a>

<a href="#"><i class="fa fa-search"></i></a>

</div>

</div>

<div class="product-price">

<h3><span>Rp</span>150.000</h3>

<a class="btn" href=""><i class="fa fa-shopping-cart"></i>Buy Now</a>

</div>

</div>

</div>

<div class="col-lg-3">

<div class="product-item">

<div class="product-title">

<a href="#">Dress Korea</a>

<div class="ratting">

<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 class="product-image">

<a href="product-detail.html">

<img src="C:/Users/THOSIBA/Pictures/gambar/24.jpg" alt="Product Image">

</a>

<div class="product-action">
<a href="#"><i class="fa fa-cart-plus"></i></a>

<a href="#"><i class="fa fa-heart"></i></a>

<a href="#"><i class="fa fa-search"></i></a>

</div>

</div>

<div class="product-price">

<h3><span>Rp</span>125.000</h3>

<a class="btn" href=""><i class="fa fa-shopping-cart"></i>Buy Now</a>

</div>

</div>

</div>

<div class="col-lg-3">

<div class="product-item">

<div class="product-title">

<a href="#">Kemeja Pique</a>

<div class="ratting">

<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 class="product-image">

<a href="product-detail.html">

<img src="C:/Users/THOSIBA/Pictures/gambar/26.jpg" alt="Product Image">

</a>

<div class="product-action">

<a href="#"><i class="fa fa-cart-plus"></i></a>

<a href="#"><i class="fa fa-heart"></i></a>

<a href="#"><i class="fa fa-search"></i></a>


</div>

</div>

<div class="product-price">

<h3><span>Rp</span>159.000</h3>

<a class="btn" href=""><i class="fa fa-shopping-cart"></i>Buy Now</a>

</div>

</div>

</div>

<div class="col-lg-3">

<div class="product-item">

<div class="product-title">

<a href="#">keiko Top Atasan</a>

<div class="ratting">

<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 class="product-image">

<a href="product-detail.html">

<img src="C:/Users/THOSIBA/Pictures/gambar/28.jpg" alt="Product Image">

</a>

<div class="product-action">

<a href="#"><i class="fa fa-cart-plus"></i></a>

<a href="#"><i class="fa fa-heart"></i></a>

<a href="#"><i class="fa fa-search"></i></a>

</div>

</div>

<div class="product-price">
<h3><span>Rp</span>85.000</h3>

<a class="btn" href=""><i class="fa fa-shopping-cart"></i>Buy Now</a>

</div>

</div>

</div>

<div class="col-lg-3">

<div class="product-item">

<div class="product-title">

<a href="#">Sepatu Pria Sneakers</a>

<div class="ratting">

<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 class="product-image">

<a href="product-detail.html">

<img src="C:/Users/THOSIBA/Pictures/gambar/29.jpg" alt="Product Image">

</a>

<div class="product-action">

<a href="#"><i class="fa fa-cart-plus"></i></a>

<a href="#"><i class="fa fa-heart"></i></a>

<a href="#"><i class="fa fa-search"></i></a>

</div>

</div>

<div class="product-price">

<h3><span>Rp</span>210.000</h3>

<a class="btn" href=""><i class="fa fa-shopping-cart"></i>Buy Now</a>

</div>
</div>

</div>

</div>

</div>

</div>

<!-- Featured Product End -->

<!-- Newsletter Start -->

<div class="newsletter">

<div class="container-fluid">

<div class="row">

<div class="col-md-6">

<h1>ayoo berlanganan</h1>

</div>

<div class="col-md-6">

<div class="form">

<input type="email" value="Your email here">

<button>Submit</button>

</div>

</div>

</div>

</div>

</div>

<!-- Newsletter End -->

<!-- Recent Product Start -->

<div class="recent-product product">

<div class="container-fluid">

<div class="section-header">

<h1>Barang keluaran terbaru</h1>

</div>

<div class="row align-items-center product-slider product-slider-4">


<div class="col-lg-3">

<div class="product-item">

<div class="product-title">

<a href="#">Kemeja Pria</a>

<div class="ratting">

<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 class="product-image">

<a href="product-detail.html">

<img src="C:/Users/THOSIBA/Pictures/gambar/30.jpg"alt="Product Image">

</a>

<div class="product-action">

<a href="#"><i class="fa fa-cart-plus"></i></a>

<a href="#"><i class="fa fa-heart"></i></a>

<a href="#"><i class="fa fa-search"></i></a>

</div>

</div>

<div class="product-price">

<h3><span>Rp</span>79.000</h3>

<a class="btn" href=""><i class="fa fa-shopping-cart"></i>Buy Now</a>

</div>

</div>

</div>

<div class="col-lg-3">

<div class="product-item">

<div class="product-title">
<a href="#">Baju Couple Keluarga</a>

<div class="ratting">

<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 class="product-image">

<a href="product-detail.html">

<img src="C:/Users/THOSIBA/Pictures/gambar/21.jpg" alt="Product Image">

</a>

<div class="product-action">

<a href="#"><i class="fa fa-cart-plus"></i></a>

<a href="#"><i class="fa fa-heart"></i></a>

<a href="#"><i class="fa fa-search"></i></a>

</div>

</div>

<div class="product-price">

<h3><span>Rp</span>320.000</h3>

<a class="btn" href=""><i class="fa fa-shopping-cart"></i>Buy Now</a>

</div>

</div>

</div>

<div class="col-lg-3">

<div class="product-item">

<div class="product-title">

<a href="#">Hils cewek Modern</a>

<div class="ratting">

<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 class="product-image">

<a href="product-detail.html">

<img src="C:/Users/THOSIBA/Pictures/gambar/53.jpg" alt="Product Image">

</a>

<div class="product-action">

<a href="#"><i class="fa fa-cart-plus"></i></a>

<a href="#"><i class="fa fa-heart"></i></a>

<a href="#"><i class="fa fa-search"></i></a>

</div>

</div>

<div class="product-price">

<h3><span>Rp</span>175.000</h3>

<a class="btn" href=""><i class="fa fa-shopping-cart"></i>Buy Now</a>

</div>

</div>

</div>

</div>

</div>

</div>

<!-- Review End -->

<!-- Footer Start -->

<div class="footer">

<div class="container-fluid">

<div class="row">
<div class="col-lg-3 col-md-6">

<div class="footer-widget">

<h2>Get in Touch</h2>

<div class="contact-info">

<p><i class="fa fa-map-marker"></i> E Store</p>

<p><i class="fa fa-envelope"></i>ilhamsetiawanarifin@gmail.com</p>

<p><i class="fa fa-phone"></i>0858-3226-8280</p>

</div>

</div>

</div>

<div class="row payment align-items-center">

<div class="col-md-6">

<div class="payment-method">

<h2>We Accept:</h2>

<img src="img/payment-method.png" alt="Payment Method" />

</div>

</div>

<div class="col-md-6">

<div class="payment-security">

<h2>Secured By:</h2>

<img src="img/godaddy.svg" alt="Payment Security" />

<img src="img/norton.svg" alt="Payment Security" />

<img src="img/ssl.svg" alt="Payment Security" />

</div>

</div>

</div>

</div>

</div>

<!-- Back to Top -->

<a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>


<!-- JavaScript Libraries -->

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>

<script src="lib/easing/easing.min.js"></script>

<script src="lib/slick/slick.min.js"></script>

</body>

</html>

Gambar source kode:

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy