├── css
├── html
└── js


/css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     padding: 0;
  3 |     margin: 0;
  4 |     box-sizing: border-box;
  5 | }
  6 | 
  7 | body {
  8 |     background-color: white;
  9 |     color: black;
 10 |     font-family: "Fira Sans", sans-serif;
 11 |     background-color: white;
 12 | }
 13 | 
 14 | nav {
 15 |     width: 100%;
 16 |     height: 80px;
 17 |     display: flex;
 18 |     justify-content: space-between;
 19 |     padding: 20px 5%;
 20 |     background-color: #8cc099;
 21 | }
 22 | 
 23 | nav .heading {
 24 |     font-size: 30px;
 25 |     font-weight: 700;
 26 |     color: white;
 27 | }
 28 | 
 29 | nav ul {
 30 |     display: flex;
 31 |     list-style: none;
 32 | }
 33 | 
 34 | nav ul li {
 35 |     padding: 8px 15px;
 36 |     border-radius: 10px;
 37 |     transition: 0.2s ease-in;
 38 | }
 39 | 
 40 | nav ul li a {
 41 |     color: black;
 42 |     font-size: 20px;
 43 |     font-weight: 500;
 44 |     text-decoration: none;
 45 |     color: white;
 46 | }
 47 | 
 48 | nav ul li:hover {
 49 |     background-color: green;
 50 | }
 51 | 
 52 | nav ul li a:hover {
 53 |     color: white;
 54 | }
 55 | 
 56 | nav .sideMenuButton {
 57 |     font-size: 30px;
 58 |     font-weight: bolder;
 59 |     cursor: pointer;
 60 |     display: none;
 61 | }
 62 | 
 63 | /* responsive navbar css */
 64 | @media screen and (max-width: 600px) {
 65 |     nav .sideMenuButton {
 66 |         display: flex;
 67 |     }
 68 | 
 69 |     nav .navbar {
 70 |         display: none;
 71 |     }
 72 | 
 73 |     .sideNavigationBar {
 74 |         display: block !important;
 75 |     }
 76 | }
 77 | 
 78 | .sideNavigationBar {
 79 |     height: 100%;
 80 |     position: fixed;
 81 |     top: 0;
 82 |     right: 0%;
 83 |     background-color: green;
 84 |     overflow-x: hidden;
 85 |     transition: 0.3s ease-in;
 86 |     padding-top: 60px;
 87 |     display: none;
 88 | }
 89 | 
 90 | .sideNavigationBar a {
 91 |     padding: 8px 8px 8px 40px;
 92 |     display: block;
 93 |     font-size: 25px;
 94 |     font-weight: 500;
 95 |     color: #d1d1d1;
 96 |     transition: 0.3s;
 97 |     text-decoration: none;
 98 | }
 99 | 
