Thursday, 11 February 2016

Example HTML 5 template

<!DOCTYPE HTML>
<html>
<head>
<style>
.container{
    max-width:960px;
    width:100%;
    margin:0 auto;
 
    border-top-left-radius:10px;
    border-top-right-radius:10px;

}
body{
font-size:12px;
}
.logo, .contact{
 
    border:1px solid #06f;
    padding:10px 50px 10px 50px;
}
    .left{
        float:left;
    }
    .right{
        float:right;
    }
header{
padding:10px 10px;
height:40px;
background-color:#06f;
border-top-left-radius:10px;
border-top-right-radius:10px;

}
p{
    font-size:12px;
    text-align:justify;
}
.one-thrid{
    float:left;
    width:33%;

display:block;
}
.last{
margin-right:0% !important;
}
.first{
margin-left:0% !important;
}
.center{
    text-align:center;
}
.text1{
padding:5px 10px;
}
aside{
float:left;
width:33%;
}
.third-fourth{
float:left;
width:66%;
}
.one-two{
float:left;
width:25%;
}
.img{
padding:5%;
background-color:#eee;
}
.one-two img, .one-thrid img{
width:100%;
float:left;
height:100%;
}
footer{
margin-top:5%;
float:left;
}

@media screen and (max-width:800px) {
/* this media query allows the website to be optimised for mobile devices * /
   @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
/* start */
.one-thrid, .one-two, .third-fourth{
    float:left;
    width:100%;

display:block;
}
aside{
float:left;
width:100%;
}

</style>
</head>
<body>


<article class="container">

 <header>
       <article class="logo left">
           logo
       </article>
       <article class="contact right">
           contact us
       </article>
   </header>

       <section>
           <article class="one-thrid">
           <h3 class="center">first box</h3>
               <p class="text1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim </p>
           </article>
           <article class="one-thrid">
                 <h3 class="center">second box</h3>  
               <p class="text1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim </p>
           </article>
           <article class="one-thrid last">
                  <h3 class="center">third box</h3>
               <p class="text1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim </p>
           </article>
<aside><h3 class="center">this is aside bar</h3></aside>
<section class="third-fourth">
<article>
<article class="one-thrid">
           <h3 class="center">first box</h3>
               <p class="text1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim </p>
           </article>
           <article class="one-thrid">
                 <h3 class="center">second box</h3>  

               <p class="text1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim </p>
           </article>
           <article class="one-thrid last">
                  <h3 class="center">third box</h3>  

               <p class="text1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim </p>
           </article>
</article>


<article>
<article class="one-two">
           <h3 class="center">first box</h3>
               <p class="text1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim </p>
           </article>
           <article class="one-two">
<h3 class="center">images</h3>
             <img src="img1.jpg"/>
           </article>
<article class="one-two">
                 <h3 class="center">second box</h3>  

               <p class="text1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim </p>
           </article>
           <article class="one-two last">
                  <h3 class="center">images</h3>
             <img src="img1.jpg"/>
           </article>
</article>
<article style="clear:both"></article>
<article>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim </article>

       </section></section>

<footer>
<article class="one-thrid" style="width:50%;">
           <h3 class="center">first box</h3>
               <p class="text1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim </p>
           </article>
       
           <article class="one-thrid last" style="width:50%;">
                  <h3 class="center">third box</h3>  

               <p class="text1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim </p>
           </article>
<article><img src="circlergb.jpg" style="width:30%; margin:0 auto; margin-top:0% !important; margin-left:35%;"> </article>
</footer>

   </article>
</body>
</html>

No comments:

Post a Comment