newsroll : Design 6 « Templates « HTML / CSS






newsroll

   

<!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>
<!-- website template design by serprise design - http://www.serprisedesign.co.uk -->
<title>Newsroll Website Template created by Serprise Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type='text/css'>
@import url("reset.css");

body
{
  background: #FFF;
  color: #111;
  font-size: 13px;
  font-family: Georgia, "Times New Roman", Times, serif;
  padding: 15px 0;
}

a { color: #FD3809; text-decoration: none; }
a:hover { color: #333; text-decoration: none; }

/* Main Styles */

#container
{
  margin: 0 auto;
  width: 920px;
}

  #headercont
  {
    width: 920px;
    height: 90px;
    padding: 30px 0 0 0;
  }
  
    #headercont h1
    {
      padding: 0 0 5px 0;
      font-weight: normal;
    }
  
      #headercont h1 a
      {
        font-size: 40px;
        letter-spacing: -3px;
      }
    
    #headercont p
    {
      font-size: 16px;
    }
    
  #quotecont
  {
    width: 920px;
    padding: 15px 0;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 29px;
    line-height: 36px;
    letter-spacing: -1px;
    border-top: 1px dashed #AAA;
  }
  
    #quotecont a
    {
      color: #FD3809;
    }
    
    #quotecont a:hover
    {
      color: #333;
    }
  
  #menucont
  {
    width: 920px;
    height: 34px;
    padding: 13px 0;
    border-top: 1px dashed #AAA;
    border-bottom: 1px dashed #AAA;
  }
  
    #menucont ul
    {
      float: left;
    }
    
    #menucont ul li
    {
      display: inline;
    }
    
    #menucont ul li a
    {
      float: left;
      line-height: 34px;
      background: #FFF;
      color: #111;
      padding: 0 20px;
      margin: 0 10px 0 0;
      text-decoration: none;
      font-size: 13px;
      text-transform: uppercase;
      
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
    }
    
    #menucont ul li a:hover
    {
      background: #EEE url("newsroll-images/bg-menu-hover.png") repeat-x;
      color: #FFF;
    }
    
      #menucont ul li.active a
      {
        background: #FD3809 url("newsroll-images/bg-menu-active.png") repeat-x;
        color: #FFF;
      }
  
  #maincont
  {
    width: 920px;
    line-height: 22px;
    padding: 20px 0;
    background: url("newsroll-images/bg-maincont.gif") repeat-y;
  }

      #maincont p { margin: 0 0 15px 0; }
      #maincont h1, #maincont h2, #maincont h3, #maincont h4, #maincont h5 { margin: 0 0 15px 0; font-weight: normal; letter-spacing: -1px; }
      #maincont h1 { font-size: 24px; }
      #maincont h2 { font-size: 22px; }
      #maincont h3 { font-size: 22px; }
      #maincont h4 { font-size: 20px; }
      #maincont h5 { font-size: 20px; }
      
      #maincont ul { margin: 0 0 15px 35px; list-style-type: square; }
      #maincont ul li { padding: 0 0 0 2px; }
      
      #maincont ol { margin: 0 0 15px 35px; list-style-type: decimal; }
      #maincont ol li { padding: 0 0 0 2px; }
      
      #maincont blockquote { background: #EEE; border-left: 3px solid #FD3809; padding: 15px; margin: 0 0 15px 0; font-size: 12px; font-style: italic; line-height: 18px; }

  
    #maincont #mainleft
    {
      float: left;
      width: 580px;
      padding: 0 40px 0 0;
    }
    
    #maincont #mainright
    {
      float: left;
      width: 300px;
      text-align: right;
    }
    
      #maincont #mainright ul.sidemenu
      {
        float: left;
        width: 300px;
        margin: 0 0 15px 0;
        border-top: 1px dashed #AAA;
        line-height: 16px;
      }
      
      #maincont #mainright ul.sidemenu li
      {
        display: block;
        list-style-type: none;
      }
      
      #maincont #mainright ul.sidemenu li a
      {
        float: left;
        width: 280px;
        padding: 10px;
        border-bottom: 1px dashed #AAA;
        color: #FD3809;
      }
      
      #maincont #mainright ul.sidemenu li a:hover
      {
        color: #111;
      }
  
  #footercont
  {
    width: 920px;
    padding: 20px 0;
    font-size: 11px;
    color: #777;
    text-align: right;
    border-top: 1px dashed #AAA;
  }


</style>


<script type="text/javascript" src="js/script.js"></script>
</head>
<body>

<div id="container" class="clearfix">
  <div id="headercont">
      <h1><a title="" href="#">Newsroll Website Template</a></h1>
        <p>Duis ac purus id dolor aliquam interdum. Maecenas sit amet neque lectus.</p>
    </div>
    <div id="quotecont">
      <p>Lorem ipsum dolor sit amet, <a title="" href="#">consectetur adipiscing</a> elit. Vivamus mi arcu, lacinia scelerisque blandit nec, mattis non nibh ...</p>
    </div>
    <div id="menucont">
        <ul>
            <li class="active"><a title="" href="#">Home</a></li>
            <li><a title="" href="#">About Us</a></li>
            <li><a title="" href="#">Our Services</a></li>
            <li><a title="" href="#">Contact Us</a></li>
        </ul>
    </div>

    <div id="maincont" class="clearfix">
      <div id="mainleft">
            <h1>Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi arcu, lacinia scelerisque blandit nec, mattis non nibh. Curabitur quis urna at massa placerat auctor. Quisque et mauris sapien, a consectetur nulla. <a title="" href="#">Cum sociis natoque penatibus</a> et magnis dis parturient montes, nascetur ridiculus mus. Nullam pellentesque, turpis a gravida porta, nibh libero feugiat augue, vel interdum erat lectus nec lorem. Phasellus vel odio felis, a venenatis tellus. Nullam sit amet ligula vitae tellus laoreet accumsan eu nec odio. Sed tincidunt congue euismod. Pellentesque sollicitudin erat massa. Quisque lacinia, metus in pretium lobortis, ipsum leo semper mauris, at gravida est nisl sit amet metus. Pellentesque quis massa eget odio lobortis pharetra. Sed faucibus sapien et ligula vulputate eu iaculis dui adipiscing. Etiam a quam lacus. Etiam urna sapien, porttitor at rhoncus sed, tristique sed sapien. Nam felis nulla, sodales a tincidunt ac, fermentum eu nisi.</p>
            <ul>
                <li>This is an unordered list - Item 1</li>
                <li>This is an unordered list - Item 2</li>
                <li>This is an unordered list - Item 3</li>
                <li>This is an unordered list - Item 4</li>
            </ul>
            <h2>Vivamus urna libero, <span>blandit nec</span> eleifend at</h2>
            <p>Vivamus urna libero, blandit nec eleifend at, porta id ante. Proin vitae turpis lacus. Sed ultrices vulputate dictum. Cras porttitor nibh sed eros suscipit quis pellentesque urna feugiat. Fusce interdum mattis ullamcorper. Aliquam non nibh arcu. Donec mollis, libero eget tempor facilisis, libero erat viverra lorem, et porta neque elit ornare arcu. Sed a ipsum diam. Ut pellentesque egestas lacus, non ultrices dui molestie non. Vivamus venenatis pharetra massa vitae tincidunt. Nulla quis lorem lacus, quis sagittis urna.</p>
            <ol>
                <li>This is an ordered list - Item 1</li>
                <li>This is an ordered list - Item 2</li>
                <li>This is an ordered list - Item 3</li>
                <li>This is an ordered list - Item 4</li>
            </ol>
            <p>Aliquam rhoncus, massa eget congue accumsan, turpis ante vestibulum ligula, sed auctor ligula quam at quam. Integer fringilla, diam vitae egestas elementum, erat tellus lacinia neque, posuere eleifend turpis quam quis mi. Cras bibendum varius lacus, a varius quam lacinia non. Duis ac purus id dolor aliquam interdum. Maecenas sit amet neque lectus. Nullam non mi non sapien dignissim dapibus at ac turpis. Sed nec luctus nunc. In id felis vitae massa adipiscing lacinia. Aenean placerat massa sit amet tortor porttitor adipiscing. Donec iaculis nisi fringilla mi pretium at sodales tellus suscipit. Maecenas ac sollicitudin urna. Suspendisse sed purus a libero fermentum rhoncus. Morbi diam orci, volutpat sed cursus vel, ultrices eu dolor. Nullam et magna non ante sagittis euismod sed at erat.</p>
            <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi arcu, lacinia scelerisque blandit nec, mattis non nibh. Curabitur quis urna at massa placerat auctor. Quisque et mauris sapien, a consectetur nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam pellentesque,</blockquote>
        </div>
        <div id="mainright">
            <h3>Nullam blandit</h3>
            <p>Vivamus mi arcu, lacinia scelerisque blandit nec, mattis non nibh.</p>
            <ul class="sidemenu">
                <li><a title="" href="#">Nullam sit amet ligula</a></li>
                <li><a title="" href="#">Etiam a quam lacus</a></li>
                <li><a title="" href="#">Sed ultrices vulputate dictum</a></li>
                <li><a title="" href="#">Vivamus mi arcu, lacinia scelerisque blandit nec, mattis non nibh</a></li>
                <li><a title="" href="#">Curabitur quis urna</a></li>
            </ul>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi arcu, lacinia scelerisque blandit nec, mattis non nibh. Curabitur quis urna at massa placerat auctor. Quisque et mauris sapien, a consectetur nulla.</p>
        </div>
    </div>
    <div id="footercont">
      <p>Website Template Design by <a title="derby web design" href="http://www.serprisedesign.co.uk" rel="external">Derby Web Design</a></p>
    </div>
</div>
    
</body>
</html>

   
    
    
  








Related examples in the same category

1.newave
2.newdarkside
3.newday
4.newera
5.newfangled
6.newgreeny
7.newgreys
8.newhorizon
9.news portal
10.news-print
11.newsbeat
12.newsflash
13.newsportal
14.newstheme
15.newwave-business-inc
16.new_rise
17.NiceSite
18.nimbuslike
19.nixed
20.noimages
21.noname1
22.nonzero
23.nothingfanzy
24.nourish
25.nowhere
26.NuahSwirl
27.nullbullum
28.numerology
29.o-no-typography
30.obsess
31.obsession
32.obtanium
33.office-plants
34.offlimits
35.offrecord
36.oheon_com_110100021
37.ohgreenworld
38.Okeanos
39.old-wall
40.oldarchitecture
41.Olive
42.one-penny
43.one_two_three
44.online-edu
45.onlinemoviestore
46.oodles
47.openyourwindows
48.opposed
49.optimal-touch
50.orchidaceae
51.ordinaire
52.ormeggiare
53.ornamental
54.ornate
55.OrngBlu
56.oswd_blozilla
57.our-work
58.ourhouse
59.outdoorv1.0
60.outliers
61.outoftheblue
62.outtabox
63.oxidation
64.package
65.paddy-harvest
66.pagedrape
67.paivi-k
68.paleforest
69.palmtrees
70.pamphlet
71.pancorbo
72.papira
73.paradigm
74.paradise1983
75.parchmenter
76.particle
77.particles
78.pastel
79.pastelco
80.pastelflowers
81.pastries
82.path-fider
83.patternmaker
84.PattyMcFatPat01
85.PattyMcFatPat03
86.pc
87.Pear Template
88.pear
89.pedestrian
90.penchantforphotos
91.pencilpink
92.people
93.perfectblemish
94.performance
95.perplex
96.personified
97.pillars
98.pills
99.pinnacle
100.Pistachio
101.pixabella
102.pixabella04
103.pixabella06
104.pixelationingreen
105.plaidshirt
106.plainandsimple
107.planning-feed
108.pluralism
109.plurkified
110.pointspace
111.pollinate
112.pollinating
113.pollination