├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── day-01
    ├── README.md
    ├── design.png
    └── index.html
├── day-02
    ├── README.md
    ├── design.png
    └── index.html
├── day-03
    ├── README.md
    ├── design.png
    └── index.html
├── day-04
    ├── README.md
    ├── design.png
    └── index.html
├── day-05
    ├── README.md
    ├── design.png
    └── index.html
├── day-06
    ├── README.md
    ├── design.png
    └── index.html
├── day-07
    ├── README.md
    ├── design.png
    └── index.html
├── day-08
    ├── README.md
    ├── design.png
    └── index.html
├── day-09
    ├── README.md
    ├── design.png
    └── index.html
├── day-10
    ├── README.md
    ├── design.png
    └── index.html
├── day-100
    ├── README.md
    ├── design.png
    └── index.html
├── day-11
    ├── README.md
    ├── design.png
    └── index.html
├── day-12
    ├── README.md
    ├── design.png
    └── index.html
├── day-13
    ├── README.md
    ├── design.png
    └── index.html
├── day-14
    ├── README.md
    ├── design.png
    └── index.html
├── day-15
    ├── README.md
    ├── design.png
    └── index.html
├── day-16
    ├── README.md
    ├── design.png
    └── index.html
├── day-17
    ├── README.md
    ├── design.png
    └── index.html
├── day-18
    ├── README.md
    ├── design.png
    └── index.html
├── day-19
    ├── README.md
    ├── design.png
    └── index.html
├── day-20
    ├── README.md
    ├── design.png
    └── index.html
├── day-21
    ├── README.md
    ├── design.png
    └── index.html
├── day-22
    ├── README.md
    ├── design.png
    └── index.html
├── day-23
    ├── README.md
    ├── design.png
    └── index.html
├── day-24
    ├── README.md
    ├── design.png
    └── index.html
├── day-25
    ├── README.md
    ├── design.png
    └── index.html
├── day-26
    ├── README.md
    ├── design.png
    └── index.html
├── day-27
    ├── README.md
    ├── design.png
    └── index.html
├── day-28
    ├── README.md
    ├── design.png
    └── index.html
├── day-29
    ├── README.md
    ├── design.png
    └── index.html
├── day-30
    ├── README.md
    ├── design.png
    └── index.html
├── day-31
    ├── README.md
    ├── design.png
    └── index.html
├── day-32
    ├── README.md
    ├── design.png
    └── index.html
├── day-33
    ├── README.md
    ├── design.png
    └── index.html
├── day-34
    ├── README.md
    ├── design.png
    └── index.html
├── day-35
    ├── README.md
    ├── design.png
    └── index.html
├── day-36
    ├── README.md
    ├── design.png
    └── index.html
├── day-37
    ├── README.md
    ├── design.png
    └── index.html
├── day-38
    ├── README.md
    ├── design.png
    └── index.html
├── day-39
    ├── README.md
    ├── design.png
    └── index.html
├── day-40
    ├── README.md
    ├── design.png
    └── index.html
├── day-41
    ├── README.md
    ├── design.png
    └── index.html
├── day-42
    ├── README.md
    ├── design.png
    └── index.html
├── day-43
    ├── README.md
    ├── design.png
    └── index.html
├── day-44
    ├── README.md
    ├── design.png
    └── index.html
├── day-45
    ├── README.md
    ├── design.png
    └── index.html
├── day-46
    ├── README.md
    ├── design.png
    └── index.html
├── day-47
    ├── README.md
    ├── design.png
    └── index.html
├── day-48
    ├── README.md
    ├── design.png
    └── index.html
├── day-49
    ├── README.md
    ├── design.png
    └── index.html
├── day-50
    ├── README.md
    ├── design.png
    └── index.html
├── day-51
    ├── README.md
    ├── design.png
    └── index.html
├── day-52
    ├── README.md
    ├── design.png
    └── index.html
├── day-53
    ├── README.md
    ├── design.png
    └── index.html
├── day-54
    ├── README.md
    ├── design.png
    └── index.html
├── day-55
    ├── README.md
    ├── design.png
    └── index.html
├── day-56
    ├── README.md
    ├── design.png
    └── index.html
├── day-57
    ├── README.md
    ├── design.png
    └── index.html
├── day-58
    ├── README.md
    ├── design.png
    └── index.html
├── day-59
    ├── README.md
    ├── design.png
    └── index.html
├── day-60
    ├── README.md
    ├── design.png
    └── index.html
├── day-61
    ├── README.md
    ├── design.png
    └── index.html
├── day-62
    ├── README.md
    ├── design.png
    └── index.html
├── day-63
    ├── README.md
    ├── design.png
    └── index.html
├── day-64
    ├── README.md
    ├── design.png
    └── index.html
├── day-65
    ├── README.md
    ├── design.png
    └── index.html
├── day-66
    ├── README.md
    ├── design.png
    └── index.html
├── day-67
    ├── README.md
    ├── design.png
    └── index.html
├── day-68
    ├── README.md
    ├── design.png
    └── index.html
├── day-69
    ├── README.md
    ├── design.png
    └── index.html
├── day-70
    ├── README.md
    ├── design.png
    └── index.html
├── day-71
    ├── README.md
    ├── design.png
    └── index.html
├── day-72
    ├── README.md
    ├── design.png
    └── index.html
├── day-73
    ├── README.md
    ├── design.png
    └── index.html
├── day-74
    ├── README.md
    ├── design.png
    └── index.html
├── day-75
    ├── README.md
    ├── design.png
    └── index.html
├── day-76
    ├── README.md
    ├── design.png
    └── index.html
├── day-77
    ├── README.md
    ├── design.png
    └── index.html
├── day-78
    ├── README.md
    ├── design.png
    └── index.html
├── day-79
    ├── README.md
    ├── design.png
    └── index.html
├── day-80
    ├── README.md
    ├── design.png
    └── index.html
├── day-81
    ├── README.md
    ├── design.png
    └── index.html
├── day-82
    ├── README.md
    ├── design.png
    └── index.html
├── day-83
    ├── README.md
    ├── design.png
    └── index.html
├── day-84
    ├── README.md
    ├── design.png
    └── index.html
├── day-85
    ├── README.md
    ├── design.png
    └── index.html
├── day-86
    ├── README.md
    ├── design.png
    └── index.html
├── day-87
    ├── README.md
    ├── design.png
    └── index.html
├── day-88
    ├── README.md
    ├── design.png
    └── index.html
├── day-89
    ├── README.md
    ├── design.png
    └── index.html
├── day-90
    ├── README.md
    ├── design.png
    └── index.html
├── day-91
    ├── README.md
    ├── design.png
    └── index.html
├── day-92
    ├── README.md
    ├── design.png
    └── index.html
├── day-93
    ├── README.md
    ├── design.png
    └── index.html
├── day-94
    ├── README.md
    ├── design.png
    └── index.html
├── day-95
    ├── README.md
    ├── design.png
    └── index.html
├── day-96
    ├── README.md
    ├── design.png
    └── index.html
├── day-97
    ├── README.md
    ├── design.png
    └── index.html
├── day-98
    ├── README.md
    ├── design.png
    └── index.html
└── day-99
    ├── README.md
    ├── design.png
    └── index.html


/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change.
2 | 
3 | One of the potential contributions could be `intl` and translating to different languages.
4 | 
5 | Please note we have a code of conduct, please follow it in all your interactions with the project.
6 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 BigDevSoon
 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 | 


--------------------------------------------------------------------------------
/day-01/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-01/design.png


--------------------------------------------------------------------------------
/day-01/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Profile Card challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Profile Card challenge</h1>
27 | 
28 |       <!-- Challenge Introduction -->
29 |       <p class="text">
30 |         The goal is to transform the provided design screenshot into a
31 |         functional, complete challenge.
32 |       </p>
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-02/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-02/design.png


--------------------------------------------------------------------------------
/day-02/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Add To Bag challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Add To Bag challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-03/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-03/design.png