100 | .sideNavigationBar a button {
101 |     padding: 10px 20px;
102 |     border-radius: 10px;
103 |     color: green;
104 |     font-size: 16px;
105 |     border-style: none;
106 |     font-weight: 700;
107 | }
108 | 
109 | .sideNavigationBar a:hover {
110 |     color: white;
111 | }
112 | 
113 | .sideNavigationBar .closeButton {
114 |     position: absolute;
115 |     top: 10px;
116 |     right: 25px;
117 |     font-size: 20px;
118 |     margin-left: 50px;
119 | }
120 | 
121 | .line {
122 |     display: flex;
123 |     justify-content: space-between;
124 |     align-items: center;
125 |     margin: 2% 5%;
126 | }
127 | 
128 | .line .side1 {
129 |     padding-right: 50px;
130 | }
131 | 
132 | .side1 h1 {
133 |     font-size: 60px;
134 |     margin-bottom: 10px;
135 |     color: green;
136 | }
137 | 
138 | .side1 button {
139 |     width: 200px;
140 |     padding: 12px 20px;
141 |     border-radius: 20px;
142 |     border-style: none;
143 |     color: black;
144 |     font-size: 17px;
145 |     font-weight: 600;
146 | }
147 | 
148 | a {
149 |     text-decoration: none;
150 |     color: black;
151 | }
152 | 
153 | /* Header content responsive */
154 | @media screen and (max-width: 980px) {
155 |     .side2 img {
156 |         width: 350px;
157 |     }
158 | 
159 |     .side1 h1 {
160 |         font-size: 40px;
161 |     }
162 | 
163 |     .side1 p {
164 |         font-size: 17px;
165 |     }
166 | 
167 |     .line {
168 |         margin-top: 80px;
169 |     }
170 | }
171 | 
172 | @media screen and (max-width: 600px) {
173 |     .side1 h1 {
174 |         font-size: 35px;
175 |     }
176 | 
177 |     .line {
178 |         flex-direction: column;
179 |     }
180 | 
181 |     .line .side1 {
182 |         padding: 30px;
183 |     }
184 | }
185 | 
186 | /* section */
187 | 
188 | section .topic a {
189 |     font-size: 25px;
190 |     font-weight: 500;
191 |     margin-bottom: 10px;
192 | }
193 | 
194 | .about .boxes {
195 |     display: flex;
196 |     flex-wrap: wrap;
197 |     justify-content: space-between;
198 | }
199 | 
200 | .about .boxes .box {
201 |     margin: 10px 20px;
202 |     max-width: calc(100% / 3 - 50px);
203 |     text-align: center;
204 |     border-radius: 12px;
205 |     padding: 30px 10px;
206 |     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
207 |     cursor: default;
208 | }
209 | 
210 | /* Contact Page  */
211 | 
212 | .contact {
213 |     padding: 20px;
214 | }
215 | 
216 | .contact .content {
217 |     margin: 0 auto;
218 |     padding: 30px 0;
219 | }
220 | 
221 | .content .title {
222 |     width: 80%;
223 |     text-align: center;
224 |     font-weight: bolder;
225 |     font-size: 40px;
226 | }
227 | 
228 | .title {
229 |     margin-bottom: 30px;
230 |     margin-left: 80px;
231 | }
232 | 
233 | .contactMenu {
234 |     display: flex;
235 |     justify-content: space-evenly;
236 | }
237 | 
238 | .input2 {
239 |     margin-top: 10;
240 | }
241 | 
242 | .label1 {
243 |     font-size: 18px;
244 |     margin-top: 8px;
245 |     margin-bottom: 8px;
246 |     font-weight: bolder;
247 | }
248 | 
249 | .contactMenu .input1 input {
250 |     border-radius: 13px;
251 |     padding: 6px;
252 | }
253 | 
254 | .input2 input {
255 |     border-color: rgb(252, 244, 244);
256 |     width: 400px;
257 | }
258 | 
259 | .button {
260 |     margin-top: 12px;
261 |     margin-left: 5px;
262 | }
263 | 
264 | .button button {
265 |     width: 162px;
266 |     height: 35px;
267 |     border-radius: 12px;
268 |     border-color: transparent;
269 | }
270 | 
271 | .button button:hover {
272 |     background-color: #8cc099;
273 | }
274 | 
275 | button {
276 |     width: 162px;
277 |     height: 35px;
278 |     border-radius: 12px;
279 |     border-color: transparent;
280 | }
281 | 
282 | button:hover {
283 |     background-color: #8cc099;
284 | }
285 | 
286 | .rightside1 {
287 |     display: flex;
288 |     flex-direction: column;
289 |     margin-left: 300px;
290 | }
291 | 
292 | .title1 {
293 |     font-size: 18px;
294 |     margin-top: 8px;
295 |     margin-bottom: 5px;
296 |     font-weight: bolder;
297 | }
298 | 
299 | .content1 {
300 |     width: 450px;
301 |     margin-top: 2px;
302 |     color: grey;
303 | }
304 | 
305 | /* Footer */
306 | footer {
307 |     background: var(--primary-color);
308 |     padding: 15px 0;
309 |     text-align: center;
310 |     font-family: "Poppins", sans-serif;
311 | }
312 | 
313 | footer .footer span {
314 |     font-size: 17px;
315 |     font-weight: 400;
316 |     color: var(--white-color);
317 | }
318 | 
319 | footer .footer span a {
320 |     font-weight: 500;
321 |     color: var(--white-color);
322 | }
323 | 
324 | footer .footer span a:hover {
325 |     text-decoration: underline;
326 | }
327 | 
328 | @media screen and (max-width: 1060px) {
329 |     .contactMenu {
330 |         flex-direction: column;
331 |         align-items: center;
332 |     }
333 | 
334 |     .rightside1 {
335 |         display: flex;
336 |         flex-direction: column;
337 |         margin-left: 0px;
338 |     }
339 | 
340 |     .content1 {
341 |         width: 100%;
342 |         margin-top: 2px;
343 |         color: grey;
344 |     }
345 | 
346 |     .side2 img {
347 |         width: 95%;
348 |         height: 90%;
349 |     }
350 | }
351 | 
352 | @media screen and (max-width: 600px) {
353 |     .side2 img {
354 |         width: 100%;
355 |     }
356 | 
357 |     section .topic a {
358 |         font-size: 20px;
359 |     }
360 | 
361 |     section .topic p {
362 |         font-size: 5px;
363 |     }
364 | 
365 |     .about .boxes {
366 |         display: flex;
367 |         flex-direction: column;
368 |         align-items: center;
369 |     }
370 | 
371 |     .about .boxes .box {
372 |         max-width: 70%;
373 |     }
374 | }
375 | 


