jakeSpodekProjectOne/index.html at master · jakespodek/jakeSpodekProjectOne · 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
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
<!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>Captured</title>
    <script src="https://kit.fontawesome.com/663bc49833.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>

    <header>
        <div class="homeHeader">
            <div class="wrapper">
                <nav>
                    <ul>
                        <li><a href="./index.html">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="./blog.html">Blog</a></li>
                        <li><a href="./contact.html">Contact</a></li>
                    </ul>
                </nav>
                <h1>Captured</h1>
            </div>
        </div>
    </header>

    <div class="headerLense">
        <img src="assets/header-box-image.jpg" alt="a camera lense">
    </div>

    <main>

        <section class="ice">
            <div class="wrapper section1">
                <h2>What is Captured?</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et risus nec orci ornare condimentum. Nam suscipit odio lorem, id vestibulum lacus tristique eu. Sed urna ex, porttitor nec iaculis at, consectetur vel turpis. Vestibulum ultricies, felis in lacinia porttitor, tortor metus convallis augue, at fermentum diam erat nec quam. Nulla facilisi.</p>
                <button>Find out more</button>
            </div>
        </section>

        <section>
            <div class="wrapper section2">
                <div class="section2Img1">
                    <img src="./assets/left-image.jpg" alt="a camera">
                </div>

                <div class="section2Text">
                    <h3>Unlock Your Skills</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et risus nec orci ornare condimentum. Nam suscipit odio lorem, id vestibulum lacus tristique eu. Sed urna ex, porttitor nec iaculis at, consectetur vel turpis.</p>
                    <button>Read more</button>
                </div>

                <div class="section2Text">
                    <h3 class="newGear">Getting New Gear</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et risus nec orci ornare condimentum. Nam suscipit odio lorem, id vestibulum lacus tristique eu. Sed urna ex, porttitor nec iaculis at, consectetur vel turpis.</p>
                    <div>
                        <button>Read more</button>
                    </div>
                </div>

                <div class="section2Img2">
                    <img src="./assets/right-image.jpg" alt="another camera">
                </div>
            </div>
        </section>

        <section class="ice">
            <div class="wrapper section3">
                <div>
                    <h3 class="homeIcon1">Top Picks</h3>
                    <p>Ut felis eros, vehicula eu magna nec, laoreet blandit nisi. Fusce auctor erat ac sagittis mattis. Mauris tempus velit
                    sem, sit amet imperdiet dolor placerat et.</p>
                </div>

                <div>
                    <h3 class="homeIcon2">Community</h3>
                    <p>Ut felis eros, vehicula eu magna nec, laoreet blandit nisi. Fusce auctor erat ac sagittis mattis. Mauris tempus velit
                    sem, sit amet imperdiet dolor placerat et.</p>
                </div>

                <div>
                    <h3 class="homeIcon3">Blog</h3>
                    <p>Ut felis eros, vehicula eu magna nec, laoreet blandit nisi. Fusce auctor erat ac sagittis mattis. Mauris tempus velit
                    sem, sit amet imperdiet dolor placerat et.</p>
                </div>

                <div>
                    <h3 class="homeIcon4">Get in Touch</h3>
                    <p>Ut felis eros, vehicula eu magna nec, laoreet blandit nisi. Fusce auctor erat ac sagittis mattis. Mauris tempus velit
                    sem, sit amet imperdiet dolor placerat et.</p>
                </div>
            </div>
        </section>

        <section>
            <div class="section4"></div>
        </section>

        <section class="ice">
            <div class="wrapper section5">
                <div>
                    <img src="./assets/small-box.jpg" alt="a man holding a camera">
                </div>
                <div>
                    <h3>This Month Profile</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar tortor nulla elementum eleifend. Vestibulum consequat vestibulum felis pharetra luctus. Quisque interdum orci quis convallis dapibus nulla pulvinar tortor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar tortor nulla elementum eleifend. Vestibulum consequat vestibulum felis pharetra luctus. Quisque interdum orci quis convallis.</p>
                    <button>Find out more</button>
                </div>
            </div>
        </section>

        <section>
            <div class="wrapper section6">
                <img src="./assets/gallery-image-1.jpg" alt="a camera on a tripod">
                <img src="./assets/gallery-image-2.jpg" alt="a camera with leaves on it">
                <img src="./assets/gallery-image-3.jpg" alt="three cameras">
            </div>
        </section>

    </main>

    <footer>
        <p>Copyright © 2021 Juno College</p>
    </footer>

</body>
</html>