Monday, 23 March 2015

belajar layout website dengan css dari awal

Posted on 03:08by with 1 comment
disini kita belajar bagaimana sih buat css itu
nah berhubung saya gak bisa komat kamit kita langsung ke inti pembicaraannya aja
disini kita ingin membuat

  1. header
  2. navbar
  3. sidebar
  4. konten
  5. footer
dan sedikit tambahan yaitu efek pada css itu sendiri seperti membuat foto oval, membuat foto bergerak dan membuat bagian-bagian css tadi sedikit memiliki shadow atau bayangan" gitu lah kalo gak salah kata kakak yang ngajarin di kampus

nah untuk membuat semua itu menjadi rapi kita butuh yang nama nya  bungkus untuk menjadi kan bagian" css tadi dalam satu kelompok
dari pada saya banyak ngomong ntar gak nyambung lagi langsung aja ke script nya


pertama buat folder terserah nama nya kalo saya biasanya buat nama folder nya belajar kemudian buat index.html dengan notepad lalu ganti .txt dengan .html kemudian copy script ini dan paste kan ke index yang kalian buat
<html>
<head>
<title>belajar layouting website dengan css</title>
<link rel="stylesheet" href="style.css"/ type="text/css">
</head>
<body>
<div class="bungkus">
<div class="header"></div>
<div class="nav">
<h1><b>Link</b></h1>
<ul>
<li><a href="http://pelajaraninformatikauad.blogspot.com" target="_blank">UAD</a></li>
<li><a href="http://pelajaraninformatikauad.blogspot.com" target="_blank">UAD</a></li>
<li><a href="http://pelajaraninformatikauad.blogspot.com" target="_blank">IRSYAD</a></li>
</ul>
</div>
<div class="aside">
<h2>hello mas Bro "^_^"</h2>
<div class="top"><h5><font type="algerian"></h5></div>
<p>sumatra barat adalah tempat yang sangat indah di indonesia itu pun sih kata orang minang :D,
kalo menurut saaya sih sumatra barat itu tempat yang paling spesial yang mana tempat tersebut masih
banyak tumbuhan hijau bahkan menurut saya sumatra barat itu lebih bagus dari pada jogja hehehe jangan
marah ya mas mas dan mbak mbak itu cuman curhatan blakang kampus kok hehehe...
tapi kalo teman teman gak percaya bisa kunjungi sendiri dan saya jugak sudah nyediaain web kemana saja
 hehehe kayak doraemon aja,jika teman teman mau ber kunjung dan apa saja makanan yang harus di coba atau yang tidak boleh di lupakan</p>
</div>
<div class="footer"><a href="http://pelajaraninformatikauad.blogspot.com" target="_blank">irsyad pahlapi</a></div>
</div>
</body>
</html>

kalo yang di atas udah di buat script nya kemudian buat satu lagi yaitu style.css kemudia copy script di bawah ini ke style yang kalian buat

body{
background:white;
padding:0 0 50px;
margin:0;
}

@keyframes myfirst
{
0%   {left:0px; top:0px;}
25%  {left:200px; top:0px;}
50%  {left:100px; top:0px;}
75%  {left:300px; top:0px;}
100% {left:100%; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {left:0; top:0px;}
100% {left:85%; top:0px;}
}

.bungkus{
width:80%;
margin:auto auto auto auto;
background-color: none;
}
.header{
width:100%;
height:180px;
background-color:blue;
background-image:url('a.jpg');
background-size:100% auto;
background-repeat:no-repeat;
border-radius:5px 5px 5px 5px;
}
.nav{
float:left;
width:30%;
height:500px;
background-color:yellow;
border-radius:5px 5px 5px 5px;
}
.nav ul{
list-style:none;
padding:0;
margin:0;
}
.nav ul li a{
text-indent:30px;
padding:10px 15px;
color:#fff;
text-decoration:none;
display:inline-block;

}
.nav ul li a:hover{
background:#6699ee;
color:#33ccff;
transition:all 0.3s ease-in-out;
-webkit-transition:all 0.5s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transform:scale(1,1)rotate(360deg);
-moz-transform:scale(1,1) rotate(360deg);
-webkit-transform:scale(1,1) rotate(360deg);
box-shadow:10px 10px 30px rgba(0,0,0,0.7);
}
.aside{
float:right;
width:70%;
height:500px;
background-color:red;
border-radius:5px 5px 5px 5px;
box-shadow:5px 5px 50px 10px #6ff inset;
}
.top{
width:15%;
height:20%;
background-size:100% auto;
background-image:url('a.jpg');
border-radius:100% 100% 100% 100%;
position:relative;
animation:myfirst 5s infinite;
animation-direction:alternate;

-webkit-animation:myfirst 5s infinite;
-webkit-animation-direction:alternate;

}
.footer{
float:left;
width:100%;
height:40px;
background-color:green;
border-radius:5px 5px 5px 5px;
text-align:center;

}
.footer a{
text-decoration:none;
font-family:algerian;
font-size:30px;
}

p{

}

pada .top{ di atas terdapat background-image:url('a.jpg'); dan di .header{} juga terdapat foto nah yang a.jpg ganti dengan foto agan sendiri cara nya pilih salah satu foto yang mau agan buat jadi oval kemudian letakan foto di folder belajar tadi jadi ada 3 file foto.jpg index.html dan style.css kemudian cek foto agan tadi nama nya apa misal irsyad.jpg nah tinggal anda ganti aja di sana jadi background-image:url('irsyad.jpg')

1 comment:

Subscribe to: Post Comments (Atom)