├── Chapter 0 ├── .vscode │ └── settings.json ├── harry.txt ├── index.html └── main.html ├── Chapter 1 - PS ├── 01_problem1.html ├── 02_problem2.html └── myhtml.html ├── Chapter 1 ├── .vscode │ └── settings.json ├── ai.html └── index.html ├── Chapter 2 - PS ├── 01_problem1.html ├── 02_problem2.html ├── 03_problem3.html ├── 04_problem4.html └── 05_problem5.html ├── Chapter 2 ├── 3.jpg ├── bigsmall.html ├── bolditalic.html ├── headings.html ├── images.html ├── main.html └── pre.html ├── Chapter 3 - PS ├── 01_problem1.html ├── 02_problem2.html └── 03_problem3.html ├── Chapter 3 ├── layout.html └── pages │ └── about.html ├── Chapter 4 - PS ├── 01_problem1.html ├── 02_problem2.html ├── 03_problem3.html ├── 04_problem4.html ├── style.css └── video.mp4 ├── Chapter 4 ├── 01_lists.html ├── 02_tables.html ├── 03_forms.html ├── 04_videos.html └── video.mp4 ├── Chapter 5 ├── favicon.png └── index.html ├── Project 1 ├── css │ └── style.css ├── img │ ├── bg.png │ └── logo.png ├── index.html ├── investor.html └── js │ └── script.js ├── Project 2 ├── about.html ├── assets │ └── images │ │ ├── profile.png │ │ └── profile2.png ├── css │ └── style.css ├── index.html ├── resume.html ├── services.html └── skills.html └── Ultimate HTML handbook.pdf /Chapter 0/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "pieces.cloudCapabilities": "Blended", 3 | "pieces.telemetry": true 4 | } -------------------------------------------------------------------------------- /Chapter 0/harry.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithHarry/The-Ultimate-HTML-Course/5f6a50d51aef6fb89b09bdea07575b6d61a529b4/Chapter 0/harry.txt -------------------------------------------------------------------------------- /Chapter 0/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | harry 10 | 11 | -------------------------------------------------------------------------------- /Chapter 0/main.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithHarry/The-Ultimate-HTML-Course/5f6a50d51aef6fb89b09bdea07575b6d61a529b4/Chapter 0/main.html -------------------------------------------------------------------------------- /Chapter 1 - PS/01_problem1.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithHarry/The-Ultimate-HTML-Course/5f6a50d51aef6fb89b09bdea07575b6d61a529b4/Chapter 1 - PS/01_problem1.html -------------------------------------------------------------------------------- /Chapter 1 - PS/myhtml.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | This is my html from notepad 10 | 11 | -------------------------------------------------------------------------------- /Chapter 1/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "pieces.cloudCapabilities": "Blended", 3 | "pieces.telemetry": true 4 | } -------------------------------------------------------------------------------- /Chapter 1/ai.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Simple Links Page with Clock 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

Useful Links

16 |
--:--:--
17 |
18 | 19 | 25 | 26 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Chapter 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | This is my first ever website 10 | image here 11 | 12 | 13 | -------------------------------------------------------------------------------- /Chapter 2 - PS/01_problem1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

The Ultimate HTML Course

10 |

Introduction

11 |

Html is great and its a nice language

12 |

History of HTML

13 |

Tim Berners lee ....

14 | 15 | -------------------------------------------------------------------------------- /Chapter 2 - PS/02_problem2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | PC Wallpapers 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Chapter 2 - PS/03_problem3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML Book 7 | 8 | 9 |

About HTML

10 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe nisi molestiae facere velit unde, nostrum porro possimus minima accusamus maxime cupiditate dolores commodi quia odio enim sunt libero rem repellat cumque architecto reprehenderit magnam.

11 |
12 | 13 | hey
Harry 14 | 15 | -------------------------------------------------------------------------------- /Chapter 2 - PS/04_problem4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Chemistry Equation 7 | 8 | 9 | C + O2 = CO2 10 | 11 | -------------------------------------------------------------------------------- /Chapter 2 - PS/05_problem5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Akshay Kumar - Wikipedia 7 | 8 | 9 |

Akshay Kumar

10 |
11 |

Akshay Hari Om Bhatia[1] (born Rajiv Hari Om Bhatia; 9 September 1967[2]), known professionally as Akshay Kumar (pronounced [əkˈʂəj kʊˈmɑːɾ]), is an Indian actor and film producer working in Hindi cinema. Referred to in the media as "Khiladi Kumar",[3][4] through his career spanning over 30 years, Kumar has appeared in over 150 films and has won several awards, including one National Film Award and two Filmfare Awards. He received the Padma Shri, India's fourth-highest civilian honour, from the Government of India in 2009. Kumar is one of the most prolific actors in Indian cinema.[5][6] Forbes included Kumar in their lists of both highest-paid celebrities and highest-paid actors in the world from 2015 to 2020.[7][8] Between 2019 and 2020, he was the only Indian on both lists.[9][10][11]

12 | 13 |

Kumar began his career in 1991 with Saugandh and had his first commercial success a year later with the action thriller Khiladi. The film established him as an action star in the 1990s and led to several films in the Khiladi film series, in addition to other action films such as Mohra (1994) and Jaanwar (1999). Although his early tryst with romance in Yeh Dillagi (1994) was positively received, it was in the next decade that Kumar expanded his range of roles. He gained recognition for the romantic films Dhadkan (2000), Andaaz (2003), Namastey London (2007), and for his slapstick comic performances in several films including Hera Pheri (2000), Mujhse Shaadi Karogi (2004), Phir Hera Pheri (2006), Bhool Bhulaiyaa (2007), and Singh Is Kinng (2008). Kumar won Filmfare Awards for his negative role in Ajnabee (2001) and his comic performance in Garam Masala (2005).

14 | 15 | -------------------------------------------------------------------------------- /Chapter 2/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithHarry/The-Ultimate-HTML-Course/5f6a50d51aef6fb89b09bdea07575b6d61a529b4/Chapter 2/3.jpg -------------------------------------------------------------------------------- /Chapter 2/bigsmall.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Big Small 8 | 9 | 10 | 11 | Hello world 12 | Hello world 13 |
14 | 15 | this is subscript. 16 | this is superscript. 17 | H2O 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Chapter 2/bolditalic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Bold italic and underline 8 | 9 | 10 | 11 | This is bold 12 | This is italic 13 | This is underline 14 | 15 | 16 | -------------------------------------------------------------------------------- /Chapter 2/headings.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Headings 8 | 9 | 10 | 11 |

Most important heading

12 |

Another heading H2

13 |

Another heading H3

14 |

Another heading H4

15 |
Another heading H5
16 |
Another heading H6
17 | 18 |

I am a paragraph

19 | 20 | 21 | -------------------------------------------------------------------------------- /Chapter 2/images.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Images 7 | 8 | 9 |

Images of flowers

10 |

Images of Lotus

11 | lotus image 12 |
13 | harry 14 | 15 | -------------------------------------------------------------------------------- /Chapter 2/main.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | If you want to go to google, click here 10 | 11 | -------------------------------------------------------------------------------- /Chapter 2/pre.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Pre 7 | 8 | 9 | 
10 |         Hey
11 |         I 
12 |         am         good
13 |
14 | 15 | -------------------------------------------------------------------------------- /Chapter 3 - PS/01_problem1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Zomato - Food delivery at your doorstep 8 | 82 | 83 | 84 | 85 |
86 |
Zomato
87 |
88 | Home 89 | About 90 | Contact 91 |
92 |
93 | 94 |
95 | 96 |
97 | Order food anytime, anywhere 98 |
99 |

100 | Bakery food near me Beverages food near meBurger food near meCafe food near meChinese food near meCoffee 101 | food near meDesserts food near meIce Cream food near meItalian food near meNorth Indian food near mePasta 102 | food near mePizza food near meRoast Chicken food near meSalad food near meSandwich food near meShake food 103 | near meSouth Indian food near meStreet food near meTea food near meWraps food near me 104 |

105 |
106 | 107 | 108 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /Chapter 3 - PS/02_problem2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Chapter 3 - PS/03_problem3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Your Favorite Bookmarks 7 | 8 | 9 |

Your favorite websites

10 | Google 11 | Facebook 12 | Linkedin 13 | YouTube 14 | Instagram 15 | 16 | -------------------------------------------------------------------------------- /Chapter 3/layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | BlogPage - CodeWithHarry's Blog 8 | 9 | 10 | 11 |
12 | 18 |
19 | 20 | 21 |
22 | 23 |
24 | 25 |
26 | 27 |
28 | I am a content inside div 29 |
30 |
31 | I am another div 32 |
33 | 34 | 35 | I am a content inside span 36 | 37 | 38 | I am another span 39 | 40 |
41 |
42 | 43 | 46 |
47 | 48 | 49 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /Chapter 3/pages/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | I am about 10 | 11 | -------------------------------------------------------------------------------- /Chapter 4 - PS/01_problem1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Video 8 | 9 | 10 | 11 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Chapter 4 - PS/02_problem2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Chapter 4 - PS/03_problem3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | TravelStud.com - Book your travel to Bali 7 | 8 | 9 | 10 |

Travel Booking form

11 |
12 |
13 | 14 | 15 |
16 | 17 |
18 | 19 | 20 |
21 | 22 |
23 | 24 | 25 |
26 | 27 |
28 | 29 | 30 |
31 | 32 |
33 | 34 | 35 |
36 |
37 | 38 |
39 |
40 | 41 | -------------------------------------------------------------------------------- /Chapter 4 - PS/04_problem4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 |
NameScoreMatch
Virat Kohli34IPL 2024
Rohit Sharma74IPL 2024
Manish Pandey54IPL 2023
98 | 99 | 100 | -------------------------------------------------------------------------------- /Chapter 4 - PS/style.css: -------------------------------------------------------------------------------- 1 | /* General Styles */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 10 | background-color: #f0f0f0; 11 | display: flex; 12 | flex-direction: column; 13 | justify-content: center; 14 | align-items: center; 15 | height: 100vh; 16 | padding: 20px; 17 | } 18 | 19 | h1 { 20 | text-align: center; 21 | color: #333; 22 | font-size: 24px; 23 | margin-bottom: 20px; 24 | } 25 | 26 | /* Form Container */ 27 | form { 28 | background-color: #fff; 29 | padding: 30px; 30 | border-radius: 10px; 31 | box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2); 32 | width: 100%; 33 | max-width: 450px; 34 | } 35 | 36 | /* Form Elements */ 37 | form div { 38 | margin-bottom: 20px; 39 | } 40 | 41 | label { 42 | display: block; 43 | margin-bottom: 8px; 44 | font-weight: bold; 45 | color: #555; 46 | font-size: 14px; 47 | } 48 | 49 | input[type="text"], input[type="number"], input[type="email"], input[type="phone"], textarea { 50 | width: 100%; 51 | padding: 12px; 52 | border: 1px solid #ccc; 53 | border-radius: 6px; 54 | font-size: 16px; 55 | transition: border-color 0.3s ease; 56 | background-color: #fafafa; 57 | } 58 | 59 | input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="phone"]:focus, textarea:focus { 60 | border-color: #3498db; 61 | outline: none; 62 | } 63 | 64 | textarea { 65 | resize: vertical; 66 | height: 120px; 67 | } 68 | 69 | /* Submit Button */ 70 | button { 71 | width: 100%; 72 | padding: 12px; 73 | background-color: #3498db; 74 | color: #fff; 75 | border: none; 76 | border-radius: 6px; 77 | font-size: 16px; 78 | cursor: pointer; 79 | transition: background-color 0.3s ease; 80 | } 81 | 82 | button:hover { 83 | background-color: #2980b9; 84 | } 85 | 86 | /* Form Animation */ 87 | form { 88 | animation: fadeIn 1s ease-in-out; 89 | } 90 | 91 | @keyframes fadeIn { 92 | from { 93 | opacity: 0; 94 | transform: translateY(20px); 95 | } 96 | to { 97 | opacity: 1; 98 | transform: translateY(0); 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /Chapter 4 - PS/video.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithHarry/The-Ultimate-HTML-Course/5f6a50d51aef6fb89b09bdea07575b6d61a529b4/Chapter 4 - PS/video.mp4 -------------------------------------------------------------------------------- /Chapter 4/01_lists.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Lists - HTML Tutorial 7 | 8 | 9 |

Lists in HTML

10 | 11 |

Steps to Bake a Cake

12 |
    13 |
  1. Preheat the oven to 350°F (175°C).
    2. 14 |
  2. Mix the dry ingredients.
    3. 15 |
  3. Whisk the eggs, milk, and vanilla extract.
    4. 16 |
  4. Combine wet and dry ingredients.
    5. 17 |
  5. Pour the batter into the pan and bake for 30 minutes.
    6. 18 |
  6. Let the cake cool before serving.
    7. 19 |
20 | 21 | 22 |

Groceries to Buy

23 | 30 | 31 | 32 |

Programming Languages

33 |
34 |
Python
35 |
A high-level, interpreted programming language known for its ease of use.
36 | 37 |
JavaScript
38 |
A scripting language primarily used for dynamic web pages.
39 | 40 |
HTML
41 |
The standard markup language for creating web pages.
42 | 43 |
CSS
44 |
A stylesheet language used to describe the presentation of a document written in HTML.
45 |
46 | 47 | -------------------------------------------------------------------------------- /Chapter 4/02_tables.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tables - HTML 8 | 42 | 43 | 44 | 45 | 46 |

Tables in HTML

47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 |
NameRoleSalary
HarrySoftware Developer$70000
RohanSoftware Helper$7
ShivamML Engineer$100
RenukaAI Engineer$100000
ThankYou
86 | 87 | 88 | -------------------------------------------------------------------------------- /Chapter 4/03_forms.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML Forms 7 | 97 | 98 | 99 | 100 | 101 | 102 |
103 | 104 |
105 | 106 | 107 |
108 | 109 | 110 |
111 | 112 | 113 |
114 | 115 | 116 |
117 | 118 | 119 |
120 | 121 | 122 |
123 | 124 | 125 |
126 | 127 | 128 |
129 | 130 | 131 |
132 | 133 | 134 |
135 | 136 | 142 |
143 | 144 | 145 |
146 |

Subscription Plan

