Skip to content

Instantly share code, notes, and snippets.

@andreseptian07

andreseptian07/index.html

Created November 8, 2017 03:39
Show Gist options
  • Save andreseptian07/fd3221d6c6cc5af5d68cbf4488a28e1d to your computer and use it in GitHub Desktop.
Save andreseptian07/fd3221d6c6cc5af5d68cbf4488a28e1d to your computer and use it in GitHub Desktop.
Download ZIP
File Utama 3 Kolom
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Responsive Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>Responsive Layout</h1>
<strong>3 Columns</strong> --- <small><a href="http://edukasiteki.blogspot.co.id/">Back to article</a></small>
</div> <!--/ .header -->
<div class="main">
<div class="left">
<h3>Left</h3>
<p>Contoh ini di buat untuk mempermudah pembuatan website. Website ini adalah Website untuk Web Designer & Web Developer Indonesia, Serta Graphic Designer Indonesia. </p>
</div> <!--/ .header -->
<div class="middle">
<h3>Middle</h3>
<p><strong><a href="http://edukasiteki.blogspot.co.id/" target="_blank">Pengenalan responsive web design / desain web responsif</a></strong> – Hallo para pembaca , pertama-tama kami ingin mengucapkan Selamat Tahun Baru 2018 untuk para pembaca semuanya, semoga tahun ini menjadi tahun yang lebih baik untuk kita dibanding tahun-tahun sebelumnya.</p>
<p><img src="https://lh3.googleusercontent.com/-oSmicYxqRpk/WXaxJSroGBI/AAAAAAAABW8/x4FOuzNad0wI4fypYgRelAL6cL6wihlDACEwYBhgL/w139-h140-p/My%2BAkun.png" alt=""></p>
<p><a href="http://www.tutorial-webdesign.com/kegunaan-manfaat-responsive-web-design/">Seberapa Penting Sih Responsive Web Design?</a> Semakin hari semakin banyak orang yang menggunakan perangkat mobile untuk browsing, seperti menggunakan smartphone dan tablet untuk setiap tugas atau pekerjaannya sehari-hari. Pekerjaan yang dulunya hanya dilakukan melalui personal komputer (desktop & laptop) sekarang hampir semua sudah bisa digunakan juga melalui perangkat mobile.</p>
<p><img src="https://lh3.googleusercontent.com/-oSmicYxqRpk/WXaxJSroGBI/AAAAAAAABW8/x4FOuzNad0wI4fypYgRelAL6cL6wihlDACEwYBhgL/w139-h140-p/My%2BAkun.png" alt=""></p>
</div> <!--/ .middle -->
<div class="right">
<h3>Right</h3>
<p>Responsive Web Design adalah sebuah teknik yang digunakan untuk membuat layout website menyesuaikan ukuran lebar layar dari perangkat yang digunakan</p>
<h3>Artikel Responsive Lain</h3>
<p>
<ul>
<li><a href="http://www.tutorial-webdesign.com/pengenalan-responsive-web-design/">Pengenalan Responsive Web Design</a></li>
<li><a href="http://www.tutorial-webdesign.com/kegunaan-manfaat-responsive-web-design/">Seberapa Penting Sih Responsive Web Design?</a></li>
<li><a href="http://www.tutorial-webdesign.com/6-tips-untuk-membuat-website-responsive/">6 Tips Untuk Membuat Website Responsive</a></li>
<li><a href="http://www.tutorial-webdesign.com/prinsip-dasar-responsive-web-design/">9 Prinsip Dasar Responsive Web Design</a></li>
<li><a href="http://www.tutorial-webdesign.com/template-blogger-blogspot-gratis-dan-responsive/">7 Template Blogger Blogspot Gratis Dan Responsive</a></li>
<li><a href="http://www.tutorial-webdesign.com/test-responsive-web/">Test Responsive Web Design</a></li>
</ul>
</p>
</div> <!--/ .right -->
</div> <!--/ .main -->
<div class="footer">
<h4>Footer</h4>
<p>Copyright &copy; 2018 <a href="http://edukasiteki.blogspot.co.id/">edukasiteki.blogspot.com</a></p>
</div> <!--/ .footer -->
</div>
</body>
</html>
Raw
style.css
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: #dedede;
font-family: 'Helvetica', arial, sans-serif;
font-size: 15px;
}
p{
margin-bottom: 20px;
line-height: 1.5em;
}
h3{
margin-bottom: 20px;
border-bottom: 1px solid #aaa;
}
a{
text-decoration: none;
color: #333;
}
a:hover{
color: #666;
}
.container{
max-width: 1080px;
margin: 20px auto;
background: #fff;
overflow: hidden;
padding: 10px;
}
.header{
border: 1px solid #dedede;
padding: 10px;
margin: 10px;
}
/* Main */
.left{
width: 250px;
border: 1px solid #dedede;
background: #e5e5e5;
padding: 10px;
margin: 10px;
float: left;
}
.middle{
width: 500px;
border: 1px solid #dedede;
padding: 10px;
margin: 10px;
float: left;
}
.middle img{
max-width: 100%;
height: auto;
}
.middle a{
font-weight: bold;
}
.right{
width: 250px;
border: 1px solid #dedede;
padding: 10px;
margin: 10px;
float: left;
}
.right ul{
list-style-type: none;
}
.right ul li{
display: block;
}
.right ul li a{
display: block;
border-bottom: 1px solid #dedede;
margin-bottom: 10px;
padding: 10px 5px;
}
.right ul li a:hover{
color: orange;
}
.footer{
clear: both;
border: 1px solid #dedede;
padding: 10px;
margin: 10px;
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* untuk ukuran 1080px kebawah */
@media screen and (max-width: 1080px) {
.container {
width: 100%;
}
.left {
width: 25%;
background: #fff000;
}
.middle {
width: 68%;
float: right;
}
.right {
clear: both;
padding: 1% 4%;
width: auto;
float: none;
}
}
/* untuk ukuran layar 700px kebawah */
@media screen and (max-width: 780px) {
.header,
.footer{
text-align: center;
}
.left {
width: auto;
float: none;
}
.middle {
width: auto;
float: none;
}
.right {
width: auto;
float: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment