.png)
Cara Membuat Template Web One Page Responsive
Assalamualaikum wr. wb. Ketemu lagi dengan saya. Kali ini saya akan membahas cara membuat template one page yang responsive. Membuat template bisa anda jadikan untuk menambah penghasilan yang lumayan karena harga per template rata-rata sekitar $25 anda bisa memasarkanya di themeforest.net. Nah kali ini saya akan share cara membuat template yang sederhana nantinya bisa anda kembangkan lagi. pertama kita buat dulu struktur folder sperti ini
folder_project:
-css
-fonts
-js
-img
lalu di folder_project buat file index.html isinya seperti ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Gym - Personal Training</title>
<meta name="viewport" content="width/device-width, initial-scale=1.0">
<link href="css/blueberry.css" rel="stylesheet">
<style type="text/css">
* {
margin: 0;
border: 0;
padding: 0;
}
body {
background: #f0f0f0;
font: 14px/20px Arial, San-Serif;
color: #555;
margin: 0;
}
h1 {
text-align: center;
font-size: 180%;
line-height: 120%;
padding: 5% 0;
}
h2 {
text-decoration: underline;
line-height: 280%;
padding-left: 2%;
}
h3 {
line-height: 110%;
padding: 5% 0;
}
p {
padding: 1%;
}
img {
text-align: center;
max-width: 100%;
height: auto;
width: auto;
}
a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #fff;
text-decoration: underline;
}
header {
background: #405580;
width: 100%;
height: 86px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
opacity: 0.90;
}
#logo {
margin: 20px;
float: left;
width: 200px;
height: 60px;
background: url("img/the-gym.png") no-repeat center;
}
nav {
float: right;
padding: 30px 20px 20px 0;
}
#menu-icon {
display: none;
width: 40px;
hight: 40px;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
padding: 10px;
}
.current {
color: #fff;
text-decoration: underline;
}
#doc {
margin: 40px 0;
}
#content {
margin: 0 auto;
max-width: 1140px;
margin-top: 110px;
}
.blueberry {
max-width: 960px;
margin-top: 110px;
}
section {
width: 29%;
float: left;
margin: 2% 2%;
text-align: center;
}
.clear {
clear: both;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
padding: 4%;
display: inline;
}
aside {
float: right;
margin: 0 auto;
width: 34%;
height: auto;
padding: 4%;
display: inline;
}
ul.gym li {
padding-left: 3%;
}
footer {
background: #333333;
width: 100%;
overflow: hidden;
opacity: 0.70;
}
footer p, footer h3 {
color: #fff;
}
footer p a {
color: #fff;
text-decoration: none;
}
ul.social li {
display: inline;
}
ul.socila li img {
height: 50px;
}
footer.second {
border-top: 1px solid #4D4E50;
background-color: #111;
max-height: 50px;
text-align: center;
opacity: 0.50;
color: #fff;
}
/********************MEDIA!!!!*********************/
@media screen and (max-width: 478px) {
body {
position: absolute;
}
}
@media screen and (max-width: 748px) {
header {
position: absolute;
}
#menu-icon {
display: block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 20px;
background: #405580;
border: 1px solid #fff;
right: 20px;
top: 60px;
width: 50%;
border-radius: 2px 0 2px 2px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover ul {
display: block;
}
section {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
article {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
aside {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
}
</style>
<script src="js/jquery.js"></script>
<script src="js/jquery.blueberry.js"></script>
<script>
$(window).load(function() {
$('.blueberry').blueberry();
});
</script>
</head>
<body>
<header>
<a href="#" id="logo"></a>
<nav>
<a href="#" id="menu-icon"><img src="img/icon.png"></a>
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="#">Trainer</a></li>
<li><a href="#">Plans</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Facility</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div id="doc">
<div id="content">
<div class="blueberry">
<ul class="slides">
<li><img src="img/inside-gym.png">
<li><img src="img/push-ups.png">
<li><img src="img/chest-fly.png">
<li><img src="img/training.png">
</ul>
</div>
</div>
</div>
<section>
<img src="img/trainers.png">
<h1>Best Trainers Around!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elitsed eiusmod tempor enim minim veniam quis notru exercit ation Lorem ipsum dolor sit amet.Veniam quis notru exercit.</p>
</section>
<section>
<img src="img/location.png">
<h1>Local And Convenient</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elitsed eiusmod tempor enim minim veniam quis notru exercit ation Lorem ipsum dolor sit amet.Veniam quis notru exercit.</p>
</section>
<section>
<img src="img/check.png">
<h1>Check Us Out -Free!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elitsed eiusmod tempor enim minim veniam quis notru exercit ation Lorem ipsum dolor sit amet.Veniam quis notru exercit.</p>
</section>
<div class="clear"></div>
<article>
<img src="img/gym-classes.jpg">
</article>
<aside>
<h2>Our Group Class Schedule:</h2>
<ul class="gym">
<li><h3>Our Group Class Schedule</h3></li>
<li><h3>Our Group Class Schedule</h3></li>
<li><h3>Our Group Class Schedule</h3></li>
<li><h3>Our Group Class Schedule</h3></li>
<li><h3>Our Group Class Schedule</h3></li>
<li><h3>Our Group Class Schedule</h3></li>
</ul>
</aside>
<div class="clear"></div>
<section>
<h1>Ladies Section</h1>
<img src="img/ladies-gym.jpg">
<p>Cras sodales mauris nec odio tristique dictum. Nam semper consectetur, feugiat mi sodales vel. Phasellus iaculis libero eu sem accumsan sagit vivamus.</p>
</section>
<section>
<h1>The Gym Floor</h1>
<img src="img/gym-floor.jpg">
<p>Cras sodales mauris nec odio tristique dictum. Nam semper consectetur, feugiat mi sodales vel. Phasellus iaculis libero eu sem accumsan sagit vivamus.</p>
</section>
<section>
<h1>Free Heights</h1>
<img src="img/free-weights.jpg">
<p>Cras sodales mauris nec odio tristique dictum. Nam semper consectetur, feugiat mi sodales vel. Phasellus iaculis libero eu sem accumsan sagit vivamus.</p>
</section>
<footer>
<section>
<h3><b>The Gym</b></h3>
<p><b>215-555-5555</b><br><br>
1700 Cestrus Street<br>
Philipina, Pa 19102<br>
trainer@thegym.com</p>
</section>
<section>
<h3>Connect With Us!</h3>
<ul class="social">
<li><a href="#"><img src="img/facebook1.png"></a></li>
<li><a href="#"><img src="img/googleplus.png"></a></li>
<li><a href="#"><img src="img/twitter1.png"></a></li>
<li><a href="#"><img src="img/youtube1.png"></a></li>
</ul>
</section>
<section>
<img src="img/weight-lifter.png">
</section>
</footer>
<footer class="second">
© Copyrights 2016 - The Gym
</footer>
</body>
</html>
kemudian untuk folder css diisi css dari blueberry.css
untuk folder js diisi jquery.js dan jquery.blueberry.js
untuk folder img bahan gambarnya bisa didownload disini
dan untuk folder fonts bisa diisi dengan font-awesome
nah untuk file blueberry.css dan jquery.blueberry.js filenya dari mana? itu dari plugin blueberry slider untuk blueberry slider bisa didownload di http://marktyrrell.com/labs/blueberry/
Oke Semoga bermanfaat
0 komentar :