21 November 2022

Tutorial HTML Part 19 : Membuat Layout Website Sederhana dengan HTML dan CSS

Tutorial HTML Part 19 : Membuat Layout Website Sederhana dengan HTML dan CSS


Membuat rampilan HTML Sederhana

Contoh Tampilan Jadi :

 



Copas text berikut kemudian simpan dengan nama custom.css

body{
    background:#f3f3f3;
    color:#333;
    width:100%;
    font-family:sans-serif;
    margin:0 auto;
}

.header{
    width:90%;
    margin:auto;
    height:120px;
    line-height:120px;
    background:#417aa8;
    color:#fff;
}

.menu{
    background-color:#417aa8; 
    height:50px; 
    line-height:50px; 
    position:relative;
    width:90%;
    margin:0 auto;
    padding:0 auto;
}

.jarak{
    padding:0 2pc;
}

.menu ul {
    list-style:none;
}

.menu ul li a {
    float:left; 
    width:70px; 
    display:block; 
    text-align:center; 
    color:#FFF; 
    text-decoration:none; 
}

.menu ul li a:hover {
    background-color:#4b88bb; 
    display:block;
}

.content{
    width:90%;
    margin:auto;
    height:420px;
    padding:0px;
    background:#fff;
    color:#333;
}

.border{
    border:2px solid #4887b9;
    margin-top:1pc;
    padding-bottom:1pc;
    padding-left:2pc;
    padding-right:2pc;
}

.kiri{
    width:70%;
    float:left;
    margin:auto;
    background:#fff;
    height:420px;
}

.kanan{
    width:30%;
    float:left;
    margin:auto;
    background:#fff;
    height:420px;
}

.undecor{
    text-decoration:none;
}

.footer{
    width:90%;
    margin:auto;
    height:40px;
    line-height:40px;
    background:#417aa8;
    color:#fff;
    margin-bottom: 1pc;
}




Copas Text berikut simpan dengan index.php

<html>
 	<head>
  		<title>Belajar Membuat Layout dengan HTML dan CSS</title>
  		<link rel="stylesheet" href="custom.css"/>
 	</head>
 	<body>
		<div class="header">
			<div class="jarak">
				<h2>Belajar Membuat Layout dengan HTML dan CSS</h2>
			</div>
		</div>
		<div class="menu">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Blog</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>
		<div class="content">
			<div class="jarak">
				<!-- kiri -->
				<div class="kiri">
					<!-- blog -->
					<div class="border">
						<div class="jarak">
							<h3>Lorem Ipsum</h3>
							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, [...]</p>
							<button class="btn">Read More ..</button>
						</div>
					</div>
					<!-- end blog -->
					<!-- blog -->
					<div class="border">
						<div class="jarak">
							<h3>Lorem Ipsum</h3>
							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, [...]</p>
							<button class="btn">Read More ..</button>
						</div>
					</div>
					<!-- end blog -->
				</div>
				<!-- kiri -->
				<!-- kanan -->
				<div class="kanan">
					<div class="jarak">
						<h3>CATEGORY</h3>
						<hr/>
						<p><a href="#" class="undecor">HTML</a></p>
						<p><a href="#" class="undecor">CSS</a></p>
						<p><a href="#" class="undecor">BOOTSTRAP</a></p>
						<p><a href="#" class="undecor">PHP</a></p>
						<p><a href="#" class="undecor">MYSQL</a></p>
						<p><a href="#" class="undecor">Jquery</a></p>
						<p><a href="#" class="undecor">Ajax</a></p>
					</div>
				</div>
				<!-- kanan -->
			</div>
		</div>
		<div class="footer">
			<div class="jarak">
				<p>copyright 2021 codekop all reserved</p>
			</div>
		</div>
 	</body>
</html>

0 komentar:

Post a Comment