├── script.js
├── responsive.css
├── style.css
└── pro.html


/script.js:
--------------------------------------------------------------------------------
 1 | const hamburger = document.getElementById('hamburger');
 2 | const menu = document.querySelector('.menu');
 3 | hamburger.addEventListener('click', function () {
 4 |     const hamIcon = this.querySelector('.hamburger-icon');
 5 |     const crossIcon = this.querySelector('.cross-icon');
 6 |     if (hamIcon.style.display === "none") {
 7 |         hamIcon.style.display = "inline-block"
 8 |         menu.style.display = "none"
 9 |         crossIcon.style.display = "none"
10 |     }
11 |     else {
12 |         crossIcon.style.display = "inline-block"
13 |         hamIcon.style.display = "none"
14 |         menu.style.display = "block"
15 |     }
16 | });


--------------------------------------------------------------------------------
/responsive.css:
--------------------------------------------------------------------------------
  1 | /* Responsive CSS file styles defined for smaller width devices */
  2 | /* CSS for tablet devices */
  3 | @media screen and (min-width: 576px) and (max-width: 820px) {
  4 |     .logo {
  5 |         padding: 0 3rem;
  6 |     }
  7 |     .hamburger {
  8 |         display: block;
  9 |         padding: 0 3rem;
 10 |     }
 11 |     .menu {
 12 |         position: absolute;
 13 |         right: 0;
 14 |         padding: 0 3rem;
 15 |         top: 75px;
 16 |         background-image: linear-gradient(180deg, #74D7BB, #53C8B6, #35A99C);
 17 |         display: none;
 18 |         transition: all 0.25s;
 19 |     }
 20 |     .menu .menu-list {
 21 |         flex-direction: column;
 22 |     }
 23 |     .portfolio {
 24 |         padding: 0;
 25 |     }
 26 | 
 27 |     .about {
 28 |         flex-direction: column;
 29 |     }
 30 |     .about .about-text {
 31 |         padding: 2rem;
 32 |     }
 33 |     .about .about-image img {
 34 |         padding: 2rem;
 35 |     }
 36 |     .services {
 37 |         padding: 0;
 38 |     }
 39 |     .my-row {
 40 |         gap: 10px;
 41 |     }
 42 | 
 43 |     .my-row .my-col {
 44 |         text-align: center;
 45 |         width: 35%;
 46 |     }
 47 | }
 48 | /* CSS for mobile devices */
 49 | @media screen and (min-width: 280px) and (max-width: 576px) {
 50 |     .hero {
 51 |         justify-content: center;
 52 |         color: #fff;
 53 |         background-image: radial-gradient(circle, rgb(15 14 14 / 30%), rgb(102 96 96 / 40%), rgb(163 160 160 / 16%)), url('./Images/heroImg3.avif')
 54 |     }
 55 |     .sub-heading {
 56 |         color: #fff9f9cc;
 57 |     }
 58 |     .hero .intro-buttons {
 59 |         gap: 20px;
 60 |     }
 61 |     .btn {
 62 |         padding: 10px 30px;
 63 |     }
 64 |     .logo {
 65 |         padding: 0 2rem;
 66 |     }
 67 |     .menu {
 68 |         position: absolute;
 69 |         right: 0;
 70 |         padding: 0 2rem;
 71 |         top: 75px;
 72 |         background-image: linear-gradient(180deg, #35A99C, #53C8B6, #74D7BB);
 73 |         display: none;
 74 |         transition: all 0.25s;
 75 |     }
 76 |     .menu .menu-list {
 77 |         flex-direction: column;
 78 |     }
 79 |     .hamburger {
 80 |         display: block;
 81 |         padding: 0 2rem;
 82 |     }
 83 |     .portfolio {
 84 |         padding: 0;
 85 |     }
 86 |     .about {
 87 |         flex-direction: column;
 88 |     }
 89 |     .about.about-text {
 90 |         width: 90%;
 91 |         padding: 1rem;
 92 |     }
 93 |     .about .about-image img {
 94 |         width: 90%;
 95 |         padding: 1rem;
 96 |     }
 97 |     .services {
 98 |         padding: 0;
 99 |     }
100 |     .my-row {
101 |         display: flex;
102 |         align-items: center;
103 |         justify-content: space-between;
104 |         flex-direction: column;
105 |         margin: 2rem 0;
106 |         gap: 1rem;
107 |     }
108 |     .my-row .my-col {
109 |         text-align: center;
110 |         width: 100%;
111 |     }
112 |     .contact {
113 |         padding: 0;
114 |     }
115 |     .contact-content {
116 |         flex-direction: column;
117 |         align-items: center;
118 |         gap: 2rem;
119 |     }
120 |     .contact-form-container {
121 |         width: 80%;
122 |     }
123 |     .contact-form .form-controls {
124 |         width: 100%;
125 |     }
126 |     .contact-form .form-btn {
127 |         width: 100%;
128 |     }
129 |     .contact-details {
130 |         width: 80%;
131 |     }
132 |     .footer-menu {
133 |         padding: 0 2rem;
134 |     }
135 |     .footer-list-items {
136 |         margin: 0;
137 |     }
138 | }


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | /* Styles defined for the desktop or the bigger screen devices*/
  2 | @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
  3 | body {
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     box-sizing: border-box;
  7 |     font-family: 'Poppins', sans-serif;
  8 | }
  9 | /* Header Navbar Styles */
 10 | .navbar {
 11 |     display: flex;
 12 |     align-items: center;
 13 |     justify-content: space-between;
 14 |     position: fixed;
 15 |     top: 0;
 16 |     width: 100%;
 17 |     background-image: linear-gradient(90deg, #74D7BB, #53C8B6, #35A99C);
 18 |     background-color: transparent;
 19 | }
 20 | .logo {
 21 |     padding: 0 5rem;
 22 | }
 23 | .logo .logo-heading {
 24 |     color: #fff;
 25 | }
 26 | 
 27 | .menu {
 28 |     padding: 0 5rem;
 29 | }
 30 | 
 31 | .hamburger {
 32 |     display: none;
 33 |     color: #fff;
 34 |     font-size: 25px;
 35 | }
 36 | .cross-icon {
 37 |     display: none;
 38 | }
 39 | .menu .menu-list {
 40 |     display: flex;
 41 |     list-style: none;
 42 | }
 43 | .menu-list .menu-list-items {
 44 |     padding: 0.5rem 1rem;
 45 | }
 46 | 
 47 | @media screen and (min-width: 856px) and (max-width: 1024px) {
 48 |     .menu-list .menu-list-items {
 49 |         padding: 0.5rem 0.3rem;
 50 |     }
 51 | }
 52 | /* Main Hero Section Styles */
 53 | .hero {
 54 |     background-image: url('./Images/heroImg3.avif');
 55 |     background-repeat: no-repeat;
 56 |     background-size: 100% 100%;
 57 |     width: 100%;
 58 |     height: 100vh;
 59 |     display: flex;
 60 |     align-items: center;
 61 |     justify-content: start;
 62 |     margin: 4.8rem 0;
 63 | }
 64 | .hero .intro {
 65 |     text-align: center;
 66 |     margin: 0 5rem;
 67 | }
 68 | .hero .intro-buttons {
 69 |     margin: 2rem 0;
 70 |     display: flex;
 71 |     align-items: center;
 72 |     justify-content: space-evenly;
 73 | }
 74 | /* About section styles */
 75 | .about {
 76 |     display: flex;
 77 |     align-items: center;
 78 |     background-image: linear-gradient(45deg, #363D73, #2794B3);
 79 |     justify-content: space-between;
 80 |     width: 100%;
 81 | }
 82 | .about .about-text {
 83 |     width: 450px;
 84 |     color: #fff;
 85 |     padding: 5rem 1rem 5rem 5rem;
 86 | }
 87 | .about .about-image img {
 88 |     height: 400px;
 89 |     width: 450px;
 90 |     padding: 5rem 5rem 5rem 1rem;
 91 | }
 92 | /* Portfolio section styles */
 93 | .portfolio {
 94 |     margin: 4.8rem 0;
 95 |     padding: 0 5rem;
 96 | }
 97 | .port-card {
 98 |     padding: 0 !important;
 99 |     background: none !important;
100 |     border: 2px solid #000;
101 | }
102 | 
103 | .port-card .image {
104 |     width: 100%;
105 | }
106 | .port-card .image img {
107 |     height: 200px;
108 |     width: 100%;
109 |     border-top-right-radius: 20px;
110 |     border-top-left-radius: 20px;
111 | }
112 | /* Services section styles */
113 | .services {
114 |     display: flex;
115 |     align-items: center;
116 |     justify-content: center;
117 |     flex-direction: column;
118 |     margin: 4.8rem 0;
119 |     padding: 0 5rem;
120 | }
121 | .my-row {
122 |     display: flex;
123 |     align-items: center;
124 |     justify-content: space-between;
125 |     margin: 2rem 0;
126 | }
127 | .my-row .my-col {
128 |     text-align: center;
129 |     width: 30%;
130 | }
131 | .my-card {
132 |     text-align: center;
133 |     display: flex;
134 |     flex-direction: column;
135 |     align-items: center;
136 |     justify-content: center;
137 |     border-radius: 20px;
138 |     background-image: linear-gradient(#74D7BB, #53C8B6, #35A99C);
139 |     padding: 1rem;
140 | }
141 | .icon {
142 |     height: 100px;
143 |     width: 100px;
144 |     border-radius: 50%;
145 |     background-color: #363D73;
146 |     display: flex;
147 |     align-items: center;
148 |     justify-content: center;
149 | }
150 | .icon svg {
151 |     font-size: 30px;
152 |     color: #fff;
153 | }
154 | /* Contact section styles */
155 | .contact {
156 |     padding: 0 5rem;
157 | }
158 | .contact-content {
159 |     display: flex;
160 |     margin: 3rem 0;
161 |     justify-content: space-between;
162 | }
163 | .contact-form-container {
164 |     width: 50%;
165 | }
166 | .contact-form {
167 |     display: flex;
168 |     flex-direction: column;
169 | }
170 | .contact-form .form-controls {
171 |     width: 80%;
172 |     padding: 10px 0;
173 |     margin: 1.67rem 0;
174 | }
175 | .contact-form .form-btn {
176 |     width: 83%;
177 | }
178 | .contact-details {
179 |     width: 50%;
180 | }
181 | /* Footer Styles */
182 | .footer {
183 |     background-color: #000;
184 |     color: #fff;
185 |     padding: 2rem;
186 | }
187 | .footer-list-items {
188 |     display: flex;
189 |     align-items: center;
190 |     justify-content: center;
191 |     height: 50px;
192 |     width: 50px;
193 |     margin: 1rem 1rem 0 1rem;
194 |     border-radius: 50%;
195 |     background-color: #53C8B6;
196 | }
197 | .footer-links {
198 |     font-size: 24px;
199 |     color: #fff;
200 |     text-decoration: none;
201 | }
202 | .social-links {
203 |     display: flex;
204 |     align-items: center;
205 |     justify-content: center;
206 | }
207 | .footer-menu {
208 |     padding: 0 5rem;
209 | }
210 | .footer-menu .footer-menu-list {
211 |     display: flex;
212 |     list-style: none;
213 | }
214 | /* utility classes */
215 | .greet-heading {
216 |     font-size: 1.3rem;
217 |     font-weight: lighter;
218 |     margin: 0;
219 |     letter-spacing: 1px;
220 | }
221 | .my-heading {
222 |     font-size: 2.5rem;
223 |     margin: 0;
224 | }
225 | .sub-heading {
226 |     margin: 0;
227 |     font-size: 0.8rem;
228 |     color: #ccc;
229 |     font-weight: lighter;
230 | }
231 | .links:hover {
232 |     border-bottom: 2px solid #fff;
233 | }
234 | 
235 | .links {
236 |     border-bottom: 2px solid transparent;
237 |     transition: all 0.25s;
238 |     padding: 5px;
239 |     text-decoration: none;
240 |     color: #fff;
241 | }
242 | .btn {
243 |     padding: 10px 20px;
244 |     border-radius: 5px;
245 |     cursor: pointer;
246 |     letter-spacing: 1px;
247 |     border: none;
248 | }
249 | .common-btn {
250 |     background-color: #35A99C;
251 |     color: #fff;
252 |     border: 2px solid #35A99C;
253 |     transition: all 0.25s;
254 | }
255 | .common-btn:hover {
256 |     background-color: #fff;
257 |     color: #35A99C;
258 |     border: 2px solid #35A99C;
259 |     outline: none;
260 | }
261 | .ghost-btn {
262 |     background-color: #fff;
263 |     color: #35A99C;
264 |     border: 2px solid #35A99C;
265 |     outline: none;
266 | }
267 | .ghost-btn:hover {
268 |     background-color: #35A99C;
269 |     color: #fff;
270 |     transition: all 0.25s;
271 |     border: 2px solid #35A99C;
272 | }
273 | .heading-span {
274 |     font-weight: bolder;
275 | }
276 | 
277 | .text-center {
278 |     text-align: center;
279 | }
280 | .small-para {
281 |     font-size: 14px;
282 |     color: #fff;
283 | }
284 | .white-text {
285 |     color: #fff;
286 | }
287 | .blue-text {
288 |     color: #363D73;
289 | }


--------------------------------------------------------------------------------
/pro.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>My Portfolio</title>
  8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
  9 |         integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
 10 |         crossorigin="anonymous" referrerpolicy="no-referrer" />
 11 |     <link rel="stylesheet" href="style.css">
 12 |     <link rel="stylesheet" href="responsive.css">
 13 | </head>
 14 | 
 15 | <body>
 16 |     <!-- Navbar header section -->
 17 |     <header class="header">
 18 |         <nav class="navbar">
 19 |             <div class="logo">
 20 |                 <h2 class="logo-heading">Emrit Diyal</h2>
 21 |             </div>
 22 |             <div class="hamburger" id="hamburger">
 23 |                 <i class="fas fa-bars hamburger-icon"></i>
 24 |                 <i class="fas fa-times cross-icon"></i>
 25 |             </div>
 26 |             <div class="menu">
 27 |                 <ul class="menu-list">
 28 |                     <li class="menu-list-items">
 29 |                         <a class="links" href="#home">
 30 |                             Home</a>
 31 |                     </li>
 32 |                     <li class="menu-list-items">
 33 |                         <a class="links" href="#portfolio">
 34 |                             Portfolio</a>
 35 |                     </li>
 36 |                     <li class="menu-list-items">
 37 |                         <a class="links" href="#about">
 38 |                             About </a>
 39 |                     </li>
 40 |                     <li class="menu-list-items">
 41 |                         <a class="links" href="#services">
 42 |                             Services </a>
 43 |                     </li>
 44 |                     <li class="menu-list-items">
 45 |                         <a class="links" href="#contact"> Contact Me
 46 |                         </a>
 47 |                     </li>
 48 |                 </ul>
 49 |             </div>
 50 |         </nav>
 51 |     </header>
 52 |     <!-- Main hero banner -->
 53 |     <section id="home" class="hero">
 54 |         <div class="intro">
 55 |             <div class="headings">
 56 |                 <h3 class="greet-heading">Hello, I'm</h3>
 57 |                 <h1 class="my-heading">nivitha anbarasan</h1>
 58 |                 <h4 class="sub-heading">
 59 |                     A Software Engineer with 1 years of Experience.
 60 |                 </h4>
 61 |             </div>
 62 |             <div class="intro-buttons">
 63 |                 <button class="btn common-btn">Hire Me</button>
 64 |                 <button class="btn ghost-btn">Get Resume</button>
 65 |             </div>
 66 |         </div>
 67 |     </section>
 68 |     <!-- Portfolio Section -->
 69 |     <section class="portfolio" id="portfolio">
 70 |         <div class="portfolio-heading">
 71 |             <h1 class="my-heading text-center">Featured Portfolio</h1>
 72 |         </div>
 73 |         <div class="portfolio-content">
 74 |             <div class="my-row">
 75 |                 <div class="my-col">
 76 |                     <div class="my-card port-card">
 77 |                         <div class="image">
 78 |                             <img src="./Images/designImage2.avif" alt="Web Design Image">
 79 |                         </div>
 80 |                         <h3 class="greet-heading blue-text">Web Design</h3>
 81 |                         <p class="small-para blue-text">Designing</p>
 82 |                     </div>
 83 |                 </div>
 84 |                 <div class="my-col">
 85 |                     <div class="my-card port-card">
 86 |                         <div class="image">
 87 |                             <img src="./Images/webDevelopment2.avif" alt="Web Development Image">
 88 |                         </div>
 89 |                         <h3 class="greet-heading blue-text">
 90 |                             Web Development
 91 |                         </h3>
 92 |                         <p class="small-para blue-text">Development</p>
 93 |                     </div>
 94 |                 </div>
 95 |                 <div class="my-col">
 96 |                     <div class="my-card port-card">
 97 |                         <div class="image">
 98 |                             <img src="./Images/SEOImage2.avif" alt="SEO Image">
 99 |                         </div>
100 |                         <h3 class="greet-heading blue-text">SEO</h3>
101 |                         <p class="small-para blue-text">Optimization</p>
102 |                     </div>
103 |                 </div>
104 |             </div>
105 |             <div class="my-row">
106 |                 <div class="my-col">
107 |                     <div class="my-card port-card">
108 |                         <div class="image">
109 |                             <img src="./Images/contentImage2.avif" alt="Content Writting Image">
110 |                         </div>
111 |                         <h3 class="greet-heading blue-text">
112 |                             Content Writing
113 |                         </h3>
114 |                         <p class="small-para blue-text">Writing</p>
115 |                     </div>
116 |                 </div>
117 |                 <div class="my-col">
118 |                     <div class="my-card port-card">
119 |                         <div class="image">
120 |                             <img src="./Images/wordpressImage2.avif" alt="Wordpress Image">
121 |                         </div>
122 |                         <h3 class="greet-heading blue-text">
123 |                             Wordpress Dev
124 |                         </h3>
125 |                         <p class="small-para blue-text">
126 |                             Content Management System
127 |                         </p>
128 |                     </div>
129 |                 </div>
130 |                 <div class="my-col">
131 |                     <div class="my-card port-card">
132 |                         <div class="image">
133 |                             <img src="./Images/videoEditing2.avif" alt="Video Editing Image">
134 |                         </div>
135 |                         <h3 class="greet-heading blue-text">
136 |                             Video Editing
137 |                         </h3>
138 |                         <p class="small-para blue-text">Editing</p>
139 |                     </div>
140 |                 </div>
141 |             </div>
142 |         </div>
143 |     </section>
144 |     <!-- About Section -->
145 |     <section id="about" class="about">
146 |         <div class="about-text">
147 |             <h1 class="my-heading">About Me</h1>
148 |             <p class="lead-para">
149 |                 Hello, my name is Nivitha, and I
150 |                 am currently pursuing my B.Tech in 
151 |                 Information Technology at K. Ramakrishnan 
152 |                 College of Engineering.I am passionate about 
153 |                 technology and continuously learning to improve 
154 |                 my skills in areas such as mobile application
155 |                 development and cloud computing (Microsoft Azure).
156 |             </p>
157 |             <p>
158 |                 I am eager to apply my knowledge in a 
159 |                 real-world environment and contribute
160 |                 effectively to your organization.
161 |                 I would be grateful for the opportunity 
162 |                 to join your team and grow as a professional.
163 |                 Under their guidance watch your skills flourish
164 |                 as we lay the foundation and help you
165 |                 conquer the world of coding.
166 |             </p>
167 |         </div>
168 |         <div class="about-image">
169 |             <img src="./Images/heroImg2.avif" alt="About Image">
170 |         </div>
171 |     </section>
172 |     <!-- Services Section -->
173 |     <section class="services" id="services">
174 |         <div class="services-heading">
175 |             <h1 class="my-heading text-center">My Services</h1>
176 |         </div>
177 |         <div class="services-content">
178 |             <div class="my-row">
179 |                 <div class="my-col">
180 |                     <div class="my-card">
181 |                         <div class="icon">
182 |                             <i class="fas fa-paint-brush"></i>
183 |                         </div>
184 |                         <h3 class="greet-heading blue-text">Web Design</h3>
185 |                         <p class="small-para">
186 |                             Web development refers to the creating,
187 |                             building, and maintaining
188 |                             of websites. It includes aspects such as
189 |                             web design, web publishing,
190 |                             web programming, and database management.
191 |                             It is the creation of an
192 |                             application that works over the internet
193 |                             i.e. websites.
194 |                         </p>
195 |                         <p class="small-para">
196 |                             Web development refers to the creating,
197 |                             building, and maintaining
198 |                             of websites. It includes aspects such as
199 |                             web design, web publishing,
200 |                             web programming, and database management.
201 |                             It is the creation of an
202 |                             application that works over the internet
203 |                             i.e. websites.
204 |                         </p>
205 |                     </div>
206 |                 </div>
207 |                 <div class="my-col">
208 |                     <div class="my-card">
209 |                         <div class="icon">
210 |                             <i class="fa-solid fa-code"></i>
211 |                         </div>
212 |                         <h3 class="greet-heading blue-text">
213 |                             Web Development
214 |                         </h3>
215 |                         <p class="small-para">
216 |                             Web development refers to the creating,
217 |                             building, and maintaining
218 |                             of websites. It includes aspects such as
219 |                             web design, web publishing,
220 |                             web programming, and database management.
221 |                             It is the creation of an
222 |                             application that works over the internet
223 |                             i.e. websites.
224 |                         </p>
225 |                         <p class="small-para">
226 |                             Web development refers to the creating,
227 |                             building, and maintaining
228 |                             of websites. It includes aspects such as
229 |                             web design, web publishing,
230 |                             web programming, and database management.
231 |                             It is the creation of an
232 |                             application that works over the internet
233 |                             i.e. websites.
234 |                         </p>
235 |                     </div>
236 |                 </div>
237 |                 <div class="my-col">
238 |                     <div class="my-card">
239 |                         <div class="icon">
240 |                             <i class="fas fa-chart-line"></i>
241 |                         </div>
242 |                         <h3 class="greet-heading blue-text">SEO</h3>
243 |                         <p class="small-para">
244 |                             Web development refers to the creating,
245 |                             building, and maintaining
246 |                             of websites. It includes aspects such as
247 |                             web design, web publishing,
248 |                             web programming, and database management.
249 |                             It is the creation of an
250 |                             application that works over the internet
251 |                             i.e. websites.
252 |                         </p>
253 |                         <p class="small-para">
254 |                             Web development refers to the creating,
255 |                             building, and maintaining
256 |                             of websites. It includes aspects such as
257 |                             web design, web publishing,
258 |                             web programming, and database management.
259 |                             It is the creation of an
260 |                             application that works over the internet
261 |                             i.e. websites.
262 |                         </p>
263 |                     </div>
264 |                 </div>
265 |             </div>
266 |             <div class="my-row">
267 |                 <div class="my-col">
268 |                     <div class="my-card">
269 |                         <div class="icon">
270 |                             <i class="fas fa-quote-left"></i>
271 |                         </div>
272 |                         <h3 class="greet-heading blue-text">
273 |                             Content Writting
274 |                         </h3>
275 |                         <p class="small-para">
276 |                             Web development refers to the creating,
277 |                             building, and maintaining of websites.
278 |                             It includes aspects such as web design,
279 |                             web publishing, web programming, and
280 |                             database management. It is the creation
281 |                             of an application that works over the
282 |                             internet i.e. websites.
283 |                         </p>
284 |                         <p class="small-para">
285 |                             Web development refers to the creating,
286 |                             building, and maintaining of websites.
287 |                             It includes aspects such as web design,
288 |                             web publishing, web programming, and
289 |                             database management. It is the creation of an
290 |                             application that works over the internet i.e.
291 |                             websites.
292 |                         </p>
293 |                     </div>
294 |                 </div>
295 |                 <div class="my-col">
296 |                     <div class="my-card">
297 |                         <div class="icon">
298 |                             <i class="fab fa-wordpress-simple"></i>
299 |                         </div>
300 |                         <h3 class="greet-heading blue-text">
301 |                             Wordpress Dev
302 |                         </h3>
303 |                         <p class="small-para">
304 |                             Web development refers to the creating,
305 |                             building, and maintaining of websites.
306 |                             It includes aspects such as web design,
307 |                             web publishing, web programming, and
308 |                             database management. It is the creation
309 |                             of an application that works over the
310 |                             internet i.e. websites.
311 |                         </p>
312 |                         <p class="small-para">
313 |                             Web development refers to the creating,
314 |                             building, and maintaining
315 |                             of websites. It includes aspects such as
316 |                             web design, web publishing,
317 |                             web programming, and database management.
318 |                             It is the creation of an
319 |                             application that works over the internet
320 |                             i.e. websites.
321 |                         </p>
322 |                     </div>
323 |                 </div>
324 |                 <div class="my-col">
325 |                     <div class="my-card">
326 |                         <div class="icon">
327 |                             <i class="fas fa-video"></i>
328 |                         </div>
329 |                         <h3 class="greet-heading blue-text">
330 |                             Video Editing
331 |                         </h3>
332 |                         <p class="small-para">
333 |                             Web development refers to the creating,
334 |                             building, and maintaining
335 |                             of websites. It includes aspects such as
336 |                             web design, web publishing,
337 |                             web programming, and database management.
338 |                             It is the creation of an
339 |                             application that works over the internet
340 |                             i.e. websites.
341 |                         </p>
342 |                         <p class="small-para">
343 |                             Web development refers to the creating,
344 |                             building, and maintaining
345 |                             of websites. It includes aspects such as
346 |                             web design, web publishing,
347 |                             web programming, and database management.
348 |                             It is the creation of an
349 |                             application that works over the internet
350 |                             i.e. websites.
351 |                         </p>
352 |                     </div>
353 |                 </div>
354 |             </div>
355 |         </div>
356 |     </section>
357 | 
358 |     <!-- Contact me section -->
359 |     <section class="contact" id="contact">
360 |         <div class="contact-heading">
361 |             <h1 class="my-heading text-center">Contact Me</h1>
362 |         </div>
363 |         <div class="contact-content">
364 |             <div class="contact-form-container">
365 |                 <h1 class="greet-heading">Get In Touch</h1>
366 |                 <form class="contact-form">
367 |                     <input class="form-controls" type="text" placeholder="Your Name">
368 |                     <input class="form-controls" type="text" placeholder="Your Email">
369 |                     <input class="form-controls" type="text" placeholder="Your Phone">
370 |                     <textarea class="form-controls" placeholder="Write your message" name="message" id="" cols="30"
371 |                         rows="10">
372 |                       </textarea>
373 |                     <input class="form-btn btn common-btn" type="submit" value="Send Message">
374 |                 </form>
375 |             </div>
376 |             <div class="contact-details">
377 |                 <h1 class="greet-heading">My Contact Details</h1>
378 |                 <div class="details">
379 |                     <h5 class="contact-heading">EMAIL</h5>
380 |                     <p class="contact-text">nivitha9600@gmail.com</p>
381 |                 </div>
382 |                 <div class="details">
383 |                     <h5 class="contact-heading">PHONE</h5>
384 |                     <p class="contact-text">+91 8807485609</p>
385 |                 </div>
386 |                 <div class="details">
387 |                     <h5 class="contact-heading">FAX</h5>
388 |                     <p class="contact-text">+91 0123456789</p>
389 |                 </div>
390 |                 <div class="details">
391 |                     <h5 class="contact-heading">ADDRESS</h5>
392 |                     <p class="contact-text">Thanjavur</p>
393 |                     <p>valaiyakadu</p>
394 |                     <p>Thondarampattu East</p>
395 |                 </div>
396 |             </div>
397 |         </div>
398 |     </section>
399 |     <!-- Footer section -->
400 |     <footer class="footer">
401 |         <div class="footer-content text-center">
402 |             <h4>
403 |                 Copyright © 2023 All rights reserved |
404 |                 This portfolio website template is created
405 |                 by GeeksforGeeks.
406 |             </h4>
407 |             <div class="social-links">
408 |                 <div class="footer-menu">
409 |                     <ul class="footer-menu-list">
410 |                         <li class="footer-list-items">
411 |                             <a class="footer-links" href="#">
412 |                                 <i class="fab fa-facebook-f"></i>
413 |                             </a>
414 |                         </li>
415 |                         <li class="footer-list-items">
416 |                             <a class="footer-links" href="#">
417 |                                 <i class="fab fa-twitter"></i>
418 |                             </a>
419 |                         </li>
420 |                         <li class="footer-list-items">
421 |                             <a class="footer-links" href="#">
422 |                                 <i class="fab fa-instagram"></i>
423 |                             </a>
424 |                         </li>
425 |                         <li class="footer-list-items">
426 |                             <a class="footer-links" href="#">
427 |                                 <i class="fab fa-linkedin-in"></i>
428 |                             </a>
429 |                         </li>
430 |                     </ul>
431 |                 </div>
432 |             </div>
433 |         </div>
434 |     </footer>
435 | 
436 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js"
437 |         integrity="sha512-uKQ39gEGiyUJl4AI6L+ekBdGKpGw4xJ55+xyJG7YFlJokPNYegn9KwQ3P8A7aFQAUtUsAQHep+d/lrGqrbPIDQ=="
438 |         crossorigin="anonymous" referrerpolicy="no-referrer">
439 |         </script>
440 |     <script src="script.js"></script>
441 | </body>
442 | 
443 | </html>


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