├── Akash-Nath
    ├── Week_1
    │   ├── Day_1
    │   │   ├── dev.png
    │   │   └── q1.html
    │   ├── Day_2
    │   │   ├── q1.html
    │   │   └── q2.html
    │   ├── Day_3
    │   │   ├── brocolli.webp
    │   │   ├── cabbage.webp
    │   │   ├── potato.jpg
    │   │   ├── q1.html
    │   │   └── q2.html
    │   ├── Day_4
    │   │   ├── q1.html
    │   │   └── q2.html
    │   ├── Day_5
    │   │   ├── dev.png
    │   │   ├── q1.html
    │   │   └── q2.html
    │   ├── Day_6
    │   │   ├── dev.png
    │   │   ├── q1.html
    │   │   └── q2.html
    │   └── Day_7
    │   │   ├── q1.html
    │   │   └── q2.html
    └── Week_2
    │   ├── Day_10
    │       └── q1.html
    │   ├── Day_11
    │       └── q1.html
    │   ├── Day_12
    │       └── q1.html
    │   ├── Day_13
    │       └── q1.html
    │   ├── Day_14
    │       └── q1.html
    │   ├── Day_8
    │       ├── dev.png
    │       ├── q1.html
    │       └── q2.html
    │   └── Day_9
    │       └── q1.html
├── Baivab-Mukhopadhyay
    └── Week1
    │   ├── Day 1
    │       ├── 1.png
    │       └── Index.html
    │   ├── Day 2
    │       └── index.html
    │   └── Day 3
    │       ├── Screenshot 2023-09-03 200808.png
    │       ├── Screenshot 2023-09-21 190923.png
    │       ├── Screenshot 2023-09-29 210209.png
    │       └── index.html
├── Debjit_Adhikari
    ├── Week_1
    │   ├── Day_1
    │   │   ├── images.jpg
    │   │   └── index.html
    │   ├── Day_2
    │   │   └── index.html
    │   ├── Day_3
    │   │   ├── Oppo-K10-5G-scaled-1-768x768.jpg
    │   │   └── index.html
    │   ├── Day_4
    │   │   └── index.html
    │   ├── Day_5
    │   ├── Day_5_
    │   │   ├── index.html
    │   │   └── style.css
    │   ├── Day_6
    │   │   ├── chris.jpg
    │   │   ├── christian_bale.jpg
    │   │   ├── cillian.jpg
    │   │   ├── images.jpg
    │   │   ├── index.html
    │   │   ├── robert.webp
    │   │   ├── style.css
    │   │   └── walter.webp
    │   └── Day_7
    │   │   ├── breakingBad.jpg
    │   │   ├── got.jpg
    │   │   ├── index.html
    │   │   ├── lcdp.jpg
    │   │   ├── style.css
    │   │   ├── tvd.jpg
    │   │   └── viking.jpg
    └── Week_2
    │   ├── Day_1
    │       ├── images.jpg
    │       ├── index.html
    │       └── script.js
    │   ├── Day_2
    │       ├── index.html
    │       ├── script.js
    │       └── style.css
    │   ├── Day_3
    │       ├── index.html
    │       ├── script.js
    │       └── style.css
    │   ├── Day_4
    │       ├── cat.jpg
    │       ├── default.jpg
    │       ├── dog.jpg
    │       ├── index.html
    │       ├── script.js
    │       └── style.css
    │   ├── Day_5
    │       ├── index.html
    │       └── style.css
    │   ├── Day_6
    │       ├── index.html
    │       └── script.js
    │   └── Day_7
    │       ├── index.html
    │       ├── script.js
    │       └── style.css
├── Ekram zafar
    └── week1
├── LICENSE
├── Piyush
    └── Week_1
    │   ├── Day_1
    │       └── q1.html
    │   ├── Day_2
    │       ├── q1.html
    │       └── q2.html
    │   ├── Day_3
    │       └── q1.html
    │   └── Day_4
    │       └── q1.html
├── Questions
    ├── Week1.md
    └── Week2.md
├── README.md
├── Rupam
    └── Week1
    │   ├── Day1
    │       └── qs1.html
    │   ├── Day2
    │       ├── q1.html
    │       └── q2.html
    │   ├── Day3
    │       ├── q1.html
    │       └── q2.html
    │   ├── Day4
    │       ├── q1
    │       │   ├── about.html
    │       │   ├── contact.html
    │       │   ├── education.html
    │       │   ├── index.html
    │       │   └── q1.html
    │       └── q2
    │       │   └── q2.html
    │   ├── Day5
    │       ├── q1
    │       │   ├── day1qs1.html
    │       │   └── qs1.css
    │       └── q2
    │       │   ├── day5q2.css
    │       │   └── day5q2.html
    │   └── Day6
    │       ├── q1
    │           ├── day6qs1.css
    │           └── day6qs1.html
    │       └── q2
    │           ├── day6qs2.css
    │           └── day6qs2.html
└── Tuhin_Poddar
    ├── .vscode
        └── settings.json
    ├── Week_1
        ├── .vscode
        │   └── settings.json
        ├── Day_1
        │   ├── q1.html
        │   └── q1_image.png
        ├── Day_2
        │   ├── q1.html
        │   ├── q2.css
        │   └── q2.html
        ├── Day_3
        │   ├── Product_Images
        │   │   ├── Product_1.jpg
        │   │   ├── Product_2.jpg
        │   │   └── Product_3.jpg
        │   ├── q1.css
        │   └── q1.html
        ├── Day_4
        │   ├── q1.css
        │   └── q1.html
        ├── Day_5
        │   ├── q1.css
        │   ├── q1.html
        │   └── q1_image.png
        ├── Day_6
        │   ├── q1.css
        │   ├── q1.html
        │   ├── q2.css
        │   └── q2.html
        └── Day_7
        │   ├── q1.css
        │   └── q1.html
    └── Week_2
        ├── Day_10
            ├── .hintrc
            ├── q1.css
            ├── q1.html
            └── q1.js
        ├── Day_11
            ├── img1.jfif
            ├── img2.jfif
            ├── q1.html
            └── q1.js
        ├── Day_12
            ├── q1.css
            └── q1.html
        ├── Day_8
            ├── q1.html
            ├── q1.js
            └── q1_image.png
        └── Day_9
            └── q1.html


/Akash-Nath/Week_1/Day_1/dev.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Akash-Nath/Week_1/Day_1/dev.png


--------------------------------------------------------------------------------
/Akash-Nath/Week_1/Day_1/q1.html:
--------------------------------------------------------------------------------
 1 | <!-- Create a simple HTML page with a heading, a paragraph of text, and an image. Include appropriate HTML tags. -->
 2 | 
 3 | <!DOCTYPE html>
 4 | <html lang="en">
 5 | <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Simple page</title>
 9 | </head>
10 | <body>
11 |     <h1>Heading 1</h1>
12 |     <p>I don't know what should I write, but still...</p>
13 |     <img src="dev.png" alt="Some Image">
14 | </body>
15 | </html>


--------------------------------------------------------------------------------
/Akash-Nath/Week_1/Day_2/q1.html:
--------------------------------------------------------------------------------
 1 | <!-- Build a list of your top 5 favorite books or movies using an ordered list. -->
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Simple Page</title>
 8 | </head>
 9 | <body>
10 |     <h1>Top 5 movies/series</h1>
11 |     <ol>
12 |         <li>Interstellar</li>
13 |         <li>Loki</li>
14 |         <li>Avengers Endgame</li>
15 |         <li>Avengers Infinity War</li>
16 |         <li>Avengers (2012)</li>
17 |     </ol>
18 |     <h1>Top 5 books</h1>
19 |     <ol>
20 |         <li>Rich Dad Poor Dad</li>
21 |         <li>Think And Grow Rich</li>
22 |         <li>Ikigai</li>
23 |         <li>Main books nhi padhta :)</li>
24 |         <li>Kuchh nhi pata kya likhna hai mujhe :')</li>
25 |     </ol>
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/Akash-Nath/Week_1/Day_2/q2.html:
--------------------------------------------------------------------------------
 1 | <!-- Create an HTML form that includes fields for a user's name, email address, and a submit button. -->
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Simple Page</title>
 8 | </head>
 9 | <body>
10 |     <h1>Registration of Agreement of Slavery :)</h1>
11 |     <form action="/post">
12 |         <input type="text" name="userName" id="userName" placeholder="Enter Name.">
13 |         <input type="email" name="userEmail" id="userEmail" placeholder="Enter Email">
14 |         <input type="submit" value="Register">
15 |     </form>
16 |     <h2>I know it's a bit odd to place an email field for Registration of Agreement of Slavery, but ultimately we do work for others, in other word we do slavery. :)</h2>
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Akash-Nath/Week_1/Day_3/brocolli.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Akash-Nath/Week_1/Day_3/brocolli.webp


--------------------------------------------------------------------------------
/Akash-Nath/Week_1/Day_3/cabbage.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Akash-Nath/Week_1/Day_3/cabbage.webp


--------------------------------------------------------------------------------
/Akash-Nath/Week_1/Day_3/potato.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Akash-Nath/Week_1/Day_3/potato.jpg


--------------------------------------------------------------------------------
/Akash-Nath/Week_1/Day_3/q1.html:
--------------------------------------------------------------------------------
 1 | <!-- Construct a basic HTML table to display a list of products with columns for product name, price, and description. -->
 2 | 
 3 | <!DOCTYPE html>
 4 | <html lang="en">
 5 | <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Simple Page</title>
 9 |     <style>
10 |         th, td {
11 |             border: 1px solid black;
12 |             padding: 10px;
13 |         }
14 |     </style>
15 | </head>
16 | <body>
17 |     <table>
18 |         <tr>
19 |             <th>Product Name</th>
20 |             <th>Product Price</th>
21 |             <th>Product Description</th>
22 |         </tr>
23 |         <tr>
24 |             <td>DeadBody No.1</td>
25 |             <td>$ 150 million</td>
26 |             <td>Just dead, heart is still pumping blood, you have to buy head seperately.</td>
27 |         </tr>
28 |         <tr>
29 |             <td>DeadBody No.2</td>
30 |             <td>$ 50 million</td>
31 |             <td>Preserved Body for 5 days, heart is still in good condition,liver is completely damaged by alcoholic infections, Lung damaged due to lack of oxygen.</td>
32 |         </tr>
33 |         <tr>
34 |             <td>DeadBody No.3</td>
35 |             <td>$ 200 million</td>
36 |             <td>5 years old body, everything is in perfect condition, bullet wond in intestines.</td>
37 |         </tr>
38 |     </table>
39 | </body>
40 | </html>


--------------------------------------------------------------------------------
/Akash-Nath/Week_1/Day_3/q2.html:
--------------------------------------------------------------------------------
 1 | <!-- Construct a basic HTML table to display a list of products with columns for product name, price, and description. -->
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Simple Page</title>
 8 |     <style>
 9 |         th, td {
10 |             border: 1px solid black;
11 |             padding: 10px;
12 |         }
13 |     </style>
14 | </head>
15 | <body>
16 |     <h1>Now I can't do the same stuffs here in order to add images. So here's a vegitable lists. I gurantee  you won't enjoy as much as before</h1>
17 |     <table>
18 |         <tr>
19 |             <th>Product Name</th>
20 |             <th>Product Price</th>
21 |             <th>Product Image</th>
22 |         </tr>
23 |         <tr>
24 |             <td>Brocolli</td>
25 |             <td>₹41.16</td>
26 |             <td><img src="brocolli.webp" alt="brocolli" width="150px"></td>
27 |         </tr>
28 |         <tr>
29 |             <td>Cabbage</td>
30 |             <td>₹18.00</td>
31 |             <td><img src="cabbage.webp" alt="cabbage" width="150px"></td>
32 |         </tr>
33 |         <tr>
34 |             <td>Potato</td>
35 |             <td>₹28.00</td>
36 |             <td><img src="potato.jpg" alt="Potato" width="150px"></td>
37 |         </tr>
38 |     </table>
39 | </body>
40 | </html>


--------------------------------------------------------------------------------
/Akash-Nath/Week_1/Day_4/q1.html:
--------------------------------------------------------------------------------
 1 | <!-- Develop a navigation menu for a website using an unordered list. -->
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Simple Page</title>
 8 |     <style>
 9 |         * {
10 |             margin: 0;
11 |             padding: 0;
12 |         }
13 |         nav {
14 |             display: flex;
15 |             align-items: center;
16 |             justify-content: space-between;
17 |             width: 100%;
18 |             padding: 15px;
19 |             background-color: aliceblue;
20 |             box-shadow: 0 0 10px #000;
21 |             overflow: none;
22 |         }
23 |         nav ul {
24 |             display: flex;
25 |             align-items: center;
26 |             justify-content: center;
27 |             padding: 0 5vh 0 0;
28 |             /* margin-right: 5vh; */
29 |         }
30 |         nav ul li {
31 |             list-style: none;
32 |             margin: 0 10px;
33 |             cursor: pointer;
34 |         }
35 |     </style>
36 | </head>
37 | <body>
38 |     <nav>
39 |         <h2>Nav Icon</h2>
40 |         <ul>
41 |             <li>Home</li>
42 |             <li>About</li>
43 |             <li>Projects</li>
44 |             <li>Contact</li>
45 |         </ul>
46 |     </nav>
47 | </body>
48 | </html>


--------------------------------------------------------------------------------
/Akash-Nath/Week_1/Day_4/q2.html:
--------------------------------------------------------------------------------
  1 | <!-- Create links within the navigation menu that link to different sections of the same page. -->
  2 | <!DOCTYPE html>
  3 | <html lang="en">
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>simple page</title>
  8 |     <style>
  9 |         * {
 10 |             margin: 0;
 11 |             padding: 0;
 12 |         }
 13 |         html {
 14 |             scroll-behavior: smooth;
 15 |         }
 16 |         .container {
 17 |             display: flex;
 18 |             flex-direction: column;
 19 |             align-items: center;
 20 |             justify-content: center;
 21 |             /* height: 100vh; */
 22 |         }
 23 |         nav {
 24 |             display: flex;
 25 |             justify-content: space-around;
 26 |             align-items: center;
 27 |             width: 100%;
 28 |             height: 10vh;
 29 |             background-color: white;
 30 |             color: #000;
 31 |             padding: 20px;
 32 |             position: sticky;
 33 |             top: 0;
 34 |         }
 35 |         nav ul {
 36 |             display: flex;
 37 |             justify-content: space-evenly;
 38 |             align-items: center;
 39 |             width: 50%;
 40 |         }
 41 |         nav ul li {
 42 |             list-style: none;
 43 |         }
 44 |         .section {
 45 |             height: 70vh;
 46 |             display: flex;
 47 |             align-items: center;
 48 |             justify-content: center;
 49 |             width: 100%;
 50 |         }
 51 |         .home {
 52 |             background-color: aquamarine;
 53 |         }
 54 |         .about {
 55 |             background-color: rgb(255, 152, 152);
 56 |         }
 57 |         .projects {
 58 |             background-color: rgb(255, 255, 152);
 59 |             display: flex;
 60 |             flex-direction: column;
 61 |             align-items: center;
 62 |             justify-content: center;
 63 |         }
 64 |         .projects h2 {
 65 |             margin: 2vh 0;
 66 |         }
 67 |         .projects ul li {
 68 |             margin: 5px 0;
 69 |             font-size: 17px;
 70 |         }
 71 |         .projects span {
 72 |             font-size: 17px;
 73 |             font-weight: 600;
 74 |             margin-top: 5vh;
 75 |         }
 76 |         .contact {
 77 |             background-color: rgb(152, 255, 152);
 78 |             display: flex;
 79 |             flex-direction: column;
 80 |             align-items: center;
 81 |             justify-content: center;
 82 |         }
 83 |         .contact h2 {
 84 |             margin: 2vh 0;
 85 |         }
 86 |         .contact ul li {
 87 |             margin: 5px 0;
 88 |             font-size: 17px;
 89 |         }
 90 |         .contact span {
 91 |             font-size: 17px;
 92 |             font-weight: 600;
 93 |             margin-top: 5vh;
 94 |         }
 95 |     </style>
 96 | </head>
 97 | <body>
 98 |     <nav>
 99 |         <h1>Akash Nath</h1>
