CSS-Practices/index.html at main · NH-Limon/CSS-Practices · 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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="shortcut icon" href="./image.jpg">
</head>
<body>
    <div class="container">
        <div class="boxes">
            <div class="box-1">
                <img src="./image.jpg" alt="" height="50px" width="50px">
                <span>Garry Ballance</span>
                <br>
                <small>A Professional Software Developer</small>
                <h2>Software Engineering</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste amet ea dolore, voluptatibus ad, asperiores voluptatum omnis unde at temporibus animi voluptates ipsam aperiam qui odit non neque veritatis, numquam adipisci sunt quos! Dolores odio fugiat sequi reiciendis tenetur officia.</p>
            </div>

            <div class="box-2">
                <img src="./image.jpg" alt="" height="50px" width="50px">
                <span>Garry Ballance</span>
                <br>
                <small>A Professional Software Developer</small>
                <h2>Software Engineering</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste amet ea dolore, voluptatibus ad, asperiores voluptatum omnis unde at temporibus animi voluptates ipsam aperiam qui odit non neque veritatis, numquam adipisci sunt quos! Dolores odio fugiat sequi reiciendis tenetur officia.</p>
            </div>

            <div class="box-3">
                <img src="./image.jpg" alt="" height="50px" width="50px">
                <span>Garry Ballance</span>
                <br>
                <small>A Professional Software Developer</small>
                <h2>Software Engineering</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste amet ea dolore, voluptatibus ad, asperiores voluptatum omnis unde at temporibus animi voluptates ipsam aperiam qui odit non neque veritatis, numquam adipisci sunt quos! Dolores odio fugiat sequi reiciendis tenetur officia.</p>
            </div>

            <div class="box-4">
                <img src="./image.jpg" alt="" height="50px" width="50px">
                <span>Garry Ballance</span>
                <br>
                <small>A Professional Software Developer</small>
                <h2>Software Engineering</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste amet ea dolore, voluptatibus ad, asperiores voluptatum omnis unde at temporibus animi voluptates ipsam aperiam qui odit non neque veritatis, numquam adipisci sunt quos! Dolores odio fugiat sequi reiciendis tenetur officia.</p>
            </div>

            <div class="box-5">
                <img src="./image.jpg" alt="" height="50px" width="50px">
                <span>Garry Ballance</span>
                <br>
                <small>A Professional Software Developer</small>
                <h2>Software Engineering</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste amet ea dolore, voluptatibus ad, asperiores voluptatum omnis unde at temporibus animi voluptates ipsam aperiam qui odit non neque veritatis, numquam adipisci sunt quos! Dolores odio fugiat sequi reiciendis tenetur officia.</p>
            </div>

            <div class="box-5">
                <img src="./image.jpg" alt="" height="50px" width="50px">
                <span>Garry Ballance</span>
                <br>
                <small>A Professional Software Developer</small>
                <h2>Software Engineering</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste amet ea dolore, voluptatibus ad, asperiores voluptatum omnis unde at temporibus animi voluptates ipsam aperiam qui odit non neque veritatis, numquam adipisci sunt quos! Dolores odio fugiat sequi reiciendis tenetur officia.</p>
            </div>
        </div>
    </div>
</body>
</html>