├── .DS_Store
├── 03landing
    ├── .vscode
    │   └── settings.json
    ├── index.html
    └── css
    │   └── style.css
├── 04comingsoon
    ├── .vscode
    │   └── settings.json
    ├── .DS_Store
    ├── images
    │   ├── icon.png
    │   └── .DS_Store
    ├── index.html
    └── css
    │   └── style.css
├── 07registration
    ├── css
    │   ├── styletwo.css
    │   └── style.css
    ├── .DS_Store
    ├── images
    │   ├── mobile.png
    │   └── yellow-blob.png
    └── index.html
├── test
    ├── web.jpeg
    ├── index.html
    └── style.css
├── 03html
    ├── .DS_Store
    ├── img
    │   ├── .DS_Store
    │   └── logo-white.png
    ├── contact
    │   └── contact.html
    ├── service
    │   └── service.html
    └── index.html
├── 06mobileapp
    ├── .DS_Store
    ├── images
    │   ├── bg.png
    │   ├── logo.png
    │   ├── phone-image.png
    │   └── google-play-badge.png
    ├── index.html
    └── css
    │   └── style.css
├── 09razorpaystyle
    ├── cycleman.jpeg
    ├── style.css
    └── index.html
├── 01Hello
    └── index.html
├── 05mediaQ
    ├── index.html
    └── css
    │   └── style.css
├── 08animation
    ├── style.css
    └── index.html
└── 02emmet
    └── index.html


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/web-dev-21/HEAD/.DS_Store


--------------------------------------------------------------------------------
/03landing/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "liveServer.settings.port": 5501
3 | }


--------------------------------------------------------------------------------
/04comingsoon/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "liveServer.settings.port": 5501
3 | }


--------------------------------------------------------------------------------
/07registration/css/styletwo.css:
--------------------------------------------------------------------------------
1 | body {
2 |   background-color: crimson;
3 | }
4 | 


--------------------------------------------------------------------------------
/test/web.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/web-dev-21/HEAD/test/web.jpeg


--------------------------------------------------------------------------------
/03html/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/web-dev-21/HEAD/03html/.DS_Store


--------------------------------------------------------------------------------
/03html/img/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/web-dev-21/HEAD/03html/img/.DS_Store


--------------------------------------------------------------------------------
/04comingsoon/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/web-dev-21/HEAD/04comingsoon/.DS_Store


--------------------------------------------------------------------------------
/06mobileapp/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/web-dev-21/HEAD/06mobileapp/.DS_Store


--------------------------------------------------------------------------------
/03html/img/logo-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/web-dev-21/HEAD/03html/img/logo-white.png


--------------------------------------------------------------------------------
/06mobileapp/images/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/web-dev-21/HEAD/06mobileapp/images/bg.png


--------------------------------------------------------------------------------
/07registration/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/web-dev-21/HEAD/07registration/.DS_Store


--------------------------------------------------------------------------------
/04comingsoon/images/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/web-dev-21/HEAD/04comingsoon/images/icon.png


--------------------------------------------------------------------------------
/06mobileapp/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/web-dev-21/HEAD/06mobileapp/images/logo.png


--------------------------------------------------------------------------------
/04comingsoon/images/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/web-dev-21/HEAD/04comingsoon/images/.DS_Store


--------------------------------------------------------------------------------
/09razorpaystyle/cycleman.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/web-dev-21/HEAD/09razorpaystyle/cycleman.jpeg


--------------------------------------------------------------------------------
/07registration/images/mobile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/web-dev-21/HEAD/07registration/images/mobile.png


--------------------------------------------------------------------------------
/06mobileapp/images/phone-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/web-dev-21/HEAD/06mobileapp/images/phone-image.png


--------------------------------------------------------------------------------
/07registration/images/yellow-blob.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/web-dev-21/HEAD/07registration/images/yellow-blob.png


--------------------------------------------------------------------------------
/06mobileapp/images/google-play-badge.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/web-dev-21/HEAD/06mobileapp/images/google-play-badge.png


