TUGAS PWEB-D MINGGU KE-4 (MEMBUAT CATALOG E-COMMERCE CSS)
TUGAS PWEB-D MINGGU KE-4 (MEMBUAT CATALOG E-COMMERCE CSS)
Pada minggu keempat pemrograman web kelas D ditugaskan membuat katalog e-commerce dengan menggunakan css. Disini saya memiliki 4 file dan 1 folder.
Link Repository : https://github.com/bagusistighfar86/bagusistighfar86.github.io/tree/main/pweb-d/pertemuan4
Link Web : https://bagusistighfar86.github.io/pweb-d/pertemuan4/
1. index.html
Menyimpan code main dari website ini
<!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>Latihan Catalog Olshop CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container cf">
<div class="header">
<img src="img/logo.png" alt="Logo Clothes">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">SHOP</a></li>
<li><a href="#">PRODUCTS</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">PAGES</a></li>
</ul>
<div class="search">
<img src="img/find.png" alt="find icon">
<input type="text">
</div>
</div>
<div class="hero">
<div class="text">
<p>Men Collection</p>
<h1>A simple guide</h1>
<h1>to Minimalist style</h1>
<button><a href="#">SHOP NOW</a></button>
</div>
</div>
<div class="categories cf">
<a href="#">
<div class="spring">
<p>Spring Collection</p>
</div>
</a>
<a href="#">
<div class="basic">
<p>Basic Minimalist</p>
</div>
</a>
<a href="#">
<div class="accessories">
<p>Accessories</p>
</div>
</a>
</div>
<h2 class="trending">Trending Products</h2>
<div class="product">
<div class="b1 cf">
<a href="#">
<div class="p1">
<div class="text">
<h2 class="tp1">Erigo Shirt</h2>
<p>Rp 200.000,-</p>
</div>
</div>
</a>
<a href="#">
<div class="p2">
<div class="text">
<h2 class="tp2">Sling Bag</h2>
<p>Rp 100.000,-</p>
</div>
</div>
</a>
<a href="#">
<div class="p3">
<div class="text">
<h2 class="tp3">Stark Eye Glasses</h2>
<p>Rp 300.000,-</p>
</div>
</div>
</a>
<a href="#">
<div class="p4">
<div class="text">
<h2 class="tp4">Gucci Shoes</h2>
<p>Rp 400.000,-</p>
</div>
</div>
</a>
<a href="#">
<div class="p5">
<div class="text">
<h2 class="tp5">Nike Shoes</h2>
<p>Rp 700.000,-</p>
</div>
</div>
</a>
</div>
<div class="b2 cf">
<a href="#">
<div class="p1">
<div class="text">
<h2 class="tp1">Blue Hat</h2>
<p>Rp 50.000,-</p>
</div>
</div>
</a>
<a href="#">
<div class="p2">
<div class="text">
<h2 class="tp2">Men Vest</h2>
<p>Rp 100.000,-</p>
</div>
</div>
</a>
<a href="#">
<div class="p3">
<div class="text">
<h2 class="tp3">Fitness Tight Sport</h2>
<p>Rp 100.000,-</p>
</div>
</div>
</a>
<a href="#">
<div class="p4">
<div class="text">
<h2 class="tp4">USA Basketball Jersey</h2>
<p>Rp 500.000,-</p>
</div>
</div>
</a>
<a href="#">
<div class="p5">
<div class="text">
<h2 class="tp5">Cargo Pants</h2>
<p>Rp 340.000,-</p>
</div>
</div>
</a>
</div>
</div>
<div class="footer">
<div class="shop">
<h2>SHOP</h2>
<ul>
<li><a href="#">Spring Collection</a></li>
<li><a href="#">Winter Collectio</a></li>
<li><a href="#">Basic Minimalist</a></li>
<li><a href="#">Formal Suit</a></li>
<li><a href="#">Sport Collection</a></li>
</ul>
</div>
<div class="supports">
<h2>SUPPORTS</h2>
<ul>
<li><a href="#">Store Locator</a></li>
<li><a href="#">Order Status</a></li>
</ul>
</div>
<div class="company">
<h2>COMPANY</h2>
<ul>
<li><a href="#">Customer Services</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Carrers</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Sustainbility</a></li>
<li><a href="#">ِAffiliates</a></li>
<li><a href="#">Recall Info</a></li>
</ul>
</div>
<div class="contact">
<h2>CONTACT</h2>
<h3>Email</h3>
<a href="#">Contact Us </a>
<h3>Telephone</h3>
<a href="#">08123456789</a>
<h3>Address</h3>
<a href="#">1588 South Coast Dr</a>
<a href="#">Costa Mesa, CA 96278</a>
</div>
<img src="img/logo.png" alt="logo">
</div>
</body>
</html>
2. style.css
Menyimpan code style berupa css untuk menambah hiasan pada tampilan HTML
@import url(reset.css);
@import url(clearfix.css);
* {box-sizing: border-box;}
.container {
/* background-color: black; */
margin : auto;
width : 100%;
}
.header {
height: 100px;
background-color: black;
}
.header img{
height: 40px;
margin: 25px;
float: left;
}
.header ul li a{
color: white;
text-decoration: none;
padding: 0 20px;
}
.header ul li{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 22px;
display: inline-block;
margin-top: 35px;
margin-left: auto;
}
.header ul{
width: fit-content;
margin: 0 auto;
}
.header .search input{
border-radius: 100px;
border: none;
}
div.search{
margin-top: -25px;
}
.search input{
float: right;
padding: 10px;
}
.search img{
float: right;
margin-top: 0px;
}
.hero{
background-image: url(img/hero.png);
background-size: 900px;
background-position: 800px -50px;
background-repeat: no-repeat;
height: 500px;
background-color: rgb(251, 240, 231);
}
.hero .text{
/* background-color: blue; */
padding-top: 130px;
float: left;
margin-left: 300px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.hero .text p{
padding-bottom: 25px;
font-size: 25px;
color: rgb(168, 168, 168);
}
.hero .text h1{
padding-bottom: 5px;
font-size: 45px;
font-weight: bold;
}
.hero .text button{
font-size: 15px;
font-weight: bold;
color: rgb(251, 240, 231);
margin-top: 25px;
padding: 15px 25px;
border-radius: 15px;
border: 0;
background-color: black;
}
.hero .text button:hover{
color: rgb(251, 240, 231);
background-color: rgba(0, 0, 0, 0.623);
}
.hero a{
text-decoration: none;
color: rgb(251, 240, 231);
}
.categories .spring{
width: 600px;
height: 250px;
margin-left: 20px;
padding-left: 20px;
background-color: #EDDBD9;
float: left;
}
.categories .basic{
width: 600px;
height: 250px;
margin-left: 20px;
padding-left: 20px;
background-color: #D9DBED;
float: left;
}
.categories .accessories{
width: 600px;
height: 250px;
margin-left: 20px;
padding-left: 20px;
background-color: #EDD9DB;
float: left;
}
.categories {
margin: 20px 20px;
}
.categories div{
background-repeat: no-repeat;
}
.categories .spring{
background-image: url(img/spring.png);
background-size: 400px;
background-position: 200px -20px;
}
.categories .basic{
background-image: url(img/basic.png);
background-size: 700px;
background-position: 100px -50px;
}
.categories .accessories{
background-image: url(img/eyeglass.png);
background-size: 520px;
background-position: 120px -25px;
}
.categories p{
margin-top: 150px;
margin-left: 20px;
font-size: 30px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
h2.trending{
padding: 50px;
font-weight: bold;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 25px;
text-align: center;
}
.product .b1 .p1{
background-image: url(img/erigo.png);
background-repeat: no-repeat;
background-size: cover;
background-position: -10px 0px;
background-color: #EDECEC;
width: 250px;
height: 270px;
margin: 0 25px;
float: left;
}
.product .b1 .p2{
background-image: url(img/sling.png);
background-repeat: no-repeat;
background-size: cover;
background-position: -10px 0px;
background-color: #F2F2F2;
width: 250px;
height: 270px;
margin: 0 25px;
float: left;
}
.product .b1 .p3{
background-image: url(img/stark.png);
background-repeat: no-repeat;
background-size: cover;
background-position: -10px 10px;
background-color: #F3F1E7;
width: 250px;
height: 270px;
margin: 0 25px;
float: left;
}
.product .b1 .p4{
background-image: url(img/guccishoes.png);
background-repeat: no-repeat;
background-size: cover;
background-position: -15px 5px;
background-color: #F5F5F5;
width: 250px;
height: 270px;
margin: 0 25px;
float: left;
}
.product .b1 .p5{
background-image: url(img/nikeshoe.png);
background-repeat: no-repeat;
background-size: cover;
background-position: -10px 0px;
background-color: #F5F4F0;
width: 250px;
height: 270px;
margin: 0 25px;
float: left;
}
.product .b2 .p1{
background-image: url(img/bluehat.png);
background-repeat: no-repeat;
background-size: cover;
background-position: -10px 0px;
background-color: #F5F5F5;
width: 250px;
height: 270px;
margin: 0 25px;
float: left;
}
.product .b2 .p2{
background-image: url(img/vest.png);
background-repeat: no-repeat;
background-size: cover;
background-position: -10px 0px;
background-color: #F3F1E7;
width: 250px;
height: 270px;
margin: 0 25px;
float: left;
}
.product .b2 .p3{
background-image: url(img/tight.png);
background-repeat: no-repeat;
background-size: cover;
background-position: -10px 0px;
background-color: #F1F2F2;
width: 250px;
height: 270px;
margin: 0 25px;
float: left;
}
.product .b2 .p4{
background-image: url(img/jersey.png);
background-repeat: no-repeat;
background-size: cover;
background-position: -10px 0px;
background-color: #EDECEC;
width: 250px;
height: 270px;
margin: 0 25px;
float: left;
}
.product .b2 .p5{
background-image: url(img/cargo.png);
background-repeat: no-repeat;
background-size: cover;
background-position: -15px 0px;
background-color: #F5F5F5;
width: 250px;
height: 270px;
margin: 0 25px;
float: left;
}
.product .b2{
margin-top: 100px;
}
.product{
margin-left: 200px;
}
.product .text h2{
font-size: 25px;
font-weight: bold;
}
.product .text p{
margin-top: 10px;
font-size: 15px;
}
.product .text{
padding-top: 290px;
width: max-content;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
/* background-color: salmon; */
}
.footer{
margin-top: 200px;
width: 100%;
height: 350px;
background-color: black;
padding-top: 50px;
}
.footer h2{
font-size: 20px;
font-weight: bold;
color: white;
}
.footer li{
margin-top: 10px;
}
.footer a{
color: #707070;
text-decoration: none;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.footer h3{
font-size: 15px;
font-weight: bold;
color: white;
}
.footer div{
margin: 0 50px;
width: max-content;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
float: left;
}
.footer .contact a{
display: inline-block;
padding-top: 10px;
}
.footer .contact h3,a{
padding-top: 25px;
}
.footer img{
height: 100px;
margin-left: 200px;
margin-top: 0px;
}
3. reset.css
Menyimpan code untuk reset setting style html agar lebih mudah dalam memodifikasi css. Code ini saya dapatkan dari https://meyerweb.com/eric/tools/css/reset/. Dan informasi ini saya dapatkan dari youtube Sandhika Galih Web Programming UNPAS
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
4. clearfix.css
Untuk menyimpan code clear yang saya dapatkan dari http://nicolasgallagher.com/micro-clearfix-hack/
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
5. Folder gambar untuk menyimpan resource gambar
Komentar
Posting Komentar