PBL DESAIN GRAFIS

 INDEX.HMTL

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link href="style.css" rel="stylesheet" />

    <title>ONION FRESH MILK</title>
  </head>

  <body>
    <!--
    <h1>The Basic Language of the Web: HTML</h1>
    <h2>The Basic Language of the Web: HTML</h2>
    <h3>The Basic Language of the Web: HTML</h3>
    <h4>The Basic Language of the Web: HTML</h4>
    <h5>The Basic Language of the Web: HTML</h5>
    <h6>The Basic Language of the Web: HTML</h6>
    -->

    <div class="container">
      <header class="main-header clearfix">
        <h1>📘 Project Based Learning</h1>

        <nav>
          <!-- <strong>This is the navigation</strong> -->
          <a href="https://instagram.com/onionfreshmilk.id?igshid=YmMyMTA2M2Y=">social media</a>
         
          <a href="https://maps.app.goo.gl/JsFg5EGxM4ZDYpbu8">location</a>
   

        <!-- <div class="clear"></div> -->
      </header>

      <!-- ONLY NECESSARY FOR FLEXBOX -->
      <!-- <div class="row"> -->
      <article>
        <header class="post-header">
          <h2>ONION FRESH MILK</h2>

          <div class="author-box">
            <img
              src="img/logo onion.jpeg"
              alt="Headshot of Laura Jones"
              height="50"
              width="50"
              class="author-img"
            />

            <p id="author" class="author">
              Posted by <strong>sabilla ardani putri</strong> on thursday,
              december 15st 2022
            </p>
          </div>

          <img
            src="img/tiga foto.JPG"
            alt="HTML code on a screen"
            width="500"
            height="200"
            class="post-img"
          />
          <button>
            <a
            href="https://wa.me/qr/FMFUURX5747ZN1"
            target="_blank"
            >Whatsapp</a>
          </button>
       
        </header>

       
        <h3>CUMA 12.000 AJA!!!</h3>
        <p>Dengan 12.000 saja kamu sudah bisa mendapatkan freshmilk yang tentunya sangat enak, dengan berbagai toping yang bisa dipilih secara langsung, kamu bisa memilih boba atau jelly sebagai topingnya.</p>
       

        <p> bosan ngga sih beli susu gitu-gitu aja?, di Onion Freshmilk kalian bisa lihat pembuatannya secara langsung loh karena Onion Freshmilk menggunakan foodcar yang unik.
        </p>

        <img
              src="img/WhatsApp Image 2022-12-15 at 11.49.45.jpeg"
              alt="Headshot of Laura Jones"
              height="200"
              width="300"
              class="author-img"
            />
       
       

        <h3>VARIAN RASA ONION FRESHMILK</h3>

        <ol>
          <li>Original</li>
          <li>Vanilla</li>
          <li>Taro</li>
          <li>Strawberry</li>
          <li>Red Velvet</li>
          <li>Mango puding</li>
          <li>Banana</li>
          <li>Black Series</li>
          <li>Green Tea</li>
          <li>coffe</li>
          <li>Coconut Brown Sugar</li>
          <li>coffe klopo</li>
          <li>Bubblegum</li>
          <li>Chocolate</li>
          <li>Chocolate hazelnut</li>
          <li>Thai tea</li>
        </ol>

        <h3>KENAPA HARUS ONION FRESHMILK??</h3>
        <p>
          Onion menggunakan susu pasteurisasi (susu yang dipanaskan hanya satu kali) untuk produknya sehingga susu yang
        diolah masih memiliki gizi yang tinggi tapi tetap ramah diperut. dan
        bubuk rasa yang dipakai juga dibuat sendiri maka dari itu rasa rasanya
        sangat unik.

        </p>

        <h3>TESTIMONI ONION FRESHMILK</h3>
        <img
          src="img/TESTI 1.jpeg"
          alt="Headshot of Laura Jones"
          height="300"
          width="200"
        />
        <img
          src="img/TESTI 2.jpeg"
          alt="Headshot of Laura Jones"
          height="300"
          width="200"
          class="author-img"
        />
        <img
          src="img/TESTI 3.jpeg"
          alt="Headshot of Laura Jones"
          height="300"
          width="200"
          class="author-img"
        />
        <img
          src="img/TESTI 4.jpeg"
          alt="Headshot of Laura Jones"
          height="300"
          width="200"
          class="author-img"
        />

        <p>
          pesan Onion Freshmilk sekarang sebelum kehabisan</p>
          <a
            href="https://wa.me/qr/FMFUURX5747ZN1"
            target="_blank"
            >pesan sekarang</a
          >
   
      </article>

      <aside>
        <h4>BEST SELLER ONION FRESHMILK</h4>

        <ul class="related">
          <li class="related-post">
            <img
              src="img/chocolate.JPG"
              alt="Person programming"
              width="100"
              height="75"
            />
            <div>
              <p class="related-author">Onion Chocolate</p>
            </div>
          </li>
          <li class="related-post">
            <img src="img/taro.JPG" alt="Lightning" width="100" height="75" />
            <div>
              <p class="related-author">Onion Taro</p>
            </div>
          </li>
          <li class="related-post">
            <img
              src="img/banana.JPG"
              alt="JavaScript code on a screen"
              width="100"
              height="75"
            />
            <div>
              <p class="related-author">Onion Banana</p>
            </div>
          </li>
        </ul>
      </aside>
      <!-- </div> -->

      <footer>
        <p id="copyright" class="copyright text">
          Copyright &copy; 2027 by The Code Magazine.
        </p>
      </footer>
    </div>
  </body>
