TRIK MEMBUAT TAMPILAN WEBSITE SEDERHANA DAN MENARIK MENGGUNAKAN CSS

0
217

Assalamualaikum.. hai teman-teman..

Pada kesempatan kali ini kita akan membahas bagaimana cara membuat tampilan website sederhana dengan menggunakan CSS, sebelum itu kita harus menyiapkan beberapa gambar sebagai pelengkap untuk menampilkan desain web tersebut. Dimana gambar tersebut disimpan didalam folder img yang menjadi satu dengan folder script yang akan dibuat nantinya.

Ok.. langsung saja berikut merupakan scriptnya :

  1. Pertama untuk bagian HEADER dari website ini, Nah.. untuk script yang ini disimpan dengan careers.html berikut merupakan scriptnya :
<html>
<head>
       <title>FLOWER STORE</title>
       <link rel="stylesheet" type="text/css" href="careers_style.css">
</head>
<body>
       <div class="container">
              <div class="search">Search<br> <input type="text" name="nama" class="cari"> <input style="background-color: pink; border-radius: 5px; border: 2; border-color: salmon; font-weight: bold" type="submit" value="Go" class="go"></div>
              <div class="header">
              <div class="judul">FLOWER STORE</div>
              <div class="bunga"></div>
       </div>
</body>
</html>

Kemudian kita akan membuat script CSS nya yang gunanya untuk memperindah suatu tampilan web agar terlihat lebih menarik. Dan script ini disimpan dengan careers_style.css

.body {
       font:16px/28px arial, sans-serif;
}
.container {
       position: relative;
}
.search {
       font: 18px times new rowman;
       padding-left:1100px;
       font-weight: bold;
       color: salmon;
       position: relative;
}
.header {
       padding: 10px;
       position: relative;
}
.header .judul {
       width: 1313px;
       height: 70px;
       position: relative;
       font: 60px arial;
       color: white;
       font-weight: bold;
       background-color: salmon;
       text-align: center;
}
.bunga {
       position: relative;
       width: 1313px;
       height: 250px;
       background-image: url(img/b.jpg);
       background size: cover;
       background-repeat: none;
       background-position: 0-450px;
       border-bottom: 8px solid pink;
}

Berikut merupakan hasil dari script bagian HEADER :

2. Yang kedua saya akan menampilkan bagian LEFT CONTENT dari website ini, Nah..untuk script yang ini juga disimpan dengan careers.html berikut merupakan scriptnya :

<div class="choice">
             <dl>
                    <dt><a href="index.html">HOME</a></dt>
                    <hr width="230px" color="pink" align="left">
                    <dt><a href="careers.html">CAREERS</a></dt>
                    <hr width="230px" color="pink" align="left">
                    <dt><a href="myaccount.html">MY ACCOUNT</a></dt>
                    <hr width="230px" color="pink" align="left">
                    <dt><a href="customize_order.html">CUSTOMIZE ORDER</a></dt>
                    <hr width="230px" color="pink" align="left">
             </dl>
                    <div class="categories"><div>CATEGORIES</div></div>
                    <hr size="1" color="white" width="248px">
                    <div class="menu">
             <dl>
                    <dt><a href="#">Get Well Soon</a><br>
                    <hr size="10" color="white" width="248px">
                    <dt><a href="#">Happy Birthday</a><br>
                    <hr size="10" color="white" width="248px">
                    <dt><a href="#">Graduation</a><br>
                    <hr size="10" color="white" width="248px">
                    <dt><a href="#">Mothers Day</a><br>
                    <hr size="10" color="white" width="248px">
                    <dt><a href="#">Congratulations</a><br>
                    <hr size="10" color="white" width="248px">
                    <dt><a href="#">Wedding</a><br>
                    <hr size="10" color="white" width="248px">
            </dl>               
 </div>
 <div class="last"><div class="last1"><font size="50"><b>Flower</b></font>Store</div></div>

Seperti tadi, kita membuat script CSS yang script-nya juga disimpan dengan careers_style.css

.choice {
       width: 250px;
       background-color: white;
       height: 200px;
       box-sizing: border-box;
       float: left;
}
.choice dl dt{
       margin-top: 20px;
}
.choice a {
       font-weight: bold;
       text-decoration: none;
       color: salmon;
       padding: 10px;
}
.header .choice a:hover {
       color: orange;
}
.categories {
       position: relative;
       width: 220px;
       height: 50px;
       background-color: salmon;
       border-top-right-radius: 150px;
       border-top-left-radius: 0px;
       border-bottom-right-radius: 150px;
       border-bottom-left-radius: 150px;
       text-align: center;
       line-height: 70px;
       font-weight: bold;
       color: white;
       padding-top:20px;
       font: 27px castellar;
}
.menu {
       position: relative;
       padding-top: 5px;
       width: 240px;
       height: 348px;
       border-top-right-radius: 60px;
       border-bottom-right-radius: 60px;
       text-align: left;
       line-height: 20px;
       background-image: url(img/yun.jpg);
       background-position: 0-450px;
}
.menu a {
       font-weight: bold;
       text-decoration: none;
       color: salmon;
}
.last {
       width: 210px;
       padding: 15px;
       background-color: white;
       border-top: 10px solid white;
}
.last1 {
       font: 17px arial;
       color: salmon;
       text-align: center;
}

