├── script.js
├── styles.css
└── pizza.html


/script.js:
--------------------------------------------------------------------------------
 1 | // Navbar
 2 | let menu = document.querySelector('#menu-icon');
 3 | let navbar = document.querySelector('.navbar');
 4 | 
 5 | menu.onclick = () => {
 6 |     navbar.classList.toggle('active');
 7 | }
 8 | 
 9 | window.onscroll = () => {
10 |     navbar.classList.remove('active');
11 | }
12 | // Dark Mode
13 | let darkmode = document.querySelector('#darkmode');
14 | 
15 | darkmode.onclick = () => {
16 |     if(darkmode.classList.contains('bx-moon')){
17 |         darkmode.classList.replace('bx-moon','bx-sun');
18 |         document.body.classList.add('active');
19 |     }else{
20 |         darkmode.classList.replace('bx-sun','bx-moon');
21 |         document.body.classList.remove('active');
22 |     }
23 | }
24 | 
25 | // Scroll Reveal
26 | const sr = ScrollReveal ({
27 |     origin: 'top',
28 |     distance: '40px',
29 |     duration: 2000,
30 |     reset: false
31 | });
32 | 
33 | 
34 | sr.reveal(`.home-text, .home-img,
35 |             .about-img, .about-text,
36 |             .box, .s-box,
37 |             .btn, .connect-text,
38 |             .contact-box`, {
39 |     interval: 200
40 | })
41 | 
42 | 


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
  1 | /* Google Fonts */
  2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   font-family: "Poppins", sans-serif;
  7 |   box-sizing: border-box;
  8 |   scroll-behavior: smooth;
  9 |   scroll-padding-top: 2rem;
 10 |   list-style: none;
 11 |   text-decoration: none;
 12 | }
 13 | *::selection {
 14 |   background: var(--main-color);
 15 |   color: #fff;
 16 | }
 17 | :root {
 18 |   --main-color: #ffb411;
 19 |   --text-color: #1e1c2a;
 20 |   --bg-color: #fff;
 21 | 
 22 |   --big-font: 4rem;
 23 |   --h2-font: 2.24rem;
 24 |   --p-font: 0.9rem;
 25 | }
 26 | section {
 27 |   padding: 50px 10%;
 28 | }
 29 | body.active {
 30 |   --bg-color: #1e1c2a;
 31 |   --text-color: #fff;
 32 | }
 33 | body {
 34 |   color: var(--text-color);
 35 |   background: var(--bg-color);
 36 | }
 37 | #darkmode {
 38 |   font-size: 25px;
 39 |   cursor: pointer;
 40 | }
 41 | header {
 42 |   position: fixed;
 43 |   width: 100%;
 44 |   top: 0;
 45 |   right: 0;
 46 |   z-index: 1000;
 47 |   display: flex;
 48 |   align-items: center;
 49 |   justify-content: space-between;
 50 |   background: var(--bg-color);
 51 |   padding: 18px 100px;
 52 |   box-shadow: 0 0.5rem 50rem rgba(0, 0, 0, 0.1);
 53 | }
 54 | .logo {
 55 |   font-size: 1.2rem;
 56 |   font-weight: 600;
 57 |   color: var(--main-color);
 58 | }
 59 | .navbar {
 60 |   display: flex;
 61 | }
 62 | .navbar a {
 63 |   font-size: 1rem;
 64 |   padding: 10px 20px;
 65 |   color: var(--text-color);
 66 |   font-weight: 500;
 67 | }
 68 | .navbar a:hover {
 69 |   color: var(--main-color);
 70 | }
 71 | #menu-icon {
 72 |   font-size: 2rem;
 73 |   cursor: pointer;
 74 |   display: none;
 75 | }
 76 | .home {
 77 |   width: 100%;
 78 |   min-height: 100vh;
 79 |   display: grid;
 80 |   grid-template-columns: repeat(2, 1fr);
 81 |   align-items: center;
 82 |   gap: 1.5rem;
 83 | }
 84 | .home-img img {
 85 |   width: 100%;
 86 | }
 87 | .home-text h1 {
 88 |   font-size: var(--big-font);
 89 |   color: var(--main-color);
 90 | }
 91 | .home-text h2 {
 92 |   font-size: var(--h2-font);
 93 |   margin: 1rem 0 1rem;
 94 | }
 95 | .btn {
 96 |   display: inline-block;
 97 |   background: var(--main-color);
 98 |   padding: 10px 20px;
 99 |   border-radius: 0.5rem;
100 |   color: #fff;
101 | }
102 | .btn:hover {
103 |   background: #ffa400;
104 | }
105 | .about {
106 |   display: grid;
107 |   grid-template-columns: repeat(2, 1fr);
108 |   gap: 1.5rem;
109 |   align-items: center;
110 | }
111 | .about-img img {
112 |   max-width: 80%;
113 |   border-radius: 0.5rem;
114 | }
115 | .about-text span {
116 |   color: var(--main-color);
117 |   font-weight: 500;
118 | }
119 | .about-text h2 {
120 |   font-size: var(--h2-font);
121 | }
122 | .about-text p {
123 |   margin: 0.8rem 0 1.8rem;
124 | }
125 | .heading {
126 |   text-align: center;
127 | }
128 | .heading span {
129 |   color: var(--main-color);
130 |   font-weight: 500;
131 | }
132 | .heading h2 {
133 |   font-size: var(--h2-font);
134 | }
135 | .menu-container {
136 |   display: grid;
137 |   grid-template-columns: repeat(auto-fit, minmax(220px, auto));
138 |   gap: 1.5rem;
139 |   align-items: center;
140 | }
141 | .box {
142 |   position: relative;
143 |   margin-top: 2rem;
144 |   height: auto;
145 |   display: flex;
146 |   flex-direction: column;
147 |   justify-content: center;
148 |   align-items: center;
149 |   border-radius: 0.5rem;
150 |   box-shadow: 0 2px 4px rgb(4 64 54 / 10%);
151 |   padding: 10px;
152 | }
153 | .box-img {
154 |   width: 200px;
155 |   height: 200px;
156 | }
157 | .box-img img {
158 |   width: 100%;
159 |   height: 100%;
160 |   object-fit: contain;
161 |   object-position: center;
162 | }
163 | .box h2 {
164 |   font-size: 1.2rem;
165 | }
166 | .box h3 {
167 |   font-size: 1rem;
168 |   font-weight: 400;
169 |   margin: 4px 0 10px;
170 | }
171 | .box span {
172 |   font-size: var(--p-font);
173 |   font-weight: 500;
174 | }
175 | .box .bx {
176 |   position: absolute;
177 |   right: 0;
178 |   top: 0;
179 |   font-size: 20px;
180 |   background: var(--main-color);
181 |   border-radius: 0 0.5rem 0 0.5rem;
182 |   padding: 5px 8px;
183 | }
184 | .box .bx:hover {
185 |   background: #ffa400;
186 | }
187 | .servives-container {
188 |   display: grid;
189 |   grid-template-columns: repeat(auto-fit, minmax(240px, auto));
190 |   gap: 1.5rem;
191 |   margin-top: 2rem;
192 | }
193 | .s-box {
194 |   text-align: center;
195 | }
196 | .s-box img {
197 |   width: 60px;
198 | }
199 | .s-box h3 {
200 |   margin: 4px 0 10px;
201 | }
202 | .connect {
203 |   display: flex;
204 |   align-items: center;
205 |   justify-content: space-around;
206 | }
207 | .connect-text span {
208 |   color: var(--main-color);
209 |   font-weight: 500;
210 | }
211 | .connect-text h2 {
212 |   font-size: var(--h2-font);
213 | }
214 | .contact {
215 |   display: grid;
216 |   grid-template-columns: repeat(auto-fit, minmax(200px, auto));
217 |   gap: 1.5rem;
218 | }
219 | .contact-box h3 {
220 |   margin-bottom: 1rem;
221 | }
222 | .social {
223 |   display: flex;
224 |   margin-top: 1.5rem;
225 | }
226 | .social i {
227 |   font-size: 20px;
228 |   margin-right: 1rem;
229 |   color: var(--text-color);
230 | }
231 | .social i:hover {
232 |   color: var(--main-color);
233 | }
234 | .contact-box li a {
235 |   color: var(--text-color);
236 | }
237 | .contact-box li a:hover {
238 |   color: var(--main-color);
239 | }
240 | .address {
241 |   display: flex;
242 |   flex-direction: column;
243 | }
244 | .address i {
245 |   margin-bottom: 0.5rem;
246 |   font-size: 1rem;
247 | }
248 | .address span {
249 |   margin-left: 1rem;
250 | }
251 | .copyright {
252 |   padding: 20px;
253 |   text-align: center;
254 | }
255 | @media (max-width: 921px) {
256 |   header {
257 |     padding: 14px 41px;
258 |   }
259 |   :root {
260 |     --big-font: 3rem;
261 |     --h2-font: 1.7rem;
262 |   }
263 | }
264 | @media (max-width: 768px) {
265 |   section {
266 |     padding: 50px 8%;
267 |   }
268 |   #menu-icon {
269 |     display: initial;
270 |     color: var(--text-color);
271 |   }
272 |   header .navbar {
273 |     position: absolute;
274 |     top: -400px;
275 |     left: 0;
276 |     right: 0;
277 |     display: flex;
278 |     flex-direction: column;
279 |     text-align: center;
280 |     background: var(--bg-color);
281 |     box-shadow: 0 4px 4px rgb(0 0 0 / 10%);
282 |     transition: 0.2s ease;
283 |   }
284 |   .navbar.active {
285 |     top: 100%;
286 |   }
287 |   .navbar a {
288 |     padding: 1.5rem;
289 |     display: block;
290 |     background: var(--bg-color);
291 |   }
292 |   #darkmode {
293 |     position: absolute;
294 |     top: 1.4rem;
295 |     right: 2rem;
296 |   }
297 | }
298 | @media (max-width: 715px) {
299 |   header {
300 |     padding: 10px 16px;
301 |   }
302 |   .home {
303 |     grid-template-columns: 1fr;
304 |   }
305 |   .about {
306 |     grid-template-columns: 1fr;
307 |     text-align: center;
308 |   }
309 |   .about-img {
310 |     order: 2;
311 |   }
312 | }
313 | @media (max-width: 515px) {
314 |   .connect {
315 |     flex-direction: column;
316 |   }
317 |   .connect .btn {
318 |     margin-top: 1rem;
319 |   }
320 | }
321 | @media (max-width: 450px) {
322 |   :root {
323 |     --big-font: 2rem;
324 |     --h2-font: 1.4rem;
325 |   }
326 |   .home-text {
327 |     padding-top: 4rem;
328 |   }
329 | }