147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 |
156 | 157 | 158 |
159 | 160 | 161 |
162 | 163 | 164 |
165 | 166 | 167 |
168 | 169 | 170 |
171 | 172 |
173 |
174 | 175 | 176 | 177 | 178 | -------------------------------------------------------------------------------- /Chapter 4/04_videos.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Video - HTML 8 | 9 | 10 | 11 | 14 | 15 | 16 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Chapter 4/video.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithHarry/The-Ultimate-HTML-Course/5f6a50d51aef6fb89b09bdea07575b6d61a529b4/Chapter 4/video.mp4 -------------------------------------------------------------------------------- /Chapter 5/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithHarry/The-Ultimate-HTML-Course/5f6a50d51aef6fb89b09bdea07575b6d61a529b4/Chapter 5/favicon.png -------------------------------------------------------------------------------- /Chapter 5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | How to install VS Code on Android - CodeWithHarry 10 | 11 | 12 |
13 | 20 |
21 | 22 | -------------------------------------------------------------------------------- /Project 1/css/style.css: -------------------------------------------------------------------------------- 1 | /* General Reset */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | font-family: Arial, sans-serif; 10 | background-color: #f9f9f9; 11 | color: #333; 12 | line-height: 1.6; 13 | } 14 | 15 | /* Header */ 16 | header { 17 | display: flex; 18 | justify-content: space-between; 19 | align-items: center; 20 | padding: 20px; 21 | background-color: #e23744; 22 | color: white; 23 | } 24 | 25 | .logo img { 26 | height: 50px; 27 | } 28 | 29 | header ul { 30 | display: flex; 31 | list-style: none; 32 | } 33 | 34 | header ul li { 35 | margin-left: 20px; 36 | } 37 | 38 | header ul li a { 39 | color: white; 40 | text-decoration: none; 41 | font-weight: bold; 42 | transition: color 0.3s ease; 43 | } 44 | 45 | header ul li a:hover { 46 | color: #ffd700; 47 | } 48 | 49 | /* Header */ 50 | header { 51 | display: flex; 52 | justify-content: space-between; 53 | align-items: center; 54 | padding: 20px; 55 | background-color: #e23744; 56 | color: white; 57 | } 58 | 59 | .logo img { 60 | height: 30px; /* Reduced size */ 61 | width: auto; /* Maintain aspect ratio */ 62 | } 63 | 64 | header ul { 65 | display: flex; 66 | list-style: none; 67 | } 68 | 69 | header ul li { 70 | margin-left: 20px; 71 | } 72 | 73 | header ul li a { 74 | color: white; 75 | text-decoration: none; 76 | font-weight: bold; 77 | transition: color 0.3s ease; 78 | } 79 | 80 | header ul li a:hover { 81 | color: #ffd700; 82 | } 83 | 84 | /* Main Section */ 85 | main { 86 | padding: 50px; 87 | } 88 | 89 | main section { 90 | text-align: center; 91 | padding: 50px; 92 | margin-bottom: 50px; 93 | border-radius: 10px; 94 | } 95 | 96 | /* First Section (hero section) */ 97 | main section:first-of-type { 98 | background: url('/img/bg.png') no-repeat center center/cover; 99 | color: white; 100 | min-height: 60vh; 101 | display: flex; 102 | flex-direction: column; 103 | justify-content: center; 104 | align-items: center; 105 | } 106 | 107 | main section:first-of-type img { 108 | height: 100px; 109 | } 110 | 111 | main section:first-of-type p { 112 | font-size: 24px; 113 | margin-top: 20px; 114 | } 115 | 116 | main section:first-of-type input { 117 | margin-top: 20px; 118 | padding: 10px; 119 | width: 300px; 120 | border: none; 121 | border-radius: 5px; 122 | font-size: 16px; 123 | outline: none; 124 | } 125 | 126 | /* Second Section (Food Delivery Info) */ 127 | main section:nth-of-type(2) { 128 | background-color: #fff; 129 | box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 130 | color: #333; 131 | } 132 | 133 | main section:nth-of-type(2) h2 { 134 | font-size: 30px; 135 | margin-bottom: 20px; 136 | color: #e23744; 137 | } 138 | 139 | main section:nth-of-type(2) p { 140 | font-size: 18px; 141 | margin-bottom: 20px; 142 | } 143 | 144 | .main-features { 145 | display: flex; 146 | justify-content: space-around; 147 | flex-wrap: wrap; 148 | gap: 20px; 149 | } 150 | 151 | .feature { 152 | width: 250px; 153 | background-color: #e23744; 154 | color: white; 155 | padding: 20px; 156 | border-radius: 10px; 157 | box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 158 | } 159 | 160 | .feature h3 { 161 | font-size: 22px; 162 | margin-bottom: 10px; 163 | } 164 | 165 | .feature p { 166 | font-size: 16px; 167 | } 168 | 169 | /* Footer */ 170 | footer { 171 | background-color: #e23744; 172 | color: white; 173 | text-align: center; 174 | padding: 20px; 175 | position: relative; 176 | bottom: 0; 177 | width: 100%; 178 | } 179 | -------------------------------------------------------------------------------- /Project 1/img/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithHarry/The-Ultimate-HTML-Course/5f6a50d51aef6fb89b09bdea07575b6d61a529b4/Project 1/img/bg.png -------------------------------------------------------------------------------- /Project 1/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithHarry/The-Ultimate-HTML-Course/5f6a50d51aef6fb89b09bdea07575b6d61a529b4/Project 1/img/logo.png -------------------------------------------------------------------------------- /Project 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Zomato - Order food online 7 | 8 | 9 | 10 |
11 | 14 | 20 |
21 |
22 |
23 | 24 | 25 |

Discover the best food & drinks in Hanumangarh

26 | 27 |
28 |
29 |

Why Choose Us for Food Delivery?

30 |

We make it easy to discover and enjoy delicious food, wherever you are.

31 |
32 |
33 |

Fast Delivery

34 |

Our reliable delivery partners ensure your food reaches you in no time.

35 |
36 |
37 |

Variety of Choices

38 |

From local favorites to global cuisines, we offer a wide range of options to choose from.

39 |
40 |
41 |

Easy Payment

42 |

Pay seamlessly through multiple payment options, including cash on delivery.

43 |
44 |
45 |
46 | 47 |
48 | 49 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /Project 1/investor.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | Investor Relations 10 | 11 | -------------------------------------------------------------------------------- /Project 1/js/script.js: -------------------------------------------------------------------------------- 1 | // Script for basic animations and interactivity 2 | 3 | document.addEventListener('DOMContentLoaded', function () { 4 | const searchInput = document.querySelector('main input'); 5 | 6 | // Animate input field on focus 7 | searchInput.addEventListener('focus', function () { 8 | searchInput.style.width = '350px'; 9 | searchInput.style.transition = 'width 0.5s ease'; 10 | }); 11 | 12 | // Return to normal size when not in focus 13 | searchInput.addEventListener('blur', function () { 14 | searchInput.style.width = '300px'; 15 | }); 16 | 17 | 18 | }); 19 | -------------------------------------------------------------------------------- /Project 2/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Rohan Das - About 7 | 8 | 9 | 10 |
11 | 23 |
24 | 25 |
26 |
27 |