Berikut merupakan hasil dari script bagian LEFT CONTENT :

3. Yang ketiga saya akan menampilkan bagian FOOTER dari website ini, Untuk script yang ini juga disimpan dengan careers.html berikut merupakan scriptnya :

<div class="end">
       <div class="end1">
              <dl>
                    <dt><a href="#">TERMS & CONDITIONS</a></dt>
                    <dt><a>|</a></dt>
                    <dt><a href="#">PRIVACY POLICY</a></dt>
                    <dt><a>|</a></dt>
                    <dt><a href="#">CONTACT US</a></dt>
                    <dt><a>|</a></dt>
                    <dt><a href="#">PROMOTION</a>
                    <dt><a>|</a></dt>
                    <dt><a href="#">HOW TO BUY</a></dt>
              </dl>
       </div>
       <div class="ft"><br><center>&copy 2018 Flower Store</div>
</div>
</div>

Seperti tadi juga, kita membuat script CSS yang script-nya juga disimpan dengan careers_style.css

.end{
       width: 1165px;
       height: 15px;
       padding-left: 150px;
       padding-bottom: 50px;
       margin-top: 60px;
       background-color: salmon;
       border-top: 10px solid white;
}
.end .end1 dl dt{
       padding-left: 20px;
       display: inline-block;
       color: salmon;
}
.end .end1 a {
       font-size: 15px;
       font-weight: bold;
       text-decoration: none;
       color: white;
}
.end .end1 a:hover {
       color:pink;
}
.ft {
       padding-right: 100px;
       padding-bottom: 10px;
}

Berikut merupakan hasil dari script bagian FOOTER :

4. Yang keempat saya akan menampilkan bagian CONTENT atau isi dari website ini, Untuk script yang ini juga disimpan dengan careers.html berikut merupakan scriptnya :

<div class="content">
       <div class="isi1"></div>
       <div class="satu">
              <br><br>
              <a><center>Join Our Team!</center></a>
       </div>
       <div class="dua">
              <a><center>Be a part of Flower Store team and let's bridge the distance!</center></a>
       </div>
       <div class="two">
              <a><center>hr@flowerstore.com</center></a>
       </div>
              <br><br>
              <a>Business Development Manager</a>
       </div>
       <div class="empat">
              <br>
              <a>Responsibilities :</a>
       </div>
       <div class="empat">
              <ul>
              <li>Manage international relationship with partners / suppliers</li>
              <li>Locates or proposes potential business deals by contacting potential partners; discovering and exploring opportunities</li>
              <li>Manage team to develop and implement strategies for new product and services</li>
              <li>Identify opportunities for campaigns, services, and distribution channels that will lead to an increase in sales</li>
              <li>Closes new business deals by coordinating requirements; developing and negotiating contracts; integrating contract requirements with business operations</li>
              <li>Coordinate and interact with other division to ensure orders are properly executed</li>
              </ul>
       </div>
       <div class="tiga">
              <br>
              <a>Senior PHP Progammer</a>
       </div>
       <div class="empat">
              <br>
              <a>Responsibilities :</a>
       </div>
       <div class="empat">
              <ul>
              <li>Design, develop, support of internal application systems</li>
              <li>Support in daily operations, participate in Project Development</li>
              <li>Maintain and improve current system programs and operations</li>
              <li>Manage existing mobile Web</li>
              <li>Interact with business users and provide technical support</li>
              </ul>
       </div>

Jangan lupa untuk membuat script CSS yang script-nya juga disimpan dengan careers_style.css

.content{
       width: 1063px;
       height: 200px;
       background-color: white;
       box-sizing: border-box;
       float: left;
}
.content .isi1{
       margin-top:20px;
       height: 200px;
       background-size: cover;
       background-position: 0-200px;
       background-image: url(img/c1.jpg);
}
.satu {
       width: 940px;
       height: 100px;
       background-color: white;
       margin-left: 60px;
       margin-top: -80px;
}
.satu a {
       font: 40px Bell MT;
       color:salmon;
}
.dua {
       background-color: white;
       font: 20px Bell MT;
       color:#5d5d5e;
}
.two {
       background-color: white;
       font: 20px Bell MT;
       color:salmon;
}
.tiga {
       background-color: white;
       font: 25px Bell MT;
       color:#5d5d5e;
       padding-left: 70px;
}
.empat {
       background-color: white;
       font: 17px Bell MT;
       color:#5d5d5e;
       padding-left: 70px;
       padding-right: 60px;
}

Setelah menambahkan script terakhir tadi, hasil tampilannya menjadi seperti ini :

Ini adalah tampilan website sederhana menggunakan css, masih banyak lagi script-script yang lebih menarik untuk mempercantik tampilan halaman pada web, terimakasih atas kunjungannya 🙂

Selamat mencoba ya..

Assalamualaikum..

Tinggalkan Balasan

This site uses Akismet to reduce spam. Learn how your comment data is processed.