1. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="style.css" rel="stylesheet" />
<title>ONION FRESHMILK</title>
<link rel="icon" href="img/Logo.png" type="image/x-icon" />
</head>
<body>
<div class="container">
<header class="main-header clearfix">
<h1>🥛 ONION FRESHMILK</h1>
<nav>
<!-- <strong>This is the navigation</strong> -->
</nav>
<!-- <div class="clear"></div> -->
</header>
<!-- ONLY NECESSARY FOR FLEXBOX -->
<!-- <div class="row"> -->
<article>
<div class="bag1">
<header class="post-header">
<h2>
Onion susu segar kekinian, rasakan bedanya. The choice is yours🤗
</h2>
<img
src="img/a4.JPG"
alt="Susu3"
width="100"
height="150"
class="post-img"
/>
<button>❤️ Like</button>
</header>
</div>
<!--<p class="sp1">
Onionfreshmilk susu segar kekinian, rasakan bedanya.
The choice is yours🤗
</p> -->
<div class="bag2">
<h3>Apa itu Onion Freshmilk?</h3>
<img src="img/a2.JPG" alt="susu3" />
<img src="img/a3.JPG" alt="susu2" />
<img src="img/6.JPG" alt="susu5" />
<p>
Onion Fresh Milk adalah olahan susu dengan banyak varian rasa yang
kemudian diberi toping, Onion Freshmilk memiliki rasa yang tidak
pasaran karena Owner meracik sendiri semua varian rasa yang ada
sehinnga memiliki rasa yang khas. Selain dari banyaknya rasa
tentunya Susu dari Onion Freshmilk mengandung banyak manfaat karena
susu yang digunakan adalah susu pasteurisasi(susu yang dipanaskan
sekali) sehingga masih terdapat banyak kandungan gizi di dalamnya.
</p>
</div>
<div class="bag3">
<h3>PROFILE</h3>
<p style="text-align: justify">
<img src="img/Logo.png" style="float: left; margin: 0 9px 3px 0" />
</p>
<ul>
<li>Nama UMKM : Onion Fresh Milk</li>
<li>
Alamat UMKM : Jl. Sawo No. 33 RT 01/ RW 04, Tegalrejo, Kec.
Argomulyo, Kota Salatiga, Jawa Tengah.
</li>
<li>Nama Pemilik : Bp. Andre Kurniawan</li>
<li>Jenis Usaha : Minuman(Susu Segar Kekinian)</li>
</ul>
</div>
<div class="bag4">
<h3>TESTIMONI</h3>
<img src="img/t1.png" alt="susu3" />
</div>
<div class="bag5">
<h3>PEMBELIAN</h3>
<a
href="https://api.whatsapp.com/send/?phone=6281326660666&text&type=phone_number&app_absent=0"
style="
color: #54bbff;
text-decoration: none;
border: 2px solid #54bbff;
border-radius: 4px;
padding: 8px 264px;
font-size: 30px;
padding-left: 250px;
"
>WhatsApp</a
>
<a
href="https://gofood.co.id/semarang/restaurant/onion-fresh-milk-argomulyo-6524c3f9-7d88-41f6-930d-b86748572d93"
style="
color: #54bbff;
text-decoration: none;
border: 2px solid #54bbff;
border-radius: 4px;
padding: 8px 264px;
font-size: 30px;
padding-left: 250px;
"
>GO-FOOD</a
>
</div>
</article>
<!-- </div> -->
<footer>
<p id="copyright" class="copyright text">
Aryadipura Gaharu - 8801202205
</p>
</footer>
</div>
</body>
</html>
2. CSS
* {
/* border-top: 10px solid #1098ad; */
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* PAGE SECTIONS */
body {
color: #444;
font-family: sans-serif;
border-top: 10px solid #e9d94a;
position: relative;
}
.container {
width: 1500px;
/* margin-left: auto;
margin-right: auto; */
margin: 0 auto;
}
.main-header {
background-color: #f7f7f7;
/* padding: 20px;
padding-left: 40px;
padding-right: 40px; */
padding: 20px 40px;
/* margin-bottom: 60px; */
/* height: 80px; */
}
nav {
font-size: 18px;
/* text-align: center; */
}
article {
/* margin-bottom: 60px; */
}
.post-header {
margin-bottom: 40px;
/* position: relative; */
}
aside {
background-color: #f7f7f7;
border-top: 5px solid #1098ad;
border-bottom: 5px solid #1098ad;
padding: 50px 40px;
}
/* SMALLER ELEMENTS */
/* Posisi Judul*/
h1 {
position: relative;
padding-left: 500px;
}
h2 {
margin-top: 10px;
text-align: center;
color: #1098ad;
}
h3 {
color: #1098ad;
}
h1 {
font-size: 40px;
text-transform: uppercase;
}
h2 {
font-size: 65px;
margin-bottom: 20px;
}
h3 {
font-size: 30px;
margin-bottom: 20px;
margin-top: 40px;
}
h4 {
font-size: 20px;
text-transform: uppercase;
text-align: center;
margin-bottom: 30px;
}
p {
font-size: 25px;
line-height: 1.5;
margin-bottom: 15px;
}
.sp1 {
font-size: 35px;
}
ul,
ol {
margin-left: 50px;
margin-bottom: 20px;
}
li {
font-size: 20px;
margin-bottom: 10px;
/* display: inline; */
}
li:last-child {
margin-bottom: 0;
}
/* footer p {
font-size: 16px;
} */
/* article header p {
font-style: italic;
} */
#copyright {
font-size: 16px;
}
/* ul {
list-style: none;
} */
.related {
list-style: none;
margin-left: 0;
}
body {
/* background-color: orangered; */
}
/* .first-li {
font-weight: bold;
} */
li:first-child {
font-weight: bold;
}
li:last-child {
font-style: italic;
}
li:nth-child(even) {
/* color: red; */
}
/* Misconception: this won't work! */
article p:first-child {
color: red;
}
/* Styling links */
a:link {
color: #1098ad;
text-decoration: none;
}
a:visited {
/* color: #777; */
color: #1098ad;
}
a:hover {
color: orangered;
font-weight: bold;
text-decoration: underline orangered;
}
a:active {
background-color: black;
font-style: italic;
}
/* LVHA */
.post-img {
width: 100%;
height: auto;
}
nav a:link {
/* background-color: orangered;
margin: 20px;
padding: 20px;
display: block; */
margin-right: 30px;
display: inline-block;
}
nav a:link:last-child {
margin-right: 0;
}
button {
font-size: 22px;
padding: 20px;
cursor: pointer;
position: absolute;
/* top: 50px;
left: 50px; */
bottom: 50px;
right: 50px;
}
h1::first-letter {
font-style: normal;
margin-right: 5px;
}
h3 + p::first-line {
/* color: red; */
}
h2 {
/* background-color: orange; */
position: relative;
}
h2::before {
content: "TOP";
background-color: #ffe70e;
color: #444;
font-size: 16px;
font-weight: bold;
display: inline-block;
padding: 5px 10px;
position: absolute;
top: -10px;
right: -25px;
}
/* Resolving conflicts */
/* #copyright {
color: red;
}
.copyright {
color: blue;
}
.text {
color: yellow;
}
footer p {
color: green !important;
} */
/* nav a:link,
nav p {
font-size: 18px;
} */
/* FLOATS */
/*
.author-img {
float: left;
margin-bottom: 20px;
}
.author {
float: left;
margin-top: 10px;
margin-left: 20px;
}
h1 {
float: left;
}
nav {
float: right;
}
.clear {
clear: both;
}
.clearfix::after {
clear: both;
content: "";
display: block;
}
article {
width: 825px;
float: left;
}
aside {
width: 300px;
float: right;
}
footer {
clear: both;
}
*/
/* FLEXBOX */
.main-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.author-box {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.author {
margin-bottom: 0;
margin-left: 15px;
}
.related-post {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px;
}
.related-link:link {
font-size: 17px;
font-weight: bold;
font-style: normal;
margin-bottom: 5px;
display: block;
}
.related-author {
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
font-style: italic;
}
/* FLEXBOX LAYOUT */
/* .row {
display: flex;
align-items: flex-start;
gap: 75px;
margin-bottom: 60px;
}
article {
flex: 1;
margin-bottom: 0;
}
aside {
DEFAULTS:
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
flex: 0 0 300px;
} */
/* CSS GRID LAYOUT */
.container {
display: flexbox;
grid-template-columns: 1fr 100px;
column-gap: 75px;
row-gap: 60px;
align-items: start;
}
.main-header {
/* grid-column: 1 / span 2; */
grid-column: 1 / -1;
}
article {
}
aside {
}
footer {
grid-column: 1 / -1;
}
.bag1 {
background-color: #e9d94a;
}
.bag2 {
display: flexbox;
background-color: #e9d94a;
padding-left: 100px;
margin: auto;
width: auto;
height: 980px;
}
.bag2 h3 {
text-align: center;
font-size: 80px;
}
.bag2 p {
text-align: left;
margin-right: 25px;
margin-top: 40px;
}
.bag2 img {
width: 30%;
}
.bag3 {
display: flexbox;
background-color: #e9d94a;
padding-left: 100px;
margin: auto;
width: auto;
height: 550px;
}
.bag3 h3 {
padding-top: 20px;
text-align: center;
font-size: 50px;
margin-top: 40px;
}
.bag3 img {
display: float-left;
width: 30%;
}
.bag3 ul {
padding-left: 450px;
padding-right: 300px;
padding-top: 50px;
text-align: justify;
size: 200px;
}
.bag3 li {
font-size: 30px;
}
.bag4 {
display: flexbox;
background-color: #e9d94a;
padding-left: 100px;
margin: auto;
width: auto;
height: 700px;
}
.bag4 h3 {
padding-top: 20px;
font-size: 40px;
text-align: center;
}
.bag4 img {
padding-left: 250px;
padding-top: 10px;
width: 75%;
}
.bag5 {
display: flexbox;
background-color: #e9d94a;
padding-left: 100px;
margin: auto;
width: auto;
height: 200px;
}
.bag5 h3 {
padding-top: 20px;
font-size: 40px;
text-align: center;
}
.bag5 a {
padding-left: 500px;
}
Komentar
Posting Komentar