grid-rwd/article.html at master · arief-github/grid-rwd · 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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!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>About Us | CASUAL</title>
    <link rel="stylesheet" href="./style/style.css">
    <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=Josefin
+Sans:wght@400;700&display=swap" rel="stylesheet">
</head>

<body class="pageGrid">
    <main>
        <div class="headimg partsGrid">
            <div class="site">CASUAL</div>
            <figure>
                <img src="img/tent-orange.jpg" alt="">
            </figure>
        </div>
        <article class="article partsGrid">
            <h1>About Us</h1>
            <p>CASUAL is a small but naturerich campsite that opened in 2001.

                We provide unique information as

                an outdoor media and portal to make

                the outdoors more familiar and

                accessible.
            </p>

            <p>A while ago, camping was an

                extraordinary thing. But recently,

                it has become very familiar with

                the popularity of camping-themed

                YouTube videos. It's casual and

                enjoyable.</p>

            <div class="gallery">
                <figure class="photoA">
                    <img src="./img/camp-food.jpg" alt="camp food vegetables on the table">
                </figure>
                <figure class="photoB">
                    <img src="./img/camp-sky.jpg" alt="tent on field with blue sky and sun">
                </figure>
                <figure class="photoC">
                    <img src="./img/camp-fire.jpg" alt="camp-fire">
                </figure>
                <figure class="photoD">
                    <img src="./img/camp-table.jpg" alt="camp-table">
                </figure>
            </div>


            <p>Camping for the entire family

                and the close group is exciting,

                and also, solo camping is a fun

                way to enjoy. The evolutions

                around the outdoors, such as
                easygoing campsites, lightweight and

                functional tools, and easy
                setup tents, will help you dive into

                nature.</p>

            <p>Glamping is also your option.

                It's a luxury and glamorous camping

                style with comfortable amenities,

                full-size beds, sofa, dining set,

                meals, coffee maker, staging, etc.

                Find a style that suits
                you.</p>
        </article>
    </main>
    <button class="nav-button" onclick="navToggle()">
        <span class="sr-only"></span>
    </button>

    <nav class="nav">
        <ul>
            <li> <a href="index.html">HOME</a> </li>
            <li> <a href="article.html">ABOUT</a> </li>
            <li> <a href="#">CONTACT US</a></li>
        </ul>
    </nav>

    <ul class="sns">
        <li>
            <a href="#">
                <img src="img/logo-twitter.svg" alt="Twitter Logo">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="img/logo-facebook.svg" alt="Facebook Logo">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="img/logo-instagram.svg" alt="Instagram Logo">
            </a>
        </li>
    </ul>
    <div class="decor">
        Enjoy Active Outdoor Camping
    </div>
    <footer class="footer partsGrid">
        <div class="text">
            <div class="site">
                CASUAL
            </div>
            <div class="address">
                Caroll Hill 68 Str <br> 15432 Ground Town, North Island <br> +1-800-1234-5678
            </div>
        </div>
        <div class="chat">
            <a href="#">
                <img src="img/chat.svg" alt=""><br> Chat Support
            </a>
        </div>
    </footer>
    <script type="text/javascript">
        function navToggle() {
            document.querySelector('html').classList.toggle('open');
        }

    </script>
</body>

</html>