*Goomilar 97: Contoh web design

Pada materi kali ini Goomilar97 ingin berbagi sedikit mengenai contoh design web dengan menggunakan HTML, CSS dan JavaScript, dimana design tersebut akan diberikan dengan percuma dan dapat dicopy untuk kebutuhan Anda jika memang ingin menggunakan desain tersebut dalam web yang Anda buat. Design web pada contoh yang Goomilar97 berikan antara lain seperti berikut ini hasilnya:

Dengan code sebagai berikut:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta content='text/html' charset='UTF-8' http-equiv='Content-Type'/>
 <meta content='blogger' name='generator'/>
 <meta content='' name='description'/>
 <meta content='' name='keywords'/>
 <meta content='Goomilar' name='Author'/>
 <meta content='noodp' name='robots'/>
 <meta content='all' name='Robots'/>
 <meta content='2 days' name='revisit'/>
 <meta content='2 days' name='revisit-after'/>
 <meta content='ID' name='language'/>
 <meta content='ID' http-equiv='content-language'/>
 <meta content='no-cache' http-equiv='cache-control'/>
 <meta content='no-cache' http-equiv='pragma'/>
 <meta content='general' name='rating'/>
 <meta content='global' name='target'/>
 
 <title>Goomilar 97</title>
 <style>
body{
 margin-top:-50px;
 margin-bottom: -12px; 
 font-family:Georgia;
 font-size: 12pt;
 background: url('Background/siteP.jpg') no-repeat top right;
 }

a:link {color: #666; text-decoration: none;}a:hover {color: #FF9900; text-decoration: none;}a:visited {color: purple; text-decoration: underline;}

#searching{
 float:right;
 background-color: #000;
 margin: 25px 200px 0 0;
 border-radius: 20px; 
 }
#searching input[type="text"] {
 border:0;
 padding:7px 10px;
 background:#666;
 color:#000;
 font-size:12px;
 margin:0;
 outline:0;
 border-radius: 20px;
 }
#search-buttons{
 padding:1px;
 overflow:hidden;
 text-align:right;
 margin:0;
 }
#search-button-top{
 background-color:#000;
 border-radius: 20px;
 background-repeat:no-repeat;
 margin:0;
 outline:0;
 height:26px;
 width:20px;
 background-position:12px 5px;
 border:0;
 float:right;
 cursor:pointer;
 }
#search-button-top:hover{
 -webkit-transition:all .2s ease-in;
 -moz-transition:all .2s ease-in;
 -ms-transition: all .2s ease-in;
 transition:all .2s ease-in;
 }

#header{
 height: 197px;
 background: url('Background/logo.jpg') no-repeat left;
 }
#header h1{
 color: #000;
 text-shadow: 2px 1px 0px cyan;
 padding-top: 80px;
 font-size: 52pt;
 letter-spacing: 2px;
 }
#header p{
 color: #000;
 font-size: 12pt;
 margin-top: -50px;
 font-family: Times New Roman;
 }

.menu-wrap {
 background-color:#333333; 
 height:30px; 
 line-height:30px; 
 position:relative;
 width:100%;
 margin:auto;
 margin-top:10px;
 text-shadow: 1px 1px 0px #FF9900;
}
 
.menu-wrap ul {
 list-style:none;
}
 
.menu-wrap ul li a {
 float:left; 
 width:10%; 
 display:block; 
 text-align:center; 
 color:#000; 
 text-decoration:none; 
 text-transform:uppercase;
}
 
.menu-wrap ul li a:hover {
 background-color:#999999; 
 display:block;
 text-shadow: 1px 1px 0px cyan;
}
 
.menu-wrap ul li:hover ul {
 display:block;
}
 
.menu-wrap ul ul {
 display:none; 
 list-style:none; 
 position:absolute; 
 background-color:#333333;
 left:0.1%; 
 top:100%; 
 width:190px;
}
 
.menu-wrap ul ul li a {
 float:none; 
 display:block; 
 margin-left: -15%;
 text-align:center; 
 width:100%;
}
 
.menu-wrap ul ul li a:hover {
 text-shadow: 1px 1px 0px cyan;
}

#txt{
 font-family: Arial;
 margin-top: 0.5%;
 font-size: 14pt;
 text-shadow: 1px 1px 0px #FF9900;
 }

#content{
 margin-top: 0.5%;
 border-top: 1px dashed #666;
 }
#main{
 padding-left: 2%;
 width: 80%;
 border-right: 1px dashed #666;
 float: left;
 text-align: left;
 font-size: 10pt;
 }
#main h1, #sidebar h1{
 text-align: left;
 font-size: 24pt;
 text-shadow: 1px 1px 0px #FF9900;
 }
#main h1{margin-top:-2px;}
#main p{
 padding: 20px;
 font-size: 11pt;
 width: 70%;
 margin-left: 8.5%;
 margin-right: 5%;
 border:  1px dotted #999999;
 border-radius:  30px;
 color:#333333;
 }
