ParallaxWebsite/index.html at main · munozAndrew/ParallaxWebsite · 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
<!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>Parallax Scrolling Website | Codehal</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <h2 class="logo">Logo</h2>
        <nav class="navigation">
            <a href="#" class="active">Home</a>
            <a href="#">About</a>
            <a href="#">Service</a>
            <a href="#">Contact</a>
        </nav>
    </header>

    <section class="parallax">
        <img src="hill1.png" id="hill1">
        <img src="hill2.png" id="hill2">
        <img src="hill3.png" id="hill3">
        <img src="hill4.png" id="hill4">
        <img src="hill5.png" id="hill5">
        <img src="tree.png" id="tree">
        <h2 id="text">Gaming Website</h2>
        <img src="leaf.png" id="leaf">
        <img src="plant.png" id="plant">
    </section>

    <section class="sec">
        <h2>Parallax Scrolling Website</h2>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus sunt iusto at magnam sapiente nostrum omnis ipsa ad asperiores, quae quam repudiandae beatae tempore culpa voluptatem sequi dicta enim dolorum.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in vehicula velit. Nulla facilisi. Etiam eget scelerisque erat. Sed sit amet eros in tellus consectetur bibendum. Fusce in posuere elit. In hac habitasse platea dictumst. Vestibulum sed sem nec est tincidunt interdum vitae at libero. Maecenas dapibus vel nunc ut varius. Quisque auctor diam sed purus facilisis, nec malesuada nisi euismod. Nullam quis urna quis felis tincidunt fermentum. Suspendisse potenti. Etiam eu nisi ac augue volutpat facilisis. Sed scelerisque mauris non sapien aliquam, a fermentum nibh maximus. Nunc ac nulla vel metus tincidunt venenatis a eget arcu. Sed ac tortor ac turpis tincidunt scelerisque non sit amet felis. Fusce bibendum nisl eu felis finibus, id maximus mi rhoncus. <br><br>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in vehicula velit. Nulla facilisi. Etiam eget scelerisque erat. Sed sit amet eros in tellus consectetur bibendum. Fusce in posuere elit. In hac habitasse platea dictumst. Vestibulum sed sem nec est tincidunt interdum vitae at libero. Maecenas dapibus vel nunc ut varius. Quisque auctor diam sed purus facilisis, nec malesuada nisi euismod. Nullam quis urna quis felis tincidunt fermentum. Suspendisse potenti. Etiam eu nisi ac augue volutpat facilisis. Sed scelerisque mauris non sapien aliquam, a fermentum nibh maximus. Nunc ac nulla vel metus tincidunt venenatis a eget arcu. Sed ac tortor ac turpis tincidunt scelerisque non sit amet felis. Fusce bibendum nisl eu felis finibus, id maximus mi rhoncus. <br><br>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in vehicula velit. Nulla facilisi. Etiam eget scelerisque erat. Sed sit amet eros in tellus consectetur bibendum. Fusce in posuere elit. In hac habitasse platea dictumst. Vestibulum sed sem nec est tincidunt interdum vitae at libero. Maecenas dapibus vel nunc ut varius. Quisque auctor diam sed purus facilisis, nec malesuada nisi euismod. Nullam quis urna quis felis tincidunt fermentum. Suspendisse potenti. Etiam eu nisi ac augue volutpat facilisis. Sed scelerisque mauris non sapien aliquam, a fermentum nibh maximus. Nunc ac nulla vel metus tincidunt venenatis a eget arcu. Sed ac tortor ac turpis tincidunt scelerisque non sit amet felis. Fusce bibendum nisl eu felis finibus, id maximus mi rhoncus. <br><br>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in vehicula velit. Nulla facilisi. Etiam eget scelerisque erat. Sed sit amet eros in tellus consectetur bibendum. Fusce in posuere elit. In hac habitasse platea dictumst. Vestibulum sed sem nec est tincidunt interdum vitae at libero. Maecenas dapibus vel nunc ut varius. Quisque auctor diam sed purus facilisis, nec malesuada nisi euismod. Nullam quis urna quis felis tincidunt fermentum. Suspendisse potenti. Etiam eu nisi ac augue volutpat facilisis. Sed scelerisque mauris non sapien aliquam, a fermentum nibh maximus. Nunc ac nulla vel metus tincidunt venenatis a eget arcu. Sed ac tortor ac turpis tincidunt scelerisque non sit amet felis. Fusce bibendum nisl eu felis finibus, id maximus mi rhoncus. <br><br>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in vehicula velit. Nulla facilisi. Etiam eget scelerisque erat. Sed sit amet eros in tellus consectetur bibendum. Fusce in posuere elit. In hac habitasse platea dictumst. Vestibulum sed sem nec est tincidunt interdum vitae at libero. Maecenas dapibus vel nunc ut varius. Quisque auctor diam sed purus facilisis, nec malesuada nisi euismod. Nullam quis urna quis felis tincidunt fermentum. Suspendisse potenti. Etiam eu nisi ac augue volutpat facilisis. Sed scelerisque mauris non sapien aliquam, a fermentum nibh maximus. Nunc ac nulla vel metus tincidunt venenatis a eget arcu. Sed ac tortor ac turpis tincidunt scelerisque non sit amet felis. Fusce bibendum nisl eu felis finibus, id maximus mi rhoncus. <br><br>
        </p>
    </section>

    <script src="script.js"></script>
</body>

</html>