Join for FREE | Take the Tour Lost Password?
[x]

deviantART

 

Fun Web Design Comp by =wildheartfreesoul:iconwildheartfreesoul:

Categories Designs & Interfaces > Web Interfaces

Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution 3.0 License.
:iconwildheartfreesoul:

Artist's Comments

I was very excited about some elements of CSS today so I had to try them, and the product of that was this nice, simple and clean webpage that I decided to post here for you all to use if you want.

*=====HTML=====*

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[link]">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Navigation Style and Text Style Comp</title>

<link href="http://NavAndFont.css" rel="stylesheet" type="text/css" />

</head>


<body><div id="container">

<div id="mainNav">

Haevinegton      Lemason      Tavigor      Pavigationes      Eavalog



</div>

<h1> Hello <span class="amp">&amp;</span> Welcome</h1>

<span id="lead"><span class="letter">L</span>orem ipsum cu cum veri denique constituto, an nulla utinam melius nec, </span>admodum nominati suavitate vel ei. No vix esse labores erroribus, novum labore mel cu, no wisi choro dissentiunt eos. Congue dicunt saperet mel ne, brute solet ex mea, ea eum vero eius populo. At eum omittam salutandi gubergren, clita solet feugiat ne sit. In vix sapientem dissentiet definitiones, legendos iudicabit patrioque id pro, ex laudem fierent luptatum sed. An eum illum postea.


No munere scribentur vim, novum pertinax laboramus usu in, feugiat repudiare ea est. Libris possim euismod eam ei, epicuri gubergren signiferumque vel id, et omnes utinam tibique nec. Et ferri solet graece vel, mei viris persecuti argumentum ea. Nemore consetetur eum ei, quem mutat vix ad. Ius tota reque dicit eu, salutatus voluptatum quaerendum an his, ut vis dico graeco.



<div class="rounded_STYLE rounded">
<div class="tl"></div><div class="tr"></div>


<h3> Nemore consetetur eum ei!</h3>

No munere scribentur vim, novum pertinax laboramus usu in, feugiat repudiare ea est. Libris possim euismod eam ei, epicuri gubergren signiferumque vel id, et omnes utinam tibique nec. Et ferri solet graece vel, mei viris persecuti argumentum ea. Nemore consetetur eum ei, quem mutat vix ad. Ius tota reque dicit eu, salutatus voluptatum quaerendum an his, ut vis dico graeco.



<div class="bl"></div><div class="br"></div>
</div>

No munere scribentur vim, novum pertinax laboramus usu in, feugiat repudiare ea est. Libris possim euismod eam ei, epicuri gubergren signiferumque vel id, et omnes utinam tibique nec. Et ferri solet graece vel, mei viris persecuti argumentum ea. Nemore consetetur eum ei, quem mutat vix ad. Ius tota reque dicit eu, salutatus voluptatum quaerendum an his, ut vis dico graeco.




No munere scribentur vim, novum pertinax laboramus usu in, feugiat repudiare ea est. Libris possim euismod eam ei, epicuri gubergren signiferumque vel id, et omnes utinam tibique nec. Et ferri solet graece vel, mei viris persecuti argumentum ea. Nemore consetetur eum ei, quem mutat vix ad. Ius tota reque dicit eu, salutatus voluptatum quaerendum an his, ut vis dico graeco.





novum pertinax laboramus usu in, feugiat repudiare ea est. Libris possim euismod eam ei, epicuri gubergren signiferumque vel id, et omnes utinam tibique nec. Et ferri solet graece vel, mei viris persecuti argumentum ea. Nemore consetetur eum ei, quem mutat vix ad. Ius tota reque dicit eu, salutatus voluptatum quaerendum an his, ut vis dico graeco.



<h3>No munere scribentur vim</h3>

<span id="lead"><span class="letter">N</span>o munere scribentur vim, novum pertinax laboramus usu in, feugiat repudiare ea est.</span> Libris possim euismod eam ei, epicuri gubergren signiferumque vel id, et omnes utinam tibique nec. Et ferri solet graece vel, mei viris persecuti argumentum ea. Nemore consetetur eum ei, quem mutat vix ad. Ius tota reque dicit eu, salutatus voluptatum quaerendum an his, ut vis dico graeco.




</div></body>
</html>


*=====CSS=====*

@charset "UTF-8";
/* CSS Document */

#container{
width:50em;
margin:auto;
}

h1{
font-size:2.063em;
line-height:2.667em;
font-family: Baskerville, Georgia, "Times New Roman", serif ;
font-weight:normal;
letter-spacing:-0.030em;
border-bottom: 0.121em solid #000;
}

h1 em{
font-style:italic;
letter-spacing:-0.030em;
}

h1 .amp {
font-family:Baskerville, Georgia, "Times New Roman", serif ;;
letter-spacing:-0.030em;
color:#6b9faf;
font-style:italic;
}

p {
font-family:'Lucida Grande', Verdana, Arial, sans-serif;
font-size:1em;
color: #333333;
width: 48em;

}

p #lead {
font-size:1.1em;
color:#b20000;
}

p #lead .letter {
font-family:Baskerville, Georgia, "Times New Roman", serif ;;
font-size:3.143em;
line-height:1em;
font-weight:300;
float:left;
margin:0 0.125em 0 0;

}

h3 {
color: #6b9faf;
font-size:1.5em;
line-height:1.667em;
font-family: Baskerville, Georgia, "Times New Roman", serif;
font-weight:normal;
font-style:italic;

}

#mainNav p{
border-bottom:0.3em;
border-bottom-color:#000000;
border-bottom-style:solid;
padding-bottom:0.2em;
}

#mainNav a{
font-family:'Lucida Grande', Verdana, Arial, sans-serif;
font-size:1em;
color:#6b9faf;
border-bottom:0.3em;
border-bottom-color:#000000;
border-bottom-style:solid;
padding-bottom:0.2em;
text-decoration:none;
}

#mainNav a:hover{
color:#b20000;
border-bottom:0.3em;
border-bottom-color:#b20000;
border-bottom-style:solid;
padding-bottom:0.2em;
}

.rounded_STYLE
{
width:500px;
padding:0 20px;
margin: auto;
background-color: #ffffff;
border-color:#7f995f;
border-style:solid;
border-width:3px;
-webkit-border-radius: 10px; /* for Safari */
-moz-border-radius: 10px; /* for Firefox */
}

.rounded_STYLE p{
font-family:'Lucida Grande', Verdana, Arial, sans-serif;
font-size:1em;
color: #000000;
width: inherit;
}


*======ENJOY!!=====*

*rounded corners from [link]

Comments


love 0 0 joy 0 0 wow 0 0 mad 0 0 sad 0 0 fear 0 0 neutral 0 0
No comments have been added yet.

Details

April 20
341 KB
141 KB
600×443

Statistics

0
0
114 (0 today)
13 (0 today)

Share

Link
Embed
Thumb

Site Map

©2009 deviantART. All rights reserved
About Us | Contact Us | Site Tour | Help & FAQ Advertise | Services Etiquette | Privacy Policy | Terms of Service | Copyright Policy