Cara Membuat Web Sendiri dengan HTML CSS

2 min read

Cara Membuat Web Sendiri dengan HTML CSS

Cara Membuat Web Sendiri dengan HTML CSS – Kali ini admin akan berbagi tutorial membuat web statis dengan menggunakan bahasa HTML CSS bertema landing page, untuk script ini saya dapatkan di https://codepen.io/codot/ (terima kasih sudah mempublikasikan karyanya diweb tersebut). Semoga source codenya bermanfaat untuk teman-teman pelajar yang sedang mencari referensi hal ini.

Untuk web sederhana yang satu ini tampilannya cukup menarik, dengan background bergradasi orange dan merah.

Yuk kita simak !

Tutorial Membuat Web Sendiri dengan HTML CSS

Adapun tutorial membuat web keren dan sederhana 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 lang="en">
<head>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
  <div class="main-wrap grid-group clear">
    <nav class="nav-wrap clear">
      <div class="logo grid-3">
        <h1 class="right"><a href="#">Afda</a></h1></div>
      <div class="main-menu grid-6">
        <ul class="right">
          <li><a href="#">Main</a></li>
          <li><a href="#">Demos</a></li>
          <li><a href="#">Portofolio</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Shortcodes</a></li>
        </ul>
      </div>
      <div class="nav-misc grid-3">
        <ul>
          <li><a class="cart-btn" href="#"><i class="fa fa-shopping-cart"></i>
</a></li>
          <li><a class="search-btn" href="#"><i class="fa fa-search"></i>
</a></li>
        </ul>
      </div>
    </nav>
    <header>
      <div class="slider">
        <h1>Ultimate website builder kit.</h1>
        <p>Everything you need to have in order to create a stunning website</p>
        <div class="jumpto">
          <a href="#"><i class="fa fa-chevron-down"></i></a>
        </div>
      </div>
      
      
    </header>
  </div>
</body>
</html>

Langkah 2: Buat File Sytle.css

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

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed);
* {
  margin: 0;
  padding: 0;
  font-family: 'Roboto Condensed', sans-serif;
}
/* Grid system */
.grid-group {
  width: 100%;
}
.grid-group * {
  box-sizing: border-box; 
}
/* Clear every floated element */
.clear:before,
.clear:after {
  height: 0;
  width: 0;
  display: table;
  content: "";
  clear: both;
  visibility: hidden;
}
[class*='grid-'] {
  float: left;
  min-height: 1px;r
}
/* We are using 12 grid based */
.grid-1 {
  width: 8.333333333333333%;
}
.grid-2 {
  width: 16.66666666666667%;
}
.grid-3 {
  width: 25%;
}
.grid-4 {
  width: 33.33333333333333%;
}
.grid-5 {
  width: 41.66666666666667%;
}
.grid-6 {
  width: 50%;
}
.grid-7 {
  width: 58.33333333333333%;
}
.grid-8 {
  width: 66.66666666666667%;
}
.grid-9 {
  width: 75%;
}
.grid-10 {
  width: 83.33333333333333%;
}
.grid-11 {
  width: 91.66666666666667;
}
.grid-12 {
  width: 100%;
}
.left {
  float: left;
}
.right {
  float: right!important;
}

a:link, a:visited, a:active {
  text-decoration: none;
  color: #222;
}
.main-wrap {
  margin: 0 auto;
  position: relative;
}
.nav-wrap {
  background: -webkit-linear-gradient(90deg, #DE6262 10%, #FFB88C 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #DE6262 10%, #FFB88C 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #DE6262 10%, #FFB88C 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, #DE6262 10%, #FFB88C 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, #DE6262 10%, #FFB88C 90%); /* W3C */
  z-index: 99999;
}
.nav-wrap a {
  color: #fff;
}
.logo { 
  padding: 19px;
  border: 2px solid rgba(255,255,255,.15);
}
.logo a{
  padding: 8px 10px;   
  display: block;
  transition: background 0.55s linear;
}
.logo a:hover {
  background: #fff;
  color: #2EA9E5;
}
.logo h1 {
  text-transform: uppercase;
  margin-right: 30px;
  border: 2px solid #fff;
}
.main-menu {
  border: 2px solid rgba(255,255,255,.15);
  border-left: none;
}
.main-menu ul, .nav-misc ul {
  list-style: none;
}
.main-menu li, .nav-misc li {
  float: left;
}
.main-menu a {
  display: block;
  padding: 34px 20px;
  text-transform: uppercase;
  transition: background 0.15s linear;
}
.main-menu a:hover {
  background: #2EA9E5;
}
.nav-misc {
  padding: 24px;
  border: 2px solid rgba(255,255,255,0.15);
  border-left: none;
}
.nav-misc a {
  display: block;
  padding: 10px;
}
.cart-btn {
  background: #30A6E2;
  border-radius: 500px;
}
.search-btn {
  background: #fff;
  color: #30A6E2!important;
  border-radius: 500px;
  margin-left: 15px;
}
header {
  background: orange;
  height: 100vh;
  background: -webkit-linear-gradient(90deg, #DE6262 10%, #FFB88C 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #DE6262 10%, #FFB88C 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #DE6262 10%, #FFB88C 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, #DE6262 10%, #FFB88C 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, #DE6262 10%, #FFB88C 90%); /* W3C */
}
header .slider {
  padding: 5% 30%;
  color: #fff; 
}
header h1 {
  text-transform: uppercase;
  font-size: 4em
}
.jumpto {
  position: absolute;
  bottom: 10px;
  left: 50%;
}
.jumpto i:hover {
  background: #fff;
  color: #2EA9E5;
}
.jumpto i {
  color: #fff;
  font-size: 40px;
  background: #2EA9E5;
  padding: 15px;
  border-radius: 99999px;
  transition: 
}

Penutup

Demikian artikel mengenai Cara Membuat Web Sendiri dengan HTML CSS, semoga bermanfaat untuk anda.

Baca Juga :  Mengenal Delegate pada C#

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

Selamat membaca dan ngoding :V

Tinggalkan Balasan

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