TUGAS 3 PWEB
Muhammmad Valda Rizky
05111940000115
Tugas 3 PWEB
Screenshoot:
Kodingan:
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>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<section>
<div class="container">
<div class="navbar">
<div class="logo">
<img src="https://image.flaticon.com/icons/png/512/1215/1215505.png" width="125px" />
</div>
<nav>
<ul>
<a href="">Beranda</a></li>
<a href="">Produk</a></li>
<a href="">Kontak</a></li>
</ul>
</nav>
</div>
</div>
<div class="baris-1">
<div class="row">
<div class="row py-5">
<div class="col-3">
<div class="card">
<img src="https://d2xjmi1k71iy2m.cloudfront.net/dairyfarm/id/images/520/0152020_PE310348_S4.jpg" class="card-img-top mt-5" height="188" width="188" alt="" />
<div class="card-body">
<h4 style="font-family: 'Josefin Sans';">Camden</h4>
<p class="card-text">US$ 45.99</p>
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<img src="https://d2xjmi1k71iy2m.cloudfront.net/dairyfarm/id/images/348/0634896_PE696809_S4.jpg" class="card-img-top mt-5" height="188" width="188" alt="" />
<div class="card-body">
<h4 style="font-family: 'Josefin Sans';">Southwark</h4>
<p class="card-text">US$ 45.99</p>
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<img src="https://d2xjmi1k71iy2m.cloudfront.net/dairyfarm/id/images/254/0325432_PE517964_S4.jpg" class="card-img-top mt-5" height="188" width="188" alt="" />
<div class="card-body">
<h4 style="font-family: 'Josefin Sans';">Westminster</h4>
<p class="card-text">US$ 70.99</p>
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<img src="https://d2xjmi1k71iy2m.cloudfront.net/dairyfarm/id/images/085/0908542_PE783275_S4.jpg" class="card-img-top mt-5" height="188" width="188" alt="" />
<div class="card-body">
<h4 style="font-family: 'Josefin Sans';">Kensington</h4>
<p class="card-text">US$ 70.99</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="footer">
<p>© Copyright muahh</p>
</div>
</html>
CSS:
section ul {
margin: 10px;
padding-top: 2%;
padding-bottom: 2%;
float: left;
list-style-type: none;
border: 2px solid rgb(236, 143, 143);
border-radius: 5%;
font-family: "Helvetica Neue", HelveticaNeue, Helvetica, "Noto Sans", Roboto, Arial, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "30D230E930AE30CE89D230B4 Pro W3", "Noto Sans CJK JP", Osaka, Meiryo, "30E130A430EA30AA", "MS PGothic",
"FF2DFF33 FF3030B430B730C330AF", "Hiragino Sans GB", "Arial Unicode MS", sans-serif;
border: 1px solid;
box-shadow: 5px 4px #caf5ae;
}
section ul a {
text-decoration: none;
}
a {
font-weight: bold;
padding: 2px;
margin: 5px;
}
b {
font-weight: normal;
}
nav a:hover,
nav a:active {
font-size: 150%;
}
.navbar {
display: flex;
align-items: center;
padding: 20px;
background-color: #a78927;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
.container {
max-width: 1300px;
margin: auto;
padding-left: 25px;
padding-right: 25px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
border: none;
display: inline-block;
margin-right: 20px;
box-shadow: none;
}
.footer {
background-color: #c6f777;
color: gray;
font-size: 16px;
padding: auto;
text-align: center;
font-size: medium;
clear: both;
position: relative;
height: 25px;
}
.baris-1 {
display: block;
padding-top: 10px;
text-align: center;
}
a:visited {
color: black;
background-color: transparent;
text-decoration: none;
}
Komentar
Posting Komentar