About Me

28 |
29 |
30 | Rohan Das 31 |
32 |
33 |

Name: Rohan Das

34 |

Date of Birth: January 01, 1987

35 |

Address: San Francisco CA 97897 USA

36 |

Zip Code: 1000

37 |

Email: clarkthomp@gmail.com

38 |

Phone: +1-2234-5678-9-0

39 |

Project Complete: 73

40 | Download CV 41 |
42 |
43 |
44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /Project 2/assets/images/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithHarry/The-Ultimate-HTML-Course/5f6a50d51aef6fb89b09bdea07575b6d61a529b4/Project 2/assets/images/profile.png -------------------------------------------------------------------------------- /Project 2/assets/images/profile2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithHarry/The-Ultimate-HTML-Course/5f6a50d51aef6fb89b09bdea07575b6d61a529b4/Project 2/assets/images/profile2.png -------------------------------------------------------------------------------- /Project 2/css/style.css: -------------------------------------------------------------------------------- 1 | /* General Styles */ 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | font-family: 'Poppins', sans-serif; 6 | background-color: #000; 7 | color: #fff; 8 | } 9 | 10 | /* Header Section */ 11 | .header { 12 | background-color: #0d0d0d; 13 | padding: 80px 20px; 14 | } 15 | 16 | .header-container { 17 | display: flex; 18 | justify-content: space-around; 19 | align-items: center; 20 | } 21 | 22 | .header-text { 23 | max-width: 50%; 24 | } 25 | 26 | .header h1 { 27 | font-size: 48px; 28 | margin: 0; 29 | } 30 | 31 | .header h1 span { 32 | color: #f5a623; 33 | } 34 | 35 | .header p { 36 | font-size: 24px; 37 | margin-top: 10px; 38 | } 39 | 40 | .button-group { 41 | margin-top: 30px; 42 | } 43 | 44 | .button-group .btn { 45 | padding: 10px 30px; 46 | color: #fff; 47 | background-color: #f5a623; 48 | border: none; 49 | border-radius: 5px; 50 | text-decoration: none; 51 | margin: 0 10px; 52 | } 53 | 54 | .btn.hire-me { 55 | background-color: #f5a623; 56 | } 57 | 58 | .btn.my-works { 59 | background-color: #000; 60 | border: 1px solid #f5a623; 61 | } 62 | 63 | /* Header Image */ 64 | .header-image img { 65 | width: 300px; 66 | } 67 | 68 | /* Navigation Bar */ 69 | .navbar { 70 | background-color: #151515; 71 | padding: 20px; 72 | text-align: center; 73 | } 74 | 75 | .navbar ul { 76 | list-style-type: none; 77 | margin: 0; 78 | padding: 0; 79 | } 80 | 81 | .navbar ul li { 82 | display: inline; 83 | margin: 0 15px; 84 | } 85 | 86 | .navbar ul li a { 87 | color: #fff; 88 | text-decoration: none; 89 | font-size: 18px; 90 | } 91 | 92 | /* About Section */ 93 | .about { 94 | padding: 60px 20px; 95 | background-color: #0d0d0d; 96 | text-align: center; 97 | } 98 | 99 | .about h2 { 100 | font-size: 36px; 101 | margin-bottom: 30px; 102 | } 103 | 104 | .about-content { 105 | display: flex; 106 | justify-content: center; 107 | align-items: center; 108 | } 109 | 110 | .profile-image img { 111 | width: 250px; 112 | height: 250px; 113 | } 114 | 115 | .about-details { 116 | margin-left: 30px; 117 | } 118 | 119 | .about-details p { 120 | font-size: 18px; 121 | margin: 5px 0; 122 | } 123 | 124 | .about-details .btn { 125 | margin-top: 20px; 126 | padding: 10px 20px; 127 | background-color: #f5a623; 128 | border: none; 129 | color: #fff; 130 | text-decoration: none; 131 | border-radius: 5px; 132 | } 133 | 134 | /* Skills Section */ 135 | .skills { 136 | background-color: #0d0d0d; 137 | padding: 60px 20px; 138 | text-align: center; 139 | } 140 | 141 | .skills h2 { 142 | font-size: 36px; 143 | margin-bottom: 30px; 144 | } 145 | 146 | .skills-grid { 147 | display: grid; 148 | grid-template-columns: repeat(2, 1fr); 149 | gap: 20px; 150 | } 151 | 152 | .skill { 153 | font-size: 18px; 154 | } 155 | 156 | .progress { 157 | background-color: #333; 158 | border-radius: 25px; 159 | height: 15px; 160 | margin-top: 5px; 161 | overflow: hidden; 162 | } 163 | 164 | .progress-bar { 165 | height: 100%; 166 | background-color: #f5a623; 167 | border-radius: 25px; 168 | } 169 | 170 | 171 | 172 | /* General styling */ 173 | body { 174 | font-family: 'Arial', sans-serif; 175 | margin: 0; 176 | padding: 0; 177 | background-color: #111; 178 | color: white; 179 | } 180 | 181 | .navbar ul { 182 | list-style-type: none; 183 | display: flex; 184 | justify-content: space-around; 185 | background-color: #333; 186 | padding: 10px 0; 187 | } 188 | 189 | .navbar ul li a { 190 | color: white; 191 | text-decoration: none; 192 | padding: 10px 20px; 193 | display: block; 194 | } 195 | 196 | .navbar ul li a:hover { 197 | background-color: #444; 198 | } 199 | 200 | .header { 201 | display: flex; 202 | justify-content: space-between; 203 | align-items: center; 204 | padding: 50px; 205 | } 206 | 207 | .header-container { 208 | max-width: 1200px; 209 | margin: 0 auto; 210 | display: flex; 211 | align-items: center; 212 | } 213 | 214 | .header-image img { 215 | max-width: 400px; 216 | } 217 | 218 | .btn { 219 | background-color: #f0a500; 220 | padding: 10px 20px; 221 | color: #fff; 222 | text-decoration: none; 223 | margin-right: 20px; 224 | } 225 | 226 | .btn:hover { 227 | background-color: #e59400; 228 | } 229 | 230 | /* Add more specific styling for other pages here */ 231 | -------------------------------------------------------------------------------- /Project 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Shasika Shehan - Fullstack Web Developer 7 | 8 | 9 | 10 | 11 | 12 | 13 | 25 | 26 |
27 |
28 | 29 |
30 |

