Camp-HTML-Tutorial/index.html at main · ukazdal/Camp-HTML-Tutorial · 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
<!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">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&family=Roboto:wght@400;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="./main.css">
    <title>Forest</title>
</head>

<body>

    <div class="container">
        <div class="navbar">
            <img src="./images/newlogo.png" alt="Forest Life" class="logo">
            <nav>
                <ul>
                    <li><a href="">HOME</a></li>
                    <li><a href="">CAMPING</a></li>
                    <li><a href="">ABOUT</a></li>
                </ul>
            </nav>
            <img src="./images/menu.png" alt="Forest Life" class="menu-icon">

        </div>

        <div class="row">
            <div class="col">
                <h1>CAMP</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, rerum, deleniti ea esse iste
                    molestias minima doloremque ipsum voluptatum maiores, in enim nihil nam similique voluptates
                    reiciendis rem magnam ratione voluptate dolor a quidem! Voluptatem sequi esse inventore consectetur
                    provident.</p>
                <button type="button">Explore</button>
            </div>
            <div class="col">
                <div class="card card1">
                    <h5>Winter Camp</h5>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, beatae.</p>
                </div>
                <div class="card card2">
                    <h5>Summer Camp</h5>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, beatae.</p>
                </div>
                <div class="card card3">
                    <h5>Desert Camp</h5>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, beatae.</p>
                </div>
                <div class="card card4">
                    <h5>Beach Camp</h5>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, beatae.</p>
                </div>
            </div>
        </div>

    </div>

</body>

</html>