--------------------------------------------------------------------------------
/pizza.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Responsive Pizza Landing Page</title>
  8 |     <!-- Box Icons -->
  9 |     <link rel="stylesheet"
 10 |   href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
 11 |   <!-- Link To CSS -->
 12 |   <link rel="stylesheet" href="styles.css">
 13 | 
 14 | </head>
 15 | <body>
 16 |     <!-- Navbar -->
 17 |     <header>
 18 |         <a href="#" class="logo">Pizza Pie</a>
 19 |         <div class="bx bx-menu" id="menu-icon"></div>
 20 | 
 21 |         <ul class="navbar">
 22 |             <li><a href="#home">Home</a></li>
 23 |             <li><a href="#about">About</a></li>
 24 |             <li><a href="#menu">Menu</a></li>
 25 |             <li><a href="#services">Service</a></li>
 26 |             <li><a href="#contact">Contact</a></li>
 27 |             <!-- Dark Mode -->
 28 |             <div class="bx bx-moon" id="darkmode"></div>
 29 |         </ul>
 30 |     </header>
 31 |     <!-- Home  Section-->
 32 |     <section class="home" id="home">
 33 |         <div class="home-text">
 34 |             <h1>Pizza Taste</h1>
 35 |             <h2>The tasty pizza of <br> your choice</h2>
 36 |             <a href="#menu" class="btn">View Menu</a>
 37 |         </div>
 38 |         <div class="home-img">
 39 |             <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80.png" alt="">
 40 |         </div>
 41 |     </section>
 42 | 
 43 |     <!-- About -->
 44 |     <section class="about" id="about">
 45 |         <div class="about-img">
 46 |             <img src="https://cdn.pixabay.com/photo/2017/12/09/08/18/pizza-3007395__480.jpg" alt="">
 47 |         </div>
 48 |         <div class="about-text">
 49 |             <span>About Us</span>
 50 |             <h2>We make good and <br> tasty pizzas</h2>
 51 |             <p>pizza, dish of Italian origin consisting of a flattened disk of bread dough topped with some combination of olive oil, oregano, tomato, olives, mozzarella or other cheese, and many other</p>
 52 |             <a href="#" class="btn">Learn More</a>
 53 |         </div>
 54 |     </section>
 55 | 
 56 |     <!-- Menu -->
 57 |     <section class="menu" id="menu">
 58 |         <div class="heading">
 59 |             <span>Menu</span>
 60 |             <h2>Tasty menu of the week</h2>
 61 |         </div>
 62 |         <div class="menu-container">
 63 |             <!-- Box 1 -->
 64 |             <div class="box">
 65 |                 <div class="box-img">
 66 |                     <img src="https://images.pexels.com/photos/803290/pexels-photo-803290.jpeg?cs=srgb&dl=pexels-beqa-tefnadze-803290.jpg&fm=jpg" alt="">
 67 |                 </div>
 68 |                 <h2>Cheese Pizza</h2>
 69 |                 <h3>Tasty Food</h3>
 70 |                 <span>₹300</span>
 71 |                 <i class='bx bx-cart-alt'></i>
 72 |             </div>
 73 |             <!-- Box 2 -->
 74 |             <div class="box">
 75 |                 <div class="box-img">
 76 |                     <img src="https://img.freepik.com/free-photo/pepperoni-pizza-with-sausages-cheese-dark-wooden-table_220768-9277.jpg?size=626&ext=jpg" alt="">
 77 |                 </div>
 78 |                 <h2>Tropical Pizza</h2>
 79 |                 <h3>Tasty Food</h3>
 80 |                 <span>₹420</span>
 81 |                 <i class='bx bx-cart-alt'></i>
 82 |             </div>
 83 |             <!-- Box 3 -->
 84 |             <div class="box">
 85 |                 <div class="box-img">
 86 |                     <img src="https://img.freepik.com/free-photo/top-view-pepperoni-pizza-with-mushroom-sausages-bell-pepper-olive-corn-black-wooden_141793-2158.jpg?w=740&t=st=1661842808~exp=1661843408~hmac=c40f0c154036b96b1dba17947c4e4f7c07f40db983106490402bb0b7b6ec452e" alt="">
 87 |                 </div>
 88 |                 <h2>Mecaroni Pizza</h2>
 89 |                 <h3>Tasty Food</h3>
 90 |                 <span>$120</span>
 91 |                 <i class='bx bx-cart-alt'></i>
 92 |             </div>
 93 |         </div>
 94 |     </section>
 95 | 
 96 |     <!-- Service -->
 97 |     <section class="services" id="services">
 98 |         <div class="heading">
 99 |             <span>Services</span>
