Cara Membuat Web Sederhana dengan HTML CSS by Neyla Nuril Fauziyah

Cara Membuat Web Sederhana dengan HTML CSS by Neyla Nuril Fauziyah

Cara Membuat Web Sederhana dengan HTML CSS – Kali ini admin akan berbagi tutorial membuat web sederhana dengan menggunakan bahasa HTML css bertema informasi kecantikan (beauty), untuk script ini saya dapatkan di codepen.io/neyla-nuril-fauziyah (terima kasih sudah mempublikasikan karyanya diweb tersebut). Semoga scriptnya bermanfaat untuk teman-teman pelajar yang sedang mencari referensi hal ini.

Yuk kita simak !

Tutorial Membuat Web Sederhana dengan HTML CSS

Adapun tutorial membuat situs versi koran-indonesia.com, sebagai berikut.

Langkah 1: Buat File Index.html

Hal pertama yang anda lakukan adalah membuat file “index.html”. Kemudian silahkan copy dan paste script dibawah ini.

<html>
  <head>
    <title>Web Sederhana</title>
    <link rel="stylesheet" href="style.css">
    <title></title>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h1 class="judul">Beauty Today</h1>
        <ul>
          <li><a href="#">home</a></li>
          <li><a href="#">about</a></li>
          <li><a href="#">article</a></li>
          <li><a href="#">produtcs</a></li>
          <li><a href="#">contact</a></li>
        </ul>
      </div>
      <div class="hero"></div>
      <div class="content cf">
        <div class="main">
            <h2>Skincare Wajib Remaja</h2>
            <p class="penulis">Ditulis oleh <a href=https://www.instagram.com/nisarhmdt target="_blank">Khairunnisa' R</a>, Senin 9 November 2020</p>
            <p>Skincare merupakan produk mengandung bahan alami
              dan kimia yang diproses dengan teknologi modern
              dan dikemas secara praktis yang mudah digunakan
              untuk merawat kulit. Sebagai kaum hawa yang beranjak
              dewasa, banyak remaja mulai memperhatikan penampilan
              dengan menggunakan skincare untuk mendapatkan kulit
              yang glowing dan sehat. Biasanya remaja mulai
              mencoba-coba hampir semua jenis produk skincare
              untuk mendapatkan kulit ideal tersebut.</p>
            <p>Padahal remaja seperti Stylovers sudah cukup
              menggunakan 5 step skincare berikut ini untuk
              mendapatkan kulit glowing dan sehat.
              Nah, kali ini Stylo akan memberikan info 5 step skincare remaja yang wajib kamu pakai untuk mendapatkan kulit sehat dan glowing.
            </p>
            <h3>1. Micellar Water</h3>
            <img src="https://images.unsplash.com/photo-1597106776019-b4ecc878c202?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="">
            <p>Micellar water merupakan produk
              first step cleansing dalam teknik double cleansing
              saat membersihkan wajah yang bertujuan agar wajah
              bersih maksimal dari debu, polusi, minyak dan sisa
              makeup setelah beraktivitas padat di sekolah.
              Rangkaian Garnier Micellar Water yang terdiri dari
              3 varian yang dapat dipilih sesuai kebutuhan jenis
              kulitmu. Produk ini mampu menghapus sisa makeup ringan
              dan waterproof secara maksimal dalam sekali usapan tanpa
              membuat kulit menjadi kering.</p>
            <h3>2. Facial Wash</h3>
            <img src="https://images.unsplash.com/photo-1556228578-f9707385e031?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="">
            <p>Skincare remaja yang wajib kamu miliki selanjutnya
              adalah facial wash atau pencuci muka. Facial wash
              sangat penting dan wajib dimiliki remaja saat mulai
              mengenakan skincare untuk mendapatkan kulit yang
              dan sehat. Facial wash berfungsi untuk membersihkan
              kulit dari debu, polusi, kotoran, minyak serta sisa
              makeup ketika menggunakan riasan ke sekolah secara
              maksimal. Selain membersihkan, facial wash juga berfungsi
              untuk mencegah kerusakan kulit dan membantu
              mengurangi masalah kulit wajah seperti jerawat,
              noda hitam, kulit dehidrasi, kulit berminyak hingga
              penuaan dini.</p>
            <h3>3. Toner</h3>
            <img src="https://images.unsplash.com/photo-1532086853747-99450c17fa2e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="">
            <p>Toner merupakan produk skincare remaja selanjutnya
              yang wajib dimiliki untuk mendapatkan kulit yang
              glowing dan sehat. Toner berfungsi untuk
              mengembalikan kelembapan yang hilang setelah mencuci
              muka menggunakan facial foam, menyeimbangkan pH
              kulit dan melembapkan kulit secara ringan serta
              mempersiapkan kulit untuk menyerap produk skincare
              berikutnya dengan baik.</p>
            <h3>4. Pelembab</h3>
            <img src="https://images.unsplash.com/photo-1585832622886-272fb3a927e0?ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" alt="">
            <p>Pelembap merupakan produk skincare remaja yang
              paling utama dan wajib  Stylovers miliki. Pelembap
              berfungsi untuk melembapkan, melindungi kulit dari
              debu, polusi, sinar matahari serta mencegah
              kerusakan kulit dan penuaan dini. Seringkali
              banyak remaja yang beranggapan menggunakan pelembap
              akan membuat kulit semakin berminyak padahal
              pelembap juga berfungsi untuk menyeimbangkan kadar
              minyak dan air pada kulit.</p>
            <h3>5. Masker</h3>
            <img src="https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="">
            <p>Untuk perawatan mingguan, Stylovers dapat
              menggunakan masker yang berfungsi menutrisi
              dan merawat kulit secara intensif. Bisa menggunakan
              sheetmask, organic mask, mud mask, dan lain-lain
              Jangan terlalu lama jika mengaplikasikan masker,
              cukup 15-20 menit saja kemudian bisa dibilas jika
              menggunakan organic mask, mud mask, peel off. Tetapi
              jika menggunakan sheetmask tidak perlu dibilas.</p>

            <p>source: <a href="https://stylo.grid.id/read/142054643/5-produk-skincare-remaja-yang-wajib-dipakai-agar-kulit-glowing-dan-sehat?page=all">stylo.grid.id</a></p>
        </div>
        <div class="sidebar">
          <h3>Tentang Penulis</h3>
          <img src="https://images.unsplash.com/photo-1593104547489-5cfb3839a3b5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=736&q=80" alt="">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

      </div>
      <div class="footer">
        <p class="copy">&copy; Copyright 2020. Neyla Nuril fauziyah</p>
      </div>
    </div>
  </body>