100 |         <ul>
101 |             <li><a href="#home">Home</a></li>
102 |             <li><a href="#about">About me</a></li>
103 |             <li><a href="#projects">Projects</a></li>
104 |             <li><a href="#contact">Contact me</a></li>
105 |         </ul>
106 |     </nav>
107 |     <div class="container">
108 |         <div class="section home" id="home">
109 |             <h1>Hii, welcome to page</h1>
110 |         </div>
111 |         <div class="section about" id="about">
112 |             <h2>I am supposed to write about, but company didn't pay me well, so I'm not gonna write any :)</h2>
113 |         </div>
114 |         <div class="section projects" id="projects">
115 |             <h2>My projects</h2>
116 |             <ul>
117 |                 <li><a href="https://github.com/Akash-nath29/Inscribe">A Notes manager application in flask</a></li>
118 |                 <li><a href="https://github.com/Akash-nath29/Trackify">An Phone Number tracker app in flask</a></li>
119 |                 <li><a href="https://github.com/Akash-nath29/ai-image-generator">OpenAI api based Image generator application in flask</a></li>
120 |                 <li><a href="https://github.com/Akash-nath29/shortifyJS">An URL shortener application made in vanilla JavaScript</a></li>
121 |                 <li><a href="https://github.com/Akash-nath29/shareSurge">A secure file sharing platform made in flask</a></li>
122 |             </ul>
123 |             <span><a href="https://github.com/Akash-nath29?tab=repositories">Find out more</a></span>
124 |         </div>
125 |         <div class="section contact" id="contact">
126 |             <h2>Here are some ways to contact me</h2>
127 |             <span><a href="https://akashnath.netlify.app">Portfolio</a></span>
128 |             <span><a href="https://www.instagram.com/akash_nath29">Instagram</a></span>
129 |             <span><a href="https://github.com/Akash-nath29">Github</a></span>
130 |             <span><a href="https://in.linkedin.com/in/akash-nath-986026268">Linkedin</a></span>
131 |         </div>
132 |     </div>
133 | </body>
134 | </html>


--------------------------------------------------------------------------------
/Akash-Nath/Week_1/Day_5/dev.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Akash-Nath/Week_1/Day_5/dev.png


--------------------------------------------------------------------------------
/Akash-Nath/Week_1/Day_5/q1.html:
--------------------------------------------------------------------------------
 1 | <!-- Style the HTML page from Day 1 by changing the background color, font size, and text color using CSS. -->
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Simple page</title>
 8 |     <style>
 9 |         body {
10 |             background-color: blueviolet;
11 |             color: white;
12 |             font-size: 20px;
13 |         }
14 |     </style>
15 | </head>
16 | <body>
17 |     <h1>Heading 1</h1>
18 |     <p>I don't know what should I write, but still...</p>
19 |     <img src="dev.png" alt="Some Image">
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/Akash-Nath/Week_1/Day_5/q2.html:
--------------------------------------------------------------------------------
 1 | <!-- Apply different font styles to the headings, paragraphs, and list items on your page. -->
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Simple page</title>
 8 |     <style>
 9 |         body {
10 |             background-color: blueviolet;
11 |             color: white;
12 |             font-size: 20px;
13 |         }
14 |         h1 {
15 |             font-weight: 600;
16 |         }
17 |         p {
18 |             font-style: italic;
19 |         }
20 |         li {
21 |             font-family: 'Courier New', Courier, monospace;
22 |         }
23 |     </style>
24 | </head>
25 | <body>
26 |     <h1>Heading 1</h1>
27 |     <p>I don't know what should I write, but still...</p>
28 |     <ol>
29 |         <li>Coffee</li>
30 |         <li>Cold Coffee</li>
31 |         <li>More Cold Coffee</li>
32 |         <li>Frozen Coffee</li>
33 |     </ol>
34 |     <img src="dev.png" alt="Some Image">
35 | </body>
36 | </html>


--------------------------------------------------------------------------------
/Akash-Nath/Week_1/Day_6/dev.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Akash-Nath/Week_1/Day_6/dev.png


--------------------------------------------------------------------------------
/Akash-Nath/Week_1/Day_6/q1.html:
--------------------------------------------------------------------------------
 1 | <!-- Use CSS to center-align the image within its container. -->
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Simple page</title>
 8 |     <style>
 9 |         .container {
10 |             position: absolute;
11 |             top: 50%;
12 |             left: 50%;
13 |             transform: translate(-50%, -50%);
14 |             background-color: aliceblue;
15 |             display: flex;
16 |             align-items: center;
17 |             justify-content: center;
18 |             width: 50%;
19 |             height: 50%;
20 |             border: 1px solid black;
21 |         }
22 |     </style>
23 | </head>
24 | <body>
25 |     <div class="container">
26 |         <img src="dev.png" alt="Dev Icon">
27 |     </div>
28 | </body>
29 | </html>


--------------------------------------------------------------------------------
/Akash-Nath/Week_1/Day_6/q2.html:
--------------------------------------------------------------------------------
 1 | <!-- Create a CSS class that adds a border around an element and apply it to your form fields. -->
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Simple Page</title>
 8 |     <style>
 9 |         form {
10 |             display: flex;
11 |             flex-direction: column;
12 |             align-items: center;
13 |             justify-content: center;
14 |             height: 50vh;
15 |             width: 100%;
16 |         }
17 |         .form-element {
18 |             width: 50%;
19 |             margin: 10px;
20 |             padding: 10px;
21 |             border: 1px solid black;
22 |             border-radius: 5px;
23 |             outline: none;
24 |             padding: 8px 20px;
25 |         }
26 |     </style>
27 | </head>
28 | <body>
29 |     <h1>Registration of Agreement of Slavery :)</h1>
30 |     <form action="/post">
31 |         <input type="text" name="userName" id="userName" placeholder="Enter Name." class="form-element">
32 |         <input type="email" name="userEmail" id="userEmail" placeholder="Enter Email" class="form-element">
33 |         <input type="submit" value="Register" class="form-element">
34 |     </form>
35 |     <h2>I know it's a bit odd to place an email field for Registration of Agreement of Slavery, but ultimately we do work for others, in other word we do slavery. :)</h2>
36 | </body>
37 | </html>


--------------------------------------------------------------------------------
/Akash-Nath/Week_1/Day_7/q1.html:
--------------------------------------------------------------------------------
 1 | <!-- Build a button that changes color when you hover over it using CSS. -->
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Simple Page</title>
 8 |     <style>
 9 |         .btn {
10 |             position: absolute;
11 |             top: 50%;
12 |             left: 50%;
13 |             transform: translate(-50%, -50%);
14 |             padding: 20px 20px;
15 |             font-size: 20px;
16 |             border: none;
17 |             border-radius: 10px;
18 |             background-color: blueviolet;
19 |             color: white;
20 |             cursor: pointer;
21 |             transition: 0.4s;
22 |         }
23 |         .btn:hover {
24 |             background-color: #fff;
25 |             border: 1px solid blueviolet;
26 |             color: blueviolet;
27 |         }
28 |     </style>
29 | </head>
30 | <body>
31 |     <button class="btn" onclick="console.log('Hey, you\'re tired with life too !:) It\'s so nice to meet you :) Hope we both die :)')">I'm a button, and I'm happy about it :)</button>
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/Akash-Nath/Week_1/Day_7/q2.html:
--------------------------------------------------------------------------------
 1 | <!-- Add hover effects to the navigation menu links from Day 4. Change the link color or background color on hover. -->
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Simple Page</title>
 8 |     <style>
 9 |         * {
10 |             margin: 0;
11 |             padding: 0;
12 |         }
13 |         nav {
14 |             display: flex;
15 |             align-items: center;
16 |             justify-content: space-between;
17 |             width: 100%;
18 |             padding: 15px;
19 |             background-color: aliceblue;
20 |             box-shadow: 0 0 10px #000;
21 |             overflow: none;
22 |         }
23 |         nav ul {
24 |             display: flex;
25 |             align-items: center;
26 |             justify-content: center;
27 |             padding: 0 5vh 0 0;
28 |             /* margin-right: 5vh; */
29 |         }
30 |         nav ul li {
31 |             list-style: none;
32 |             margin: 0 10px;
33 |             cursor: pointer;
34 |         }
35 |         nav ul li:hover {
36 |             text-decoration: underline;
37 |             color: red;
38 |         }
39 |     </style>
40 | </head>
41 | <body>
42 |     <nav>
43 |         <h2>Nav Icon</h2>
44 |         <ul>
45 |             <li>Home</li>
46 |             <li>About</li>
47 |             <li>Projects</li>
48 |             <li>Contact</li>
49 |         </ul>
50 |     </nav>
51 | </body>
52 | </html>


--------------------------------------------------------------------------------
/Akash-Nath/Week_2/Day_10/q1.html:
--------------------------------------------------------------------------------
 1 | <!-- Add a button to your HTML form from Day 2. Use JavaScript to show an alert when the button is clicked. -->
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Simple Page</title>
 8 | </head>
 9 | <body>
10 |     <h1>Registration of Agreement of Slavery :)</h1>
11 |     <form>
12 |         <input type="text" name="userName" id="userName" placeholder="Enter Name.">
13 |         <input type="email" name="userEmail" id="userEmail" placeholder="Enter Email">
14 |         <input type="submit" value="Register" onclick="alert('Complete pending projects -_-')">
15 |     </form>
16 |     <h2>I know it's a bit odd to place an email field for Registration of Agreement of Slavery, but ultimately we do work for others, in other word we do slavery. :)</h2>
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Akash-Nath/Week_2/Day_11/q1.html:
--------------------------------------------------------------------------------
 1 | <!-- Change the content of an HTML element using JavaScript. For example, update the text of a paragraph or the source of an image dynamically. -->
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Simple Page</title>
 8 | </head>
 9 | <body>
10 |     <input type="text" name="userName" id="userName" placeholder="Enter Name" autocomplete="off">
11 |     <!-- <button onclick="updateName()">Update Name</button> -->
12 |     <p class="greetings">Hello</p>
13 |     <script>
14 |         function updateName() {
15 |             const name = document.getElementById('userName').value;
16 |             document.querySelector('.greetings').innerHTML = `Hello ${name}`;
17 |         }
18 |         document.querySelector('#userName').addEventListener('input', updateName);
19 |     </script>
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/Akash-Nath/Week_2/Day_12/q1.html:
--------------------------------------------------------------------------------
 1 | <!-- Apply media queries in your CSS to make your page responsive. Test how it looks on different screen sizes. -->
 2 | 
 3 | <!DOCTYPE html>
 4 | <html lang="en">
 5 | <head>
 6 |     <meta charset="UTF-8">
 7 |     <title>Responsive</title>
 8 |     <style>
 9 |         body{
10 |             background-color: #f1f1f1;
11 |         }
12 |         .container{
13 |             width: 100%;
14 |             height: 100vh;
15 |             display: flex;
16 |             justify-content: center;
17 |             align-items: center;
18 |         }
19 |         .box{
20 |             width: 300px;
21 |             height: 300px;
22 |             background-color: #fff;
23 |             border-radius: 10px;
24 |             box-shadow: 0 0 10px rgba(0,0,0,0.5);
25 |             display: flex;
26 |             justify-content: center;
27 |             align-items: center;
28 |         }
29 |         @media only screen and (max-width: 600px) {
30 |             .box{
31 |                 width: 200px;
32 |                 height: 200px;
33 |             }
34 |         }
35 |         @media only screen and (max-width: 400px) {
36 |             .box{
37 |                 width: 100px;
38 |                 height: 100px;
39 |             }
40 |         }
41 |     </style>
42 | </head>
43 | <body>
44 |     <div class="container">
45 |         <div class="box">
46 |             <h1>Responsive</h1>
47 |         </div>
48 |     </div>
49 | </body>
50 | </html>


--------------------------------------------------------------------------------
/Akash-Nath/Week_2/Day_13/q1.html:
--------------------------------------------------------------------------------
 1 | <!-- Enhance your form from Day 2 by adding JavaScript validation. Ensure that the name is not empty, and the email follows a valid format. -->
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Simple Page</title>
 8 | </head>
 9 | <body>
10 |     <h1>Registration of Agreement of Slavery :)</h1>
11 |     <form>
12 |         <input type="text" name="userName" id="userName" placeholder="Enter Name.">
13 |         <input type="email" name="userEmail" id="userEmail" placeholder="Enter Email">
14 |         <input type="submit" value="Register">
15 |     </form>
16 |     <script>
17 |         const form = document.querySelector('form');
18 |         form.addEventListener('submit', (e) => {
19 |             e.preventDefault();
20 |             const name = document.getElementById('userName').value;
21 |             const email = document.getElementById('userEmail').value;
22 |             if (name === '' || email === '') {
23 |                 alert('Please fill all the fields.');
24 |             } else {
25 |                 alert(`Thank you ${name} for registering with us.`);
26 |             }
27 |         });
28 |     </script>
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/Akash-Nath/Week_2/Day_14/q1.html:
--------------------------------------------------------------------------------
  1 | <!-- Challenge participants to create a small project that incorporates HTML, CSS, and JavaScript. It could be a simple interactive webpage, a form with dynamic behavior, or a basic game. -->
  2 | <!DOCTYPE html>
  3 | <html lang="en">
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <style>
  8 |         body {
  9 |             display: flex;
 10 |             flex-direction: column;
 11 |             justify-content: center;
 12 |             align-items: center;
 13 |             height: 100vh;
 14 |             margin: 0;
 15 |         }
 16 | 
 17 |         #game-container {
 18 |             position: relative;
 19 |             width: 500px; 
 20 |             height: 500px; 
 21 |             border: 2px solid #000;
 22 |             overflow: hidden;
 23 |         }
 24 | 
 25 |         #target {
 26 |             position: absolute;
 27 |             width: 50px;
 28 |             height: 50px;
 29 |             border-radius: 50%;
 30 |             background-color: red;
 31 |             cursor: pointer;
 32 |             transition: left 0.5s, top 0.5s;
 33 |         }
 34 | 
 35 |         #score {
 36 |             margin-top: 20px;
 37 |             font-size: 20px;
 38 |         }
 39 | 
 40 |         #timer {
 41 |             font-size: 20px;
 42 |         }
 43 |     </style>
 44 |     <title>Simple Page</title>
 45 | </head>
 46 | <body>
 47 |     <h1>Click the ball</h1>
 48 |     <div id="game-container">
 49 |         <div id="target"></div>
 50 |     </div>
 51 |     <p id="score">Score: 0</p>
 52 |     <p id="timer">Time: <span id="time-remaining">5</span> seconds</p>
 53 | 
 54 |     <script>
 55 |         let score = 0;
 56 |         let timeRemaining = 5;
 57 |         let timer;
 58 |         let speedMultiplier = 1.5; 
 59 | 
 60 |         function moveTarget() {
 61 |             const gameContainer = document.getElementById('game-container');
 62 |             const target = document.getElementById('target');
 63 | 
 64 |             const maxX = gameContainer.clientWidth - target.clientWidth;
 65 |             const maxY = gameContainer.clientHeight - target.clientHeight;
 66 | 
 67 |             const newX = Math.floor(Math.random() * maxX);
 68 |             const newY = Math.floor(Math.random() * maxY);
 69 | 
 70 |             target.style.left = `${newX}px`;
 71 |             target.style.top = `${newY}px`;
 72 |         }
 73 | 
 74 |         function increaseScore() {
 75 |             score++;
 76 |             document.getElementById('score').textContent = `Score: ${score}`;
 77 |         }
 78 | 
 79 |         function updateTimer() {
 80 |             document.getElementById('time-remaining').textContent = timeRemaining;
 81 |         }
 82 | 
 83 |         function startGame() {
 84 |             score = 0;
 85 |             timeRemaining = 5;
 86 |             updateTimer();
 87 |             moveTarget();
 88 | 
 89 |             timer = setInterval(function() {
 90 |                 timeRemaining--;
 91 | 
 92 |                 if (timeRemaining <= 0) {
 93 |                     endGame();
 94 |                 } else {
 95 |                     updateTimer();
 96 |                 }
 97 |             }, 1000);
 98 |         }
 99 | 