--------------------------------------------------------------------------------
/day-03/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Mobile Navigation challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">
27 |         Mobile Navigation challenge
28 |       </h1>
29 |       <!-- Challenge Introduction -->
30 |       <p class="text">
31 |         The goal is to transform the provided design screenshot into a
32 |         functional, complete challenge.
33 |       </p>
34 | 
35 |       <p class="text-sm border-t pt-6">
36 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
37 |         free to integrate other libraries using their CDNs to enhance your
38 |         challenge.
39 |       </p>
40 |     </div>
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/day-04/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-04/design.png


--------------------------------------------------------------------------------
/day-04/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Contact Us challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Contact Us challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-05/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-05/design.png


--------------------------------------------------------------------------------
/day-05/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Recipe challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Recipe challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-06/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-06/design.png


--------------------------------------------------------------------------------
/day-06/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Image Carousel challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Image Carousel challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-07/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-07/design.png


--------------------------------------------------------------------------------
/day-07/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Create Account challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Create Account challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-08/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-08/design.png


--------------------------------------------------------------------------------
/day-09/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-09/design.png


--------------------------------------------------------------------------------
/day-09/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Password Generator challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">
27 |         Password Generator challenge
28 |       </h1>
29 |       <!-- Challenge Introduction -->
30 |       <p class="text">
31 |         The goal is to transform the provided design screenshot into a
32 |         functional, complete challenge.
33 |       </p>
34 | 
35 |       <p class="text-sm border-t pt-6">
36 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
37 |         free to integrate other libraries using their CDNs to enhance your
38 |         challenge.
39 |       </p>
40 |     </div>
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/day-10/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-10/design.png


--------------------------------------------------------------------------------
/day-10/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Sign Up Page challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Sign Up Page challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-100/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-100/design.png


--------------------------------------------------------------------------------
/day-100/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Footer challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Footer challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-11/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-11/design.png


--------------------------------------------------------------------------------
/day-11/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Hotel Booking challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Hotel Booking challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-12/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-12/design.png


--------------------------------------------------------------------------------
/day-12/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Restaurant Reservation challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">
27 |         Restaurant Reservation challenge
28 |       </h1>
29 |       <!-- Challenge Introduction -->
30 |       <p class="text">
31 |         The goal is to transform the provided design screenshot into a
32 |         functional, complete challenge.
33 |       </p>
34 | 
35 |       <p class="text-sm border-t pt-6">
36 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
37 |         free to integrate other libraries using their CDNs to enhance your
38 |         challenge.
39 |       </p>
40 |     </div>
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/day-13/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-13/design.png


--------------------------------------------------------------------------------
/day-13/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Task Board challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Task Board challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-14/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-14/design.png


--------------------------------------------------------------------------------
/day-14/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Shopping List challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Shopping List challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-15/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-15/design.png


--------------------------------------------------------------------------------
/day-15/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Notifications challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Notifications challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-16/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-16/design.png


--------------------------------------------------------------------------------
/day-16/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Fur Friends challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Fur Friends challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-17/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-17/design.png


--------------------------------------------------------------------------------
/day-17/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Article Slider challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Article Slider challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-18/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-18/design.png


--------------------------------------------------------------------------------
/day-18/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Images Preview challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Images Preview challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-19/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-19/design.png


--------------------------------------------------------------------------------
/day-19/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Upload Images challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Upload Images challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-20/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-20/design.png


--------------------------------------------------------------------------------
/day-20/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Card Wallet challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Card Wallet challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-21/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-21/design.png


--------------------------------------------------------------------------------
/day-21/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Pricing Plans challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Pricing Plans challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-22/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-22/design.png


--------------------------------------------------------------------------------
/day-22/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Messages challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Messages challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-23/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-23/design.png


--------------------------------------------------------------------------------
/day-23/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Home Page challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Home Page challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-24/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-24/design.png


--------------------------------------------------------------------------------
/day-24/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Movie Ticket challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Movie Ticket challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-25/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-25/design.png


--------------------------------------------------------------------------------
/day-25/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Meeting Schedule challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Meeting Schedule challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-26/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-26/design.png


--------------------------------------------------------------------------------
/day-26/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Job Board challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Job Board challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-27/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-27/design.png


--------------------------------------------------------------------------------
/day-27/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Leaderboards challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Leaderboards challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-28/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-28/design.png


--------------------------------------------------------------------------------
/day-28/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Playlist challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Playlist challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-29/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-29/design.png


--------------------------------------------------------------------------------
/day-29/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Video Player challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Video Player challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-30/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-30/design.png


--------------------------------------------------------------------------------
/day-30/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Invoices challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Invoices challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-31/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-31/design.png


--------------------------------------------------------------------------------
/day-31/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Dashboard challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Dashboard challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-32/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-32/design.png


--------------------------------------------------------------------------------
/day-32/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Newsletter challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Newsletter challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-33/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-33/design.png


--------------------------------------------------------------------------------
/day-33/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Brand Visualizer challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Brand Visualizer challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-34/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-34/design.png


--------------------------------------------------------------------------------
/day-34/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon User Profile challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">User Profile challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-35/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-35/design.png


--------------------------------------------------------------------------------
/day-36/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-36/design.png


--------------------------------------------------------------------------------
/day-36/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Sleep App challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Sleep App challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-37/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-37/design.png


--------------------------------------------------------------------------------
/day-37/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Explore Flights challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Explore Flights challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-38/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-38/design.png


--------------------------------------------------------------------------------
/day-38/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Music Festival challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Music Festival challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-39/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-39/design.png


--------------------------------------------------------------------------------
/day-39/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon QR Code Scanner challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">QR Code Scanner challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-40/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-40/design.png


--------------------------------------------------------------------------------
/day-40/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon FAQ challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">FAQ challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-41/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-41/design.png


--------------------------------------------------------------------------------
/day-41/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Create Workspace challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Create Workspace challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-42/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-42/design.png


--------------------------------------------------------------------------------
/day-42/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Settings Appearance challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">
27 |         Settings Appearance challenge
28 |       </h1>
29 |       <!-- Challenge Introduction -->
30 |       <p class="text">
31 |         The goal is to transform the provided design screenshot into a
32 |         functional, complete challenge.
33 |       </p>
34 | 
35 |       <p class="text-sm border-t pt-6">
36 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
37 |         free to integrate other libraries using their CDNs to enhance your
38 |         challenge.
39 |       </p>
40 |     </div>
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/day-43/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-43/design.png


--------------------------------------------------------------------------------
/day-43/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Player Profile challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Player Profile challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-44/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-44/design.png


--------------------------------------------------------------------------------
/day-44/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Website Launch challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Website Launch challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-45/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-45/design.png


--------------------------------------------------------------------------------
/day-45/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Hosting Features challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Hosting Features challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-46/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-46/design.png


--------------------------------------------------------------------------------
/day-46/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Customer List challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Customer List challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-47/README.md:
--------------------------------------------------------------------------------
 1 | # Challenge Name: Export File
 2 | 
 3 | You can work on this challenge directly in [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/export-file/browser).
 4 | 
 5 | ![Export File Design](./design.png)
 6 | 
 7 | ## Introduction
 8 | 
 9 | This is an opportunity to apply your skills in HTML, CSS, and JavaScript to create a solution that reflects the design. We encourage creativity and uniqueness while adhering to the design principles outlined in the challenge.
10 | 
11 | ## User Story
12 | 
13 | As a graphic designer, I need a feature to export images in various formats and sizes, so that I can optimize the images for different uses without losing quality.
14 | 
15 | ## Acceptance Criteria
16 | 
17 | - Include options to export in JPG, PNG, TIFF, and GIF formats.
18 | - Provide a slider to adjust photo quality from 0% to 100%.
19 | - Offer different size options for exporting, such as 1x, 2x, 3x, and 4x.
20 | - Display a progress bar to indicate the status of the export process.
21 | 
22 | ## Get Started
23 | 
24 | Begin your development with the `index.html` provided in the challenge's folder. You can work on this challenge directly in the [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/export-file/browser) and use the assets available to you and refer to the design screenshot for visual guidelines. Push your boundaries and remember, perfection comes through practice and iteration.
25 | 
26 | ## Best Practices and Tips
27 | 
28 | - Design Accuracy: Your solution should closely match the layout and style of the provided screenshot.
29 | - Interactivity: Enhance user interaction through JavaScript to elevate the experience beyond a static display.
30 | - Functionality: Ensure that all elements are functional, with attention to detail in the implementation.
31 | - Quality Assurance: Submit a well-coded, clean, and organized solution that adheres to modern web standards.
32 | - Code Quality: Write clean, readable, and well-commented code to maintain best practices in development.
33 | - Responsive Design: Ensure your challenge solution is responsive and functions well on various devices.
34 | - Performance Optimization: Optimize image sizes and script efficiency to improve the loading times and responsiveness of your code.
35 | 


--------------------------------------------------------------------------------
/day-47/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-47/design.png


--------------------------------------------------------------------------------
/day-47/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Export File challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Export File challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-48/README.md:
--------------------------------------------------------------------------------
 1 | # Challenge Name: Markdown Post
 2 | 
 3 | You can work on this challenge directly in [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/markdown-post/browser).
 4 | 
 5 | ![Markdown Post Design](./design.png)
 6 | 
 7 | ## Introduction
 8 | 
 9 | This is an opportunity to apply your skills in HTML, CSS, and JavaScript to create a solution that reflects the design. We encourage creativity and uniqueness while adhering to the design principles outlined in the challenge.
10 | 
11 | ## User Story
12 | 
13 | As a user, I want to be able to format text and mention other users while commenting on a post, so that I can make my comments more engaging and directed to specific individuals.
14 | 
15 | ## Acceptance Criteria
16 | 
17 | - Enable text formatting options such as bold, italic, and underline within the comment box.
18 | - Allow users to mention other users by typing "@" followed by their name, with an autocomplete dropdown for easy selection.
19 | - Include a "Post a message" button that becomes active only when text is entered in the comment box.
20 | 
21 | ## Get Started
22 | 
23 | Begin your development with the `index.html` provided in the challenge's folder. You can work on this challenge directly in the [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/markdown-post/browser) and use the assets available to you and refer to the design screenshot for visual guidelines. Push your boundaries and remember, perfection comes through practice and iteration.
24 | 
25 | ## Best Practices and Tips
26 | 
27 | - Design Accuracy: Your solution should closely match the layout and style of the provided screenshot.
28 | - Interactivity: Enhance user interaction through JavaScript to elevate the experience beyond a static display.
29 | - Functionality: Ensure that all elements are functional, with attention to detail in the implementation.
30 | - Quality Assurance: Submit a well-coded, clean, and organized solution that adheres to modern web standards.
31 | - Code Quality: Write clean, readable, and well-commented code to maintain best practices in development.
32 | - Responsive Design: Ensure your challenge solution is responsive and functions well on various devices.
33 | - Performance Optimization: Optimize image sizes and script efficiency to improve the loading times and responsiveness of your code.
34 | 


--------------------------------------------------------------------------------
/day-48/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-48/design.png


--------------------------------------------------------------------------------
/day-48/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Markdown Post challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Markdown Post challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-49/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-49/design.png


--------------------------------------------------------------------------------
/day-49/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon App Navigation challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">App Navigation challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-50/README.md:
--------------------------------------------------------------------------------
 1 | # Challenge Name: Friend Request
 2 | 
 3 | You can work on this challenge directly in [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/friend-request/browser).
 4 | 
 5 | ![Friend Request Design](./design.png)
 6 | 
 7 | ## Introduction
 8 | 
 9 | This is an opportunity to apply your skills in HTML, CSS, and JavaScript to create a solution that reflects the design. We encourage creativity and uniqueness while adhering to the design principles outlined in the challenge.
10 | 
11 | ## User Story
12 | 
13 | As a user, I want to manage friend requests easily, so that I can quickly accept or decline pending invitations.
14 | 
15 | ## Acceptance Criteria
16 | 
17 | - Display a list of pending friend requests with the user's profile picture, name, and the number of mutual friends.
18 | - Include "Confirm" and "Decline" buttons next to each request for quick action.
19 | - When hovering over the number of mutual friends, display a tooltip with the names of the mutual friends.
20 | - Ensure that the interface is responsive and looks good on various screen sizes.
21 | 
22 | ## Get Started
23 | 
24 | Begin your development with the `index.html` provided in the challenge's folder. You can work on this challenge directly in the [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/friend-request/browser) and use the assets available to you and refer to the design screenshot for visual guidelines. Push your boundaries and remember, perfection comes through practice and iteration.
25 | 
26 | ## Best Practices and Tips
27 | 
28 | - Design Accuracy: Your solution should closely match the layout and style of the provided screenshot.
29 | - Interactivity: Enhance user interaction through JavaScript to elevate the experience beyond a static display.
30 | - Functionality: Ensure that all elements are functional, with attention to detail in the implementation.
31 | - Quality Assurance: Submit a well-coded, clean, and organized solution that adheres to modern web standards.
32 | - Code Quality: Write clean, readable, and well-commented code to maintain best practices in development.
33 | - Responsive Design: Ensure your challenge solution is responsive and functions well on various devices.
34 | - Performance Optimization: Optimize image sizes and script efficiency to improve the loading times and responsiveness of your code.
35 | 


--------------------------------------------------------------------------------
/day-50/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-50/design.png


--------------------------------------------------------------------------------
/day-50/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Friend Request challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Friend Request challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-51/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-51/design.png


--------------------------------------------------------------------------------
/day-51/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Download App challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Download App challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-52/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-52/design.png


--------------------------------------------------------------------------------
/day-52/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Language App challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Language App challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-53/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-53/design.png


--------------------------------------------------------------------------------
/day-53/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Billing Page challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Billing Page challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-54/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-54/design.png


--------------------------------------------------------------------------------
/day-54/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Article Summary challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Article Summary challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-55/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-55/design.png


--------------------------------------------------------------------------------
/day-55/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Progress Bars challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Progress Bars challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-56/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-56/design.png


--------------------------------------------------------------------------------
/day-56/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Project Roadmap challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Project Roadmap challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-57/README.md:
--------------------------------------------------------------------------------
 1 | # Challenge Name: Game Profile
 2 | 
 3 | You can work on this challenge directly in [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/game-profile/browser).
 4 | 
 5 | ![Game Profile Design](./design.png)
 6 | 
 7 | ## Introduction
 8 | 
 9 | This is an opportunity to apply your skills in HTML, CSS, and JavaScript to create a solution that reflects the design. We encourage creativity and uniqueness while adhering to the design principles outlined in the challenge.
10 | 
11 | ## User Story
12 | 
13 | As a gamer, I want to view my profile with detailed statistics and achievements, so that I can track my progress and showcase my accomplishments.
14 | 
15 | ## Acceptance Criteria
16 | 
17 | - Display the player's profile picture, name, and total points prominently at the top.
18 | - Show key stats including streak days, total wins, and losses.
19 | - Include a section for badges with a "View all" option for expanded details.
20 | - List achievements with progress bars to visually indicate completion.
21 | - The profile should be visually engaging and easy to navigate.
22 | 
23 | ## Get Started
24 | 
25 | Begin your development with the `index.html` provided in the challenge's folder. You can work on this challenge directly in the [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/game-profile/browser) and use the assets available to you and refer to the design screenshot for visual guidelines. Push your boundaries and remember, perfection comes through practice and iteration.
26 | 
27 | ## Best Practices and Tips
28 | 
29 | - Design Accuracy: Your solution should closely match the layout and style of the provided screenshot.
30 | - Interactivity: Enhance user interaction through JavaScript to elevate the experience beyond a static display.
31 | - Functionality: Ensure that all elements are functional, with attention to detail in the implementation.
32 | - Quality Assurance: Submit a well-coded, clean, and organized solution that adheres to modern web standards.
33 | - Code Quality: Write clean, readable, and well-commented code to maintain best practices in development.
34 | - Responsive Design: Ensure your challenge solution is responsive and functions well on various devices.
35 | - Performance Optimization: Optimize image sizes and script efficiency to improve the loading times and responsiveness of your code.
36 | 


--------------------------------------------------------------------------------
/day-57/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-57/design.png


--------------------------------------------------------------------------------
/day-57/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Game Profile challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Game Profile challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-58/README.md:
--------------------------------------------------------------------------------
 1 | # Challenge Name: Create Task
 2 | 
 3 | You can work on this challenge directly in [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/create-task/browser).
 4 | 
 5 | ![Create Task Design](./design.png)
 6 | 
 7 | ## Introduction
 8 | 
 9 | This is an opportunity to apply your skills in HTML, CSS, and JavaScript to create a solution that reflects the design. We encourage creativity and uniqueness while adhering to the design principles outlined in the challenge.
10 | 
11 | ## User Story
12 | 
13 | As a project manager, I want to create and assign tasks with specific details and priorities, so that my team can efficiently manage their work.
14 | 
15 | ## Acceptance Criteria
16 | 
17 | - Allow users to input a task title and set a due date.
18 | - Provide options to choose a color for the task to help with categorization.
19 | - Enable assignment of tasks to multiple team members.
20 | - Include a priority selection with options for Low, Medium, and High.
21 | - Ensure the task can be saved or canceled with clearly labeled buttons.
22 | 
23 | ## Get Started
24 | 
25 | Begin your development with the `index.html` provided in the challenge's folder. You can work on this challenge directly in the [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/create-task/browser) and use the assets available to you and refer to the design screenshot for visual guidelines. Push your boundaries and remember, perfection comes through practice and iteration.
26 | 
27 | ## Best Practices and Tips
28 | 
29 | - Design Accuracy: Your solution should closely match the layout and style of the provided screenshot.
30 | - Interactivity: Enhance user interaction through JavaScript to elevate the experience beyond a static display.
31 | - Functionality: Ensure that all elements are functional, with attention to detail in the implementation.
32 | - Quality Assurance: Submit a well-coded, clean, and organized solution that adheres to modern web standards.
33 | - Code Quality: Write clean, readable, and well-commented code to maintain best practices in development.
34 | - Responsive Design: Ensure your challenge solution is responsive and functions well on various devices.
35 | - Performance Optimization: Optimize image sizes and script efficiency to improve the loading times and responsiveness of your code.
36 | 


--------------------------------------------------------------------------------
/day-58/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-58/design.png


--------------------------------------------------------------------------------
/day-58/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Create Task challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Create Task challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-59/README.md:
--------------------------------------------------------------------------------
 1 | # Challenge Name: Calculate Tip
 2 | 
 3 | You can work on this challenge directly in [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/calculate-tip/browser).
 4 | 
 5 | ![Calculate Tip Design](./design.png)
 6 | 
 7 | ## Introduction
 8 | 
 9 | This is an opportunity to apply your skills in HTML, CSS, and JavaScript to create a solution that reflects the design. We encourage creativity and uniqueness while adhering to the design principles outlined in the challenge.
10 | 
11 | ## User Story
12 | 
13 | As a diner, I want to easily calculate the total bill with a tip and split it among multiple people, so that I can quickly determine how much each person owes.
14 | 
15 | ## Acceptance Criteria
16 | 
17 | - Allow users to input the total bill amount.
18 | - Provide options to select a tip percentage (10%, 15%, 20%, 25%).
19 | - Enable the bill to be split among a specified number of people.
20 | - Display the calculated base amount, tip amount, total amount, and per person cost.
21 | - Include a reset button to clear all inputs and calculations.
22 | 
23 | ## Get Started
24 | 
25 | Begin your development with the `index.html` provided in the challenge's folder. You can work on this challenge directly in the [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/calculate-tip/browser) and use the assets available to you and refer to the design screenshot for visual guidelines. Push your boundaries and remember, perfection comes through practice and iteration.
26 | 
27 | ## Best Practices and Tips
28 | 
29 | - Design Accuracy: Your solution should closely match the layout and style of the provided screenshot.
30 | - Interactivity: Enhance user interaction through JavaScript to elevate the experience beyond a static display.
31 | - Functionality: Ensure that all elements are functional, with attention to detail in the implementation.
32 | - Quality Assurance: Submit a well-coded, clean, and organized solution that adheres to modern web standards.
33 | - Code Quality: Write clean, readable, and well-commented code to maintain best practices in development.
34 | - Responsive Design: Ensure your challenge solution is responsive and functions well on various devices.
35 | - Performance Optimization: Optimize image sizes and script efficiency to improve the loading times and responsiveness of your code.
36 | 


--------------------------------------------------------------------------------
/day-59/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-59/design.png


--------------------------------------------------------------------------------
/day-59/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Calculate Tip challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Calculate Tip challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-60/README.md:
--------------------------------------------------------------------------------
 1 | # Challenge Name: Code Verification
 2 | 
 3 | You can work on this challenge directly in [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/code-verification/browser).
 4 | 
 5 | ![Code Verification Design](./design.png)
 6 | 
 7 | ## Introduction
 8 | 
 9 | This is an opportunity to apply your skills in HTML, CSS, and JavaScript to create a solution that reflects the design. We encourage creativity and uniqueness while adhering to the design principles outlined in the challenge.
10 | 
11 | ## User Story
12 | 
13 | As a user, I want to enter a verification code sent to my email, so I can verify my identity and proceed securely.
14 | 
15 | ## Acceptance Criteria
16 | 
17 | - Display four input fields for entering the verification code digits.
18 | - Show the user's masked email address where the code was sent.
19 | - Include a clickable link to resend the code if the user didn't receive it.
20 | - Provide "Cancel" and "Verify" buttons for the user to either abort the process or confirm the code.
21 | - Ensure the "Verify" button remains inactive until all code fields are filled.
22 | 
23 | ## Get Started
24 | 
25 | Begin your development with the `index.html` provided in the challenge's folder. You can work on this challenge directly in the [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/code-verification/browser) and use the assets available to you and refer to the design screenshot for visual guidelines. Push your boundaries and remember, perfection comes through practice and iteration.
26 | 
27 | ## Best Practices and Tips
28 | 
29 | - Design Accuracy: Your solution should closely match the layout and style of the provided screenshot.
30 | - Interactivity: Enhance user interaction through JavaScript to elevate the experience beyond a static display.
31 | - Functionality: Ensure that all elements are functional, with attention to detail in the implementation.
32 | - Quality Assurance: Submit a well-coded, clean, and organized solution that adheres to modern web standards.
33 | - Code Quality: Write clean, readable, and well-commented code to maintain best practices in development.
34 | - Responsive Design: Ensure your challenge solution is responsive and functions well on various devices.
35 | - Performance Optimization: Optimize image sizes and script efficiency to improve the loading times and responsiveness of your code.
36 | 


--------------------------------------------------------------------------------
/day-60/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-60/design.png


--------------------------------------------------------------------------------
/day-60/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Code Verification challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">
27 |         Code Verification challenge
28 |       </h1>
29 |       <!-- Challenge Introduction -->
30 |       <p class="text">
31 |         The goal is to transform the provided design screenshot into a
32 |         functional, complete challenge.
33 |       </p>
34 | 
35 |       <p class="text-sm border-t pt-6">
36 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
37 |         free to integrate other libraries using their CDNs to enhance your
38 |         challenge.
39 |       </p>
40 |     </div>
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/day-61/README.md:
--------------------------------------------------------------------------------
 1 | # Challenge Name: Flight Ticket
 2 | 
 3 | You can work on this challenge directly in [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/flight-ticket/browser).
 4 | 
 5 | ![Flight Ticket Design](./design.png)
 6 | 
 7 | ## Introduction
 8 | 
 9 | This is an opportunity to apply your skills in HTML, CSS, and JavaScript to create a solution that reflects the design. We encourage creativity and uniqueness while adhering to the design principles outlined in the challenge.