--------------------------------------------------------------------------------
/01Hello/index.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>Document</title>
 8 | </head>
 9 | <body>
10 |     <h1>Hello world</h1>
11 |     <p>Hitesh Choudhary</p>
12 |     
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/03landing/index.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>Welcome page</title>
 8 |     <link rel="stylesheet" href="css/style.css">
 9 | </head>
10 | <body>
11 |     <h1>Welcome to <span>CSS</span> </h1>
12 |     <p>Web Dev by LCO</p>
13 |     <button class="btn lco">login</button>
14 | </body>
15 | </html>


--------------------------------------------------------------------------------
/05mediaQ/index.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>Welcome page</title>
 8 |     <link rel="stylesheet" href="css/style.css">
 9 | </head>
10 | <body>
11 |     <h1>Welcome to <span>CSS</span> </h1>
12 |     <p>Web Dev by LCO</p>
13 |     <button class="btn lco">login</button>
14 | </body>
15 | </html>


--------------------------------------------------------------------------------
/test/index.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>Document</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | <body>
11 |     <header>
12 |         <h2>Cycle Star</h2>
13 |         <p>Cycle tourist</p>
14 |     </header>
15 |       <main>
16 |           <h1>Heyy</h1>
17 |       </main>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/09razorpaystyle/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background-color: #1d1d1d;
 3 | }
 4 | 
 5 | header {
 6 |   height: 80vh;
 7 |   background-image: linear-gradient(
 8 |       to right bottom,
 9 |       rgba(219, 11, 94, 0.781),
10 |       rgba(6, 0, 12, 0.952)
11 |     ),
12 |     url(cycleman.jpeg);
13 | 
14 |   background-size: cover;
15 |   background-position: top;
16 |   clip-path: polygon(100% 0, 100% 38%, 86% 70%, 0 53%, 0 0);
17 | }
18 | 
19 | header h1 {
20 |   color: #fff;
21 |   font-size: 70px;
22 |   padding-top: 15%;
23 |   padding-left: 15%;
24 | }
25 | 


--------------------------------------------------------------------------------
/04comingsoon/index.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>Coming soon | LCO</title>
 8 |     <link rel="stylesheet" href="css/style.css">
 9 | </head>
10 | <body>
11 |     <img src="images/icon.png" alt="image">
12 |     <div class="banner">
13 |         <div class="text-container">
14 |             <h1>Coming Soon</h1>
15 |         <p>This page is under construction</p>
16 |         </div>
17 |     </div>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/test/style.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,900;1,400&display=swap");
 2 | 
 3 | * {
 4 |   margin: 0;
 5 |   padding: 0;
 6 | }
 7 | 
 8 | header {
 9 |   height: 95vh;
10 |   background-image: linear-gradient(
11 |       to right bottom,
12 |       rgba(30, 46, 192, 0.705),
13 |       rgba(12, 29, 180, 0.719)
14 |     ),
15 |     url(web.jpeg);
16 | 
17 |   background-size: cover;
18 |   background-position: top;
19 |   clip-path: polygon(100% 1%, 100% 40%, 86% 61%, 0 55%, 0 0);
20 | }
21 | 
22 | header h2 {
23 |   font-size: 100px;
24 |   padding-top: 10%;
25 |   padding-left: 15%;
26 |   color: aliceblue;
27 | }
28 | 
29 | body {
30 |   background-color: #1d1d1d;
31 | }
32 | 


--------------------------------------------------------------------------------
/08animation/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);
 3 |   color: #fff;
 4 | }
 5 | 
 6 | .container {
 7 |   height: 100vh;
 8 |   width: 100vw;
 9 | }
10 | 
11 | .wrapper {
12 |   margin: 0 auto;
13 |   height: 500px;
14 |   width: 500px;
15 |   display: flex;
16 |   justify-content: space-around;
17 |   align-items: center;
18 |   border: 3px solid black;
19 | }
20 | 
21 | .left,
22 | .right {
23 |   height: 100px;
24 |   width: 100px;
25 |   background-color: #fff;
26 | 
27 |   animation: pump 1.5s linear infinite;
28 | }
29 | 
30 | @keyframes pump {
31 |   0%,
32 |   100% {
33 |     transform: scale(0);
34 |   }
35 |   75% {
36 |     transform: scale(1);
37 |   }
38 |   50% {
39 |     transform: scale(0);
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/08animation/index.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>Animation</title>
 8 |     <link
 9 |     rel="stylesheet"
10 |     href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
11 |   />
12 |     <link rel="stylesheet" href="style.css">
13 | </head>
14 | <body>
15 |     <div class="container">
16 |         <div class="wrapper">
17 |             <h1 class="animate__animated animate__bounceInUp">Hello Animation</h1>
18 |             <div class="left"></div>
19 |             <div class="right"></div>
20 |         </div>
21 |     </div>
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/09razorpaystyle/index.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>Razoyish</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | <body>
11 |     <header>
12 |         <h1>Cycle Star</h1>
13 |         <p>Cycle tourist</p>
14 |     </header>
15 |     <main>
16 |         <h2>Hello world</h2>
17 |         <form>
18 |             <script src = "https://cdn.razorpay.com/static/widget/payment-button.js"
19 |             data-payment_button_id = "pl_FNmjTBYIfp"
20 |             data-button_text = "Buy Now"
21 |             data-button_theme = "brand-color">
22 |             </script>
23 |             </form>
24 |     </main>
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/04comingsoon/css/style.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200;700&display=swap");
 2 | 
 3 | :root {
 4 |   --yellow: #ffbb30;
 5 |   --black: #242424;
 6 |   --grey: #818181;
 7 |   --white: #ffffff;
 8 | }
 9 | 
10 | * {
11 |   margin: 0;
12 |   padding: 0;
13 |   outline: 0;
14 | }
15 | 
16 | body {
17 |   height: 100%;
18 |   background-color: var(--yellow);
19 |   font-family: "Oswald", sans-serif;
20 | }
21 | 
22 | img {
23 |   display: block;
24 |   /* margin-left: auto;
25 |   margin-right: auto; */
26 |   height: 150px;
27 |   width: 150px;
28 |   /* margin-top: 30px;
29 |   margin-bottom: 30px; */
30 |   margin: 30px auto;
31 | }
32 | 
33 | .banner {
34 |   background-color: var(--white);
35 |   padding-bottom: 30px;
36 |   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
37 | }
38 | 
39 | .text-container {
40 |   width: 60%;
41 |   display: block;
42 |   margin: 0 auto;
43 | }
44 | 
45 | h1 {
46 |   font-size: 90px;
47 |   text-align: center;
48 |   color: var(--black);
49 | }
50 | 
51 | p {
52 |   color: var(--grey);
53 |   text-align: right;
54 |   font-size: 26px;
55 |   font-weight: 200;
56 | }
57 | 


--------------------------------------------------------------------------------
/03landing/css/style.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;900&display=swap");
 2 | 
 3 | body {
 4 |   background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);
 5 |   color: #ffffff;
 6 | }
 7 | 
 8 | h1 {
 9 |   font-size: 70px;
10 |   text-align: center;
11 |   margin-top: 20%;
12 |   color: #ffffff;
13 |   font-family: "Montserrat";
14 |   font-weight: 400;
15 | }
16 | 
17 | span {
18 |   color: #1f1f1f;
19 |   font-size: 100px;
20 |   font-weight: 900;
21 | }
22 | 
23 | p {
24 |   text-align: center;
25 |   margin-top: -20px;
26 |   font-size: 18px;
27 |   letter-spacing: 3px;
28 | }
29 | 
30 | button {
31 |   margin: auto;
32 |   display: block;
33 | }
34 | 
35 | .btn {
36 |   background-color: transparent;
37 |   border: 2px solid #1f1f1f;
38 |   border-radius: 0.6em;
39 |   color: #1f1f1f;
40 |   font-size: 1rem;
41 | 
42 |   padding: 1.2em 2.5em;
43 |   cursor: grab;
44 |   text-align: center;
45 |   text-transform: uppercase;
46 |   font-family: "Montserrat";
47 |   font-weight: 900;
48 | }
49 | 
50 | .btn:hover {
51 |   color: #ffffff;
52 |   outline: 0;
53 | }
54 | 
55 | .lco {
56 |   transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
57 | }
58 | 
59 | .lco:hover {
60 |   box-shadow: 0 0 40px 40px #1f1f1f inset;
61 | }
62 | 


--------------------------------------------------------------------------------
/02emmet/index.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 |     <meta name="description" content="">
 8 |     <title>Document</title>
 9 |     <style>
10 |         body{
11 |             background-color: #758283;
12 |         }
13 |         h1{
14 |             background-color: #E03B8B;
15 |             padding: 13px;
16 |             margin-top: 20px;
17 |             
18 |         }
19 |     </style>
20 |     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
21 |     <link rel="stylesheet" href="style.css">
22 | </head>
23 | <body>
24 |     <h1>Hello from emmet</h1>
25 |     <h2>LearnCOdeonline</h2>
26 |     <a href="https://lco.dev">LCO</a>
27 | 
28 |     <img src="image.jpg" alt="">
29 |     
30 |     <h4 id="center" class="pink">Class and ID</h4>
31 | 
32 |     <button class="primary outline">submit</button>
33 | 
34 |     <form action="" method="post">
35 |         <input type="color" name="" id="">
36 |         <input type="datetime" name="" id="">
37 |         <input type="file" name="" id="">
38 |         <button type="submit">submit</button>
39 |     </form>
40 | 
41 |     <div>
42 |         <p></p>
43 |     </div>
44 | 
45 | </body>
46 | </html>


--------------------------------------------------------------------------------
/03html/contact/contact.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>Document</title>
 8 | </head>
 9 | <body>
10 |     <h1>Welcome to Contact page</h1>
11 |     <h3>You can reach us using this form</h3>
12 |     <h3> <a href="../index.html">Home</a> </h3>
13 | 
14 |     <div id="contact-form">
15 |         <form action="" method="POST">
16 |             <label for="fullname">Name</label>
17 |             <br>
18 |             <input 
19 |             type="text" 
20 |             name="fullname" 
21 |             placeholder="Full name"
22 |             
23 |             >
24 |             <br>
25 |             <label for="email">My Email</label>
26 |            <br>
27 |             <input 
28 |             type="email" 
29 |             name="email" 
30 |             placeholder="email@email.com"
31 |             
32 |             >
33 |             <textarea name="details" 
34 |             id="" 
35 |             cols="30" 
36 |             rows="10"></textarea>
37 | 
38 |             <select name="language" id="" >
39 |                 <option value="cpp">C++</option>
40 |                 <option value="java">Java</option>
41 |                 <option value="js">Javascript</option>
42 |             </select>
43 | 
44 |             <button type="submit">Submit</button>
45 |         </form>
46 |     </div>
47 | 
48 | </body>
49 | </html>


--------------------------------------------------------------------------------
/05mediaQ/css/style.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;900&display=swap");
 2 | 
 3 | body {
 4 |   background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);
 5 |   color: #ffffff;
 6 | }
 7 | 
 8 | h1 {
 9 |   font-size: 70px;
10 |   text-align: center;
11 |   margin-top: 20%;
12 |   color: #ffffff;
13 |   font-family: "Montserrat";
14 |   font-weight: 400;
15 | }
16 | 
17 | span {
18 |   color: #1f1f1f;
19 |   font-size: 100px;
20 |   font-weight: 900;
21 | }
22 | 
23 | p {
24 |   text-align: center;
25 |   margin-top: -20px;
26 |   font-size: 18px;
27 |   letter-spacing: 3px;
28 | }
29 | 
30 | button {
31 |   margin: auto;
32 |   display: block;
33 | }
34 | 
35 | .btn {
36 |   background-color: transparent;
37 |   border: 2px solid #1f1f1f;
38 |   border-radius: 0.6em;
39 |   color: #1f1f1f;
40 |   font-size: 1rem;
41 | 
42 |   padding: 1.2em 2.5em;
43 |   cursor: grab;
44 |   text-align: center;
45 |   text-transform: uppercase;
46 |   font-family: "Montserrat";
47 |   font-weight: 900;
48 | }
49 | 
50 | .btn:hover {
51 |   color: #ffffff;
52 |   outline: 0;
53 | }
54 | 
55 | .lco {
56 |   transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
57 | }
58 | 
59 | .lco:hover {
60 |   box-shadow: 0 0 40px 40px #1f1f1f inset;
61 | }
62 | 
63 | @media screen and (max-width: 800px) {
64 |   body {
65 |     background: orange;
66 |   }
67 | 
68 |   h1 {
69 |     font-size: 40px;
70 |   }
71 |   span {
72 |     font-size: 60px;
73 |   }
74 | }
75 | 
76 | @media screen and (max-width: 600px) and (min-width: 400px) {
77 |   body {
78 |     background: crimson;
79 |   }
80 | 
81 |   h1 {
82 |     font-size: 40px;
83 |   }
84 |   span {
85 |     font-size: 60px;
86 |   }
87 | }
88 | 


--------------------------------------------------------------------------------
/06mobileapp/index.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>App landing page</title>
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
 9 |     <link rel="stylesheet" href="css/style.css">
10 | </head>
11 | <body>
12 |     <nav>
13 |         <div class="brand-img">
14 |             <a href="#" class="nav-logo">
15 |                 <img src="./images/logo.png" alt="logo" class="logo">
16 |             </a>
17 |         </div>
18 | 
19 |         <ul class="nav-items">
20 |             <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
21 |             <li class="nav-item"><a href="#" class="nav-link">About Us</a></li>
22 |             <li class="nav-item"><a href="#" class="nav-link">Contact Us</a></li>
23 |             <li class="nav-item">
24 |                 <button class="nav-link nav-button">Sign Up</button>
25 |             </li>
26 |         </ul>
27 |         <div class="nav-menu-icon">
28 |             <i class="fa fa-bars" aria-hidden="true"></i>
29 | 
30 |         </div>
31 |         
32 |     </nav>
33 | 
34 |     <main class="container">
35 |         <div class="col col-1">
36 |             <p>Quality Courses, Affordable prices</p>
37 |             <h1>Your Company Name</h1>
38 |             <img src="./images/google-play-badge.png" alt="" class="google-play-img">
39 |         </div>
40 |         <div class="col col-2">
41 |             <img src="./images/phone-image.png" alt="" class="phone-img">
42 |         </div>
43 |     </main>
44 | </body>
45 | </html>


--------------------------------------------------------------------------------
/07registration/index.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>Register page | LCO</title>
 8 |     
 9 |     <link rel="stylesheet" href="css/style.css">
10 |     
11 | </head>
12 | <body>
13 |     <main>
14 |         <section class="flex">
15 |             <img src="./images/yellow-blob.png" class="image-top" alt="yellow image">
16 |             <img src="./images/mobile.png" class="mockup"  alt="mobile">
17 |         </section>
18 |         <section class="flex form-section flex-column">
19 |             <h1 class="form-header">create account</h1>
20 |             <form action="#" method="POST" class="form">
21 |                 <div class="row">
22 |                     <input type="text" placeholder="First Name" class="form-input">
23 |                     <input type="text" placeholder="Last Name" class="form-input">
24 |                 </div>
25 |                 <div class="row">
26 |                     <input type="text" placeholder="Enter your email" class="form-input">
27 |                 </div>
28 |                
29 | 
30 |                 <div class="row">
31 |                     <input type="password" placeholder="password" class="form-input">
32 |                     <input type="text" placeholder="Confirm password" class="form-input">
33 |                 </div>
34 |                 <button class="btn btn-submit">create account</button>
35 |             </form>
36 | 
37 |             <div class="flex flex-column">
38 |                 <div class="divider">OR</div>
39 |                 <button class="btn btn-facebook">Facebook</button>
40 |                 <button class="btn btn-twitter">Twiiter</button>
41 |             </div>
42 | 
43 | 
44 |         </section>
45 |     </main>
46 | </body>
47 | </html>


--------------------------------------------------------------------------------
/03html/service/service.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>Document</title>
 8 |     <style>
 9 |         table, th, td {
10 |             border: 1px solid #0D0D0D;
11 |         }
12 |     </style>
13 | </head>
14 | <body>
15 |     <h1>Service page</h1>
16 |     <h2>Welcome to the food service</h2>
17 |     <h3> <a href="../index.html">Home</a> </h3>
18 | 
19 |     <div class="quote">
20 |         <blockquote >
21 |             Behind every great computer, there is a mess of wire.
22 |         </blockquote>
23 |         <p> -- By Mr G.</p>
24 |     </div>
25 | 
26 |     <div class="youtube">
27 |         <iframe width="560" height="315" src="https://www.youtube.com/embed/irUU0uHqQmQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
28 |     </div>
29 | 
30 |     <div class="pricing">
31 |         <table>
32 |             <tr>
33 |                 <th>Silver</th>
34 |                 <th>Gold</th>
35 |                 <th>Platinum</th>
36 |             </tr>
37 |             <tr>
38 |                 <td>login</td>
39 |                 <td>super login</td>
40 |                 <td>ultra login</td>
41 |             </tr>
42 |             <tr>
43 |                 <td>login</td>
44 |                 <td>super login</td>
45 |                 <td>ultra login</td>
46 |             </tr>
47 |             <tr>
48 |                 <td>login</td>
49 |                 <td>super login</td>
50 |                 <td>ultra login</td>
51 |             </tr>
52 |             <tr>
53 |                 <td>login</td>
54 |                 <td>super login</td>
55 |                 <td>ultra login</td>
56 |             </tr>
57 |         </table>
58 | 
59 | 
60 |     </div>
61 |     
62 | </body>
63 | </html>


--------------------------------------------------------------------------------
/07registration/css/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   padding: 0;
  3 |   margin: 0;
  4 |   outline: 0;
  5 | }
  6 | 
  7 | body {
  8 |   background-color: #d5d5d5;
  9 |   height: 100vh;
 10 |   font-family: "Roboto", sans-serif;
 11 | }
 12 | 
 13 | main {
 14 |   display: grid;
 15 |   grid-template-columns: 1fr 1fr;
 16 |   position: relative;
 17 |   height: 100%;
 18 | }
 19 | 
 20 | .flex {
 21 |   width: 100%;
 22 |   display: flex;
 23 |   justify-content: center;
 24 |   align-items: center;
 25 | }
 26 | 
 27 | .image-top {
 28 |   position: absolute;
 29 |   height: 500px;
 30 |   top: 0;
 31 |   left: 0;
 32 |   z-index: -1;
 33 | }
 34 | 
 35 | .mockup {
 36 |   height: 500px;
 37 | }
 38 | 
 39 | .form {
 40 |   width: 100%;
 41 | }
 42 | 
 43 | .flex-column {
 44 |   flex-direction: column;
 45 | }
 46 | 
 47 | .form-section {
 48 |   justify-content: flex-start;
 49 |   align-items: flex-start;
 50 |   margin-top: 50px;
 51 |   width: 75%;
 52 | }
 53 | 
 54 | .form-section h1 {
 55 |   font-size: 40px;
 56 |   margin: 25px 0;
 57 |   color: #343333;
 58 |   text-transform: capitalize;
 59 | }
 60 | 
 61 | input {
 62 |   font-size: 20px;
 63 |   padding: 10px 30px;
 64 |   border-radius: 8px;
 65 |   border: 1px solid #a7a7a7;
 66 |   margin-bottom: 15px;
 67 |   width: 100%;
 68 |   margin: 0 6px 10px 6px;
 69 | }
 70 | 
 71 | .row {
 72 |   display: flex;
 73 |   flex-direction: row;
 74 |   justify-content: space-between;
 75 | }
 76 | 
 77 | .btn {
 78 |   width: 100%;
 79 |   padding: 10px 0px;
 80 |   font-size: 20px;
 81 |   color: #ffffff;
 82 |   background-color: #f59e2e;
 83 |   border: none;
 84 |   outline: none;
 85 |   margin-bottom: 15px;
 86 |   border-radius: 8px;
 87 |   margin-top: 10px;
 88 | }
 89 | 
 90 | .btn:hover {
 91 |   background-color: #1d1d1d;
 92 | }
 93 | 
 94 | .btn-facebook {
 95 |   background-color: #354c8d;
 96 | }
 97 | .btn-twitter {
 98 |   background-color: #009fe9;
 99 | }
100 | 
101 | @media screen and (max-width: 600px) {
102 |   .form-section {
103 |     padding: 20px 30px;
104 |   }
105 |   .row {
106 |     flex-direction: column;
107 |   }
108 |   .mockup {
109 |     display: none;
110 |   }
111 |   main {
112 |     grid-template-columns: 1fr;
113 |   }
114 | }
115 | 


--------------------------------------------------------------------------------
/06mobileapp/css/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   background-image: url("../images/bg.png");
  3 |   background-position: center;
  4 |   background-size: cover;
  5 |   height: 100vh;
  6 |   margin: 0 5%;
  7 | }
  8 | 
  9 | nav {
 10 |   display: flex;
 11 |   flex-direction: row;
 12 |   height: 20vh;
 13 | }
 14 | 
 15 | .nav-link {
 16 |   text-decoration: none;
 17 |   color: #fff;
 18 |   font-size: 25px;
 19 | }
 20 | 
 21 | nav .nav-menu-icon {
 22 |   display: none;
 23 | }
 24 | 
 25 | nav .nav-items {
 26 |   flex: 2;
 27 |   display: flex;
 28 |   justify-content: space-between;
 29 |   align-items: center;
 30 |   list-style-type: none;
 31 | }
 32 | 
 33 | .brand-img {
 34 |   flex: 1;
 35 |   margin: auto;
 36 | }
 37 | 
 38 | .nav-logo {
 39 |   display: block;
 40 | }
 41 | 
 42 | .brand-img img {
 43 |   height: 80px;
 44 | }
 45 | 
 46 | .nav-button {
 47 |   background-color: #e03b8b;
 48 |   border: none;
 49 |   padding: 5px 40px;
 50 |   border-radius: 20px;
 51 |   cursor: pointer;
 52 | }
 53 | 
 54 | .container {
 55 |   display: flex;
 56 |   flex-direction: row;
 57 |   flex: 1;
 58 |   height: 80vh;
 59 | }
 60 | 
 61 | .col {
 62 |   display: flex;
 63 |   flex: 0.5;
 64 |   min-height: 100%;
 65 | }
 66 | 
 67 | .col-2 {
 68 |   overflow: hidden;
 69 | }
 70 | .phone-img {
 71 |   position: absolute;
 72 |   bottom: 0;
 73 |   right: 0;
 74 |   height: 80%;
 75 | }
 76 | 
 77 | .col-1 {
 78 |   flex-direction: column;
 79 |   justify-content: center;
 80 |   align-items: flex-start;
 81 |   color: #fff;
 82 | }
 83 | .col-1 p {
 84 |   font-size: 25px;
 85 | }
 86 | 
 87 | .col-1 h1 {
 88 |   font-size: 75px;
 89 |   margin: 20px 0;
 90 | }
 91 | 
 92 | .google-play-img {
 93 |   height: 90px;
 94 | }
 95 | 
 96 | @media screen and (max-width: 1230px) {
 97 |   .phone-img {
 98 |     height: 60%;
 99 |   }
100 |   nav .nav-items {
101 |     display: none;
102 |   }
103 |   nav .nav-menu-icon {
104 |     display: block;
105 |     margin: auto;
106 |   }
107 |   nav .nav-menu-icon i {
108 |     color: #fff;
109 |     font-size: 30px;
110 |   }
111 | }
112 | 
113 | @media screen and (max-width: 900px) {
114 |   .phone-img {
115 |     display: none;
116 |   }
117 |   .google-play-img {
118 |     height: 50px;
119 |   }
120 | }
121 | 


--------------------------------------------------------------------------------
/03html/index.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>Blog | LearnCodeOnline</title>
 8 |     <style>
 9 |         html {
10 |             background-color: #758283;
11 |         }
12 |     </style>
13 | </head>
14 | <body>
15 |     <ul>
16 |         <li><a href="#">Home</a></li>
17 |         <li><a href="service/service.html">Service</a></li>
18 |         <li><a href="contact/contact.html">Contact</a></li>
19 |     </ul>
20 | 
21 |     <h1>Blog for LearnCodeOnline users</h1>
22 |     <img src="img/logo-white.png" alt="LCO logo image" width="60px" >
23 |     <h3>A place for coders</h3>
24 | 
25 |     <div>
26 |         <h4>Getting started with C programming</h4>
27 |         <p> <strong>Lorem ipsum</strong> dolor sit amet consectetur adipisicing elit. Aut eos velit facilis nihil excepturi neque doloremque, quos ad beatae eveniet quo, laudantium sapiente iste ipsa non. Inventore ea nisi enim rerum veniam fugit dolores soluta architecto sequi dicta hic, in et fuga atque, culpa, a porro excepturi recusandae assumenda obcaecati distinctio? Veniam consequatur deleniti amet eveniet nemo, sequi natus et!</p>
28 |         <p> Price <strike>300</strike> 200 Rs</p>
29 |         <p> <a href="https://web.learncodeonline.in" target="_blank" rel="noopener noreferrer">LearnCodeOnline</a> </p>
30 |     </div>
31 | 
32 |     <div>
33 |         <h4>React is really getting popular</h4>
34 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut eos velit facilis nihil excepturi neque doloremque, quos ad beatae eveniet quo, laudantium sapiente iste ipsa non. Inventore ea nisi enim rerum veniam fugit dolores soluta architecto sequi dicta hic, in et fuga atque, culpa, a porro excepturi recusandae assumenda obcaecati distinctio? Veniam consequatur deleniti amet eveniet nemo, sequi natus et!</p>
35 |         <img src="https://images.pexels.com/photos/7775639/pexels-photo-7775639.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
36 |          alt="image from web"
37 |          width="100px"
38 |          >
39 |     </div>
40 | 
41 |     <div>
42 |         <h4>Angular is changing everyday</h4>
43 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut eos velit facilis nihil excepturi neque doloremque, quos ad beatae eveniet quo, laudantium sapiente iste ipsa non. Inventore ea nisi enim rerum veniam fugit dolores soluta architecto sequi dicta hic, in et fuga atque, culpa, a porro excepturi recusandae assumenda obcaecati distinctio? Veniam consequatur deleniti amet eveniet nemo, sequi natus et!</p>
44 |     </div>
45 | 
46 |     <div>
47 |         <h4>python is taking with web with storm</h4>
48 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut eos velit facilis nihil excepturi neque doloremque, quos ad beatae eveniet quo, laudantium sapiente iste ipsa non. Inventore ea nisi enim rerum veniam fugit dolores soluta architecto sequi dicta hic, in et fuga atque, culpa, a porro excepturi recusandae assumenda obcaecati distinctio? Veniam consequatur deleniti amet eveniet nemo, sequi natus et!</p>
49 |     </div>
50 | </body>
51 | </html>


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