100 |         function endGame() {
101 |             clearInterval(timer);
102 |             alert(`Game over! Your score is ${score}.`);
103 |             startGame();
104 |         }
105 | 
106 |         document.getElementById('target').addEventListener('click', function() {
107 |             increaseScore();
108 |             moveTarget();
109 |             timeRemaining = 5; 
110 |             updateTimer();
111 | 
112 |             speedMultiplier *= 1.1;
113 |             document.getElementById('target').style.transition = `left ${0.5 / speedMultiplier}s, top ${0.5 / speedMultiplier}s`;
114 |         });
115 | 
116 |         startGame();
117 |     </script>
118 | </body>
119 | </html>
120 | 


--------------------------------------------------------------------------------
/Akash-Nath/Week_2/Day_8/dev.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Akash-Nath/Week_2/Day_8/dev.png


--------------------------------------------------------------------------------
/Akash-Nath/Week_2/Day_8/q1.html:
--------------------------------------------------------------------------------
 1 | <!-- Create a simple HTML page with a heading, a paragraph of text, and an image. Include appropriate HTML tags. -->
 2 | 
 3 | <!DOCTYPE html>
 4 | <html lang="en">
 5 | <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Simple page</title>
 9 | </head>
10 | <body>
11 |     <h1>Heading 1</h1>
12 |     <p>I don't know what should I write, but still...</p>
13 |     <img src="dev.png" alt="Some Image"> <br>
14 |     <button onclick="console.log('I wanna die :)')">Click me and Check Console</button>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/Akash-Nath/Week_2/Day_8/q2.html:
--------------------------------------------------------------------------------
 1 | <!-- Create variables for the name and age. Use these variables to display a personalized greeting. -->
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Simple Page</title>
 8 |     <style>
 9 |         * {
10 |             font-family: 'Courier New', Courier, monospace;
11 |         }
12 |         .container {
13 |             display: flex;
14 |             flex-direction: column;
15 |             align-items: center;
16 |             justify-content: center;
17 |             background-color: aliceblue;
18 |             width: 30%;
19 |             /* height: 30%; */
20 |             position: absolute;
21 |             top: 50%;
22 |             left: 50%;
23 |             transform: translate(-50%, -50%);
24 |             border-radius: 10px;
25 |             padding: 50px 20px;
26 |         }
27 |         input, button {
28 |             width: 60%;
29 |             padding: 8px 20px;
30 |             outline: none;
31 |             margin: 2px 0;
32 |             background-color: white;
33 |             border: 1px solid black;
34 |         }
35 |     </style>
36 | </head>
37 | <body>
38 |     <div class="container">
39 |         <input type="text" name="username" id="username" placeholder="Enter Name">
40 |         <input type="number" name="userage" id="userage" placeholder="Enter age">
41 |         <button onclick="greet()">Click</button>
42 |         <br>
43 |         <p class="greetings"></p>
44 |     </div>
45 |     <script>
46 |         let name = document.querySelector('#username');
47 |         let age = document.querySelector('#userage');
48 |         function greet(){
49 |             document.querySelector('.greetings').innerText = `Hi ${name.value}, I know you're ${age.value} years old :)`;
50 |         }
51 |     </script>
52 | </body>
53 | </html>


--------------------------------------------------------------------------------
/Akash-Nath/Week_2/Day_9/q1.html:
--------------------------------------------------------------------------------
 1 | <!-- Write a JavaScript function that calculates the area of a rectangle (length * width). Call this function with different values and display the results. -->
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | 
 5 | <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <style>
 9 |         .container {
10 |             display: flex;
11 |             flex-direction: column;
12 |             align-items: center;
13 |             justify-content: space-evenly;
14 |         }
15 |         .inputs {
16 |             display: flex;
17 |             flex-direction: column;
18 |             align-items: center;
19 |             justify-content: center;
20 |         }
21 | 
22 |         #rectangle {
23 |             width: 0;
24 |             height: 0;
25 |             border: 2px solid black;
26 |             transition: width 0.5s, height 0.5s;
27 |             background-color: blueviolet;
28 |         }
29 |     </style>
30 |     <title>Simple Page</title>
31 | </head>
32 | 
33 | <body>
34 |     <div class="container">
35 |         <div class="inputs">
36 |             <label for="widthInput">Width:</label>
37 |             <input type="number" id="widthInput" value="50">
38 | 
39 |             <label for="heightInput">Height:</label>
40 |             <input type="number" id="heightInput" value="50">
41 |             <br><br>
42 |             <button onclick="calculateArea()">Calculate Area</button>
43 |             <p class="area"></p>
44 |         </div>
45 | 
46 |         <div id="rectangle"></div>
47 |     </div>
48 |     <script>
49 |         function updateRectangle() {
50 |             const width = document.getElementById('widthInput').value + 'px';
51 |             const height = document.getElementById('heightInput').value + 'px';
52 | 
53 |             document.getElementById('rectangle').style.width = width;
54 |             document.getElementById('rectangle').style.height = height;
55 |         }
56 | 
57 |         document.getElementById('widthInput').addEventListener('input', updateRectangle);
58 |         document.getElementById('heightInput').addEventListener('input', updateRectangle);
59 | 
60 |         // Initial update
61 |         updateRectangle();
62 |         function calculateArea(){
63 |             const width = document.getElementById('widthInput').value;
64 |             const height = document.getElementById('heightInput').value;
65 | 
66 |             document.querySelector('.area').innerText = `Area of rectangle is ${width * height} square units`;
67 |         }
68 |     </script>
69 | </body>
70 | 
71 | </html>


--------------------------------------------------------------------------------
/Baivab-Mukhopadhyay/Week1/Day 1/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Baivab-Mukhopadhyay/Week1/Day 1/1.png


--------------------------------------------------------------------------------
/Baivab-Mukhopadhyay/Week1/Day 1/Index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | <!DOCTYPE html>
 4 | <html>
 5 |   <head>
 6 |     <title>My Simple HTML Page</title>
 7 |   </head>
 8 |   <body>
 9 |     <h1>My Heading</h1>
10 |     <p>This is a paragraph of text.</p>
11 |     <img src="1.png" alt="My Image">
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/Baivab-Mukhopadhyay/Week1/Day 2/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <ol>
 3 |   <li>The Lord of the Rings</li>
 4 |   <li>The Shawshank Redemption</li>
 5 |   <li>The Godfather</li>
 6 |   <li>The Dark Knight</li>
 7 |   <li>The Matrix</li>
 8 | </ol>
 9 | 
10 | 
11 | <form>
12 |   <label for="name">Name:</label>
13 |   <input type="text" id="name" name="name"><br><br>
14 |   <label for="email">Email:</label>
15 |   <input type="email" id="email" name="email"><br><br>
16 |   <input type="submit" value="Submit">
17 | </form>
18 | 


--------------------------------------------------------------------------------
/Baivab-Mukhopadhyay/Week1/Day 3/Screenshot 2023-09-03 200808.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Baivab-Mukhopadhyay/Week1/Day 3/Screenshot 2023-09-03 200808.png


--------------------------------------------------------------------------------
/Baivab-Mukhopadhyay/Week1/Day 3/Screenshot 2023-09-21 190923.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Baivab-Mukhopadhyay/Week1/Day 3/Screenshot 2023-09-21 190923.png


--------------------------------------------------------------------------------
/Baivab-Mukhopadhyay/Week1/Day 3/Screenshot 2023-09-29 210209.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Baivab-Mukhopadhyay/Week1/Day 3/Screenshot 2023-09-29 210209.png


--------------------------------------------------------------------------------
/Baivab-Mukhopadhyay/Week1/Day 3/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <table border="1">
 3 |   <thead>
 4 |     <tr>
 5 |       <th>Product Name</th>
 6 |       <th>Price</th>
 7 |       <th>Description</th>
 8 |       <th>Image</th>
 9 |     </tr>
10 |   </thead>
11 |   <tbody>
12 |     <tr>
13 |       <td>Product 1</td>
14 |       <td>$10.00</td>
15 |       <td>Description of product 1</td>
16 |       <td><img src="Screenshot 2023-09-03 200808.png" alt="Product 1"></td>
17 |     </tr>
18 |     <tr>
19 |       <td>Product 2</td>
20 |       <td>$20.00</td>
21 |       <td>Description of product 2</td>
22 |       <td><img src="Screenshot 2023-09-21 190923.png" alt="Product 2"></td>
23 |     </tr>
24 |     <tr>
25 |       <td>Product 3</td>
26 |       <td>$30.00</td>
27 |       <td>Description of product 3</td>
28 |       <td><img src="Screenshot 2023-09-29 210209.png" alt="Product 3"></td>
29 |     </tr>
30 |   </tbody>
31 | </table>
32 | 


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_1/Day_1/images.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Debjit_Adhikari/Week_1/Day_1/images.jpg


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_1/Day_1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Document</title>
 7 | </head>
 8 | <body>
 9 |     <h1>My webpage</h1>
10 |     <p>Hello, everyone welcome to my simple webpage.
11 |         By creating this simple webpage I've finished my Day 1 challenge.
12 |     </p>
13 |     <img src="./images.jpg">
14 |     <p>Here is Mr. Walter White.</p>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_1/Day_2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Document</title>
 7 | </head>
 8 | <body>
 9 |     <h1>My favourite books & movies.</h1>
10 |     <ul>
11 |         <li><h2>Books:</h2></li>
12 |     <p>I like to read books. Here are some of my favourite books. </p>
13 |     <ol>
14 |         <li>Harry Potter and the Philosopher's Stone Novel by J. K. Rowling</li>
15 |         <li>Harry Potter and the Order of the Phoenix Novel by J. K. Rowling</li>
16 |         <li>Harry Potter and the Half-Blood Prince Novel by J. K. Rowling</li>
17 |         <li>Harry Potter and the Deathly Hallows Novel by J. K. Rowling</li>
18 |         <li>Macbeth book by William Shakespeare</li>
19 |     </ol>
20 |     <li><h2>Movies & series:</h2></li>
21 |     <p>I like to watch movies & webseries on my leisure time. Here are some of my favourites.</p>
22 |     <ol>
23 |         <li>Game Of Thrones</li>
24 |         <li>Breaking Bad</li>
25 |         <li>Vampire Diaries</li>
26 |         <li>Money Heist</li>
27 |         <li>Stranger Things</li>
28 |     </ol>
29 | </ul>
30 | <form>
31 |     <label>Name:</label><br>
32 |     <input type="text" placeholder="Enter your first name"><br>
33 |     <input type="text" placeholder="Enter your last name"><br>
34 |     <label>Sex:</label><br>
35 |     <input type="radio" value="Male">Male<br>
36 |     <input type="radio">Female<br>
37 |     <input type="radio">Prefer not to say<br>
38 |     <button>Submit</button>
39 | 
40 | </form>
41 | </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_1/Day_3/Oppo-K10-5G-scaled-1-768x768.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Debjit_Adhikari/Week_1/Day_3/Oppo-K10-5G-scaled-1-768x768.jpg


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_1/Day_3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Document</title>
 7 | </head>
 8 | <body>
 9 |     <table border="1" cellspacing="10">
10 |         <tr>
11 |             <th>Product name</th>
12 |             <th>Price</th>
13 |             <th>Description</th>
14 |         </tr>
15 |         <tr>
16 |             <td>Oppo</td>
17 |             <td>$34</td>
18 |             <td>It has 8GB ram with 5000mAh battery</td>
19 |             <td><img src="./Oppo-K10-5G-scaled-1-768x768.jpg"height="80px"></td>
20 | 
21 |         </tr>
22 |         <tr>
23 |             <td>Redmi 8</td>
24 |             <td>$16</td>
25 |             <td>Comes with 4GB ram and 64GB storage</td>
26 |         </tr>
27 |         <tr>
28 |             <td>Realme 9</td>
29 |             <td>$20</td>
30 |             <td>It comes with 64mp dual camera</td>
31 |         </tr>
32 |     </table>
33 |     
34 | </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_1/Day_4/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Document</title>
 7 | </head>
 8 | <body>
 9 |     <h1>My favourite TV series:</h1>
10 |     <p>Here are some of my favourites. Click any of these for more information</p>
11 |     <ul style="margin-bottom: 200px">
12 |         <li><a href="#got">Game Of thrones</a></li>
13 |         <li><a href="#tvd">The Vampire Diaries</a></li>
14 |         <li><a href="#bb">Breaking Bad</a></li>
15 |         <li><a href="#lcdp">Money Heist</a></li>
16 |         <li><a href="#v">Vikings</a></li>
17 |     </ul>
18 |     <div id="about">
19 |         <ul>
20 |             <li id="got" style="margin-bottom: 500px"><h2>Game Of Thrones:-</h2>
21 |                 <p>Nine noble families wage war against each other in order to gain control over the mythical land of Westeros. Meanwhile, a force is rising after millenniums and threatens the existence of living men.</p></li>
22 |                 
23 |             <li id="tvd" style="margin-bottom: 500px"><h2>The Vampire Diaries:-</h2>
24 |                 <p>On her first day at high school, Elena meets Stefan and immediately feels a connection with him. However, what she does not know is that Stefan and his brother, Damon, are in fact vampires.</p></li>
25 |             <li id="bb" style="margin-bottom: 500px"><h2>Breaking Bad:-</h2>
26 |                 <p>Walter White, a chemistry teacher, discovers that he has cancer and decides to get into the meth-making business to repay his medical debts. His priorities begin to change when he partners with Jesse.</p></li>
27 |             <li id="lcdp" style="margin-bottom: 500px"><h2>Money Heist:-</h2>
28 |                 <p>When the national mint and a touring school group are held hostage by robbers, police believe that the thieves have no way out. Little do they know that the thieves have a bigger plan in store.</p></li>
29 |             <li id="v" style="margin-bottom: 500px"><h2>Vikings:-</h2>
30 |                 <p>As Ragnar Lodbrok, a Norse farmer, carries out triumphant raids into English territory with the help of his fellow warriors, he ends up holding sway over the Vikings and becoming a Scandinavian king.</p></li>
31 |             </ul>
32 |     </div>
33 |     
34 | </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_1/Day_5:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_1/Day_5_/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Document</title>
 7 | </head>
 8 | <link rel="stylesheet" href="style.css">
 9 | <body>
10 |     <h1>Vitamins for Health</h1>
11 |     <p>Vitamins help your body grow and work the way it should. There are 13 essential vitamins — vitamins A, C, D, E, K, and the B vitamins (thiamine, riboflavin, niacin, pantothenic acid, biotin, B6, B12, and folate).</p>
12 |     <p>Here are some helpful source to get Vitamins and minerals :</p>
13 |     <ul>
14 |         <li class="vitamin">Vitamin A
15 |             <ol>
16 |                 <li>Tomatoes</li>
17 |                 <li>Red bell pepper</li>
18 |                 <li>Milk</li>
19 |                 <li>Eggs</li>
20 |             </ol>
21 |         </li>
22 |         <li class="vitamin">Vitamin B 
23 |             <ol>
24 |                 <li>Peas</li>
25 |                 <li>Nuts</li>
26 |                 <li>Wholegrain breads</li>
27 |                 <li>Liver</li>
28 |             </ol>
29 |         </li>
30 |         <li class="vitamin">Vitamin C 
31 |             <ol>
32 |                 <li>Kiwifruit</li>
33 |                 <li>Oranges</li>
34 |                 <li>Papaya</li>
35 |                 <li>Strawberry</li>
36 | 
37 |             </ol>
38 |         </li>
39 |         <li class="vitamin">Vitamin D 
40 |             <ol>
41 |                 <li>Egg Yolks</li>
42 |                 <li>Tuna</li>
43 |                 <li>Milk</li>
44 |                 <li>Salmon</li>
45 |             </ol>
46 |         </li>
47 |     </ul>
48 | </body>
49 | </html>


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_1/Day_5_/style.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     background-image: linear-gradient(45deg,rgb(167, 245, 167),rgb(164, 226, 250));
 3 | }
 4 | h1{
 5 |     color: red;
 6 |     text-shadow: 0 0 20px blue,0 0 20px violet;
 7 |     
 8 | }
 9 | p{
10 |     font-size: 15px;
11 |     font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
12 |     font-style: italic;
13 |     text-shadow: 0 0 20px red;
14 | }
15 | .vitamin{
16 |     color:blue;
17 |     font-weight: bold;
18 |     margin-bottom: 20px;
19 | }
20 | ol{
21 |     color: red;
22 |     font-style: italic;
23 | }


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_1/Day_6/chris.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Debjit_Adhikari/Week_1/Day_6/chris.jpg


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_1/Day_6/christian_bale.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Debjit_Adhikari/Week_1/Day_6/christian_bale.jpg


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_1/Day_6/cillian.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Debjit_Adhikari/Week_1/Day_6/cillian.jpg


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_1/Day_6/images.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Debjit_Adhikari/Week_1/Day_6/images.jpg


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_1/Day_6/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Document</title>
 7 | </head>
 8 | <link rel="preconnect" href="https://fonts.googleapis.com">
 9 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10 | <link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">
11 | <link rel="stylesheet" href="./style.css">
12 | <body>
13 |     <h1>Famous celebrities</h1>
14 |     <p>Hello, welcome to my simple webpage.
15 |         Here I'm gonna show you some of my famous celebrities.
16 |     </p>
17 |     <div>
18 |         <img src="christian_bale.jpg">
19 |         <p id="name">Christian Bale</p>
20 |         <p>Christian Charles Philip Bale is an English actor. Known for his versatility and physical transformations for his roles, he has been a leading man in films of several genres. He has received various accolades, including an Academy Award and two Golden Globe Awards.</p>
21 |     </div>
22 |     <div>
23 |         <img src="walter.webp">
24 |         <p id="name">Bryan Cranston</p>
25 |         <p>Aka Mr. Walter White. He never stays in danger, cause he is the danger :)</p>
26 |  
27 |     </div>
28 |     <div>
29 |         <img src="robert.webp">
30 |         <p id="name">Robert Pattinson</p>
31 |         <p>Robert Douglas Thomas Pattinson is an English actor. Known for starring in both big-budget and independent films, Pattinson has ranked among the world's highest-paid actors. In 2010, Time magazine named him one of the 100 most influential people in the world, and he was featured in the Forbes Celebrity 100 list. </p>
32 |         
33 |     </div>
34 |     <div>
35 |         <img src="cillian.jpg">
36 |         <p id="name">Cillian Murphy</p>
37 |         <p>Cillian Murphy is an Irish actor. He made his professional debut in Enda Walsh's 1996 play Disco Pigs, a role he later reprised in the 2001 screen adaptation. </p>
38 | 
39 |     </div>
40 |     <div>
41 |         <img src="chris.jpg">
42 |         <p id="name">Chris Evans</p>
43 |         <p>Christopher Robert Evans is an American actor. He began his career with roles in television series such as Opposite Sex in 2000. </p>
44 |         
45 |     </div>
46 |      
47 | </body>
48 | </html>


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_1/Day_6/robert.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Debjit_Adhikari/Week_1/Day_6/robert.webp


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_1/Day_6/style.css:
--------------------------------------------------------------------------------
 1 | h1{
 2 |     color:rgb(31, 21, 6);
 3 |     font-family: "Play";
 4 |     font-weight: 400px;
 5 |     
 6 | }
 7 | body{
 8 |     background-image:linear-gradient(20deg, white,rgba(135, 207, 235, 0.628),rgba(255, 255, 0, 0.45),white);
 9 | }
10 | p{
11 |     color:rgb(7, 40, 63);
12 |     font-size: 20px;
13 |     font-family:Arial, Helvetica, sans-serif;
14 |     
15 | }
16 | img{
17 |     border: 1px solid black;
18 |     display: block;
19 |     margin-left: auto;
20 |     margin-right: auto;
21 |     height: 200px;
22 |     margin-top: 20px;
23 |     
24 | }
25 | div{
26 |     margin-bottom: 200px;
27 |     display: flex;
28 |     flex-direction: column;
29 |     border-top: 1px solid rgb(104, 64, 5);
30 |    
31 | }
32 | #name{
33 |     color: black;
34 |     font-weight: bold;
35 |     text-align: center;
36 | }
37 | body{
38 |     margin-right: 0px;
39 | }


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_1/Day_6/walter.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Debjit_Adhikari/Week_1/Day_6/walter.webp


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_1/Day_7/breakingBad.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Debjit_Adhikari/Week_1/Day_7/breakingBad.jpg


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_1/Day_7/got.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Debjit_Adhikari/Week_1/Day_7/got.jpg


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_1/Day_7/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Document</title>
 7 | </head>
 8 | <link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">
 9 | <link rel="stylesheet" href="style.css">
10 | <body>
11 |     <h1>My favourite TV series:</h1>
12 |     <p>Here are some of my favourites. Navigate through any of these for more information</p>
13 |     <ul style="margin-bottom: 200px">
14 |         <li><a href="#got">Game Of thrones</a></li>
15 |         <li><a href="#tvd">The Vampire Diaries</a></li>
16 |         <li><a href="#bb">Breaking Bad</a></li>
17 |         <li><a href="#lcdp">Money Heist</a></li>
18 |         <li><a href="#v">Vikings</a></li>
19 |     </ul>
20 |     <div id="about">
21 |         <ul>
22 |             <li id="got" style="margin-bottom: 500px"><h2>Game Of Thrones:-</h2>
23 |         
24 |                 <img src="got.jpg">
25 |                 <p>Nine noble families wage war against each other in order to gain control over the mythical land of Westeros. Meanwhile, a force is rising after millenniums and threatens the existence of living men.</p></li>
26 |                 
27 |               
28 |             <li id="tvd" style="margin-bottom: 500px"><h2>The Vampire Diaries:-</h2>
29 |                 <img src="tvd.jpg">
30 |                 <p>On her first day at high school, Elena meets Stefan and immediately feels a connection with him. However, what she does not know is that Stefan and his brother, Damon, are in fact vampires.</p></li>
31 |             <li id="bb" style="margin-bottom: 500px"><h2>Breaking Bad:-</h2>
32 |                 <img src="breakingBad.jpg">
33 |                 <p>Walter White, a chemistry teacher, discovers that he has cancer and decides to get into the meth-making business to repay his medical debts. His priorities begin to change when he partners with Jesse.</p></li>
34 |             <li id="lcdp" style="margin-bottom: 500px"><h2>Money Heist:-</h2>
35 |                 <img src="lcdp.jpg">
36 |                 <p>When the national mint and a touring school group are held hostage by robbers, police believe that the thieves have no way out. Little do they know that the thieves have a bigger plan in store.</p></li>
37 |             <li id="v" style="margin-bottom: 500px"><h2>Vikings:-</h2>
38 |                 <img src="viking.jpg">
39 |                 <p>As Ragnar Lodbrok, a Norse farmer, carries out triumphant raids into English territory with the help of his fellow warriors, he ends up holding sway over the Vikings and becoming a Scandinavian king.</p></li>
40 |             </ul>
41 |     </div>
42 |     <p>If you've already watched these series then I'm happy that we have same taste in movies & series :)<br> If you want to get updates from me, then fill the forms. I'll see you there ;-)</p>
43 |     <form>
44 |         <label>Name:</label><br>
45 |         <input type="text" id="name" placeholder="Enter your first name"><br>
46 |         <input type="text" id="name" placeholder="Enter your last name"><br>
47 |         <label>Email:</label><br>
48 |         <input type="text" id="name" placeholder="Enter your Email"><br>
49 | 
50 |         <button>Submit</button>
51 |     
52 |     </form>
53 |     
54 | </body>
55 | </html>


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_1/Day_7/lcdp.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Debjit_Adhikari/Week_1/Day_7/lcdp.jpg


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_1/Day_7/style.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     background-image: linear-gradient(45deg,grey,rgba(240, 240, 121, 0.637),pink,darkgray,pink,rgba(230, 230, 110, 0.763));
 3 | }
 4 | h1{
 5 |     font-weight: bold;
 6 |     
 7 | }
 8 | img{
 9 |     height: 300px;
10 |     width: 250px;
11 |     margin-left: 25%;
12 |     border: 2px solid goldenrod;
13 | }
14 | h2{
15 |     font-weight: 200px;
16 |     color: brown;
17 |     font-family: "Playfair Display";
18 | }
19 | p{
20 |     font-size: 15px;
21 |     font-family: sans-serif;
22 |     font-style:italic;
23 | }
24 | a{
25 |     font-size: 25px;
26 |     text-decoration: none;
27 | }
28 | form{
29 |     margin-left: 20px;
30 |     
31 | }
32 | #name{
33 |     margin-bottom:5px;
34 | 
35 | }
36 | label{
37 |     font-size: 20px;
38 | 
39 | }
40 | button{
41 |     font-size: 15px;
42 |     margin-top: 20px;
43 |     margin-bottom: 20px;
44 |     border-radius: 10px;
45 |     height: 30px;
46 |     width: 70px;
47 |     border:1px solid;
48 | }
49 | 
50 | a:hover{
51 |     color:white;
52 |     font-size: 23px;
53 |     background-color:grey;
54 |     text-decoration: none;
55 | }
56 | button:hover{
57 |     background-color:gray;
58 |     height:25px;
59 |     width: 67px;
60 |     color:aliceblue;
61 |     border: 1px solid black
62 | }
63 | 


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_1/Day_7/tvd.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Debjit_Adhikari/Week_1/Day_7/tvd.jpg


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_1/Day_7/viking.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Debjit_Adhikari/Week_1/Day_7/viking.jpg


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_2/Day_1/images.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Debjit_Adhikari/Week_2/Day_1/images.jpg


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_2/Day_1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Document</title>
 7 | </head>
 8 | <body>
 9 |     <h1>My webpage</h1>
10 |     <p>Hello, everyone welcome to my simple webpage.
11 |     </p>
12 |     <img src="./images.jpg">
13 |     <p>Here is Mr. Walter White.</p>
14 |     <script src="script.js"></script>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_2/Day_1/script.js:
--------------------------------------------------------------------------------
1 | alert("Allright, Let's get started");
2 | let name1=prompt("What's your name?");
3 | let age=prompt("How old are you?");
4 | let dob=2023-Number(age);
5 | console.log(`Hey there ${name1} you are ${age} years old, that means you born in ${dob}`);


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_2/Day_2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Document</title>
 7 | </head>
 8 | <link rel="stylesheet" href="style.css">
 9 | <body>
10 |     <h1>Area of a rectangle</h1>
11 |     <h3>Enter the details:</h3>
12 |     <div class="length dimension" >
13 |         <p>Enter the length</p>
14 |         <input type="number" placeholder="In cm" id="length">
15 |     </div>
16 |     <div class="width dimension">
17 |         <p>Enter the width</p>
18 |         <input type="number" placeholder="In cm" id="width">
19 |     </div>
20 |     <button>Check</button>
21 |     <div class="result">
22 |         <h3>Result: <span>0</span>cm</h3>  
23 |     </div>
24 |     <script src="script.js"></script>
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_2/Day_2/script.js:
--------------------------------------------------------------------------------
1 | document.querySelector("button").addEventListener("click",pressed);
2 | function pressed(){
3 |     let ans=document.querySelector("#length").value*document.querySelector("#width").value;
4 |     document.querySelector("span").textContent=ans;
5 | }


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_2/Day_2/style.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     background-color:blanchedalmond;
 3 | }
 4 | input{
 5 |     margin-bottom: 5px;
 6 | }
 7 | .dimension p{
 8 |     margin-bottom: 0px;
 9 | }
10 | 
11 | button:hover{
12 |     background-color: rgba(222, 184, 135, 0.589);
13 |     
14 |     border: 1px solid;
15 | }


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_2/Day_3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Document</title>
 7 | </head>
 8 | <link rel="stylesheet" href="style.css">
 9 | <body>
10 |     <h3>Click the button to get alert👇👇</h3>
11 |     <button>Click me</button>
12 |     <script src="script.js"></script>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_2/Day_3/script.js:
--------------------------------------------------------------------------------
1 | document.querySelector("button").addEventListener("click",function(){
2 |     alert("You clicked the button");
3 | })


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_2/Day_3/style.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     background-color:rgba(178, 237, 61, 0.539)
 3 | }
 4 | button{
 5 |     margin-top: 10px;
 6 |     margin-left: 220px;
 7 |     border-radius: 20px;
 8 |     border:1px solid;
 9 |     height: 25px;
10 |     box-shadow: 4px 3px 5px rgb(255, 132, 0) ;
11 | }
12 | button:hover{
13 |     height: 24px;
14 |     background-color: rgb(45, 45, 25);
15 |     color: whitesmoke;
16 | }


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_2/Day_4/cat.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Debjit_Adhikari/Week_2/Day_4/cat.jpg


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_2/Day_4/default.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Debjit_Adhikari/Week_2/Day_4/default.jpg


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_2/Day_4/dog.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Debjit_Adhikari/Week_2/Day_4/dog.jpg


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_2/Day_4/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Document</title>
 7 | </head>
 8 | <link rel="stylesheet" href="style.css">
 9 | <body>
10 |     <h1>Paragraph of animals</h1>
11 |     <p>Click on any of these button </p>
12 |     <div class="btn">
13 |         <button id="cat">Cat</button>
14 |         <button id="dog">Dog</button>
15 |     </div>
16 |     <div class="details">
17 |         <div id="image">
18 |             <img src="default.jpg">
19 |             <p>Default</p>
20 |         </div>
21 |         <p>Nothing to show here. You haven't clicked any buttons :(  cause if you have then this text wouldn't been shown here.</p>
22 |     </div>
23 |     <script src="script.js"></script>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_2/Day_4/script.js:
--------------------------------------------------------------------------------
 1 | let c=0;
 2 | let d=0;
 3 | let img=document.querySelector("img");
 4 | let imgName=document.querySelector("#image > p");
 5 | let imgAbout=document.querySelector(".details > p");
 6 | 
 7 | 
 8 | document.querySelector("#cat").addEventListener("click",function(){
 9 |    
10 |         setAllDetails("cat.jpg","Cat",
11 |         "The cat (Felis catus), commonly referred to as the domestic cat or house cat, is the only domesticated species in the family Felidae. Recent advances in archaeology and genetics have shown that the domestication of the cat occurred in the Near East around 7500 BC. It is commonly kept as a house pet and farm cat, but also ranges freely as a feral cat avoiding human contact."
12 |         );
13 |         
14 |     
15 | });
16 | 
17 | document.querySelector("#dog").addEventListener("click",function(){
18 | 
19 |         setAllDetails("dog.jpg","Dog",
20 |         "Dog, (Canis lupus familiaris), domestic mammal of the family Canidae (order Carnivora). It is a subspecies of the gray wolf (Canis lupus) and is related to foxes and jackals. The dog is one of the two most ubiquitous and most popular domestic animals in the world (the cat is the other). For more than 12,000 years it has lived with humans as a hunting companion, protector, object of scorn or adoration, and friend."
21 |         );
22 |     
23 | });
24 | 
25 | function setAllDetails(imgContent,imgTitle,imgDetails){
26 |     img.src=imgContent;
27 |     imgName.textContent=imgTitle;
28 |     imgAbout.textContent=imgDetails;
29 | }


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_2/Day_4/style.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     background-color: rgb(224, 123, 157);
 3 | }
 4 | h1{
 5 |     color: rgb(240, 233, 225);
 6 |     font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 7 |     font-style: italic;
 8 | }
 9 | img{
10 |     width: 250px;
11 |     height: 200px;
12 | }
13 | p{
14 |     color: white;
15 |     font-style: italic;
16 |     
17 | }
18 | .details{
19 |     margin-top: 60px;
20 |     display: flex;
21 |     flex-direction: column;
22 |     justify-content: center;
23 |     align-items: center;
24 | }
25 | #image>p{
26 |     text-align: center;
27 |     font-style: normal;
28 | }
29 | button{
30 |     margin-right: 30px;
31 |     border-radius: 20px;
32 |     height: 30px;
33 |     width: 60px;
34 |     color:white;
35 |     background-color: rgb(0, 140, 255);
36 |     border:1px solid rgb(0, 187, 255);
37 |     font-weight: bold;
38 | }
39 | 
40 | button:hover{
41 |     width: 58px;
42 |     height: 29px;
43 |     background-color: white;
44 |     color: rgb(22, 150, 230);
45 |     border: 0px;
46 | }


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_2/Day_5/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Document</title>
 7 | </head>
 8 | <link rel="stylesheet" href="style.css">
 9 | <body>
10 |     <h1>Flowers</h1>
11 |     <p>A flower, also known as a bloom or blossom, is the reproductive structure found in flowering plants (plants of the division Angiospermae). Flowers consist of a combination of vegetative organs – sepals that enclose and protect the developing flower, petals that attract pollinators, and reproductive organs that produce gametophytes, which in flowering plants produce gametes. The male gametophytes, which produce sperm, are enclosed within pollen grains produced in the anthers. The female gametophytes are contained within the ovules produced in the carpels.</p>
12 |     <div class="typeFlower">
13 |         <div>
14 |             <h3>Rose</h3>
15 |             <p>Like the flower itself, the history of the rose is very colorful. Roses have been naturally growing for over 35 million years! However, they were not known to be cultivated until about 5,000 years ago. Their usage began not just as a decorative touch to one’s home, but they were also used for medicinal purposes and to make perfumes, and their petals were even used as confetti for festive occasions. Getting your roses into water quickly is the first step in caring for them. Fill a vase three-fourths full of fresh, cool tap water. The roses will absorb the water, soaking up the nutrients that will travel up to the bloom and create a lively flower. Check the water level in your rose’s vase every day and add more water as needed. Shop these classic flowers for Valentine’s Day!</p>
16 |         </div>
17 |         <div>
18 |             <h3>Sunflowers</h3>
19 |             <p>Sunflowers are one of the most popular flower types and are best known for their dazzling yellow color and large size. They generally symbolize adoration, loyalty, and longevity in the language of flowers. Native Americans view sunflowers as a symbol of harvest and bounty since the flower provides seeds and pigments, in addition to being visually beautiful. Sunflowers need direct sunlight for six to eight hours per day and require hot conditions to flower well. Sunflowers also have long roots that require plenty of room to spread out, so soil should be well dug and not too dense for growth. Avoid over-fertilization or risk your stems breaking in the fall. In addition to being great in a garden, sunflowers make great gifts and look wonderful in bouquets.</p>
20 |         </div>
21 |         <div>
22 |             <h3>Hydrangea</h3>
23 |             <p>You know summer is here when big, showy hydrangea bushes begin gracing gardens across the country. This perennial, a native of East Asia and the Americas, comprises more than 75 species and 600 cultivated varieties, of which mophead, lacecap, oakleaf, and peegee are the most common. Some hydrangea flowers can turn a pretty pink or blue depending on the acidity or alkalinity of the soil, while others will remain white. Mopheads, lacecaps, and oakleafs bloom on the previous year’s wood and can be pruned in the summer after flowering; peegees bloom on this year’s wood and can be pruned in the late winter, before the new spring growth.</p>
24 |         </div>
25 |         <div>
26 |             <h3>Lavander</h3>
27 |             <p>Spanish, French, or English lavender are sweet herb garden favorites that provide soothing fragrances, flavorings, and beauty all together in little floral packages. More than 40 species are native to areas surrounding the Mediterranean and are semi-evergreen perennials or sub-shrubs with gray-green, hairy, linear leaves and purple, violet, lavender, or pinkish-white flowers. Tiny glands on the flowers, leaves, and stems of the plant produce the scented oil that is used in perfumes, bath preparations, lavender water, and in aromatherapy to relieve stress and anxiety and bring about sleep. Lavender is also prized as a flavoring in cooking, as an ingredient in teas, and for a monofloral honey. </p>
28 |         </div>
29 |     </div>
30 | </body>
31 | </html>


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_2/Day_5/style.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     background-color: rgb(232, 158, 105);
 3 | }
 4 | .typeFlower div{
 5 |     width: 500px;
 6 |     display: inline-block;
 7 |     margin-right: 40px;
 8 | }
 9 | @media(max-width:550px){
10 |     .typeFlower div{
11 |         width:150px;
12 |    }
13 | }
14 | @media(min-width:551px) and (max-width:749px){
15 |     .typeFlower div{
16 |         width: 200px;
17 | 
18 |     }
19 | }
20 | @media(min-width:750px) and (max-width:1100px){
21 |     .typeFlower div{
22 |         width: 300px;
23 |     }
24 | }
25 | 
26 | @media(min-width:1101px) and (max-width: 1300px){
27 |     .typeFlower div{
28 |         width:700px;
29 |     }
30 | }


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_2/Day_6/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Document</title>
 7 | </head>
 8 | <body>
 9 | 
10 | <form>
11 |     <label>Name:</label><br>
12 |     <input type="text" id ="name" placeholder="Enter your name"><br>
13 |     
14 |     <label>Email:</label><br>
15 |     <input type="text" id="email" placeholder="Enter your email address"><br>
16 |  
17 |     <button>Submit</button>
18 | 
19 | </form>
20 | <script src="script.js"></script>
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_2/Day_6/script.js:
--------------------------------------------------------------------------------
 1 | let emailLast="@gmail.com";
 2 | 
 3 | document.querySelector("button").addEventListener("click",function(){
 4 |     let name1=document.querySelector("#name").value;
 5 |     let email=document.querySelector("#email").value;
 6 |     if(name1===""){
 7 |         alert("Name is empty.");
 8 |     }
 9 |     let emailSlice=email.slice(email.length-10,email.length+2);
10 |     if(emailSlice!=emailLast){
11 |         alert("Email not valid");
12 |     }
13 | });
14 | 


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_2/Day_7/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Guess the number</title>
 7 |     <link href="style.css" rel="stylesheet" />
 8 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
 9 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10 |     <link
11 |       href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
12 |       rel="stylesheet"
13 |     />
14 |   </head>
15 |   <body>
16 |     <div class="heading">
17 |       <h1>Guess the number</h1>
18 |       <p>(between 1-20)</p>
19 |       <div class="box">?</div>
20 |     </div>
21 |     <div class="main">
22 |       <div class="left">
23 |         <input type="number" placeholder="Type here"/>
24 |         <button class="check">Check</button>
25 |       </div>
26 |       <div class="right">
27 |         <h3>Start guessing...</h3>
28 |         <h4>💯Score: <span class="score">20</span></h3>
29 |         <h4>🏆Highscore: <span class="highscore">0</span></h3>
30 |       </div>
31 |     </div>
32 |     <div class="foot">
33 |         <button class="restart">New game</button>
34 |     </div>
35 |     <script src="script.js"></script>
36 |   </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_2/Day_7/script.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | let computer = getRandom();
 3 | let score = 20;
 4 | let highscore = 0;
 5 | let end = false;
 6 | let value;
 7 | 
 8 | document.querySelector(".restart").addEventListener("click",function(){
 9 |     computer=getRandom();
10 |     score=20;
11 |     document.querySelector("body").classList.remove("correct");
12 |     document.querySelector(".box").textContent="?";
13 |     document.querySelector("h3").textContent="Start guessing...";
14 |     document.querySelector(".score").textContent=""+score;
15 |     document.querySelector("input").value="";
16 |     document.querySelector(".check").addEventListener("click",theListner);
17 | });
18 | 
19 | 
20 | document.querySelector(".check").addEventListener("click",theListner);
21 | 
22 | 
23 | function theListner( ) {
24 |     value = Number(document.querySelector("input").value); 
25 |     check();
26 |     document.querySelector(".score").textContent=""+score;   
27 | }
28 | function getRandom() {
29 |     return Math.floor(Math.random() * 20) + 1;
30 | }
31 | 
32 | function check() {
33 |     if (!value) {
34 |         document.querySelector("h3").textContent = "No number";
35 |     } else if (value < computer) {
36 |         document.querySelector("h3").textContent = "Too low📉";
37 |         score--;
38 |     } else if (value > computer) {
39 |         document.querySelector("h3").textContent = "Too high📈";
40 |         score--;
41 |     } else {
42 |         document.querySelector("h3").textContent = "Correct!!!☑️";
43 |         document.querySelector(".box").textContent=""+computer;
44 |         document.querySelector(".check").removeEventListener("click",theListner);
45 |         setHigh();
46 |         document.querySelector("body").classList.add("correct");
47 |     }
48 |     if(score===0){
49 |         document.querySelector("h3").textContent="You lost the game ❌";
50 |         document.querySelector(".check").removeEventListener("click",theListner);
51 | 
52 |     }
53 | }
54 | 
55 | function setHigh(){
56 |     if(highscore<score){
57 |         highscore=score;
58 |         document.querySelector(".highscore").textContent=""+highscore;
59 |     }
60 | }


--------------------------------------------------------------------------------
/Debjit_Adhikari/Week_2/Day_7/style.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
  2 | body{
  3 |     background-color: rgba(7, 57, 61, 0.196);
  4 | }
  5 | h1{
  6 |     font-family: "Press Start 2P";
  7 |     margin-bottom: 0;
  8 |     text-align: center;
  9 | }
 10 | .heading{
 11 |     display: flex;
 12 |     flex-direction: column;
 13 |     justify-content: center;
 14 |     align-items: center;
 15 |     height: 300px;
 16 | }
 17 | .box{
 18 |     background-color: azure;
 19 |     height: 90px;
 20 |     font-size: 30px;
 21 |     font-weight: bold;
 22 |     width: 50vh;
 23 |     border:2px solid black;
 24 |     display: flex;
 25 |     justify-content: center;
 26 |     align-items: center;
 27 | }
 28 | .heading p{
 29 |     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
 30 |     font-weight: bold;
 31 | }
 32 | .main{
 33 |     display: flex;
 34 |     justify-content: space-between;
 35 |     gap: 60px;
 36 | }
 37 | .left{
 38 |     display:flex;
 39 |     flex-direction: column;
 40 |     width: 100px;
 41 |     margin-left: 25%;
 42 |     justify-content:center;
 43 |     align-items: center;
 44 | 
 45 | }
 46 | input{
 47 |     height: 50px;
 48 |     margin-bottom: 10px;
 49 |     border: 2px solid;
 50 |     border-radius: 5px;
 51 |     width: 25vh;
 52 |     font-size: 20px;
 53 |     text-align: center;
 54 | }
 55 | .left .check{
 56 |     height: 30px;
 57 |     width: 90%;
 58 |     border: 1px solid;
 59 |     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
 60 |     border-radius: 5px;
 61 | }
 62 | .right{
 63 |     display: flex;
 64 |     flex-direction: column;
 65 |     margin-right: 24%;
 66 |     margin-top: 0px;
 67 |     justify-content: center;
 68 |     align-items: center;
 69 |     gap: 0px;
 70 |     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
 71 | }
 72 | h3{
 73 |     font-size: 25px;
 74 | }
 75 | h4{
 76 |     margin-bottom:10px;
 77 |     margin-right: 0p;
 78 | }
 79 | button:hover{
 80 |     background-color:rgba(128, 128, 128, 0.256);
 81 | }
 82 | .foot{
 83 |     display: flex;
 84 |     justify-content: center;
 85 |     align-items: center;
 86 |     margin-top: 40px;
 87 |     
 88 | }
 89 | .restart{
 90 |     border: 2px solid;
 91 |     width: 150px;
 92 |     height: 50px;
 93 |     font-family: "Press Start 2P";    
 94 |     font-size: 20px;
 95 |     border-radius: 4px; 
 96 | }
 97 | 
 98 | .correct{
 99 |     background-color: rgba(6, 174, 6, 0.82);
100 | }
101 | 
102 | @media (max-width:580px){
103 |     .left{
104 |         margin-left: 10%;
105 |     }
106 |     .right{
107 |         margin-right: 10px;
108 |     }
109 |     .box{
110 |         height: 100px;
111 |         width: 200px;
112 |     }
113 |     input{
114 |         width: 150px;
115 |         height: 50px;
116 |     }
117 |     .main{
118 |         gap: 70px;
119 |     }
120 | }


--------------------------------------------------------------------------------
/Ekram zafar/week1:
--------------------------------------------------------------------------------
 1 | # week 1
 2 | ## Day 1 (HTML Basics)
 3 | <html>
 4 | <head>
 5 |     <title>my simple HTML page</title>
 6 | </head>
 7 | <body>
 8 |     <h1>welcome to my simple HTML page</h1>
 9 |     <p>This is a paragraph of text that explains what this page is about. I am using HTML tags to create different elements on
10 |  the page, such as headings, paragraphs, and
11 |  images.</p>
12 |     <img src="my_image.jpg" alt="An image of a flower" width="300" height="200">
13 | </body>
14 | 
15 | </html>
16 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 DevDotCom
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/Piyush/Week_1/Day_1/q1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Simple HTML Page of Piyush</title>
 7 | </head>
 8 | <body>
 9 | 
10 |     <!-- Heading -->
11 |     <h1>Welcome to first HTML Page of Piyush </h1>
12 | 
13 |     <!-- Paragraph of Text -->
14 |     <p>This is a simple HTML page with a heading, a paragraph of text, and an image I hope you like it.</p>
15 | 
16 |     <!-- Image -->
17 |     <img src="https://images.app.goo.gl/Sengwy4zJXLzoAbb9" alt="lol lol ">
18 | 
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Piyush/Week_1/Day_2/q1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Favorite Books List of Mine</title>
 7 |     <style>
 8 |         body {
 9 |             font-family: 'Arial', sans-serif;
10 |             margin: 40px;
11 |         }
12 | 
13 |         h1 {
14 |             color: #df0c0c;
15 |         }
16 | 
17 |         ol {
18 |             list-style-type: decimal;
19 |             margin-left: 20px;
20 |             color: #000000;
21 |         }
22 | 
23 |         li {
24 |             margin: 10px 0;
25 |         }
26 |     </style>
27 | </head>
28 | <body>
29 | 
30 |     <h1>My Top 5 Favorite Movies</h1>
31 | 
32 |     <ol>
33 |         <li>The Fast n Furious</li>
34 |         <li>Peaky Blinders</li>
35 |         <li>The Social Network</li>
36 |         <li>Insidious</li>
37 |         <li>DDLJ</li>
38 |     </ol>
39 | 
40 | </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/Piyush/Week_1/Day_2/q2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>User Information Form</title>
 7 | </head>
 8 | <body>
 9 | 
10 |     <h2>My Info</h2>
11 | 
12 |     <form>
13 |         <!-- Name Field -->
14 |         <label for="name">USER NAME:</label>
15 |         <input type="text" id="name" name="name" required>
16 | 
17 |         <br>
18 | 
19 |         <!-- Email Address Field -->
20 |         <label for="email">USER EMAIL(along with @):</label>
21 |         <input type="email" id="email" name="email" required>
22 | 
23 |         <br>
24 | 
25 |         <!-- Submit Button -->
26 |         <button type="submit">SUBMIT</button>
27 |     </form>
28 | 
29 | </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/Piyush/Week_1/Day_3/q1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Product List</title>
 7 |     <style>
 8 |         table {
 9 |             width: 100%;
10 |             border-collapse: collapse;
11 |             margin-top: 20px;
12 |         }
13 | 
14 |         th, td {
15 |             border: 1px solid #e20a0a;
16 |             text-align: left;
17 |             padding: 8px;
18 |         }
19 | 
20 |         th {
21 |             background-color: #f2f2f279;
22 |         }
23 |     </style>
24 | </head>
25 | <body>
26 | 
27 | <h2>LIST OF PRODUCTS</h2>
28 | 
29 | <table>
30 |     <tr>
31 |         <th>Product Name</th>
32 |         <th>Price</th>
33 |         <th>Description</th>
34 |     </tr>
35 |     <tr>
36 |         <td>JOLO CHIPS</td>
37 |         <td>$10</td>
38 |         <td>U CANT BEAR IT TOO SPICY AND HOT TO HANDEL</td>
39 |     </tr>
40 |     <tr>
41 |         <td>ICE CREAM</td>
42 |         <td>$2</td>
43 |         <td>CHOCOLATE FLAVOUR WITH GOOD TASTE</td>
44 |     </tr>
45 |     <tr>
46 |         <td>CHOCOLATE</td>
47 |         <td>$2.1</td>
48 |         <td>RICH IN FLAVOUR.</td>
49 |     </tr>
50 |     <!-- Add more rows as needed -->
51 | </table>
52 | 
53 | </body>
54 | </html>
55 | 


--------------------------------------------------------------------------------
/Piyush/Week_1/Day_4/q1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <style>
 7 |         /* Basic styling for the navigation menu */
 8 |         ul {
 9 |             list-style-type: none;
10 |             margin: 0;
11 |             padding: 0;
12 |             background-color: #333;
13 |             overflow: hidden;
14 |         }
15 | 
16 |         li {
17 |             float: left;
18 |         }
19 | 
20 |         li a {
21 |             display: block;
22 |             color: white;
23 |             text-align: center;
24 |             padding: 14px 16px;
25 |             text-decoration: none;
26 |         }
27 | 
28 |         li a:hover {
29 |             background-color: #555;
30 |         }
31 | 
32 |         /* Sub-menu styling */
33 |         ul ul {
34 |             display: none;
35 |             position: absolute;
36 |             background-color: #444;
37 |             border: 1px solid #555;
38 |             z-index: 1;
39 |         }
40 | 
41 |         ul li:hover > ul {
42 |             display: inherit;
43 |         }
44 | 
45 |         ul ul li {
46 |             float: none;
47 |             border-top: 1px solid #555;
48 |         }
49 | 
50 |         ul ul li a {
51 |             padding: 12px 16px;
52 |             color: white;
53 |         }
54 | 
55 |         ul ul li a:hover {
56 |             background-color: #555;
57 |         }
58 |     </style>
59 | </head>
60 | <body>
61 | 


--------------------------------------------------------------------------------
/Questions/Week1.md:
--------------------------------------------------------------------------------
 1 | # Week 1
 2 | ## Day 1 (HTML Basics):
 3 | - Create a simple HTML page with a heading, a paragraph of text, and an image. Include appropriate HTML tags.
 4 | 
 5 | ## Day 2 (HTML Lists and Forms):
 6 | - Build a list of your top 5 favorite books or movies using an ordered list.
 7 | - Create an HTML form that includes fields for a user's name, email address, and a submit button.
 8 | 
 9 | ## Day 3 (HTML Tables and Images):
10 | - Construct a basic HTML table to display a list of products with columns for product name, price, and description.
11 | - Insert an image into the table you created and set the table's border attribute to control cell spacing.
12 | 
13 | ## Day 4 (HTML Links and Navigation):
14 | - Develop a navigation menu for a website using an unordered list.
15 | - Create links within the navigation menu that link to different sections of the same page.
16 | 
17 | ## Day 5 (CSS Basics and Styles):
18 | - Style the HTML page from Day 1 by changing the background color, font size, and text color using CSS.
19 | - Apply different font styles to the headings, paragraphs, and list items on your page.
20 | 
21 | ## Day 6 (CSS Layout and Positioning):
22 | - Use CSS to center-align the image within its container.
23 | - Create a CSS class that adds a border around an element and apply it to your form fields.
24 | 
25 | ## Day 7 (CSS Effects and Hover States):
26 | - Build a button that changes color when you hover over it using CSS.
27 | - Add hover effects to the navigation menu links from Day 4. Change the link color or background color on hover.
28 | 


--------------------------------------------------------------------------------
/Questions/Week2.md:
--------------------------------------------------------------------------------
 1 | # Week 2
 2 | ## Day 8 (JavaScript Basics):
 3 | - Introduce a JavaScript script in your HTML page from Day 1. Use `console.log()` to output a message.
 4 | - Create variables for the name and age. Use these variables to display a personalized greeting.
 5 | 
 6 | ## Day 9 (JavaScript Functions):
 7 | - Write a JavaScript function that calculates the area of a rectangle (length * width). Call this function with different values and display the results.
 8 | 
 9 | ## Day 10 (JavaScript Events):
