cssGrid/index.html at master · chriswrightft/cssGrid · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Grid</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="wrapper">
        <div class="header">
            <h1>CSS Grid</h1>
        </div>
        <div class="nav">
            <div><a href="#">HOME</a></div>
            <div><a href="#">ABOUT US</a></div>
            <div><a href="#">PEOPLE</a></div>
            <div><a href="#">CONTACT US</a></div>
        </div>
        <div class="mainContent">
            <h2>Welcome to css grid layout</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et luctus augue, eget dignissim velit. Etiam aliquam nibh in massa ullamcorper scelerisque. Ut eu sodales justo, semper suscipit felis. Curabitur id sapien ut dui laoreet lacinia a sed dui. Nulla lobortis velit et nulla volutpat, id hendrerit lectus dignissim. Quisque a laoreet est. Nullam dictum, massa vitae tincidunt dignissim, augue metus volutpat elit, sit amet ultricies augue libero sed leo.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et luctus augue, eget dignissim velit. Etiam aliquam nibh in massa ullamcorper scelerisque. Ut eu sodales justo, semper suscipit felis. Curabitur id sapien ut dui laoreet lacinia a sed dui. Nulla lobortis velit et nulla volutpat, id hendrerit lectus dignissim. Quisque a laoreet est. Nullam dictum, massa vitae tincidunt dignissim, augue metus volutpat elit, sit amet ultricies augue libero sed leo.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et luctus augue, eget dignissim velit. Etiam aliquam nibh in massa ullamcorper scelerisque. Ut eu sodales justo, semper suscipit felis. Curabitur id sapien ut dui laoreet lacinia a sed dui. Nulla lobortis velit et nulla volutpat, id hendrerit lectus dignissim. Quisque a laoreet est. Nullam dictum, massa vitae tincidunt dignissim, augue metus volutpat elit, sit amet ultricies augue libero sed leo.</p>
        </div>
        <div class="sideBar">
            <div><p>Sidebox 1</p></div>
            <div><p>Sidebox 2</p></div>
            <div><p>Sidebox 3</p></div>
        </div>
        <div class="footer">
            <p>Footer text</p>
        </div>
    </div>
</body>
</html>