bikin di folder d'que/css/style.css
*{
padding : 0;
margin : 0;
box-sizing : border-box;
}
body{
backgroud : #dedede;
font-family : 'Verdana',arial,sans-serif;
font-size : 15px;
}
p{
margin-bottom : 20px;
line-height : 4.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;
background : #9E9AFB;
}
/* main */
.left{
width : 250px;
border : 1px solid #dedede;
padding : 10px;
margin : 10px;
float : left;
}
.left ul{
list-style-type : none;
}
.left ul li{
display : block;
}
.left ul li a{
display :block;
border-bottom : 1px solid #dedede;
margin-bottom : 10px;
padding : 10px 5px;
font-color : #D3D2ED;
}
.left ul li a:hover{
color:#461AF3;
}
.middle{
width : 500px;
border : 1px solid #dedede;
padding : 10px;
margin : 10px;
float : left;
}
.middle img{
max-width : 100%;
height : auto;
}
.middle a{
font-wight: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:#461AF3;
}
.footer{
clear : both;
border : 1px solid #dedede;
padding : 15px;
margin : 10px;
background : #9E9AFB;
}
@media screen and (max-width:959px){
#container{
width : 100%;
}
#left-column{
width : 70%;
}
#right-column{
width : 30%;
}
img{
width : 100%;
}
}
/*MEDIA QUERIES ( Responsive )
*******************************************/
@media screen and (max-width:1080px)
{
.container{
width : 100%;
}
.left{
width : 25%;
background : #D6CCFE;
}
.middle{
width : 68%;
float : right;
}
.right{
clear : both;
padding : 1% 4%;
width : auto;
float : none;
background : #D6CCFE;
}
}
/* 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;
}
}
/* ======================================================================= */
masukan gambar, k1,k2,k3,k4,k5 ke folder C:\xampp\htdocs\d'que\images\
bikin file index.html
di C:\xampp\htdocs\d'que\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> d'Que tradisional Website Responsive</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1 align="center"> Selamat Datang d'Que tradisional</h1>
</div>
<div class="main">
<div class="left">
<h3 align="center">Menu</h3>
<ul>
<li><a target="_self" href="index.html">Home</a></li>
<li><a target="_blank" href="produk.php">produk</a></li>
<li><a target="_blank" href="https://wa.me/6285695373645">
Hubungi kami</a></li>
</ul>
</div>
<div class="middle">
<h3 align="center">Produk</h3>
<p align="center"><strong><a href="#" >Membuat-Design Web
Responsive</a></strong></p>
<p align="center"><img src="images/gambar.jpg" alt=""
width="70%" height="70%" ></p>
</div>
<div class="footer">
<p align="center">Coppright ©
2018 Belajar CSS Responsive </a></p>
</div>
</div>
</body>
</html>
bikin file produk.php
di C:\xampp\htdocs\d'que\produk.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> d'Que tradisional Website Responsive</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1 align="center"> Selamat Datang d'Que tradisional</h1>
</div>
<div class="main">
<div class="left">
<h3 align="center">Menu</h3>
<ul>
<li><a target="_self" href="index.html">Home</a></li>
<li><a href="#">produk</a></li>
<li><a target="_blank" href="https://wa.me/6285695373645">
Hubungi kami</a></li>
</ul>
</div>
<div class="middle">
<h3 align="center">Produk</h3>
<p align="center"><strong>
<a href="#">Membuat-Design Web Responsive</a></strong></p>
<p align="center">
<ul>
<?php
$gambar = array('images/k1.jpg', 'images/k2.jpg',
'images/k3.jpg', 'images/k4.jpg', 'images/k5.jpg');
// shuffle($gambar);
// for ($i = 0; $i <= 5; $i++) {
// echo "<li style=\"display: inline;\">
<img src=\"$gambar[$i]\" width=\"130\" height=\"250\"></li>";
// }
foreach ($gambar as $gb) {
// echo "<li style=\"display: inline;\">
<img src=\"$gb\" width=\"130\" height=\"250\"></li>";
echo "<li style='display: inline;'>
<img src='$gb' width='130' height='350'></li>";
}
?>
</ul>
</p>
</div>
<div class="footer">
<p align="center">Coppright ©
2018 Belajar CSS Responsive </a></p>
</div>
</div>
</body>
</html>
Comments