Thu Apr 27 2017
Copied to clipboard! Copy reply
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
<!DOCTYPE html>
<html>

<head>
    <title>layout</title>
    <style>
        body {
            background-image: url(images/bg.jpg);
            color: #b5c1ad;
            margin: 0%;
            font-family: QuicksandBook, Helvetica, Arial, sans-serif;
            font-weight: normal;
        }
        
        .header {
            width: 100%;
            height: 100px;
            position: fixed;
            z-index: 50;
            background-image: url(images/bg-header.jpg);
        }
        
        .nav {
            width: 540px;
            display: inline;
            float: right;
            padding: 45px 0px 0px 0px;
            margin: 0px 10px 0px 40px;
        }
        
        img.logo1 {
            margin-bottom: 20px;
        }
        
        .logo {
            width: 540px;
            float: left;
            padding: 0px 0px 0px 250px;
        }
        
        .logo1 {
            margin-bottom: 20px;
        }
        
        a {
            text-decoration: none;
            color: #b5c1ad;
        }
        
        .bodytext {
            color: white;
        }
        
        .h1 {
            width: 960px;
            padding-left: 400px;
        }
        
        .introtext {
            width: 210px;
            float: right;
            font-size: 80%;
        }
        
        .date {
            font-size: 80%;
        }
        
        .body {
            height: 460px;
            width: 960px;
            margin: 0px auto;
            padding-top: 120px;
            padding-right: 29px;
            background-image: url(images/bg-triangle.png);
            background-repeat: no-repeat;
        }
        
        .wrapper {
            background-image: url(images/triangles.png);
            background-repeat: no-repeat;
            height: 450px;
            margin-left: 125px;
        }
        
        .more {
            width: 960px;
            margin: 0px auto;
            border-top: 1px solid white;
        }
        
        .m {
            width: 220px;
            float: left;
            padding: 10px;
            font-size: 72.6%;
        }
        
        .border {
            border-top: 1px solid #807c72;
            border-bottom: 1px solid #807c72;
            padding-top: 10px;
            padding-bottom: 10px;
        }
        
        h2 {
            padding-left: 10px;
        }
        
        .footer {
            background: rgba(0, 0, 0, 0.2);
            width: 100%;
            height: 25px;
            font-size: 65%;
            clear: both;
            text-align: right;
            padding: 20px 500px 10px 0px;
            margin-right: 200px;
        }
        
        .legal {
            width: 960px;
            padding-left: 220px;
        }
        
        .color {
            color: #807c72;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="logo">
            <img class="logo1" src="images/logo.png" alt="Pedal Faster - The Mordern Bicycle Magazine" />
            <img src="images/header-triangle.png" />
        </div>
        <div class="nav">
            <a href="">home /</a>
            <a href="">news /</a>
            <a href="">archives /</a>
            <a href="">about /</a>
            <a href="">contact</a>
        </div>
    </div>
    <div class="body">
        <div class="wrapper">
            <div class="h1">
                <h1>FIXED GEAR FOREVER</h1>
            </div>
            <div class="introtext">
                <p class="date">
                    16 APRIL 2011
                </p>
                <p class="bodytext">
                    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 class="bodytext">
                    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.
                </p>
                <p>
                    <a href="">Continue reading...</a>
                </p>
            </div>
        </div>
    </div>
    <div class="more">
        <h2>MORE ARTICLES</h2>
        <div class="m">
            <img src="images/more1.jpg" />
            <p>On the Road: From the fixed gear fanatic's point of view</p>
            <p class="border">Brand History: Pashley Cycles - hand-built in England</p>
            <p>Frame Wars: Innovations in cycle manufacture and repair</p>
        </div>
        <div class="m">
            <img src="images/more2.jpg" />
            <p> Touring Diary: A sketchbook in your basket</p>
            <p class="border">Top Ten Newcomers for 2012: A peek at what's to come</p>
            <p>InnerTube: The best cycling videos on the web</p>
        </div>
        <div class="m">
            <img src="images/more3.jpg" />
            <p>Product Review: All baskets were not created equal</p>
            <p class="border">Going Public: Out & about with the founder of Public</p>
            <p>Cycle Lane Defence: Know your rights</p>
        </div>
        <div class="m">
            <img src="images/more4.jpg" />
            <p>Bicycle Hall of Fame: The 1958 Schwinn Spitfire</p>
            <p class="border">Reader Survey: Share your thoughts with us!</p>
            <p>Chain Gang: The evolution of the humble bike chain</p>
        </div>

    </div>
    <div class="footer">
        <div class="legal">
            <a class="color" href="">Legal Information </a>|
            <a class="color" href="">Privacy Policy </a>|
            <a class="color" href="">Copyright © Pedal Faster 2011</a>
        </div>
    </div>
</body>

</html>