6.8.3
Final “first-site” website
6
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: helvetica Neue, arial;
font-size: 18px;
}
h1 {
color: green;
font-size: 40px;
margin-bottom: 20px;
}
h2 {
color: red;
font-size: 40px;
margin-bottom: 10px;
}
p {
text-align:justify;
}
.main-text {
text-align: justify;
color: #606060;
margin-bottom: 20px;
}
.author-text{
font-size: 22px;
float: left;
padding-top: 65px;
padding-left: 25px;
}
.container {
width: 960px;
margin: 20px auto 0 auto;
}
.main-area {
position: relative;
width: 75%;
float: left;
padding-right: 30px;
}
.side-area {
width: 25%;
float: left;
}
.side-box {
margin-bottom: 40px;
}
.author-area {
border-top: 1px solid #333;
padding-top: 20px;
}
.author-area img {
height: 150px;
width: 150px;
border-radius: 50%;
float: left;
}
.clearfix:after{
content: "";
display: table;
clear: both;
}
.date{
position: absolute;
top: 10px;
right: 30px;
}
| Code 6.22 style.css (final code) |
<!DOCTYPE html> <html> <head> <title>A first website</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <div class="main-area"> <h1>This is the main heading</h1> <p class="date">Jan 03<sup>rd</sup>, 2017</p> <h2>This is a second heading</h2> <img src="logo.svg" alt="The website logo"> <p class="main-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <a href="http://www.google.co.uk" target="_blank"> google.co.uk</a> <a href="henry.png">Henry</a> <h2>And another heading</h2> <p class="main-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> <div class="side-area"> <div class="side-box"> First side bar entry </div> <div class="side-box"> Second side bar entry </div> <div class="side-box"> Third side bar entry </div> </div> <div class="clearfix"></div> <div class="author-area"> <img src="henry.png" alt="Henry the saluki"> <p class="author-text">Henry Gaius Gledhill</p> </div> </div> </body> </html>
| Code 6.23 index.html (final code) |