10 | 
11 | ## User Story
12 | 
13 | As a traveler, I want to view my flight ticket details in a clear and organized manner, so I can quickly verify my flight information.
14 | 
15 | ## Acceptance Criteria
16 | 
17 | - Display the departure and arrival cities with their respective times.
18 | - Include a visual indicator for flight duration between the cities.
19 | - Show passenger's full name, seat number, terminal, and class.
20 | - Display the ticket number and a barcode for scanning purposes.
21 | - Ensure the design is visually appealing and the text is easily readable against the background.
22 | 
23 | ## Get Started
24 | 
25 | Begin your development with the `index.html` provided in the challenge's folder. You can work on this challenge directly in the [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/flight-ticket/browser) and use the assets available to you and refer to the design screenshot for visual guidelines. Push your boundaries and remember, perfection comes through practice and iteration.
26 | 
27 | ## Best Practices and Tips
28 | 
29 | - Design Accuracy: Your solution should closely match the layout and style of the provided screenshot.
30 | - Interactivity: Enhance user interaction through JavaScript to elevate the experience beyond a static display.
31 | - Functionality: Ensure that all elements are functional, with attention to detail in the implementation.
32 | - Quality Assurance: Submit a well-coded, clean, and organized solution that adheres to modern web standards.
33 | - Code Quality: Write clean, readable, and well-commented code to maintain best practices in development.
34 | - Responsive Design: Ensure your challenge solution is responsive and functions well on various devices.
35 | - Performance Optimization: Optimize image sizes and script efficiency to improve the loading times and responsiveness of your code.
36 | 


--------------------------------------------------------------------------------
/day-61/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-61/design.png


--------------------------------------------------------------------------------
/day-61/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Flight Ticket challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Flight Ticket challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-62/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-62/design.png


--------------------------------------------------------------------------------
/day-62/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Testimonials challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Testimonials challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-63/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-63/design.png


--------------------------------------------------------------------------------
/day-63/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Weather App challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Weather App challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-64/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-64/design.png


--------------------------------------------------------------------------------
/day-64/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Document Manager challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Document Manager challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-65/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-65/design.png


--------------------------------------------------------------------------------
/day-65/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Interests challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Interests challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-66/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-66/design.png


--------------------------------------------------------------------------------
/day-66/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Navigation UI challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Navigation UI challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-67/README.md:
--------------------------------------------------------------------------------
 1 | # Challenge Name: Select Account
 2 | 
 3 | You can work on this challenge directly in [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/select-account/browser).
 4 | 
 5 | ![Select Account Design](./design.png)
 6 | 
 7 | ## Introduction
 8 | 
 9 | This is an opportunity to apply your skills in HTML, CSS, and JavaScript to create a solution that reflects the design. We encourage creativity and uniqueness while adhering to the design principles outlined in the challenge.
10 | 
11 | ## User Story
12 | 
13 | As a streaming platform user, I want to select my profile or create a new one when logging in, so that I can have a personalized viewing experience.
14 | 
15 | ## Acceptance Criteria
16 | 
17 | - Display existing user profiles with images and names prominently on the screen.
18 | - Include an "Add Profile" button that allows users to create a new profile with a custom image and name.
19 | - Provide an option to manage existing profiles via a "Manage Profiles" button.
20 | - Ensure the layout is clean and responsive across different screen sizes.
21 | 
22 | ## Get Started
23 | 
24 | Begin your development with the `index.html` provided in the challenge's folder. You can work on this challenge directly in the [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/select-account/browser) and use the assets available to you and refer to the design screenshot for visual guidelines. Push your boundaries and remember, perfection comes through practice and iteration.
25 | 
26 | ## Best Practices and Tips
27 | 
28 | - Design Accuracy: Your solution should closely match the layout and style of the provided screenshot.
29 | - Interactivity: Enhance user interaction through JavaScript to elevate the experience beyond a static display.
30 | - Functionality: Ensure that all elements are functional, with attention to detail in the implementation.
31 | - Quality Assurance: Submit a well-coded, clean, and organized solution that adheres to modern web standards.
32 | - Code Quality: Write clean, readable, and well-commented code to maintain best practices in development.
33 | - Responsive Design: Ensure your challenge solution is responsive and functions well on various devices.
34 | - Performance Optimization: Optimize image sizes and script efficiency to improve the loading times and responsiveness of your code.
35 | 


--------------------------------------------------------------------------------
/day-67/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-67/design.png


--------------------------------------------------------------------------------
/day-67/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Select Account challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Select Account challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-68/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-68/design.png


--------------------------------------------------------------------------------
/day-68/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon User Satisfaction challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">
27 |         User Satisfaction challenge
28 |       </h1>
29 |       <!-- Challenge Introduction -->
30 |       <p class="text">
31 |         The goal is to transform the provided design screenshot into a
32 |         functional, complete challenge.
33 |       </p>
34 | 
35 |       <p class="text-sm border-t pt-6">
36 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
37 |         free to integrate other libraries using their CDNs to enhance your
38 |         challenge.
39 |       </p>
40 |     </div>
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/day-69/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-69/design.png


--------------------------------------------------------------------------------
/day-69/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Profile Settings challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Profile Settings challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-70/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-70/design.png


--------------------------------------------------------------------------------
/day-70/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Cookies Banner challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Cookies Banner challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-71/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-71/design.png


--------------------------------------------------------------------------------
/day-71/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Email Client challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Email Client challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-72/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-72/design.png


--------------------------------------------------------------------------------
/day-72/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Image Collections challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">
27 |         Image Collections challenge
28 |       </h1>
29 |       <!-- Challenge Introduction -->
30 |       <p class="text">
31 |         The goal is to transform the provided design screenshot into a
32 |         functional, complete challenge.
33 |       </p>
34 | 
35 |       <p class="text-sm border-t pt-6">
36 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
37 |         free to integrate other libraries using their CDNs to enhance your
38 |         challenge.
39 |       </p>
40 |     </div>
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/day-73/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-73/design.png


--------------------------------------------------------------------------------
/day-73/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Push Notification challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">
27 |         Push Notification challenge
28 |       </h1>
29 |       <!-- Challenge Introduction -->
30 |       <p class="text">
31 |         The goal is to transform the provided design screenshot into a
32 |         functional, complete challenge.
33 |       </p>
34 | 
35 |       <p class="text-sm border-t pt-6">
36 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
37 |         free to integrate other libraries using their CDNs to enhance your
38 |         challenge.
39 |       </p>
40 |     </div>
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/day-74/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-74/design.png


--------------------------------------------------------------------------------
/day-74/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Manage Accounts challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Manage Accounts challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-75/README.md:
--------------------------------------------------------------------------------
 1 | # Challenge Name: Add Shot
 2 | 
 3 | You can work on this challenge directly in [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/add-shot/browser).
 4 | 
 5 | ![Add Shot Design](./design.png)
 6 | 
 7 | ## Introduction
 8 | 
 9 | This is an opportunity to apply your skills in HTML, CSS, and JavaScript to create a solution that reflects the design. We encourage creativity and uniqueness while adhering to the design principles outlined in the challenge.
10 | 
11 | ## User Story
12 | 
13 | As a user, I want to easily add content to a collection, so that I can organize my work and quickly locate it later.
14 | 
15 | ## Acceptance Criteria
16 | 
17 | - Allow users to filter collections using a search bar.
18 | - Display existing collections with a thumbnail, title, and update details.
19 | - Enable users to select one or more collections by checking a box next to the collection.
20 | - Provide an option to create a new collection if none of the existing ones are suitable.
21 | - Include a "Done" button to confirm the action and close the modal.
22 | 
23 | ## Get Started
24 | 
25 | Begin your development with the `index.html` provided in the challenge's folder. You can work on this challenge directly in the [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/add-shot/browser) and use the assets available to you and refer to the design screenshot for visual guidelines. Push your boundaries and remember, perfection comes through practice and iteration.
26 | 
27 | ## Best Practices and Tips
28 | 
29 | - Design Accuracy: Your solution should closely match the layout and style of the provided screenshot.
30 | - Interactivity: Enhance user interaction through JavaScript to elevate the experience beyond a static display.
31 | - Functionality: Ensure that all elements are functional, with attention to detail in the implementation.
32 | - Quality Assurance: Submit a well-coded, clean, and organized solution that adheres to modern web standards.
33 | - Code Quality: Write clean, readable, and well-commented code to maintain best practices in development.
34 | - Responsive Design: Ensure your challenge solution is responsive and functions well on various devices.
35 | - Performance Optimization: Optimize image sizes and script efficiency to improve the loading times and responsiveness of your code.
36 | 