</html>

STYLE.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 #ffc400;
  position: relative;
}

.container {
  width: 1200px;
  /* 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 #ffc400;
  border-bottom: 5px solid #ffc400;
  padding: 50px 40px;
}

/* SMALLER ELEMENTS */
h1,
h2,
h3 {
  color: #ffc400;
}

h1 {
  font-size: 26px;
  text-transform: uppercase;
  font-style: italic;
}

h2 {
  font-size: 40px;
  margin-bottom: 30px;
}

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: 22px;
  line-height: 1.5;
  margin-bottom: 15px;
}

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;
} */

#author {
  font-style: italic;
  font-size: 18px;
}

#copyright {
  font-size: 16px;
}

.related-author {
  font-size: 18px;
  font-weight: bold;
}

/* 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: #f8cc07;
  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: #f8cc07
  ;
}

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: grid;
  grid-template-columns: 1fr 300px;
  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;
}

HASIL


























Komentar

Posting Komentar

Postingan populer dari blog ini

Local File Inclusion (LFI) & Remote File Inclusion (RFI) - Sabilla Ardani Putri

Gambar
Local File Inclusion (LFI) & Remote File Inclusion (RFI) Definisi  Local File Inclusion (LFI)   Local File Inclusion (LFI) adalah celah keamanan yang terjadi ketika aplikasi web memungkinkan pengguna untuk memasukkan file lokal dari server melalui input yang tidak divalidasi. Penyerang bisa mengeksploitasi ini untuk membaca file sensitif atau bahkan mengeksekusi kode berbahaya di server.   Definisi  Remote File Inclusion (RFI) Remote File Inclusion (RFI) terjadi saat penyerang mengunggah file berbahaya (biasanya file PHP) ke server, kemudian mengeksekusinya dari jarak jauh. Ini biasanya memanfaatkan celah upload file tanpa validasi yang tepat. Tujuan Serangan Membaca file konfigurasi atau file sensitif seperti password. Mengeksekusi skrip berbahaya. Mendapatkan akses tidak sah atau kontrol atas server. DEMO Local File Inclusion (LFI) Langkah 1: Persiapan Folder & File Buat folder di C:\xampp\htdocs\ dengan nama lfi . Langkah 2: Buat fi...
Baca selengkapnya

TIDAK TERPAKAI - Footprinting dan Reconnaissance menggunakan Whois, Web History, Google Dork, GHDB

Gambar
Footprinting dan Reconnaissance menggunakan Whois, Web History, Google Dork, GHDB Pada artikel kali ini, kita akan membahas bagaimana cara mengumpulkan informasi terkait website bhaktisemesta.ac.id menggunakan beberapa tools yang umum digunakan dalam riset web dan cybersecurity. Tools yang akan kita gunakan meliputi: Whois – Untuk mendapatkan informasi pendaftaran domain, seperti tanggal pembuatan, pemilik, dan penyedia layanan domain. Web History – Untuk melihat riwayat tampilan dan perubahan website dari waktu ke waktu. Google Dork – Untuk menemukan informasi tersembunyi yang tidak terlihat langsung di website tetapi terindeks oleh Google. GHDB (Google Hacking Database) – Untuk mencari potensi celah keamanan atau eksploitasi yang terdokumentasi terkait website tersebut. Dengan menggunakan metode ini, kita dapat memahami lebih dalam tentang struktur dan perkembangan website bhaktisemesta.ac.id , serta mengetahui informasi yang mungkin tidak tersedia secara langsung di halaman ut...
Baca selengkapnya

Manajemen Data Master - Sabilla Ardani Putri

Gambar
  Manajemen Data Master 1. Instalasi Odoo di Ubuntu 1.1 Update Sistem      Sebelum menginstal Odoo, pastikan sistem dalam keadaan terbaru dengan menjalankan perintah              berikut:    sudo apt update && sudo apt upgrade -y 1.2 Install Dependensi      Odoo membutuhkan beberapa paket tambahan untuk berjalan dengan baik. Instal paket-paket berikut:    sudo apt install python3 python3-pip python3-dev libxml2-dev libxslt1-dev zlib1g-dev    libsasl2-dev \ libldap2-dev build-essential libjpeg-dev libpq-dev libffi-dev libssl-dev    libmysqlclient-dev wkhtmltopdf -y 1.3 Install PostgreSQL      Odoo menggunakan PostgreSQL sebagai basis data. Instal PostgreSQL dengan perintah berikut:    sudo apt install postgresql -y      Setelah instalasi selesai, buat user PostgreSQL untuk Odoo:    sudo -u postgres createuser -s odoo ...
Baca selengkapnya