Scribd
Upload
11 views

Templat Responsive

The document is an HTML template for a blog website. It includes CSS styling for elements like headings, links, navigation menus, and sections for content, sidebar and footer areas. It also includes media queries to make the template responsive for smaller screens.

Uploaded by

poromastah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
11 views

Templat Responsive

The document is an HTML template for a blog website. It includes CSS styling for elements like headings, links, navigation menus, and sections for content, sidebar and footer areas. It also includes media queries to make the template responsive for smaller screens.

Uploaded by

poromastah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 7

<?xml version="1.0" encoding="UTF-8" ?

>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection'
xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>
<head> <title><data:blog.pageTitle/></title> <meta content='width=device-
width,initial scale=1,minimum-scale=1,maximum-scale=1' name='viewport'/> <meta
content='text/html;charset=UTF-8' http-equiv='Content-Type'/> <meta
content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'/> <b:include data='blog'
name='all-head-content'/> <b:skin><![CDATA[
/* ———————————————– Blogger Template Style Name: Template Wussh… Designer:
Syafaatfm URL: www.facebook.com/syafaatfm ———————————————– */
/* =========================== ======= Body style ========
=========================== */
body {
background: #E0E0E0;
color: #000305;
font-size: 87.5%;
/* Base font size: 14px */
font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande',
'Lucida Sans', Arial, sans-serif;
line-height: 1.429;
margin: 0;
padding: 0;
text-align: left;
}
.body {
clear: both;
margin: 0 auto;
width: 70%;
}
/* =========================== ========= Headings ========
=========================== */
h2 {
font-size: 1.571em
}
/* 22px */
h3 {
font-size: 1.429em
}
/* 20px */
h4 {
font-size: 1.286em
}
/* 18px */
h5 {
font-size: 1.143em
}
/* 16px */
h6 {
font-size: 1em
}
/* 14px */
h2,
h3,
h4,
h5,
h6 {
font-weight: 400;
line-height: 1.1;
margin-bottom: .8em;
}
.Header h1 {
padding: -9999px 0;
}
/* =========================== ======= Anchor style ======
=========================== */
a {
outline: 0;
}
a img {
border: 0px;
text-decoration: none;
}
a:link,
a:visited {
color: #CF5C3F;
padding: 0 1px;
text-decoration: none;
}
a:hover,
a:active {
background-color: #CF5C3F;
color: #fff;
text-decoration: none;
}
/* =========================== ===== Main Navigation =====
=========================== */
.mainHeader nav {
background: #666;
font-size: 1.143em;
height: 40px;
line-height: 30px;
margin: 0 auto 30px auto;
text-align: center;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul {
list-style: none;
margin: 0 auto;
}
.mainHeader nav ul li {
float: left;
display: inline;
}
.mainHeader nav a:link,
.mainHeader nav a:visited {
color: #fff;
display: inline-block;
height: 30px;
padding: 5px 23px;
text-decoration: none;
}
.mainHeader nav a:hover,
.mainHeader nav a:active,
.mainHeader nav .active a:link,
.mainHeader nav .active a:visited {
background: #CF5C3F;
color: #fff;
text-shadow: none !important;
}
.mainHeader nav li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader img {
width: 30%;
height: auto;
margin: 3% 0;
}
/* =========================== ======= Content Area ======
=========================== */
.mainContent {
overflow: hidden;
line-height: 25px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.topcontent {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-bottom: 3%;
}
.bottomcontent {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
}
.content {
width: 68%;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.post-info {
font-style: italic;
color: #999;
font-size: 85%;
}
/* =========================== ======== Sidebar ==========
=========================== */
.top-sidebar {
width: 24%;
float: left;
margin-left: 2%;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #FFF;
padding: 2% 3%;
margin-bottom: 2%;
}
.middle-sidebar {
width: 24%;
float: left;
margin-left: 2%;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #FFF;
padding: 2% 3%;
margin-bottom: 2%;
}
.bottom-sidebar {
width: 24%;
float: left;
margin-left: 2%;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #FFF;
padding: 2% 3%;
}
/* =========================== ========= Footer ==========
=========================== */
.mainFooter {
width: 100%;
float: left;
margin-top: 2%;
margin-bottom: 2%;
padding-left: 0;
background-color: #666;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color: #FFF;
}
.mainFooter p {
width: 91%;
margin: 2% auto;
}
/* =========================== ====== Media Queries ======
=========================== */
@media only screen and (min-width: 150px) and (max-width: 780px) {
.body {
clear: both;
margin: 0 auto;
width: 90%;
font-size: 90%;
}
.mainHeader nav {
background: #666;
font-size: 1.143em;
height: 160px;
line-height: 30px;
margin-bottom: 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul {
list-style: none;
margin: 0 auto;
padding-left: 0;
}
.mainHeader nav li {
margin-left: 0 auto;
width: 100%;
}
.mainHeader nav a:link,
.mainHeader nav a:visited {
color: #FFF;
display: block;
height: 30px;
padding: 5px 0;
text-decoration: none;
}
.mainHeader nav a:active,
.mainHeader nav .active a:link,
.mainHeader nav .active a:visited {
background: #CF5C3F;
color: #fff;
text-shadow: none !important;
}
.mainHeader nav li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader img {
width: 100%;
height: auto;
margin-bottom: 3%;
}
.mainContent {
overflow: hidden;
line-height: 25px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-top: 4%;
margin-bottom: 2%;
}
.topcontent {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 2% 5%;
margin-bottom: 4%;
}
.bottomcontent {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 2% 5%;
}
.content {
width: 100%;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.post-info {
display: none;
}
.top-sidebar {
width: 86%;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #FFF;
margin-top: 4%;
margin-left: 0;
padding: 0 7%;
margin-bottom: 0;
}
.top-sidebar p {
width: 90%;
}
.middle-sidebar {
width: 86%;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #FFF;
margin-top: 4%;
margin-left: 0;
padding: 0 7%;
margin-bottom: 0;
}
.middle-sidebar p {
width: 90%;
}
.bottom-sidebar {
width: 86%;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #FFF;
margin-top: 4%;
margin-left: 0%;
padding: 0 7%;
margin-bottom: 1%;
}
.bottom-sidebar p {
width: 90%;
}
.mainFooter {
width: 100%;
float: left;
margin: 2% 0;
padding-left: 0;
background-color: #666;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color: #FFF;
}
.mainFooter p {
width: 86%;
margin: 2% auto;
}
}
]]></b:skin> </head> <body class='body'> <b:section class='header' id='header'
maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true'
title='Cara Download Premium – Free And Premium Tutorial (Header)' type='Header' />
</b:section> <header class='mainHeader'> <nav><ul> <li class='active'><a
href='#'>Home</a></li> <li><a href='#'>Portfolio</a></li> <li><a
href='#'>Blog</a></li> <li><a href='#'>Contact</a></li> </ul></nav> </header> <!--
content wrapper start --> <div class='mainContent'> <!-- post wrapper start -->
<div class='content'> <article class='topcontent'> <content> <b:section
class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true'
title='Posting Blog' type='Blog' /> </b:section> </content> </article> </div> <!--
post wrapper end --> <!-- post wrapper start --> <aside class='top-sidebar'>
<article> <b:section class='sidebar' id='sidebar' preferred='yes'/> </article>
</aside> <!-- post wrapper end --> </div> <!-- content wrapper end --> <div
class='clear'/> <footer class='mainFooter'> <p>Copyright © 2013 <a
href='https://www.jegulo.com'>1stwebdesigner</a></p> </footer> </body> </html>

You might also like