--------------------------------------------------------------------------------
/day-75/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-75/design.png


--------------------------------------------------------------------------------
/day-75/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Add Shot challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Add Shot challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-76/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-76/design.png


--------------------------------------------------------------------------------
/day-76/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon E-book Store challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">E-book Store challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-77/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-77/design.png


--------------------------------------------------------------------------------
/day-77/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon App Integrations challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">App Integrations challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-78/README.md:
--------------------------------------------------------------------------------
 1 | # Challenge Name: Audio Player
 2 | 
 3 | You can work on this challenge directly in [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/audio-player/browser).
 4 | 
 5 | ![Audio Player Design](./design.png)
 6 | 
 7 | ## Introduction
 8 | 
 9 | This is an opportunity to apply your skills in HTML, CSS, and JavaScript to create a solution that reflects the design. We encourage creativity and uniqueness while adhering to the design principles outlined in the challenge.
10 | 
11 | ## User Story
12 | 
13 | As a user, I want to play and control audio tracks directly from a visually appealing player, so that I can easily listen to music or other audio content.
14 | 
15 | ## Acceptance Criteria
16 | 
17 | - Display the current track name and artist below the track's visual representation.
18 | - Include basic playback controls, such as play/pause and a progress bar.
19 | - Show the track's total duration and the current playback time.
20 | - Provide a volume control option within the player.
21 | - Ensure the design is responsive and visually appealing across all devices.
22 | 
23 | ## Get Started
24 | 
25 | Begin your development with the `index.html` provided in the challenge's folder. You can work on this challenge directly in the [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/audio-player/browser) and use the assets available to you and refer to the design screenshot for visual guidelines. Push your boundaries and remember, perfection comes through practice and iteration.
26 | 
27 | ## Best Practices and Tips
28 | 
29 | - Design Accuracy: Your solution should closely match the layout and style of the provided screenshot.
30 | - Interactivity: Enhance user interaction through JavaScript to elevate the experience beyond a static display.
31 | - Functionality: Ensure that all elements are functional, with attention to detail in the implementation.
32 | - Quality Assurance: Submit a well-coded, clean, and organized solution that adheres to modern web standards.
33 | - Code Quality: Write clean, readable, and well-commented code to maintain best practices in development.
34 | - Responsive Design: Ensure your challenge solution is responsive and functions well on various devices.
35 | - Performance Optimization: Optimize image sizes and script efficiency to improve the loading times and responsiveness of your code.
36 | 


--------------------------------------------------------------------------------
/day-78/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-78/design.png


--------------------------------------------------------------------------------
/day-78/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Audio Player challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Audio Player challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-79/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-79/design.png


--------------------------------------------------------------------------------
/day-79/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Payment Plan challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Payment Plan challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-80/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-80/design.png


--------------------------------------------------------------------------------
/day-80/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Articles Grid challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Articles Grid challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-81/README.md:
--------------------------------------------------------------------------------
 1 | # Challenge Name: Delivery Details
 2 | 
 3 | You can work on this challenge directly in [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/delivery-details/browser).
 4 | 
 5 | ![Delivery Details Design](./design.png)
 6 | 
 7 | ## Introduction
 8 | 
 9 | This is an opportunity to apply your skills in HTML, CSS, and JavaScript to create a solution that reflects the design. We encourage creativity and uniqueness while adhering to the design principles outlined in the challenge.
10 | 
11 | ## User Story
12 | 
13 | As a customer, I want to view detailed tracking information for my order, so that I can keep track of its delivery status in real-time.
14 | 
15 | ## Acceptance Criteria
16 | 
17 | - Display the tracking number, seller name, and shipping start date.
18 | - Include a timeline with all the key events from order placement to delivery.
19 | - Each event in the tracking history should include a date, time, and a brief description.
20 | - The current status should be visually highlighted on the timeline.
21 | - The design should be clear and easy to read on both desktop and mobile devices.
22 | 
23 | ## Get Started
24 | 
25 | Begin your development with the `index.html` provided in the challenge's folder. You can work on this challenge directly in the [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/delivery-details/browser) and use the assets available to you and refer to the design screenshot for visual guidelines. Push your boundaries and remember, perfection comes through practice and iteration.
26 | 
27 | ## Best Practices and Tips
28 | 
29 | - Design Accuracy: Your solution should closely match the layout and style of the provided screenshot.
30 | - Interactivity: Enhance user interaction through JavaScript to elevate the experience beyond a static display.
31 | - Functionality: Ensure that all elements are functional, with attention to detail in the implementation.
32 | - Quality Assurance: Submit a well-coded, clean, and organized solution that adheres to modern web standards.
33 | - Code Quality: Write clean, readable, and well-commented code to maintain best practices in development.
34 | - Responsive Design: Ensure your challenge solution is responsive and functions well on various devices.
35 | - Performance Optimization: Optimize image sizes and script efficiency to improve the loading times and responsiveness of your code.
36 | 


--------------------------------------------------------------------------------
/day-81/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-81/design.png


--------------------------------------------------------------------------------
/day-81/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Delivery Details challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Delivery Details challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-82/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-82/design.png


--------------------------------------------------------------------------------
/day-82/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Color Palette challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Color Palette challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-83/README.md:
--------------------------------------------------------------------------------
 1 | # Challenge Name: Socials Share
 2 | 
 3 | You can work on this challenge directly in [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/socials-share/browser).
 4 | 
 5 | ![Socials Share Design](./design.png)
 6 | 
 7 | ## Introduction
 8 | 
 9 | This is an opportunity to apply your skills in HTML, CSS, and JavaScript to create a solution that reflects the design. We encourage creativity and uniqueness while adhering to the design principles outlined in the challenge.
10 | 
11 | ## User Story
12 | 
13 | As a user, I want to easily share content on various social media platforms, so that I can quickly spread information with my network.
14 | 
15 | ## Acceptance Criteria
16 | 
17 | - Display a share icon that, when clicked, reveals social media sharing options and a "Copy Link" feature.
18 | - Include popular social media platforms such as Google+, Facebook, Instagram, Pinterest, and LinkedIn.
19 | - Provide a visual indicator that confirms the link has been copied to the clipboard.
20 | - Ensure the sharing options and copy feature are responsive and work seamlessly across different devices.
21 | 
22 | ## Get Started
23 | 
24 | Begin your development with the `index.html` provided in the challenge's folder. You can work on this challenge directly in the [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/socials-share/browser) and use the assets available to you and refer to the design screenshot for visual guidelines. Push your boundaries and remember, perfection comes through practice and iteration.
25 | 
26 | ## Best Practices and Tips
27 | 
28 | - Design Accuracy: Your solution should closely match the layout and style of the provided screenshot.
29 | - Interactivity: Enhance user interaction through JavaScript to elevate the experience beyond a static display.
30 | - Functionality: Ensure that all elements are functional, with attention to detail in the implementation.
31 | - Quality Assurance: Submit a well-coded, clean, and organized solution that adheres to modern web standards.
32 | - Code Quality: Write clean, readable, and well-commented code to maintain best practices in development.
33 | - Responsive Design: Ensure your challenge solution is responsive and functions well on various devices.
34 | - Performance Optimization: Optimize image sizes and script efficiency to improve the loading times and responsiveness of your code.
35 | 


--------------------------------------------------------------------------------
/day-83/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-83/design.png


--------------------------------------------------------------------------------
/day-83/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Socials Share challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Socials Share challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-84/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-84/design.png


--------------------------------------------------------------------------------
/day-84/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Buy a Coffee challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Buy a Coffee challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-85/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-85/design.png


--------------------------------------------------------------------------------
/day-85/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Customer Reviews challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Customer Reviews challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-86/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-86/design.png


--------------------------------------------------------------------------------
/day-86/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon ChatBot challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">ChatBot challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-87/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-87/design.png


--------------------------------------------------------------------------------
/day-87/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Charts challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Charts challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-88/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-88/design.png


--------------------------------------------------------------------------------
/day-88/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Charts challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Charts challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-89/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-89/design.png


--------------------------------------------------------------------------------
/day-89/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Voice Call challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Voice Call challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-90/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-90/design.png


--------------------------------------------------------------------------------
/day-90/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon My Devices challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">My Devices challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-91/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-91/design.png


--------------------------------------------------------------------------------
/day-91/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon QuizApp challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">QuizApp challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-92/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-92/design.png


--------------------------------------------------------------------------------
/day-92/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Search Filters challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Search Filters challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-93/README.md:
--------------------------------------------------------------------------------
 1 | # Challenge Name: Task Manager
 2 | 
 3 | You can work on this challenge directly in [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/task-manager/browser).
 4 | 
 5 | ![Task Manager Design](./design.png)
 6 | 
 7 | ## Introduction
 8 | 
 9 | This is an opportunity to apply your skills in HTML, CSS, and JavaScript to create a solution that reflects the design. We encourage creativity and uniqueness while adhering to the design principles outlined in the challenge.
10 | 
11 | ## User Story
12 | 
13 | As a user of a daily planning app, I want to easily view, create, and manage my daily tasks on a mobile interface so that I can stay organized and on top of my schedule.
14 | 
15 | ## Acceptance Criteria
16 | 
17 | - Display current date, day of the week, and tasks.
18 | - Horizontal date selector with the current day highlighted.
19 | - Tasks show name, time, and icons, with quick edit and delete buttons.
20 | - Input for task name, start and end times, and reminders.
21 | - "Create Task" button to save tasks.
22 | - Dark theme with clear icons and consistent layout.
23 | 
24 | ## Get Started
25 | 
26 | Begin your development with the `index.html` provided in the challenge's folder. You can work on this challenge directly in the [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/task-manager/browser) and use the assets available to you and refer to the design screenshot for visual guidelines. Push your boundaries and remember, perfection comes through practice and iteration.
27 | 
28 | ## Best Practices and Tips
29 | 
30 | - Design Accuracy: Your solution should closely match the layout and style of the provided screenshot.
31 | - Interactivity: Enhance user interaction through JavaScript to elevate the experience beyond a static display.
32 | - Functionality: Ensure that all elements are functional, with attention to detail in the implementation.
33 | - Quality Assurance: Submit a well-coded, clean, and organized solution that adheres to modern web standards.
34 | - Code Quality: Write clean, readable, and well-commented code to maintain best practices in development.
35 | - Responsive Design: Ensure your challenge solution is responsive and functions well on various devices.
36 | - Performance Optimization: Optimize image sizes and script efficiency to improve the loading times and responsiveness of your code.
37 | 


--------------------------------------------------------------------------------
/day-93/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-93/design.png


--------------------------------------------------------------------------------
/day-93/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Task Manager challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Task Manager challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-94/README.md:
--------------------------------------------------------------------------------
 1 | # Challenge Name: Time Widget
 2 | 
 3 | You can work on this challenge directly in [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/time-widget/browser).
 4 | 
 5 | ![Time Widget Design](./design.png)
 6 | 
 7 | ## Introduction
 8 | 
 9 | This is an opportunity to apply your skills in HTML, CSS, and JavaScript to create a solution that reflects the design. We encourage creativity and uniqueness while adhering to the design principles outlined in the challenge.
10 | 
11 | ## User Story
12 | 
13 | As a user, I want a simple and interactive timer widget, so that I can easily keep track of time for tasks or activities.
14 | 
15 | ## Acceptance Criteria
16 | 
17 | - Users can start, pause, and restart the timer.
18 | - Users can see the countdown displayed in minutes and seconds.
19 | - Users can add one minute to the timer with a single click.
20 | - Users can switch between different modes or views using icons.
21 | 
22 | ## Get Started
23 | 
24 | Begin your development with the `index.html` provided in the challenge's folder. You can work on this challenge directly in the [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/time-widget/browser) and use the assets available to you and refer to the design screenshot for visual guidelines. Push your boundaries and remember, perfection comes through practice and iteration.
25 | 
26 | ## Best Practices and Tips
27 | 
28 | - Design Accuracy: Your solution should closely match the layout and style of the provided screenshot.
29 | - Interactivity: Enhance user interaction through JavaScript to elevate the experience beyond a static display.
30 | - Functionality: Ensure that all elements are functional, with attention to detail in the implementation.
31 | - Quality Assurance: Submit a well-coded, clean, and organized solution that adheres to modern web standards.
32 | - Code Quality: Write clean, readable, and well-commented code to maintain best practices in development.
33 | - Responsive Design: Ensure your challenge solution is responsive and functions well on various devices.
34 | - Performance Optimization: Optimize image sizes and script efficiency to improve the loading times and responsiveness of your code.
35 | 


--------------------------------------------------------------------------------
/day-94/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-94/design.png


--------------------------------------------------------------------------------
/day-94/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Time Widget challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Time Widget challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-95/README.md:
--------------------------------------------------------------------------------
 1 | # Challenge Name: 404
 2 | 
 3 | You can work on this challenge directly in [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/404/browser).
 4 | 
 5 | ![404 Design](./design.png)
 6 | 
 7 | ## Introduction
 8 | 
 9 | This is an opportunity to apply your skills in HTML, CSS, and JavaScript to create a solution that reflects the design. We encourage creativity and uniqueness while adhering to the design principles outlined in the challenge.
10 | 
11 | ## User Story
12 | 
13 | As a user, I want a clear and friendly 404 error page, so that I can easily find my way back to the main sections of the website when I encounter a broken link or incorrect URL.
14 | 
15 | ## Acceptance Criteria
16 | 
17 | - The page should display a prominent "404" error message.
18 | - The page should include a friendly message explaining the error.
19 | - Users should see options to navigate back to the homepage or visit the help center.
20 | - The page should maintain consistent branding with the rest of the website.
21 | 
22 | ## Get Started
23 | 
24 | Begin your development with the `index.html` provided in the challenge's folder. You can work on this challenge directly in the [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/404/browser) and use the assets available to you and refer to the design screenshot for visual guidelines. Push your boundaries and remember, perfection comes through practice and iteration.
25 | 
26 | ## Best Practices and Tips
27 | 
28 | - Design Accuracy: Your solution should closely match the layout and style of the provided screenshot.
29 | - Interactivity: Enhance user interaction through JavaScript to elevate the experience beyond a static display.
30 | - Functionality: Ensure that all elements are functional, with attention to detail in the implementation.
31 | - Quality Assurance: Submit a well-coded, clean, and organized solution that adheres to modern web standards.
32 | - Code Quality: Write clean, readable, and well-commented code to maintain best practices in development.
33 | - Responsive Design: Ensure your challenge solution is responsive and functions well on various devices.
34 | - Performance Optimization: Optimize image sizes and script efficiency to improve the loading times and responsiveness of your code.
35 | 


--------------------------------------------------------------------------------
/day-95/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-95/design.png


--------------------------------------------------------------------------------
/day-95/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon 404 challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">404 challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-96/README.md:
--------------------------------------------------------------------------------
 1 | # Challenge Name: Subscribe Card
 2 | 
 3 | You can work on this challenge directly in [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/subscribe-card/browser).
 4 | 
 5 | ![Subscribe Card Design](./design.png)
 6 | 
 7 | ## Introduction
 8 | 
 9 | As a user, I want to easily subscribe to travel-related content through a visually appealing subscription form, so I can receive exclusive travel perks, tips, and experiences directly in my inbox.