Hello!
I'm Salman Khan

31 |

Fullstack Web Developer

32 |
33 | Hire Me 34 | My Works 35 |
36 |
37 | 38 |
39 | Rohan Das 40 |
41 |
42 |
43 | 44 | 45 |
46 |
47 |

About Me

48 |
49 |
50 | Shasika Shehan 51 |
52 |
53 |

Name: Shasika Shehan

54 |

Date of Birth: January 01, 1987

55 |

Address: San Francisco CA 97897 USA

56 |

Zip Code: 1000

57 |

Email: clarkthomp@gmail.com

58 |

Phone: +1-2234-5678-9-0

59 |

Project Complete: 73

60 |
61 | Download CV 62 |
63 |
64 |
65 |
66 | 67 | 68 |
69 |
70 |

My Skills

71 |
72 |
PHP
73 |
HTML5
74 |
WordPress
75 |
jQuery
76 |
CSS3
77 |
SEO
78 |
79 |
80 |
81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /Project 2/resume.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Rohan Das - Resume 7 | 8 | 9 | 10 |
11 | 23 |
24 | 25 |
26 |
27 |

My Resume

28 |

This is where your resume content will go.

29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /Project 2/services.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Rohan Das - Services 7 | 8 | 9 | 10 |
11 | 23 |
24 | 25 |
26 |
27 |

Services

28 |

This is where your services content will go.

29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /Project 2/skills.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Rohan Das - Skills 7 | 8 | 9 | 10 |
11 | 23 |
24 | 25 |
26 |
27 |

My Skills

28 |
29 |
PHP
30 |
HTML5
31 |
WordPress
32 |
jQuery
33 |
34 |
35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /Ultimate HTML handbook.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithHarry/The-Ultimate-HTML-Course/5f6a50d51aef6fb89b09bdea07575b6d61a529b4/Ultimate HTML handbook.pdf --------------------------------------------------------------------------------