10 | - Add a button to your HTML form from Day 2. Use JavaScript to show an alert when the button is clicked.
11 | 
12 | ## Day 11 (DOM Manipulation):
13 | - Change the content of an HTML element using JavaScript. For example, update the text of a paragraph or the source of an image dynamically.
14 | 
15 | ## Day 12 (Responsive Design):
16 | - Apply media queries in your CSS to make your page responsive. Test how it looks on different screen sizes.
17 | 
18 | ## Day 13 (JavaScript Validation):
19 | - Enhance your form from Day 2 by adding JavaScript validation. Ensure that the name is not empty, and the email follows a valid format.
20 | 
21 | ## Day 14 (Project Day):
22 | - Challenge participants to create a small project that incorporates HTML, CSS, and JavaScript. It could be a simple interactive webpage, a form with dynamic behavior, or a basic game.
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # WebCraftersCorner
  2 | 
  3 | Welcome to the WebCraftersCorner repository by DevDotCom! This repository is designed to help you enhance your web development skills through a structured set of practice questions. Whether you're a beginner looking to build a strong foundation or an experienced developer aiming to sharpen your web development skills, this repository is for you.
  4 | 
  5 | ## Introduction
  6 | 
  7 | Web development is a dynamic field with a diverse set of technologies and concepts. To become proficient in web development, it's essential to practice and apply your knowledge in HTML, CSS, and JavaScript.
  8 | 
  9 | The Web Development Practice Questions repository offers a comprehensive set of practice questions divided into weeks, with each week containing daily exercises. This structured approach allows you to progress gradually and steadily improve your web development skills.
 10 | 
 11 | ## How to Use
 12 | 
 13 | You can use these practice questions to:
 14 | 
 15 | - Reinforce your understanding of HTML, CSS, and JavaScript fundamentals.
 16 | - Explore more advanced web development concepts and problem-solving.
 17 | - Develop practical coding skills through real-world examples.
 18 | 
 19 | Simply follow the weekly structure, starting with Week 1, and work through the questions day by day. Each question comes with a suggested list of concepts you should be familiar with to tackle the task successfully.
 20 | 
 21 | If you're just getting started with web development, begin with Week 1 and gradually progress through the weeks.
 22 | 
 23 | ## How to Contribute
 24 | 
 25 | We welcome contributions to improve this repository and make it a valuable resource for web development learners. Here's how you can contribute:
 26 | 
 27 | 1. **Fork the Repository:** Click the "Fork" button in the upper right corner of the repository to create your copy.
 28 | 
 29 | 2. **Create a New Branch:** After forking, create a new branch for your contributions. We recommend naming the branch after your name or the feature you're working on.
 30 | 
 31 |    ```bash
 32 |    git checkout -b your-branch-name
 33 |    ```
 34 | 3. **Add a Folder with Your Name:** After you create a branch, refer to the [Repository File Structure](#repository-file-structure) and add your solutions accordingly.
 35 |    
 36 |    ```bash
 37 |    mkdir your-name
 38 |    ```
 39 | 4. **Enter the Directory:** Make sure you are in the correct directory while you write your code.
 40 |    ```bash
 41 |    cd your-name
 42 |    cd current-week
 43 |    ```   
 44 | 
 45 | 5. **Add Your Code:** Place your HTML, CSS, and JavaScript files in your respective day's folder within the "Week_X" directory that you created within your folder name.
 46 | 
 47 |    ```bash
 48 |    git add .
 49 |    git commit -m "Add solutions for Week X, Day Y"
 50 |    ```
 51 | 
 52 | 6. **Push Your Code:** Commit your changes and push the branch to your forked repository.
 53 | 
 54 |    ```bash
 55 |    git push origin your-branch-name
 56 |    ```
 57 | 
 58 | 7. **Create a Pull Request (PR):** Navigate to your forked repository on GitHub and click the "New Pull Request" button. Make sure to set the base branch to the original repository's branch.
 59 | 
 60 | 8. **Describe Your Changes:** In the PR description, explain the purpose of your changes, mention the questions you've added or modified, and any other relevant information.
 61 | 
 62 | 9.  **Submit the PR:** Submit the pull request, and it will be reviewed by the repository maintainers.
 63 | 
 64 | 
 65 | ## Practice Problems
 66 | 
 67 | The practice problems are available in `Questions` folder.
 68 | 
 69 | [Click here](Questions/Week1.md) for the Questions of Week1.<BR>
 70 | [Click here](Questions/Week2.md) for the Questions of Week2.
 71 | 
 72 | The folder follows the following structure:
 73 | 
 74 | ```
 75 | questions/
 76 | │
 77 | ├── Week1.md
 78 | ├── Week2.md
 79 | .
 80 | .
 81 | ```
 82 | 
 83 | 
 84 | ## Repository File Structure
 85 | 
 86 | To keep your work organized, we recommend following this file structure when submitting your solutions:
 87 | 
 88 | ```
 89 | Your_Name/
 90 | ├── Week_1/
 91 | │   ├── Day_1/
 92 | │   │   ├── q1.html
 93 | │   │   ├── q2.css
 94 | │   │   └── q3.js
 95 | │   │
 96 | │   ├── Day_2/
 97 | │   │   ├── q1.html
 98 | │   │   ├── q2.css
 99 | │   │   └── q3.js
100 | │   │
101 | │   └── ...
102 | │
103 | ├── Week_2/
104 | │   ├── Day_1/
105 | │   │   ├── q1.html
106 | │   │   ├── q2.css
107 | │   │   └── q3.js
108 | │   │
109 | │   ├── Day_2/
110 | │   │   ├── q1.html
111 | │   │   ├── q2.css
112 | │   │   └── q3.js
113 | │   │
114 | │   └── ...
115 | │
116 | └── ...
117 | 
118 | ```
119 | 
120 | 
121 | 


--------------------------------------------------------------------------------
/Rupam/Week1/Day1/qs1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>2023 CRICKET WORLD CUP</title>
 7 | </head>
 8 | <body>
 9 |     <h1>2023 CRICKET WORLD CUP</h1>
10 |     <p>The 2023 ICC Men's Cricket World Cup is the 13th edition of the Cricket World Cup, a quadrennial One Day International (ODI) cricket tournament contested by men's national teams and organised by the International Cricket Council (ICC). The tournament is being hosted by India. It started on 5 October and is scheduled to conclude on 19 November 2023.Ten national teams are participating. All had to qualify for the tournament through the 2023 Cricket World Cup qualification process. India qualified as hosts; Afghanistan, Australia, Bangladesh, England, New Zealand, Pakistan and South Africa qualified via the ICC Cricket World Cup Super League, with the Netherlands and Sri Lanka securing the final two places via the qualifier tournament in Zimbabwe during June and July 2023. The West Indies missed out on qualification for the first time in their history. All teams were asked to finalise their 15-player squads prior to 28 September, with any replacements after this date requiring approval from the ICC. A selection panel chose 16 officials to umpire and referee at the matches. The host broadcaster is Star Sports, with various affiliates offering coverage around the world.
11 | 
12 |         It is the first men's Cricket World Cup which India is hosting solely. The tournament is taking place in ten different stadiums, in ten cities across the country. The first semi-final between India and New Zealand will be held at Wankhede Stadium on 15 November, while the second semi-final between South Africa and Australia will be held at Eden Gardens on 16 November. The final will take place at Narendra Modi Stadium on 19 November, with the winning team receiving US$4,000,000 in prize money.
13 |         
14 |         The top eight placed teams in the tournament's final points table qualified for the 2025 ICC Champions Trophy, the next ICC ODI tournament.</p>
15 |         <img src="https://resources.pulse.icc-cricket.com/ICC/photo/2023/06/27/58598b3c-97a1-4e39-a830-ed4352609cc7/CWC23-Fixtures-announcement-16x9-v2.jpeg" height="800px" alt="All Team Captain Picture"> 
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/Rupam/Week1/Day2/q1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=, initial-scale=1.0">
 6 |     <title>Favorite Movies List</title>
 7 | </head>
 8 | <body>
 9 |     <ol>
10 |         <h1>My Top 5 Favorite Movies List</h1>
11 |         <li>KGF2</li>
12 |         <li>Jawan</li>
13 |         <li>Pathan</li>
14 |         <li>Jailer</li>
15 |         <li>Leo</li>
16 |     </ol>
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Rupam/Week1/Day2/q2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>HTML Form</title>
 7 | </head>
 8 | <body>
 9 |     <from action="/action.php">
10 |     <label for="username">Enter Your Username</label>
11 |      <input type="text" id="username" placeholder="Example Username" name="username">
12 |      <br>
13 |      <br>
14 |      <lable for="email">Enter Your Email Address</lable>
15 |      <input type="text" id="email" placeholder="example@gmail.com" name="email">
16 |      <br>
17 |      <br>
18 |      <input type="submit">
19 |     </from>
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/Rupam/Week1/Day3/q1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>List Of Product In A Table</title>
 7 | </head>
 8 | <body>
 9 |     <table border="1px">
10 |         <caption>Product List</caption>
11 |           <tr>
12 |             <th>Product Name</th>
13 |             <th>Price</th>
14 |             <th>Description</th>
15 |           </tr>
16 |           <tr>
17 |             <td> iPhone 15 Pro Max</td>
18 |             <td>1,59,900</td>
19 |             <td>A17 pro hexa core processor</td>
20 |           </tr>
21 |           <tr>
22 |             <td>Samsung Galaxy S23 ultra</td>
23 |             <td>1,24,999</td>
24 |             <td>Qualcomm snapdragon 8gen2 processer</td>
25 |           </tr>
26 |             <td> Google pixel 8 Pro</td>
27 |             <td>1,09000</td>
28 |             <td> Google Tensor G3 processor</td>
29 |           </tr>
30 |           <tr>
31 |             <td> one plus 11</td>
32 |             <td>61,999</td>
33 |             <td> Qualcomm snapdragon 8gen2 processor</td>
34 |           </tr>
35 |           <tr>
36 |             <td> nothing phone 2</td>
37 |             <td>47,999</td>
38 |             <td>Qualcomm snapdragon 8+gen2 processor</td>
39 |           </tr>
40 |           <tr>
41 |     </table>
42 | </body>
43 | </html>


--------------------------------------------------------------------------------
/Rupam/Week1/Day3/q2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Modify List Of Product In A Table</title>
 7 | </head>
 8 | <body>
 9 |     <table border="1px" border-spacing="20px">
10 |         <caption><b>Product List</b></bProduct></caption>
11 |           <tr>
12 |             <th>Product Name</th>
13 |             <th>Price</th>
14 |             <th>Description</th>
15 |             <th>Picture</th>
16 |           </tr>
17 |           <tr>
18 |             <td> iPhone 15 Pro Max</td>
19 |             <td>1,59,900</td>
20 |             <td>A17 pro hexa core processor</td>
21 |             <td>
22 |                 <img width="890px" src="https://fdn2.gsmarena.com/vv/pics/apple/apple-iphone-15-pro-max-3.jpg" alt="iphone image">
23 |             </td>
24 |           </tr>
25 |           <tr>
26 |             <td>Samsung Galaxy S23 ultra</td>
27 |             <td>1,24,999</td>
28 |             <td>Qualcomm snapdragon 8gen2 processer</td>
29 |             <td>
30 |                 <img width="890px" src="https://c.ndtvimg.com/2022-12/pf0bn6o_samsung-galaxy-s22-ultra_625x300_21_December_22.jpg" alt="Samsang phone image">
31 |             </td>
32 |           </tr>
33 |             <td> Google pixel 8 Pro</td>
34 |             <td>1,09000</td>
35 |             <td> Google Tensor G3 processor</td>
36 |             <td>
37 |                 <img width="890px"src="https://images.fonearena.com/blog/wp-content/uploads/2023/10/Google-Pixel-8-and-Pixel-8-Pro.jpg" alt="Google phone image">
38 |             </td>
39 |           </tr>
40 |           <tr>
41 |             <td> one plus 11</td>
42 |             <td>61,999</td>
43 |             <td> Qualcomm snapdragon 8gen2 processor</td>
44 |             <td>
45 |                 <img width="890px"src="https://img.nieuwemobiel.nl/oneplus-11-colors-overview-63b6d82692a80.jpg" alt="one plus phone image">
46 |             </td>
47 |           </tr>
48 |           <tr>
49 |             <td> nothing phone 2</td>
50 |             <td>47,999</td>
51 |             <td>Qualcomm snapdragon 8+gen2 processor</td>
52 |             <td>
53 |                 <img width="890px" src="https://akm-img-a-in.tosshub.com/indiatoday/images/story/202304/nothing_phone_1-sixteen_nine.png?VersionId=qmf_atIu_3Elm_aV0T9Xi2g2Ha5vpOuD&size=690:388" alt="nothing phone image">
54 |             </td>
55 |           </tr>
56 |           <tr>
57 |     </table>
58 | </body>
59 | </html>


--------------------------------------------------------------------------------
/Rupam/Week1/Day4/q1/about.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>About</title>
 7 | </head>
 8 | <body>
 9 |     <p style="font-size: larger;">This is my About page</p>
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/Rupam/Week1/Day4/q1/contact.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Contact</title>
 7 | </head>
 8 | <body>
 9 |     <p font-size="larger">This is my contact page</p>
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/Rupam/Week1/Day4/q1/education.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Education</title>
 7 | </head>
 8 | <body>
 9 |     <p font-size="larger">This is my education page</p>
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/Rupam/Week1/Day4/q1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Home</title>
 7 | </head>
 8 | <body>
 9 |    <p style="font-size: larger;">welcome to my Home</p>
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/Rupam/Week1/Day4/q1/q1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Link And Navigation</title>
 7 | </head>
 8 | <body>
 9 |     <nav>
10 |         <h1>Navigation Bar</h1>
11 |         <ul>
12 |             <li><a href="index.html">Home</a></li>
13 |             <li><a href="about.html">About</a></li>
14 |             <li><a href="education.html">Education</a></li>
15 |             <li><a href="contact.html">Contact</a></li>
16 |         </ul>
17 |     </nav>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/Rupam/Week1/Day4/q2/q2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Navigation Menu</title>
 7 |     <style>
 8 |      .navbar{
 9 |         background-color: #e63b60;
10 |         overflow: hidden;
11 |      }
12 |      .navbar a{
13 |         float: left;
14 |         color: #f2f2f2;
15 |         text-align: center;
16 |         padding: 14px 16px;
17 |         text-decoration: none;
18 |      }
19 |      .navbar a:hover{
20 |         background-color: #f77f00;
21 |         color: black;
22 |      }
23 |      p{
24 |         color: white;
25 |      }
26 |      h1{
27 |         color:black;
28 |      }
29 |     </style>
30 | </head>
31 | <body>
32 |    <div class="navbar">
33 |     <a href="#section1">section1</a>
34 |     <a href="#section2">section2</a>
35 |     <a href="#section3">section3</a>
36 |    </div>
37 |    <div style="height: 800px;background-color:#1aa7ec;">
38 |      <h1 id="section1">section1</h2>
39 |      <p>This is the content of section1.</p>
40 |     </div>
41 |    <div style="height:800px; background-color:#797ef6;">
42 |      <h1 id="section2">section2</h2>
43 |      <p>This is the content of section2.</p>
44 |    </div>
45 |    <div style="height: 800px;background-color:#4adede;">
46 |      <h1 id="section3">section3</h2>
47 |      <p>This is the content of section 3.</p>
48 |    </div>
49 | </body>
50 | </html>


--------------------------------------------------------------------------------
/Rupam/Week1/Day5/q1/day1qs1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>2023 CRICKET WORLD CUP</title>
 7 |     <link rel="stylesheet" href="qs1.css">
 8 | </head>
 9 | <body>
10 |     <h1>2023 CRICKET WORLD CUP</h1>
11 |     <p>The 2023 ICC Men's Cricket World Cup is the 13th edition of the Cricket World Cup, a quadrennial One Day International (ODI) cricket tournament contested by men's national teams and organised by the International Cricket Council (ICC). The tournament is being hosted by India. It started on 5 October and is scheduled to conclude on 19 November 2023.Ten national teams are participating. All had to qualify for the tournament through the 2023 Cricket World Cup qualification process. India qualified as hosts; Afghanistan, Australia, Bangladesh, England, New Zealand, Pakistan and South Africa qualified via the ICC Cricket World Cup Super League, with the Netherlands and Sri Lanka securing the final two places via the qualifier tournament in Zimbabwe during June and July 2023. The West Indies missed out on qualification for the first time in their history. All teams were asked to finalise their 15-player squads prior to 28 September, with any replacements after this date requiring approval from the ICC. A selection panel chose 16 officials to umpire and referee at the matches. The host broadcaster is Star Sports, with various affiliates offering coverage around the world.
12 | 
13 |         It is the first men's Cricket World Cup which India is hosting solely. The tournament is taking place in ten different stadiums, in ten cities across the country. The first semi-final between India and New Zealand will be held at Wankhede Stadium on 15 November, while the second semi-final between South Africa and Australia will be held at Eden Gardens on 16 November. The final will take place at Narendra Modi Stadium on 19 November, with the winning team receiving US$4,000,000 in prize money.
14 |         
15 |         The top eight placed teams in the tournament's final points table qualified for the 2025 ICC Champions Trophy, the next ICC ODI tournament.</p>
16 |         <img src="https://resources.pulse.icc-cricket.com/ICC/photo/2023/06/27/58598b3c-97a1-4e39-a830-ed4352609cc7/CWC23-Fixtures-announcement-16x9-v2.jpeg" height="800px" alt="All Team Captain Picture"> 
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Rupam/Week1/Day5/q1/qs1.css:
--------------------------------------------------------------------------------
 1 | h1{
 2 |     color: blue;
 3 |     background-color: #c4feff;
 4 |     text-align: center;
 5 |     padding: 8px;
 6 |     margin: 5px;
 7 | }
 8 | p{
 9 |     font-size: 20px;
10 |     color: #a020f0;
11 | }


--------------------------------------------------------------------------------
/Rupam/Week1/Day5/q2/day5q2.css:
--------------------------------------------------------------------------------
 1 | h1{
 2 |    background-color: #ac92eb;
 3 |    text-align: center;
 4 |    color: #8c12fb;
 5 |    font-style: initial;
 6 |    padding: 20px;
 7 |    margin: 5px;
 8 | }   
 9 | 
10 | h2{
11 |     background-color: #a0d568;
12 |     font-style: inherit;
13 | }
14 | 
15 | p{
16 |   color: #ed5564;
17 |   font-style: italic;
18 | }
19 | 
20 | ul{
21 |     color: #ed5564;
22 |     font-style: oblique;
23 | }


--------------------------------------------------------------------------------
/Rupam/Week1/Day5/q2/day5q2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Day5 Practice</title>
 7 |     <link rel="stylesheet" href="day5q2.css">
 8 | </head>
 9 | <body>
10 |     <h1><b>COLLEGE LIFE</b></h1>
11 |         <h2>Paragraph About College Life</h2>
12 |             <p>College life experience is truly one of a kind. The most common memories people have of college life are definitely goofing around with friends. They remember how the group of friends walked around the college in style and playing silly pranks on each other.Moreover, people always look back at the times spent in the college canteen. It was considered the hub of every student where they enjoyed eating and chatting away with their friends.Another college life experience I have seen people cherish the most is the annual fest. The annual fest created so much excitement and buzz amongst the students. Everyone welcomed other colleges with open arms and also made friends there. All the competitions were carried out in a good spirit and the students dressed their best to represent their college well.
13 |             </p>
14 |         <h2>Importance of College Life</h2>
15 |         <ul>
16 |             <li>Time Management</li>
17 |             <li>Skill</li>
18 |             <li>Network</li>
19 |             <li>Soft Skill</li>
20 |             <li>Professionlism</li>
21 |         </ul>
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/Rupam/Week1/Day6/q1/day6qs1.css:
--------------------------------------------------------------------------------
 1 | img{
 2 |     display: block;
 3 |     width: 60%;
 4 |     margin: auto;
 5 | }
 6 | 
 7 | h1{
 8 |    background-color: aqua;
 9 |    color: blue;
10 |    text-align: center;
11 |    padding: 20px;
12 |    margin: 8px;
13 |    font-family: 'Times New Roman', Times, serif;
14 | }
15 | 
16 | p{
17 |     font-size: 20px;
18 |     font-family: arial;
19 | }
20 | 
21 | body{
22 |     margin: auto;
23 |     padding: 20px;
24 |     background-color:#f6eff1 ;
25 | }


--------------------------------------------------------------------------------
/Rupam/Week1/Day6/q1/day6qs1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Center Align Image</title>
 7 |     <link rel="stylesheet" href="day6qs1.css">
 8 | </head>
 9 | <body>
10 |     <h1>Center Align The Image</h1>
11 |     <p>In this example, the css margin and display use to center the image below.Once the display property is set to<b>"Block"</b>and the image width to fixed percentage,the mergin of the left and right are set to <b>"auto"</b>.</p>
12 |     <img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png" alt="image">
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/Rupam/Week1/Day6/q2/day6qs2.css:
--------------------------------------------------------------------------------
 1 | form{
 2 |    background-color: lightskyblue;
 3 |    display: block;
 4 |    width: 50%;
 5 |    margin: auto;
 6 |    border: 2px solid blue;
 7 |    padding: 50px;
 8 |    padding-top: 20px;
 9 | }
10 |  
11 | h1{
12 |    background-color: aqua;
13 |    color: blue;
14 |    text-align: center;
15 |    border: 1px solid blue;
16 | }
17 | .data_input{
18 |    border: 1px solid blue;
19 | }
20 | 
21 | button{
22 |    color: blue;
23 |    background-color: aqua;
24 |    border: 1px solid blue;
25 | }
26 | label{
27 |    color: blue;
28 | }


--------------------------------------------------------------------------------
/Rupam/Week1/Day6/q2/day6qs2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Border Around An Element</title>
 7 |     <link rel="stylesheet" href="day6qs2.css">
 8 | </head>
 9 | <body>
10 |     <form action="./action.php">
11 |             <h1>Input Persional Details</h1>
12 |         <br>
13 |         <div>
14 |             <label for="first_name">Enter First Name</label>
15 |             <input type="text" id="first_name" placeholder="First Name" class="data_input">
16 |         </div>
17 |         <br>
18 |         <div>
19 |             <label for="last_name">Enter Last Name</label>
20 |             <input type="text"id="last_name" placeholder="Last Name" class="data_input">
21 |         </div>
22 |         <br>
23 |         <div>
24 |             <label for="date_of_birth">Enter Date Of Birth</label>
25 |             <input type="calender" id="date_of_birth" placeholder="dd/mm/yyyy" name="birth_date" class="data_input">
26 |         </div>
27 |         <br>
28 |         <div>
29 |             <label for="phone_no">Enter Phone no.</label>
30 |             <input type="number" id="phone_no" placeholder="9999999999"class="data_input">
31 |         </div>
32 |         <br>
33 |         <div>
34 |             <label for="mail_id">Enter Mail id</label>
35 |             <input type="text" id="mail_id" placeholder="example@gmail.com" class="data_input">
36 |         </div>
37 |         <br>
38 |         <div>
39 |             <button>Submit</button>
40 |         </div>
41 |         <br>
42 |     </form>
43 | </body>
44 | </html>


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


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_1/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "liveServer.settings.port": 5501
3 | }
4 | 


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_1/Day_1/q1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Day 1</title>
 7 |   </head>
 8 |   <body>
 9 |     <h1>Lorem ipsum dolor sit amet.</h1>
10 |     <p>
11 |       Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic magnam quis
12 |       obcaecati ut provident officiis voluptas tempore, esse laboriosam saepe.
13 |     </p>
14 |     <img src="q1_image.png" alt="html css js" height="500px" width="750px" />
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_1/Day_1/q1_image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Tuhin_Poddar/Week_1/Day_1/q1_image.png


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_1/Day_2/q1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>My Top 5 Favorite Movies</title>
 7 |   </head>
 8 |   <body>
 9 |     <ol>
10 |       <li>Tenet</li>
11 |       <li>Dune</li>
12 |       <li>No Time to Die</li>
13 |       <li>Spider-Man: No Way Home</li>
14 |       <li>The Matrix Resurrections</li>
15 |     </ol>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_1/Day_2/q2.css:
--------------------------------------------------------------------------------
1 | input[type="submit"] {
2 |   background-color: blue;
3 |   color: white;
4 |   padding: 8px 16px;
5 |   border: none;
6 |   border-radius: 4px;
7 |   cursor: pointer;
8 | }
9 | 


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_1/Day_2/q2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>User Information</title>
 7 |     <link rel="stylesheet" href="q2.css" />
 8 |   </head>
 9 |   <body>
10 |     <h1>User Information</h1>
11 |     <form>
12 |       <label for="name">Name:</label><br />
13 |       <input type="text" id="name" name="name" required /><br /><br />
14 | 
15 |       <label for="email">Email Address:</label><br />
16 |       <input type="email" id="email" name="email" required /><br /><br />
17 | 
18 |       <input type="submit" value="Submit" />
19 |     </form>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_1/Day_3/Product_Images/Product_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Tuhin_Poddar/Week_1/Day_3/Product_Images/Product_1.jpg


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_1/Day_3/Product_Images/Product_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Tuhin_Poddar/Week_1/Day_3/Product_Images/Product_2.jpg


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_1/Day_3/Product_Images/Product_3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Tuhin_Poddar/Week_1/Day_3/Product_Images/Product_3.jpg


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_1/Day_3/q1.css:
--------------------------------------------------------------------------------
 1 | table {
 2 |   border-collapse: collapse;
 3 | }
 4 | 
 5 | th,
 6 | td {
 7 |   border: 1px solid #000;
 8 |   padding: 8px;
 9 |   text-align: left;
10 | }
11 | img {
12 |   width: 200px;
13 |   height: 200px;
14 | }
15 | 


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_1/Day_3/q1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Product List</title>
 7 |     <link rel="stylesheet" href="q1.css" />
 8 |   </head>
 9 |   <body>