10 | 
11 | ## User Story
12 | 
13 | As a user, I want a clear and friendly Subscribe Card error page, so that I can easily find my way back to the main sections of the website when I encounter a broken link or incorrect URL.
14 | 
15 | ## Acceptance Criteria
16 | 
17 | - The page should include a visually engaging image related to travel.
18 | - A clear and compelling headline should invite users to subscribe.
19 | - The form should have an input field for users to enter their email address.
20 | - A "Subscribe" button should be prominently displayed for easy interaction.
21 | - The design should be attractive and aligned with the overall branding.
22 | 
23 | ## Get Started
24 | 
25 | Begin your development with the `index.html` provided in the challenge's folder. You can work on this challenge directly in the [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/subscribe-card/browser) and use the assets available to you and refer to the design screenshot for visual guidelines. Push your boundaries and remember, perfection comes through practice and iteration.
26 | 
27 | ## Best Practices and Tips
28 | 
29 | - Design Accuracy: Your solution should closely match the layout and style of the provided screenshot.
30 | - Interactivity: Enhance user interaction through JavaScript to elevate the experience beyond a static display.
31 | - Functionality: Ensure that all elements are functional, with attention to detail in the implementation.
32 | - Quality Assurance: Submit a well-coded, clean, and organized solution that adheres to modern web standards.
33 | - Code Quality: Write clean, readable, and well-commented code to maintain best practices in development.
34 | - Responsive Design: Ensure your challenge solution is responsive and functions well on various devices.
35 | - Performance Optimization: Optimize image sizes and script efficiency to improve the loading times and responsiveness of your code.
36 | 


--------------------------------------------------------------------------------
/day-96/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-96/design.png


--------------------------------------------------------------------------------
/day-96/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Subscribe Card challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Subscribe Card challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-97/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-97/design.png


--------------------------------------------------------------------------------
/day-97/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Design Assets challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Design Assets challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-98/README.md:
--------------------------------------------------------------------------------
 1 | # Challenge Name: Voice Recording
 2 | 
 3 | You can work on this challenge directly in [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/voice-recording/browser).
 4 | 
 5 | ![Voice Recording Design](./design.png)
 6 | 
 7 | ## Introduction
 8 | 
 9 | As a user, I want to easily subscribe to travel-related content through a visually appealing subscription form, so I can receive exclusive travel perks, tips, and experiences directly in my inbox.
10 | 
11 | ## User Story
12 | 
13 | As a user, I want to record and manage my voice recordings easily so that I can save, review, and share my audio notes.
14 | 
15 | ## Acceptance Criteria
16 | 
17 | - Users can start, pause, and stop a voice recording.
18 | - A visual timer displays the recording duration.
19 | - Users can discard or save a recording after stopping.
20 | - Saved recordings are listed with details such as date, time, and duration.
21 | - Users can play, share, or delete recordings from the list.
22 | - The interface should include a clear button to start a new recording.
23 | 
24 | ## Get Started
25 | 
26 | Begin your development with the `index.html` provided in the challenge's folder. You can work on this challenge directly in the [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/voice-recording/browser) and use the assets available to you and refer to the design screenshot for visual guidelines. Push your boundaries and remember, perfection comes through practice and iteration.
27 | 
28 | ## Best Practices and Tips
29 | 
30 | - Design Accuracy: Your solution should closely match the layout and style of the provided screenshot.
31 | - Interactivity: Enhance user interaction through JavaScript to elevate the experience beyond a static display.
32 | - Functionality: Ensure that all elements are functional, with attention to detail in the implementation.
33 | - Quality Assurance: Submit a well-coded, clean, and organized solution that adheres to modern web standards.
34 | - Code Quality: Write clean, readable, and well-commented code to maintain best practices in development.
35 | - Responsive Design: Ensure your challenge solution is responsive and functions well on various devices.
36 | - Performance Optimization: Optimize image sizes and script efficiency to improve the loading times and responsiveness of your code.
37 | 


--------------------------------------------------------------------------------
/day-98/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-98/design.png


--------------------------------------------------------------------------------
/day-98/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Voice Recording challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Voice Recording challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/day-99/README.md:
--------------------------------------------------------------------------------
 1 | # Challenge Name: Columns Card
 2 | 
 3 | You can work on this challenge directly in [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/columns-card/browser).
 4 | 
 5 | ![Columns Card Design](./design.png)
 6 | 
 7 | ## Introduction
 8 | 
 9 | As a user, I want to easily subscribe to travel-related content through a visually appealing subscription form, so I can receive exclusive travel perks, tips, and experiences directly in my inbox.
10 | 
11 | ## User Story
12 | 
13 | As a user, I want to explore different categories of resources, tools, and community features, so I can find what best suits my needs.
14 | 
15 | ## Acceptance Criteria
16 | 
17 | - Users can view three distinct sections highlighting different offerings: Design Assets, Efficiency-Boosting Tools, and Community Collaboration.
18 | - Each section includes a title, brief description, and a "Learn More" button.
19 | - Clicking "Learn More" should navigate users to a detailed page for that specific offering.
20 | - The sections are clearly separated by color for easy distinction.
21 | 
22 | ## Get Started
23 | 
24 | Begin your development with the `index.html` provided in the challenge's folder. You can work on this challenge directly in the [BigDevSoon Code Editor](https://app.bigdevsoon.me/challenges/columns-card/browser) and use the assets available to you and refer to the design screenshot for visual guidelines. Push your boundaries and remember, perfection comes through practice and iteration.
25 | 
26 | ## Best Practices and Tips
27 | 
28 | - Design Accuracy: Your solution should closely match the layout and style of the provided screenshot.
29 | - Interactivity: Enhance user interaction through JavaScript to elevate the experience beyond a static display.
30 | - Functionality: Ensure that all elements are functional, with attention to detail in the implementation.
31 | - Quality Assurance: Submit a well-coded, clean, and organized solution that adheres to modern web standards.
32 | - Code Quality: Write clean, readable, and well-commented code to maintain best practices in development.
33 | - Responsive Design: Ensure your challenge solution is responsive and functions well on various devices.
34 | - Performance Optimization: Optimize image sizes and script efficiency to improve the loading times and responsiveness of your code.
35 | 


--------------------------------------------------------------------------------
/day-99/design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigdevsoon/100-days-of-code/213d9fc3144aa2c829dc83985344c5578e66aaa8/day-99/design.png


--------------------------------------------------------------------------------
/day-99/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Our unique tag to identify the solution -->
 5 |     <bds />
 6 |     <meta charset="UTF-8" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>BigDevSoon Columns Card challenge</title>
 9 | 
10 |     <!-- TailwindCSS for styling -->
11 |     <script src="https://cdn.tailwindcss.com"></script>
12 |   </head>
13 | 
14 |   <body
15 |     class="bg-gray-900 flex flex-col items-center justify-center min-h-screen"
16 |   >
17 |     <div
18 |       class="bg-white text-gray-800 p-8 space-y-4 shadow rounded-xl max-w-md md:max-w-lg"
19 |     >
20 |       <!-- Logo and Title -->
21 |       <img
22 |         src="https://mqzzwgavxmdmqvivwgez.supabase.co/storage/v1/object/public/previews/logo-challenge-template.svg"
23 |         alt="BigDevSoon Logo"
24 |         class="w-150 mx-auto"
25 |       />
26 |       <h1 class="text-2xl font-bold text-center">Columns Card challenge</h1>
27 |       <!-- Challenge Introduction -->
28 |       <p class="text">
29 |         The goal is to transform the provided design screenshot into a
30 |         functional, complete challenge.
31 |       </p>
32 | 
33 |       <p class="text-sm border-t pt-6">
34 |         <strong>Tip</strong>: This example uses TailwindCSS for styling. Feel
35 |         free to integrate other libraries using their CDNs to enhance your
36 |         challenge.
37 |       </p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


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