explorer/index.html at main · LeonidPylypchuk/explorer · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lora&family=Oxygen&family=Roboto&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
        integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Escape</title>
</head>

<body>
    <div class="escape">
        <div class="header">
            <div class="container">
                <div class="logo"><img src="img/logo.png" alt="logo"></div>
                <div class="menu">
                    <a href="#">Home</a>
                    <a href="#">Categories</a>
                    <a href="#">About</a>
                    <a href="#">Contact</a>
                </div>
                <div class="burger"><i class="fa-solid fa-bars"></i></div>
            </div>
        </div>
        <div class="banner">
            <div class="container">
                <h1>Let's do it together.</h1>
                <p>We travel the world in search of stories. Come along for the ride.</p>
                <a href="#">View Latest Posts</a>
            </div>
        </div>
        <div class="posts">
            <div class="container">
                <h2>Featured Posts</h2>
                <div class="cards-wrap">
                    <div class="card">
                        <img src="img/north-pole.jpg" alt="north-pole
                    ">
                        <div class="card-text">
                            <h3>The Road Ahead</h3>
                            <p class="role">The road ahead might be paved - it might not be.</p>
                            <div class="info">
                                <img src="img/avatar1.png" alt="avatar1">
                                <span>Mat Vogels</span>
                                <p class="z"><time datetime="2015-09-25">September 25, 2015</time></p>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <img src="img/balloon.jpg" alt="balloon
                    ">
                        <div class="card-text">
                            <h3>From Top Down</h3>
                            <p class="role">Once a year, go someplace you've never been before.</p>
                            <div class="info">
                                <img src="img/avatar2.png" alt="avatar2">
                                <span>William Wong</span>
                                <p class="z"><time datetime="2015-09-25">September 25, 2015</time></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="contacts">
            <div class="container">
                <h2>Stay in Touch</h2>
                <form>
                    <input type="email" class="email" placeholder="Enter your email address">
                    <button type="submit" class="button">Submit</button>
                </form>
            </div>
        </div>
        <div class="footer">
            <div class="container">
                <a href="#"><img src="img/logo.png" alt="logo"></a>
                <ul>
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">Categories</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script src="app.js"></script>
</body>

</html>