10 |     <h2>Product List</h2>
11 | 
12 |     <table border="1">
13 |       <thead>
14 |         <tr>
15 |           <th>Product Name</th>
16 |           <th>Price</th>
17 |           <th>Description</th>
18 |           <th>Image</th>
19 |         </tr>
20 |       </thead>
21 |       <tbody>
22 |         <tr>
23 |           <td>Men's Shoes</td>
24 |           <td>₹729</td>
25 |           <td>Centrino Mens Formal Shoes</td>
26 |           <td>
27 |             <img src="Product_Images/Product_1.jpg" alt="Product 1" />
28 |           </td>
29 |         </tr>
30 |         <tr>
31 |           <td>Hooded Bomber Jacket</td>
32 |           <td>₹1,129</td>
33 |           <td>Solid Full Sleeves Regular Fit Bomber Jacket</td>
34 |           <td>
35 |             <img src="Product_Images/Product_2.jpg" alt="Product 2" />
36 |           </td>
37 |         </tr>
38 |         <tr>
39 |           <td>Wired On Ear Headphone</td>
40 |           <td>₹399</td>
41 |           <td>
42 |             Zebronics Zeb-Storm Wired On Ear Headphone with 3.5mm Jack, Built-in
43 |             Microphone for Calling, 1.5 Meter Cable, Soft Ear Cushion,
44 |             Adjustable Headband, Foldable Ear Cups and Lightweight Design
45 |             (Black)
46 |           </td>
47 |           <td>
48 |             <img src="Product_Images/Product_3.jpg" alt="Product 3" />
49 |           </td>
50 |         </tr>
51 |       </tbody>
52 |     </table>
53 |   </body>
54 | </html>
55 | 


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_1/Day_4/q1.css:
--------------------------------------------------------------------------------
 1 | .navbar {
 2 |   background-color: #333;
 3 |   position: fixed;
 4 |   top: 0;
 5 |   left: 0;
 6 |   width: 100%;
 7 |   z-index: 1000;
 8 |   height: 24px;
 9 | }
10 | 
11 | .nav-links {
12 |   list-style-type: none;
13 |   margin: 0;
14 |   padding: 0;
15 |   display: flex;
16 |   justify-content: center;
17 |   align-items: center;
18 | }
19 | 
20 | .nav-links li {
21 |   margin: 0 15px;
22 | }
23 | 
24 | .nav-links a {
25 |   color: white;
26 |   text-decoration: none;
27 |   transition: color 0.3s ease;
28 | }
29 | 
30 | .nav-links a:hover {
31 |   color: #ffc107;
32 | }
33 | 
34 | /* Styles for sections */
35 | .section {
36 |   padding: 80px 0;
37 |   text-align: center;
38 |   font-family: Arial, sans-serif;
39 |   background-color: #f5f5f5;
40 | }
41 | 
42 | .section h2 {
43 |   margin-bottom: 20px;
44 | }
45 | 


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_1/Day_4/q1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Navigation Menu</title>
 7 |     <link rel="stylesheet" href="q1.css" />
 8 |   </head>
 9 |   <body>
10 |     <nav class="navbar">
11 |       <ul class="nav-links">
12 |         <li><a href="#home">Home</a></li>
13 |         <li><a href="#about">About</a></li>
14 |         <li><a href="#services">Services</a></li>
15 |         <li><a href="#contact">Contact</a></li>
16 |       </ul>
17 |     </nav>
18 | 
19 |     <section id="home" class="section">
20 |       <h2>Home Section</h2>
21 |       <p>I am home section.</p>
22 |     </section>
23 | 
24 |     <section id="about" class="section">
25 |       <h2>About Section</h2>
26 |       <p>I am about section.</p>
27 |     </section>
28 | 
29 |     <section id="services" class="section">
30 |       <h2>Services Section</h2>
31 |       <p>I am services section.</p>
32 |     </section>
33 | 
34 |     <section id="contact" class="section">
35 |       <h2>Contact Section</h2>
36 |       <p>I am contact section.</p>
37 |     </section>
38 |   </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_1/Day_5/q1.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background-color: #4c4949;
 3 |   color: #d3cccc;
 4 |   font-family: Arial, sans-serif;
 5 |   font-size: 16px;
 6 | }
 7 | 
 8 | h1 {
 9 |   font-family: "Times New Roman", Times, serif;
10 |   font-size: 28px;
11 |   color: #009688;
12 | }
13 | 
14 | p {
15 |   font-family: Verdana, Geneva, sans-serif;
16 |   font-size: 18px;
17 | }
18 | 
19 | li {
20 |   font-family: "Courier New", Courier, monospace;
21 |   font-size: 14px;
22 | }
23 | 


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_1/Day_5/q1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Day 5</title>
 7 |     <link rel="stylesheet" href="q1.css" />
 8 |   </head>
 9 |   <body>
10 |     <h1>Lorem ipsum dolor sit amet.</h1>
11 |     <p>
12 |       Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic magnam quis
13 |       obcaecati ut provident officiis voluptas tempore, esse laboriosam saepe.
14 |     </p>
15 |     <ul>
16 |       <li>Item 1</li>
17 |       <li>Item 2</li>
18 |       <li>Item 3</li>
19 |     </ul>
20 |     <img src="q1_image.png" alt="" />
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_1/Day_5/q1_image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Tuhin_Poddar/Week_1/Day_5/q1_image.png


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_1/Day_6/q1.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   display: flex;
 3 |   justify-content: center;
 4 |   align-items: center;
 5 | }
 6 | 
 7 | .container img {
 8 |   max-width: 100%;
 9 | }
10 | 


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_1/Day_6/q1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Day 6</title>
 7 |     <link rel="stylesheet" href="q1.css" />
 8 |   </head>
 9 |   <body>
10 |     <div class="container">
11 |       <img src="/Day_5/q1_image.png" alt="Centered Image" />
12 |     </div>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_1/Day_6/q2.css:
--------------------------------------------------------------------------------
1 | .bordered-input {
2 |   border: 1px solid rgb(35, 43, 37);
3 |   padding: 8px;
4 |   display: flex;
5 |   border-radius: 4px;
6 | }
7 | 


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_1/Day_6/q2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Day 6</title>
 7 |     <link rel="stylesheet" href="q2.css" />
 8 |   </head>
 9 |   <body>
10 |     <form>
11 |       <input type="text" class="bordered-input" placeholder="Your name" />
12 |       <input type="email" class="bordered-input" placeholder="Your email" />
13 |     </form>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_1/Day_7/q1.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background-color: #f0f0f0;
 3 |   font-family: Arial, sans-serif;
 4 |   color: #333;
 5 | }
 6 | 
 7 | h1,
 8 | h2,
 9 | h3 {
10 |   font-family: "Times New Roman", Times, serif;
11 |   color: #0066cc;
12 | }
13 | 
14 | p {
15 |   font-style: italic;
16 | }
17 | 
18 | ul {
19 |   list-style-type: none;
20 |   margin: 0;
21 |   padding: 0;
22 | }
23 | 
24 | nav ul li {
25 |   display: inline;
26 |   margin-right: 15px;
27 | }
28 | 
29 | nav ul li:hover {
30 |   background-color: #ddd;
31 | }
32 | 
33 | table {
34 |   border-collapse: collapse;
35 |   width: 80%;
36 |   margin: 20px auto;
37 | }
38 | 
39 | table,
40 | th,
41 | td {
42 |   border: 1px solid #666;
43 |   padding: 8px;
44 |   text-align: left;
45 | }
46 | 
47 | .bordered {
48 |   border: 1px solid #ccc;
49 | }
50 | 
51 | input[type="text"],
52 | input[type="email"],
53 | input[type="submit"] {
54 |   border: 1px solid #999;
55 |   padding: 5px;
56 |   margin-bottom: 10px;
57 | }
58 | 
59 | input[type="submit"]:hover {
60 |   background-color: #0066cc;
61 |   color: #fff;
62 | }
63 | 


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_1/Day_7/q1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>My Website</title>
 7 | </head>
 8 | <body>
 9 |   <link rel="stylesheet" href="q1.css">
10 | </body>
11 | </html>
12 | 
13 |   <body>
14 |     <header>
15 |       <h1>Welcome to My Website</h1>
16 |       <nav>
17 |         <ul>
18 |           <li><a href="#section1">Section 1</a></li>
19 |           <li><a href="#section2">Section 2</a></li>
20 |           <li><a href="#section3">Section 3</a></li>
21 |         </ul>
22 |       </nav>
23 |     </header>
24 | 
25 |     <main>
26 |       <section id="section1">
27 |         <h2>Section 1: Simple HTML Page</h2>
28 |         <p>
29 |           This is a simple HTML page with a heading, a paragraph of text, and an
30 |           image:
31 |         </p>
32 |         <img
33 |           src="https://via.placeholder.com/400"
34 |           alt="Placeholder Image"
35 |           width="400"
36 |         />
37 |       </section>
38 | 
39 |       <section id="section2">
40 |         <h2>Section 2: Top 5 Favorite Books/Movies</h2>
41 |         <ol>
42 |           <li>Book/Movie 1</li>
43 |           <li>Book/Movie 2</li>
44 |           <li>Book/Movie 3</li>
45 |           <li>Book/Movie 4</li>
46 |           <li>Book/Movie 5</li>
47 |         </ol>
48 |       </section>
49 | 
50 |       <section id="section3">
51 |         <h2>Section 3: HTML Form</h2>
52 |         <form>
53 |           <input type="text" placeholder="Name" /><br />
54 |           <input type="email" placeholder="Email" /><br />
55 |           <input type="submit" value="Submit" />
56 |         </form>
57 |       </section>
58 | 
59 |       <section id="section4">
60 |         <h2>Section 4: HTML Table</h2>
61 |         <table>
62 |           <tr>
63 |             <th>Product Name</th>
64 |             <th>Price</th>
65 |             <th>Description</th>
66 |             <th>Image</th>
67 |           </tr>
68 |           <tr>
69 |             <td>Product 1</td>
70 |             <td>$10</td>
71 |             <td>Description of Product 1</td>
72 |             <td>
73 |               <img src="https://via.placeholder.com/50" alt="Product Image" />
74 |             </td>
75 |           </tr>
76 |           
77 |         </table>
78 |       </section>
79 |     </main>
80 | 
81 |     
82 |   </body>
83 | </html>
84 | 


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_2/Day_10/.hintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": [
3 |     "development"
4 |   ],
5 |   "hints": {
6 |     "button-type": "off"
7 |   }
8 | }


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_2/Day_10/q1.css:
--------------------------------------------------------------------------------
 1 | input[type="submit"],
 2 | #showAlert {
 3 |   background-color: blue;
 4 |   color: white;
 5 |   padding: 8px 16px;
 6 |   border: none;
 7 |   border-radius: 4px;
 8 |   cursor: pointer;
 9 | }
10 | 


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_2/Day_10/q1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>day 10</title>
 7 |     <link rel="stylesheet" href="q1.css" />
 8 |   </head>
 9 |   <body>
10 |     <h1>User Information</h1>
11 |     <form>
12 |       <label for="name">Name:</label><br />
13 |       <input type="text" id="name" name="name" required /><br /><br />
14 | 
15 |       <label for="email">Email Address:</label><br />
16 |       <input type="email" id="email" name="email" required /><br /><br />
17 | 
18 |       <input type="submit" value="Submit" />
19 |       <button id="showAlert">Show Alert</button>
20 |     </form>
21 | 
22 |     <script src="q1.js"></script>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_2/Day_10/q1.js:
--------------------------------------------------------------------------------
1 | const showAlertButton = document.getElementById("showAlert");
2 | showAlertButton.addEventListener("click", function () {
3 |   alert("Button clicked!");
4 | });
5 | 


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_2/Day_11/img1.jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Tuhin_Poddar/Week_2/Day_11/img1.jfif


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_2/Day_11/img2.jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Tuhin_Poddar/Week_2/Day_11/img2.jfif


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_2/Day_11/q1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Day 11</title>
 7 |   </head>
 8 |   <body>
 9 |     <p id="myParagraph">Initial paragraph text.</p>
10 |     <img id="myImage" src="img1.jfif" alt="Initial Image" />
11 | 
12 |     <script src="q1.js"></script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_2/Day_11/q1.js:
--------------------------------------------------------------------------------
 1 | var paragraph = document.getElementById("myParagraph");
 2 | if (paragraph !== null) {
 3 |   paragraph.textContent = "New text for the paragraph.";
 4 | } else {
 5 |   console.error("Paragraph element not found.");
 6 | }
 7 | 
 8 | var image = document.getElementById("myImage");
 9 | if (image !== null) {
10 |   image.src = "img2.jfif";
11 |   image.alt = "New Image Alt Text";
12 | } else {
13 |   console.error("Image element not found.");
14 | }
15 | 


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_2/Day_12/q1.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: Arial, sans-serif;
 3 |   margin: 0;
 4 |   padding: 0;
 5 |   background-color: #f2f2f2;
 6 | }
 7 | 
 8 | .container {
 9 |   width: 80%;
10 |   margin: 0 auto;
11 |   background-color: white;
12 |   padding: 20px;
13 |   box-sizing: border-box;
14 | }
15 | 
16 | /* Media query for screens smaller than 600px */
17 | @media (max-width: 600px) {
18 |   .container {
19 |     width: 90%;
20 |     padding: 10px;
21 |   }
22 | }
23 | 
24 | /* Media query for screens between 601px and 900px */
25 | @media (min-width: 601px) and (max-width: 900px) {
26 |   .container {
27 |     width: 70%;
28 |   }
29 | }
30 | 
31 | /* Media query for screens larger than 901px */
32 | @media (min-width: 901px) {
33 |   .container {
34 |     width: 60%;
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_2/Day_12/q1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Day 12</title>
 7 |     <link rel="stylesheet" href="q1.css" />
 8 |   </head>
 9 |   <body>
10 |     <div class="container">
11 |       <h1>Responsive Page</h1>
12 |       <p>
13 |         This is a sample content. Resize the browser window to see how the
14 |         layout changes based on different screen sizes.
15 |       </p>
16 |     </div>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_2/Day_8/q1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Day 8</title>
 7 |   </head>
 8 |   <body>
 9 |     <h1>Lorem ipsum dolor sit amet.</h1>
10 |     <p>
11 |       Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic magnam quis
12 |       obcaecati ut provident officiis voluptas tempore, esse laboriosam saepe.
13 |     </p>
14 |     <img src="q1_image.png" alt="html css js" height="500px" width="750px" />
15 |     <script src="q1.js"></script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_2/Day_8/q1.js:
--------------------------------------------------------------------------------
1 | var name = "Tuhin";
2 | var age = 19;
3 | console.log("Welcome to week 2 of WebCraftersCorner");
4 | console.log("Hello, " + name + "! You are " + age + " years old.");
5 | 


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_2/Day_8/q1_image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevDotCommunity/WebCraftersCorner/f7050b6a729e3e849ae71730ab03c06838071c64/Tuhin_Poddar/Week_2/Day_8/q1_image.png


--------------------------------------------------------------------------------
/Tuhin_Poddar/Week_2/Day_9/q1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>Day 9</title>
 7 | </head>
 8 | <body>
 9 |   
10 | </body>
11 | </html>
12 | <body>
13 |   <script>
14 |     function calculateRectangleArea(length, width) {
15 |       return length * width;
16 |     }
17 | 
18 |     const userInputLength = parseFloat(prompt('Enter the length of the rectangle:'));
19 |     const userInputWidth = parseFloat(prompt('Enter the width of the rectangle:'));
20 | 
21 |     if (isNaN(userInputLength) || isNaN(userInputWidth)) {
22 |       alert('Please enter valid numbers for length and width.');
23 |     } else {
24 |       const area = calculateRectangleArea(userInputLength, userInputWidth);
25 |       alert('The area of the rectangle is: ' + area);
26 |     }
27 |   </script>
28 | </body>
29 | </html>
30 | 


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