--------------------------------------------------------------------------------
/html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content=
  8 |         "width=device-width, initial-scale=1.0">
  9 |     <link rel="stylesheet" href="index.css">
 10 |     <title>Landing Page</title>
 11 | </head>
 12 | 
 13 | <body>
 14 |     <nav>
 15 |         <div class="heading">Landing Page</div>
 16 |         <span class="sideMenuButton" 
 17 |             onclick="openNavbar()">
 18 |             &#9776
 19 |         </span>
 20 | 
 21 |         <div class="navbar">
 22 |             <ul>
 23 |                 <li><a href="#Home">Home</a></li>
 24 |                 <li><a href="#">About</a></li>
 25 |                 <li><a href="#">Sign Up</a></li>
 26 |             </ul>
 27 |         </div>
 28 |     </nav>
 29 | 
 30 |     <!-- Side navigation bar for 
 31 |         responsive website -->
 32 |     <div class="sideNavigationBar" 
 33 |         id="sideNavigationBar">
 34 |         <a href="#" class="closeButton" 
 35 |             onclick="closeNavbar()">
 36 |             &#x274C
 37 |         </a>
 38 |         <a href="#">Home</a>
 39 |         <a href="#">About</a>
 40 |         <a href="#">Sign Up</a>
 41 |     </div>
 42 | 
 43 |     <!-- Content -->
 44 |     <div class="line" id="Home">
 45 |         <div class="side1">
 46 |             <h1>GeeksforGeeks</h1>
 47 |             <button>
 48 |                 <a href=
 49 | "https://www.geeksforgeeks.org/">
 50 |                     Explore More
 51 |                 </a>
 52 |             </button>
 53 |         </div>
 54 |         <div class="side2">
 55 |             <img src=
 56 | "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png"
 57 |                 width="500">
 58 |         </div>
 59 |     </div>
 60 | 
 61 |     <section class="about" id="My Projects">
 62 |         <div class="content">
 63 |             <div class="title">
 64 |                 <span>Courses</span>
 65 |             </div>
 66 |             <div class="boxes">
 67 |                 <div class="box">
 68 |                     <div class="topic">
 69 |                         <a href="" target="_blank">
 70 |                             DSA
 71 |                         </a>
 72 |                     </div>
 73 |                     <p>
 74 |                         The term DSA stands for Data 
 75 |                         Structures and Algorithms. As 
 76 |                         the name itself suggests, it 
 77 |                         is a combination of two 
 78 |                         separate yet interrelated 
 79 |                         topics.
 80 |                     </p>
 81 |                 </div>
 82 |                 <div class="box">
 83 | 
 84 |                     <div class="topic">
 85 |                         <a href="" target="_blank">
 86 |                             HTML
 87 |                         </a>
 88 |                     </div>
 89 |                     <p>
 90 |                         HTML stands for HyperText 
 91 |                         Markup Language. It is used 
 92 |                         to design web pages using 
 93 |                         the markup language.
 94 |                     </p>
 95 |                 </div>
 96 | 
 97 |                 <div class="box">
 98 |                     <div class="topic">
 99 |                         <a href="" target="_blank">
