moon/index.html at main · Pyasma/moon · 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
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Welcome to Moon</title>
        <link rel="stylesheet" href="stylesheet.css">
        <link rel="preconnect"  href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,600;0,700;1,100;1,300;1,400&display=swap" rel="stylesheet">
        <link rel="shortcut icon" href="file:///C:/Users/Pranya/Desktop/website/images/icon.jpg">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    </head>
    <body>
        <section class="header">
            <nav>
                <a hred="index.html"><img src="https://i.pinimg.com/564x/1c/22/43/1c22433b8d3aec799fd8187ca3030193.jpg"
                     style="width: 80px;height: 80px;"></a>
                <div class="nav-links">
                    <i class="fa fa-times" onclick="hidemenu()"></i>
                    <ul>
                        <li><a href="#">HOME</a></li>
                        <li><a href="#">ABOUT US</a></li>
                        <li><a href="#">OFFERS</a></li>
                        <li><a href="#">NEWS</a></li>
                        <li><a href="#">REVIEWS</a></li>
                        <li><a href="#">CONTACT</a></li>
                    </ul>
                </div>
                <i class="fa fa-bars" onclick="showmenu()"></i>
            </nav>
        <div class="text-box">
            <h1>DISCOVER THE MOON</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem inventore nemo modi, eveniet in minima atque tempora ex veniam, accusantium facilis harum magnam! Omnis, asperiores alias laboriosam at temporibus quisquam voluptate voluptatem natus delectus maxime similique quia? Ad assumenda sit voluptatem, dolores repellendus illum reprehenderit dolorem et cumque voluptatibus excepturi.</p>
            <a href="" class="hero-btn">DISCOVER NOW</a>
        </div>


        </section>
<!---OFFERS--->
<section class="Offers">
    <h1>Offers for the trip</h1>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore error ducimus nobis, cumque placeat velit saepe consequuntur hic provident pariatur asperiores nostrum totam! A alias voluptate facere minus voluptas dolor, amet cumque incidunt. Iste eius ipsum similique modi voluptate ducimus excepturi porro doloremque neque recusandae nihil, sit corporis nulla rem.</p>
    <div class="row">
        <div class="Offer-col">
            <h3>20% discount for first 10</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus placeat alias minus ducimus aspernatur incidunt optio accusantium voluptas harum officia sint omnis eius id dolorem inventore culpa est, vero quibusdam?</p>
        </div>
        <div class="Offer-col">
            <h3>10% discount for first next 10</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus placeat alias minus ducimus aspernatur incidunt optio accusantium voluptas harum officia sint omnis eius id dolorem inventore culpa est, vero quibusdam?</p>
        </div>
        <div class="Offer-col">
            <h3>5% discount for first next  10</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus placeat alias minus ducimus aspernatur incidunt optio accusantium voluptas harum officia sint omnis eius id dolorem inventore culpa est, vero quibusdam?</p>
        </div>
    </div>

</section>


<!---NEWS---->
<section class="NEWS">
    <h1>NEWS</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero laboriosam commodi dolorum. Ea perspiciatis consequuntur facilis magni nisi omnis magnam, maxime vero eaque, quibusdam esse cum sit. Dolores quae omnis unde officiis quibusdam distinctio ex perspiciatis nisi nobis eaque! Aspernatur, autem soluta aliquam sequi corrupti ab expedita similique eaque natus.</p>
</section>


<!---REVIEWS-->
<section class="REVIEWS">
    <h1>REVIEWS</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, est impedit recusandae totam minus maxime. Nam minima quibusdam delectus, doloribus deleniti quod quis, nemo, ut ab officia accusamus est magnam voluptates aliquam amet temporibus perspiciatis dignissimos. Sed, nemo itaque ducimus ratione officiis fugiat laudantium, optio ipsam tempore natus nam alias.</p>
</section>


<!----contact--->
<section class="cta">
    <h1>Contact us if you wanna experience new adventure</h1>
    <a href="" class="hero-btn">CONTACT US</a>
</section>


<!----footer--->
<section class="footer">
    <h4>
        Contact Info
    </h4>
    <p>Lorem ipsum dolor sit amet.</p>
    <div class="icons">
        <i class="fab fa-facebook-official"></i>
        <i class="fab fa-twitter"></i>
        <i class="fab fa-instagram"></i>
        <i class="fab fa-linkedin"></i>
    </div>
    <p>Piyush Mudgal

    </p>
</section>


<!-------javascript--------->
        <script>
            var navLinks = document.getElementById("navLinks")
            function showmenu(){
                navLinks.style.right = "0"
            }
            function hidemenu(){
                navLinks.style.right = "-200px"
            }
        </script>


    </body>
</html>