The first website source code | PracticalSeries: Web Development

6.8 The final “first-site” source code

This is the final source code for the first-site web site (CSS first).

The complete code can be downloadad by clicking this link: a

6.8.1 First-site CSS source code

style.css

* { 
    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.8.1 style.css (final code)

6.8.2 First-site HTML source code

index.html

<!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.8.2 index.html (final code)

6.8.3 Final “first-site” website

Figure 6.20 - Final “first-site” website