100 |             <h2>We provide best food services</h2>
101 |         </div>
102 | 
103 |         <div class="servives-container">
104 |             <!-- Box 1 -->
105 |             <div class="s-box">
106 |                 <img src="https://images.pexels.com/photos/280453/pexels-photo-280453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500.png" alt="">
107 |                 <h3>You Order</h3>
108 |                 <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit ea fugiat esse tempore ipsum temporibus.</p>
109 |             </div>
110 |             <!-- Box 2 -->
111 |             <div class="s-box">
112 |                 <img src="https://images.pexels.com/photos/4391470/pexels-photo-4391470.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500.png" alt="">
113 |                 <h3>Shipping</h3>
114 |                 <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit ea fugiat esse tempore ipsum temporibus.</p>
115 |             </div>
116 |             <!-- Box 3 -->
117 |             <div class="s-box">
118 |                 <img src="https://images.pexels.com/photos/4393426/pexels-photo-4393426.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500.png" alt="">
119 |                 <h3>Delivered</h3>
120 |                 <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit ea fugiat esse tempore ipsum temporibus.</p>
121 |             </div>
122 |         </div>
123 |     </section>
124 | 
125 |     <!-- Connect -->
126 |     <section class="connect">
127 |         <div class="connect-text">
128 |             <span>Let's Talk</span>
129 |             <h2>Connect now</h2>
130 |         </div>
131 |         <a href="#" class="btn">Contact Us</a>
132 |     </section>
133 | 
134 |     <!-- Contact -->
135 |     <section class="contact" id="contact">
136 |         <div class="contact-box">
137 |             <h3>Pizza Pie</h3>
138 |             <span>Connect With Us</span>
139 |             <div class="social">
140 |                 <a href="#"><i class='bx bxl-facebook' ></i></a>
141 |                 <a href="#"><i class='bx bxl-twitter' ></i></a>
142 |                 <a href="#"><i class='bx bxl-instagram' ></i></a>
143 |             </div>
144 |         </div>
145 |         <div class="contact-box">
146 |             <h3>Menu Links</h3>
147 |             <li><a href="#home">Home</a></li>
148 |             <li><a href="#about">About</a></li>
149 |             <li><a href="#menu">Menu</a></li>
150 |             <li><a href="#services">Service</a></li>
151 |             <li><a href="#contact">Contact</a></li>
152 |         </div>
153 |         <div class="contact-box">
154 |             <h3>Quick Links</h3>
155 |             <li><a href="#Contact">Contact</a></li>
156 |             <li><a href="#Privacy Policy">Privacy Policy</a></li>
157 |             <li><a href="#Disclaimer">Disclaimer</a></li>
158 |             <li><a href="#Terms Of Use">Terms Of Use</a></li>
159 |         </div>
160 |         <div class="contact-box address">
161 |             <h3>Contact</h3>
162 |             <i class='bx bxs-map' ><span>005, sakar nagar, Bangalore, India</span></i>
163 |             <i class='bx bxs-phone' ><span>+91 99999 5555</span></i>
164 |             <i class='bx bxs-envelope' ><span>pizzapie@email.com</span></i>
165 |         </div>
166 |     </section>
167 | 
168 |     <!-- Copyright -->
169 |     <div class="copyright">
170 |         <p>© Pizzapie All Right Reserved.</p>
171 |     </div>
172 | 
173 | 
174 |     <!-- Scroll Reveal -->
175 |     <script src="https://unpkg.com/scrollreveal"></script>
176 |     <!-- Link To JavaScript -->
177 |     <script src="script.js"></script>
178 | </body>
179 | </html>


--------------------------------------------------------------------------------