example of layout in html from css by quicksandbook

<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
<link rel="stylesheet" type="text/css" href="css/960_12_col.css" />
<style type="text/css">
@font-face {
font-family: 'QuicksandBook';
src: url('fonts/Quicksand_Book-webfont.eot');
src: url('fonts/Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/Quicksand_Book-webfont.woff') format('woff'),
url('fonts/Quicksand_Book-webfont.ttf') format('truetype'),
url('fonts/Quicksand_Book-webfont.svg#QuicksandBook') format('svg');
font-weight: normal;
font-style: normal;}
body {
color: #ffffff;
background: #413f3b url("images/bg.jpg");
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 90%;
margin: 0px;
text-align: center;}
a {
color: #b5c1ad;
text-decoration: none;}
a:hover {
color: #ffffff;}
.header {
background-image: url("images/bg-header.jpg");
padding: 0px 0px 0px 0px;
height: 100px;
position: fixed;
top: 0px;
width: 100%;
z-index: 50;}
.nav {
float: right;
font-family: QuicksandBook, Helvetica, Arial, sans-serif;
padding: 45px 0px 0px 0px;
text-align: right;}
.wrapper {
width: 960px;
margin: 0px auto;
background-image: url("images/bg-triangle.png");
background-repeat: no-repeat;
background-position: 0px 0px;
text-align: left;}
.logo {
margin-bottom: 20px;}
h1, h2 {
font-family: QuicksandBook, Helvetica, Arial, sans-serif;
font-weight: normal;
text-transform: uppercase;}
h1 {
font-size: 240%;
margin-top: 140px;}
.date {
font-family: Arial, Helvetica, sans-serif;
font-size: 75%;
color: #b5c1ad;}
.intro {
clear: left;
font-size: 90%;
line-height: 1.4em;}
.main-story {
background-image: url("images/triangles.png");
background-repeat: no-repeat;
background-position: 122px 142px;
height: 570px;}
.more-articles {
border-top: 1px solid #ffffff;
padding: 10px;}
.more-articles p {
border-bottom: 1px solid #807c72;
padding: 5px 0px 15px 0px;
font-size: 80%;}
.more-articles p:last-child {
border-bottom: none;}
.footer {
clear: both;
background: rgba(0, 0, 0, 0.2);
padding: 5px 10px;}
.footer p {
font-family: Helvetica, Arial, sans-serif;
font-size: 75%;
text-align: right;}
.footer a {
color: #807c72;}
</style>
</head>
<body>
<div class="header">
<div class="container_12">
<div class="grid_5">
<img src="images/logo.png" alt="Pedal Faster - The modern bicycle magazine" width="216" height="37" class="logo" />
<img src="images/header-triangle.png" alt="" width="116" height="100" />
</div>
<div class="nav grid_7">
<a href="">home</a> / <a href="">news</a> / <a href="">archives</a> / <a href="">about</a> / <a href="">contact</a>
</div>
</div>
</div>
<div class="wrapper">
<div class="main-story container_12">
<div class="grid_6 push_6">
<h1><a href="">Fixed Gear Forever</a></h1>
</div>
<div class="intro grid_3 push_9">
<p class="date">16 APRIL 2011</p>
<p>The veloheld combines minimalist design with superb quality. Devoid of excessive graphics and gear shift components, the veloheld product range delights us with its beauty and simplicity. The black and white (yin and yang?) bicycles feature a short wheelbase, a single gear and a narrow handlebar... All you need to explore the city streets.</p>
<p>For those who want to create their bike themselves, the veloheld frames come in three sizes and two colours and are the perfect starting point. <a href="">Continue reading...</a></p>
</div>
</div>
<div class="more-articles container_12">
<h2 class="grid_12"><a href="">More Articles</a></h2>
<div class="grid_3">
<img src="images/more1.jpg" alt="The road ahead" width="220" height="125" />
<p><a href="">On the Road: From the fixed gear fanatic's point of view</a></p>
<p><a href="">Brand History: Pashley Cycles - hand-built in England</a></p>
<p><a href="">Frame Wars: Innovations in cycle manufacture and repair</a></p>
</div>
<div class="grid_3">
<img src="images/more2.jpg" alt="Sketchbook" width="220" height="125" />
<p><a href="">Touring Diary: A sketchbook in your basket</a></p>
<p><a href="">Top Ten Newcomers for 2012: A peek at what's to come</a></p>
<p><a href="">InnerTube: The best cycling videos on the web</a></p>
</div>
<div class="grid_3">
<img src="images/more3.jpg" alt="Repair shop sign" width="220" height="125" />
<p><a href="">Product Review: All baskets were not created equal</a></p>
<p><a href="">Going Public: Out & about with the founder of Public</a></p>
<p><a href="">Cycle Lane Defence: Know your rights</a></p>
</div>
<div class="grid_3">
<img src="images/more4.jpg" alt="Schwinn Spitfire" width="220" height="125" />
<p><a href="">Bicycle Hall of Fame: The 1958 Schwinn Spitfire</a></p>
<p><a href="">Reader Survey: Share your thoughts with us!</a></p>
<p><a href="">Chain Gang: The evolution of the humble bike chain</a></p>
</div>
</div>
</div>
<div class="footer clearfix">
<div class="container_12">
<p class="grid_12"><a href="">Legal Information</a> | <a href="">Privacy Policy</a> | <a href="">Copyright © Pedal Faster 2011</a></p>
</div>
</div>
</body>
</html>

output:

what is structure of html page simple first program of html code what is superscript and subscript in html how can use strong tag in html pages how can use strikethrough in html page how can use quotations tag in html page how can use paragraphs tag in html page how can use line breaks tag in html code how can use italic tag in html page code how can use insert and delete tag in html how can use horizontal rules in html how can use headings tag in html how can make simple text web page cod how can write emphasis in html page code how can write definitions in html page how can write citations in html page how can use bold tag in html page how can write address in html page how make abbreviations and acronyms in html an example of lists in html full code create unordered lists in html code create ordered lists in html code create nested lists in html code create definition lists in html how can opening links in newwindow how can create more links in web page how can linking to other sites in web create linking to other pages on same create linking to specific part of page how links email from web page how create abou html web-pageand like html a simple html example where usemultiply tag how can set height and width of images how can aligning images vertically in html how can aligning images horizontally in html adding image in html code a simple tables example of html how can test width and spacing in html create table with table headings in html create table with spanning rows in html create table with spanning columns in html creating long tables in html using css create table in html file with border basic table structure in html code creating text input box in html code creating textarea box in html code create submit button in html code create radio button in html code create password input box in html code make multiple select box in html5 code how use labelling form controls in html how make image button in html5-code how input url in html5 how use html5 search input box create placeholder in html5 how create validation form in html5 how input email in html5 code how date input in html5 code html code to grouping form elements form structure in html code create file input box in html code how create user review forms in html create drop down list box in html code how create checkbox in html how use button and hidden controls in html learn how write meta data description learn how use inline elements in html learn how use iframes continued in html source code how use iframes in html page how use id attribute in html program grouping inline elements in html grouping block elements in html program a example of book publication how use comments in html program how use class attribute in html creating block elements in html web page adding multiple video sources in web page adding multiple audio sources in web page adding multiple flash video and audio adding html5 video in webpage code adding html5 audio in webpage code adding flash video in webpage code adding flash mp3 player in webpage how can adding flash movie use css with in html code using external css in web page how can use css inside box without box how can use css inside box in html html program use in inheritance html program to use css in html page a html program using with css selectors how css rules cascade in html programs creating opacity using html program hsla html program using css a html program set more foreground html program using more color in html program set background color using css how text and image vertical align in web page html program to understanding font text transform in html program using css setting of text shadow in html program how set text indent in html program html source code with text decoration html source code with text align html-program that has no style.html html source code make link visited html source code that set line-height an example of html that letter and word how active focus in html from css how set font weight in html from css a html source code thatset font style a html example that set font size from html code that change font family html code for font face that decorate text an example of html page show content in an example of html source code for text create display in html how to create elliptical shapes in html a good example of html pages how set margin in html how set min height max height in html how set min width max width in webpage creating overflow html page creating padding in html page using css creating visibility in html page using using html create white space vertical create html page using white space create html page using css with width how set border color in html how set border image in html how set border radius in-html how set border shorthand in html how to set border style in html how to set border style in html how set border width in html creating box shadow in html learn how to centering content in html creating normal flow layout in html creating absolute positioning html creating fixed positioning html page creating html page with relative using float to place elements side by how create html page without z-index creating html page using z-index creating html page using styling creating html page using styling creating html page using styling text creating beautiful table with how make three column layout in html how make two column layout in html from example of layout in html from css by how create fixed width layout in html create float layout from css in html set parent float layout in html from css parent float layout solution in html creating grid layout in html from css creating liquid layout in html from css how set layout html page use multiple how make multiple style sheets link-in centering images from css in html background shorthand in html how use background repeat in html background position set in percentage set background position in html from css set background image element in html set background image in body from css background attachment from css in html set aligning images in html from css set image sizes from css in html image rollovers and sprites in html using gradient in html from css image gallery examples of html and css how to create website page with css learn advanced html5

INTERNATIONAL YOUTH ACUITY

Popular Posts

Saturday, 8 December 2018

example of layout in html from css by quicksandbook

example of layout in html from css by quicksandbook

0 comments:

Post a Comment