#sidebar{
 padding-right: 1%;
 float: right;
 width: 15%;
 text-align: left;
 font-size: 10pt;
 }
#sidebar h1{
 font-size: 18pt;
 border-bottom: 2px dotted #FF9900;
 text-align: center;
 padding-bottom: 5px;
 }
#sidebar p{
 border-radius: 30px;
 padding: 20px;
 }
#sidebar a:link{
 color: #FF9900;
 }
#sidebar a:hover{
 color: #000;
 }
#sidebar a:visited{
 color: purple;
 }
#bersih{
 clear: both;
 }
#footer{
 border-top: 3px solid #666;
 width: 100%;
 color: #666;
 }
#footer p{
 font-size: 10pt;
 }
     
#slider {
 width: 56%; /* important to be same as image width */
  height: 250px; /* important to be same as image height */
  position: relative; /* important */
  overflow: hidden; /* important */
  margin-top: -30px;
  margin-left: 18%;
  }

#slider ul {
  list-style: none;
 }

/* keyframes #anim_slider */
@-webkit-keyframes anim_slider {
  0% {
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes anim_slider {
  0% {
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-ms-keyframes anim_slider {
  0% {
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-keyframes anim_slider {
  0% {
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* animation */
#slider ul li {
  position: absolute;
  opacity: 0;
  top: 0;

-webkit-animation-name: anim_slider;
  -webkit-animation-duration: 24.0s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  -webkit-animation-delay: 0;
  -webkit-animation-play-state: running;
  -webkit-animation-fill-mode: forwards;

-moz-animation-name: anim_slider;
  -moz-animation-duration: 24.0s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: normal;
  -moz-animation-delay: 0;
  -moz-animation-play-state: running;
  -moz-animation-fill-mode: forwards;

-ms-animation-name: anim_slider;
  -ms-animation-duration: 24.0s;
  -ms-animation-timing-function: linear;
  -ms-animation-iteration-count: infinite;
  -ms-animation-direction: normal;
  -ms-animation-delay: 0;
  -ms-animation-play-state: running;
  -ms-animation-fill-mode: forwards;

animation-name: anim_slider;
  animation-duration: 24.0s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-delay: 0;
  animation-play-state: running;
  animation-fill-mode: forwards;
}

/* animation delays */
#slider ul li:nth-child(2), #slider ul li:nth-child(2) div {
  -webkit-animation-delay: 6.0s;
  -moz-animation-delay: 6.0s;
  -ms-animation-delay: 6.0s;
  animation-delay: 6.0s;
}
#slider ul li:nth-child(3), #slider ul li:nth-child(3) div {
  -webkit-animation-delay: 12.0s;
  -moz-animation-delay: 12.0s;
  -ms-animation-delay: 12.0s;
  animation-delay: 12.0s;
}
#slider ul li:nth-child(4), #slider ul li:nth-child(4) div {
  -webkit-animation-delay: 18.0s;
  -moz-animation-delay: 18.0s;
  -ms-animation-delay: 18.0s;
  animation-delay: 18.0s;
}

#slider ul li a {
  text-decoration: none;
  color: #fff;
}

#slider ul li p {
  color: #fff;
  font-size: 12px;
  margin-top: -5px;
  padding: 10px 15px;
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  -webkit-opacity: 0.8;
  -ms-opacity: 0.8;
  opacity: 0.8;
  -khtml-opacity: 0.8;
} #slider ul li img a {
  display: block;
  float: left;
  width: 100%;
}

/* keyframes #captions */
@-webkit-keyframes captions {
  0% {
    top: 100%;
    opacity: 0;
  }
  5% {
    top: 80%;
    opacity: 1;
  }
  20% {
    top: 80%;
    opacity: 1;
  }
  25% {
    top: 100%;
    opacity: 0;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

@-moz-keyframes captions {
  0% {
    top: 100%;
    opacity: 0;
  }
  5% {
    top: 80%;
    opacity: 1;
  }
  20% {
    top: 80%;
    opacity: 1;
  }
  25% {
    top: 100%;
    opacity: 0;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

@-ms-keyframes captions {
  0% {
    top: 100%;
    opacity: 0;
  }
  5% {
    top: 80%;
    opacity: 1;
  }
  20% {
    top: 80%;
    opacity: 1;
  }
  25% {
    top: 100%;
    opacity: 0;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

@-keyframes captions {
  0% {
    top: 100%;
    opacity: 0;
  }
  5% {
    top: 80%;
    opacity: 1;
  }
  20% {
    top: 80%;
    opacity: 1;
  }
  25% {
    top: 100%;
    opacity: 0;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

#slider h3 {
  text-transform: uppercase;
  color: #fff;
  font-size: 14px;
  line-height: 14px;
  padding: 10px 15px 0;
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  opacity: 0.8;
}

#slider ul li div {
  text-align: center;
  color: #fff;
  background-color: rgba(45, 44, 44, 0.7);
  background: rgba(45, 44, 44, 0.7);
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 0;
  width: 500px; /* important to be same as image width */
  z-index :999;

/* css3 animation */

-webkit-animation-name: captions;
  -webkit-animation-duration: 4s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  -webkit-animation-delay: 1s;
  -webkit-animation-play-state: running;
  -webkit-animation-fill-mode: forwards;

-moz-animation-name: captions;
  -moz-animation-duration: 4s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: normal;
  -moz-animation-delay: 1s;
  -moz-animation-play-state: running;
  -moz-animation-fill-mode: forwards;

-ms-animation-name: captions;
  -ms-animation-duration: 4s;
  -ms-animation-timing-function: linear;
  -ms-animation-iteration-count: infinite;
  -ms-animation-direction: normal;
  -ms-animation-delay: 1s;
  -ms-animation-play-state: running;
  -ms-animation-fill-mode: forwards;

animation-name: captions;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-delay: 1s;
  animation-play-state: running;
  animation-fill-mode: forwards;
} 
 </style>
 <script type="text/javascript">
  function startTime(){
   var today = new Date();
   var h = today.getHours();
   var m = today.getMinutes();
   var s = today.getSeconds();
   
   m = checkTime (m);
   s = checkTime(s);
   document.getElementById('txt').innerHTML =  h+" : "+m+" : "+s ;
   t = setTimeout('startTime()', 500);
   }
  
  function checkTime(i){
   if (i<10){
    i="0" + i;
    }
   return i;
  }
 </script>
</head>

<div id='searching'>
   <form action='/search' id='search-buttons' method='get'>
    <input name='q' placeholder='Cari artikel...' type='text'/>
    <input id='search-button-top' type='submit' value=''/>
   </form>
</div>
<div id='header'>
  <h1>
Goomilar<small><sup>97</sup></small></h1>
<p>
*Mencoba untuk membuat sebuah desain web dengan HTML dan CSS dan Javascript*</p>
</div>
<div class="menu-wrap">
   <ul>
<li><a href="#">About</a>
     <ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Disclaimer</a></li>
</ul>
</li>
<li><a href="mailto:remonc97@gmail.com">Contact</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
</div>
<div id="txt">
</div>
<div id='content'>
   <div id='main'>
    <h1>
<sup>*</sup>TEST</h1>
<div id="slider">
     <ul>
<li>
      <img alt="Images 1" src="Background/hack.jpg"/>
   <div>
     <h3>
Programmer</h3>
<p>
Personal Computer is your world</p>
</div>
</li>
<li>
      <img alt="Images 2" src="Background/lang.jpg" />
   <div>
     <h3>
Word</h3>
<p>
Programming language is your tongue</p>
</div>
</li>
<li>
      <img alt="Images 3" src="Background/prog.jpg" />
         <div>
      <h3>
Program</h3>
<p>
Writting is your job</p>
</div>
</li>
<li>
      <img alt="Images 4" src="Background/keyboard.jpg" />
         <div>
      <h3>
Keyboard</h3>
<p>
Every time is together with you</p>
</div>
</li>
</ul>
</div>
<p>
test test test test test test</p>
</div>
<div id="sidebar">
    <h1>
More details</h1>
<p>
1. test
    <br><br>2. test
      
    </p>
</div>
<div id="sidebar">
    <h1>
Related post</h1>
<ul>"TEST"<br><br>
<li><a href="#">Test 1</a></li>
<br>
<li><a href="#">Test 2</a></li>
<br> 
        <br>
       </ul>
</p>
</div>
</div>
<div id='bersih'>
    <div id='footer'>
        Copyright from © 2016
        <br>
        <p>
<a href='#'>About</a> | <a href='mailto:1511502419@student.budiluhur.ac.id'>Contact</a> | <a href='#'>Privacy Policy</a> | <a href='#'>Disclaimer</a> | <a href='#'>Sitemap</a>
        </p>
</div>
</center>
</body>
</html>

Namun jika ingin sama persis dengan yang tertera pada gambar diatas, maka Anda harus menyisipkan beberapa gambar berikut:

dan gambar tersebut harus disimpan dalam sebuah direktori/folder dimana direktori tersebut harus berada satu direktori dengan code HTMLnya, terkecuali jika Anda mau mengganti url img-nya dengan url yang baru sesuai dengan penempatan file gambar tersebut.

untuk penyesuaian dengan yang Goomilar97 buat, Anda dapat membuat direktori / penempatan file sebagai berikut:

dalam contoh gambar tersebut terdapat sebuah file gumilar.html dan sebuah direktori dengan nama Background yang ditempatkan dalam sebuah direktori yang sama.

*Goomilar 97

Search This Blog

Wednesday, 16 November 2016

Contoh web design

No comments:

Post a Comment