100 |                             Javascript
101 |                         </a>
102 |                     </div>
103 |                     <p>
104 |                         JavaScript (JS) is the most 
105 |                         popular lightweight, interpreted 
106 |                         compiled programming language.
107 |                     </p>
108 |                 </div>
109 |             </div>
110 |         </div>
111 |     </section>
112 | 
113 |     <section class="contact" id="contact">
114 |         <div class="content">
115 |             <div class="title"><span>Sign Up</span></div>
116 |             <div class="contactMenu">
117 |                 <div class="input1">
118 |                     <div class="label1">Your Name</div>
119 |                     <div class="input2">
120 |                         <input type="text" 
121 |                             placeholder="Enter your Name here">
122 |                     </div>
123 |                     <div class="label1">
124 |                         <label>Your Email</label>
125 |                     </div>
126 |                     <div class="input2">
127 |                         <input type="text" 
128 |                             placeholder="Enter your Email here">
129 |                     </div>
130 |                     <div class="label1">
131 |                         <label>Your Password</label>
132 |                     </div>
133 |                     <div class="input2">
134 |                         <input type="text" 
135 |                             placeholder="Enter your Password here">
136 |                     </div>
137 |                     <div class="button">
138 |                         <button>Sign Up</button>
139 |                     </div>
140 |                 </div>
141 |                 <div class="input3">
142 |                     <div class="rightside1">
143 |                         <div class="title1">
144 |                             <span>
145 |                                 Contact Us
146 |                             </span>
147 |                         </div>
148 |                         <div class="content1">
149 |                             A-143, 9th Floor, Sovereign 
150 |                             Corporate Tower, Sector-136, 
151 |                             Noida, Uttar Pradesh - 201305
152 |                         </div>
153 |                         <div class="title1">
154 |                             <span>More Information</span>
155 |                         </div>
156 |                         <div class="content1">
157 |                             Greetings to all the Geeks out there!
158 |                             We welcome you to the platform where we
159 |                             consistently strive to offer the best 
160 |                             of education. This platform has been 
161 |                             designed for every geek wishing to 
162 |                             expand their knowledge, share their 
163 |                             knowledge and is ready to grab their 
164 |                             dream job. We have millions of articles,
165 |                             live as well as online courses, thousands 
166 |                             of tutorials and much more just for the 
167 |                             geek inside you.Thank you for choosing 
168 |                             and supporting us!
169 |                         </div>
170 |                     </div>
171 |                 </div>
172 |             </div>
173 |         </div>
174 |     </section>
175 |     <!-- Footer section -->
176 |     <footer>
177 |         <div class="footer">
178 |             <span>
179 |                 Created By
180 |                 <a href="https://www.geeksforgeeks.org/" 
181 |                     target="_blank">
182 |                     GeeksforGeeks
183 |                 </a>
184 |             </span>
185 |         </div>
186 |     </footer>
187 |     <script src="index.js"></script>
188 | </body>
189 | 
190 | </html>
191 | 


--------------------------------------------------------------------------------
/js:
--------------------------------------------------------------------------------
1 | function openNavbar() {
2 |     document.getElementById("sideNavigationBar")
3 |         .style.width = "50%";
4 | }
5 | function closeNavbar() {
6 |     document.getElementById("sideNavigationBar")
7 |         .style.width = "0%";
8 | }
9 | 


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