Skip to main content

CREATING RESPONSIVE LAYOUT

HTML CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>::Responsive Layout::</title>
<link rel="stylesheet" href="css/style.css"/>
</head>

<body class="body">
<header class="mainheader"/>
<img src="img/logo.png"  alt="logo"/>
<nav>
  <ul>
    <li class="active"><a  href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfoliow</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
</header>
<div class="maincontent">
  <div class="content">
    <article class="top_content">
      <header>
        <h2><a href="#" title="first_post">First Post</a></h2>
      </header>
      <footer>
        <p class="first_post_title">This post is  written by kalai</p>
      </footer>
      <content>
        <p>I don’t know about you, but I love going on road trips. My family of four just returned from 10 days of driving and visiting family and friends who live in other parts of the country. There’s nothing quite like lengthy road trips for spending a lot of time together in close quarters. When you’re spending so many hours together, you have the chance to really talk and listen to your travelling companions – whether you like it or not.</p>
        <p>I don’t know about you, but I love going on road trips. My family of four just returned from 10 days of driving and visiting family and friends who live in other parts of the country. There’s nothing quite like lengthy road trips for spending a lot of time together in close quarters. When you’re spending so many hours together, you have the chance to really talk and listen to your travelling companions – whether you like it or not.</p>
      </content>
    </article>
    <article class="bottom_content">
      <header>
        <h2><a href="#" title="second_post">Second Post</a></h2>
      </header>
      <footer>
        <p class="first_post_title">This post is  written by kalaiselvan</p>
      </footer>
      <content>
        <p>I don’t know about you, but I love going on road trips. My family of four just returned from 10 days of driving and visiting family and friends who live in other parts of the country. There’s nothing quite like lengthy road trips for spending a lot of time together in close quarters. When you’re spending so many hours together, you have the chance to really talk and listen to your travelling companions – whether you like it or not.</p>
        <p>I don’t know about you, but I love going on road trips. My family of four just returned from 10 days of driving and visiting family and friends who live in other parts of the country. There’s nothing quite like lengthy road trips for spending a lot of time together in close quarters. When you’re spending so many hours together, you have the chance to really talk and listen to your travelling companions – whether you like it or not.</p>
      </content>
    </article>
  </div>
</div>
<aside class="top_side">
  <article>
    <h2> Top side</h2>
    <p>I don’t know about you, but I love going on road trips. My family of four just returned from 10 days of driving and visiting family and friends who live in other parts of the country.</p>
  </article>
</aside>
<aside class="middle_side">
  <article>
    <h2>Middle side</h2>
    <p>I don’t know about you, but I love going on road trips. My family of four just returned from 10 days of driving and visiting family and friends who live in other parts of the country.</p>
  </article>
</aside>
<aside class="bottom_side">
  <article>
    <h2>Bottom side</h2>
    <p>I don’t know about you, but I love going on road trips. My family of four just returned from 10 days of driving and visiting family and friends who live in other parts of the country.</p>
  </article>
</aside>
<footer class="main_footer">
  <p>copyright &copy;<a href="#" title="copyright">kalai6095</a></p>
</footer>
</body>
</html>



CSS:
@charset "utf-8";
/* CSS Document */

html{
padding:0px;
margin:0px;
}

body{
background:#CCC;
color:#000305;
font-size:87.5%;/*base font size is 14px*/
font-family:Arial, Helvetica, sans-serif;
line-height:1.5em;
text-align:justify;
}
a{
text-decoration:none;
}
a:link, a:visited{
color:#cf5c3f;
}
a:hover, a:active{
background-color:#cf5c3f;
color:#fff;
}

.body{
margin:0px auto;
width:70%;
clear:both;
}
.mainheader img{
width:20%;
height:auto;
margin:2% 0;
}
.mainheader nav{
background:#666;
height:40px;
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;
padding:10px 25px;
height:20px;
}
.mainheader nav a:hover, .mainheader nav a:active,
.mainheader nav .active a:link, .mainheader nav .active a:visited{
background-color:#cf5c3f;
text-shadow:none;
}
.mainheader nav ul li a{
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.maincontent{
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
line-height:25px;
}
.content{
width:70%;
float:left;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.top_content{
background-color:#fff;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:2%;
margin-top:2%;
}
.first_post_title{
font-style:italic;
color:#999;
font-size:85%;
}
.bottom_content{
background-color:#fff;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:2%;
margin-top:2%;
}
.top_side{
width:21%;
margin-left:3%;
float:left;
background:#fff;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:2% 3%;
margin-top:2%;
margin-bottom:2%;
}
.middle_side{
width:21%;
margin-left:3%;
float:left;
background:#fff;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:2% 3%;
margin-bottom:2%;
}
.bottom_side{
width:21%;
margin-left:3%;
float:left;
background:#fff;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:2% 3%;
margin-bottom:2%;
}
.main_footer{
width:100%;
height:40px;
float:left;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
margin:2% 0 2% 0;
background-color:#666;
}
.main_footer p{
width:92%;
margin:1% auto;
color:#fff;
}
@media only screen and (min-width:150px)and (max-width:600px)
{
.body{
width:90%;
font-size:95%;
}
.mainheader img{
width:100%;
height:auto;
margin:2% 0;
}
.mainheader nav{
height:160px;
}
.mainheader nav ul{
padding-left:0;
}
.mainheader nav ul li{
width:100%;
text-align:center;
}
.mainheader nav a:link, .mainheader nav a:visited{
padding:10px 25px;
height:20px;
display:block;
}
.content{
width:100%;
}
.top_content{
background-color:#fff;
padding:2%;
margin-top:2%;
}
.first_post_title{
display:none;
}
.bottom_content{
background-color:#fff;
padding:2%;
margin:2% 0 2% 0;
}
.top_side{
width:94%;
margin: 2% 1% 2% 0;
}
.middle_side{
width:94%;
margin: 2% 1% 2% 0;
}
.bottom_side{
width:94%;
margin: 2% 1% 2% 0;
}
.main_footer p{
text-align: center;
}



}


Comments

Post a Comment

Popular posts from this blog

FACTORIAL OF A NUMBER USING RMI IN JAVA

CLIENT PROGRAM: import java.io.*; import java.rmi.*; public class client { public static void main(String args[])throws Exception { try { String s="rmi://"+args[0]+"/abc"; serverint f=(serverint)Naming.lookup(s); DataInputStream m=new DataInputStream(System.in); int n1=Integer.parseInt(m.readLine()); System.out.println("the factorial is"+f.fact(n1)); } catch(Exception e) { System.out.println(e); } } } INTERFACE PROGRAM: import java.rmi.*; public interface serverint extends Remote { int fact(int n)throws Exception; } IMPLEMENTATION PROGRAM: import java.rmi.*; import java.rmi.server.*; public class serverimpl extends UnicastRemoteObject implements serverint { public serverimpl()throws Exception { } public int fact(int n) { int i,c=1; for(i=1;i<=n;i++) { c=i*c; } ret...
Post a Comment
Read more

creating simple graphics appletviewer java

import java.awt.*; import java.applet.*; import java.awt.event.*; //<applet code="Appletdemo" height=500 width=500></applet> public class Appletdemo extends Applet implements ActionListener {             String s;             Button b1,b2;             public void init()             {                         b1= new Button("Test");                         b2=new Button("circle");                         add(b1);                         add(b2);                         b1.addActionListener(this);              ...
Post a Comment
Read more