</html>

Langkah 2: Buat File style.css

Hal kedua yang anda lakukan adalah membuat file “style.css”. Kemudian silahkan copy dan paste script dibawah ini.

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

/*CSS NYA NISA */
body {
  font: 16px/28px poppins, sans-serif;
  background-color: #FAEBD7;

}

.container{
  width: 960px;
  margin: auto;
  background-color: #fff;
}

.header{
  padding: 20px;
}
.header .judul{
  font-size: 40px;
  font-weight: bold;
  color: lightcoral;
}
.header ul li{
  display: inline-block;
  margin-top: 20px;
  margin-right: 15px;
}
.header a{
  text-decoration: none;
  color: #BC8F8F;
}
.header a:hover{
  font-size: 20px;
  color: #B22222;
}

.hero{
  height: 350px;
  background-image: url(https://images.unsplash.com/photo-1589125614605-3797752eb0e0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80);
  background-position: 0 -200px;
  background-size: cover;
  border-top: 5px solid #B22222;
  border-bottom: 5px solid #B22222;
  margin-top: -5px;
}

.main{
  width: 600px;
  padding: 20px;
  box-sizing: border-box;
  float: left;
}
.main h2{
  font-size: 25px;
  font-weight: bold;
}
.main .penulis{
  font-size: 12px;
  margin-top: -5px;
}
.main a{
  text-decoration: none;
  color: #BC8F8F;
}
.main a:hover{
  font-size: 14px;
  color: #B22222;
}
.main p{
  font-size: 14px;
  margin-bottom: 10px;
}
.main h3{
  font-size: 16px;
  font-weight: bold;
}
.main img{
  width: 200px;
}

.sidebar{
  width: 300px;
  float: right;
  padding: 20px;
}
.sidebar h3{
  font-weight: bold;
  color: #B22222;
}
.sidebar img{
  width: 100px;
  float: left;
  margin-right: 10px;
}
.sidebar p{
  font-size: 12px;
  line-height: 15px;
}
.footer{
  background-color: #B22222;
  padding: 5px;
}
.footer .copy{
  color: #FAEBD7;
  font-size: 12px;
  text-align: center;
}



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

Penutup

Demikian artikel Cara Membuat Web Sederhana dengan HTML CSS by Neyla Nuril fauziyah. Semoga artikel ini bermanfaat.

Baca Juga :  Koneksi Database MySQL Berbasis GUI Menggunakan Java

Jika ada kritik maupun saran, anda bisa berkomentar dibawah ini.

Selamat membaca dan ngoding 😀

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *