FullstackAcademy · Twinkledev1 · Jul 28, 2025
diff --git a/about.html b/about.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>about</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<header>
+    <nav class="nav">
+    <h1 class="name">Twinkle Devwanshi</h1>
+    <ul class="ul">
+    <li><a href="home.html">Home</a></li>
+    <li><a href="about.html">About</a></li>
+    <li><a href="portfolio.html">Portfolio</a></li>
+    <li><a href="contact.html">Contact</a></li>
+    </ul>
+
+    </nav>
+    </header>
+
+    <main>
+        <section class="about"> 
+<div>
+    <p>
+        I'm a passionate full-stack developer with 5+ years of experience building web applications that solve real-world problems. 
+        I love turning complex requirements into elegant, user-friendly solutions.
+    </p>
+
+    <img src="https://www.simplilearn.com/ice9/free_resources_article_thumb/full_stack_banner.jpg" alt="Full Stack Developer">
+</div>
+<div class="journey"> 
+    <h2>My Journey</h2>
+    <p>
+        Started my journey in computer science with a fascination for how technology can transform lives. 
+        Over the years, I've worked on diverse projects ranging from e-commerce platforms to fin tech applications, always focusing on performance, security, and user experience.
+
+        When I'm not coding, you'll find me contributing to open source projects, mentoring junior developers, or exploring the latest in AI and machine learning. 
+        I believe in continuous learning and staying ahead of the technology curve.
+    </p>
+    </div>
+</section>  
+</main> 
+</body>
+</html>
diff --git a/contact.html b/contact.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>home</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body> 
+
+<header>
+<nav>
+    <h1 class="name">Twinkle Devwanshi</h1>
+<ul class="ul">
+<li><a href="home.html">Home</a></li>
+<li><a href="about.html">About</a></li>
+<li><a href="portfolio.html">Portfolio</a></li>
+<li><a href="contact.html">Contact</a></li>
+</ul>
+
+</nav>
+</header>
+<main>
+
+<section class="main">
+    <h2 class="contact">Contact Me</h2>
+
+    <p class="mission">Feel free to reach out for collaborations or just to say hi!
+     </p>
+
+    <form class="form" >
+        <label for="name">Name:</label>
+        <input type="text" id="name" name="name" required />
+
+        <label for="email">Email:</label>
+        <input type="email" id="email" name="email" required />
+
+        <label for="message">Message:</label>
+        <textarea id="message" name="message" rows="4" required></textarea>
+
+        <button type="submit">Send</button>
+
+    </form>
+
+    </section>
+</main>
+
+
+<footer class="footer">
+    <p>&copy; 2025 Twinkledev1. All rights reserved.</p>
+</footer>
+<script src="index.js"></script> 
+</body>
+</html> 
diff --git a/home.html b/home.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>twinkle_home</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body> 
+    <header>
+        <nav>
+            <h1 class="name">Twinkle Devwanshi</h1>
+        <ul class="ul">
+        <li><a href="home.html">Home</a></li>
+        <li><a href="about.html">About</a></li>
+        <li><a href="portfolio.html">Portfolio</a></li>
+        <li><a href="contact.html">Contact</a></li>
+        </ul>
+    </header>
+        <h1 class="title">Full Stack developer </h1>
+        <img src="https://media.licdn.com/dms/image/v2/D4D03AQF4TraeSNxnag/profile-displayphoto-shrink_200_200/B4DZOQtGJRHoAY-/0/1733299561834?e=2147483647&v=beta&t=BlVj43a0B6QHsOZK0QM-gj9-kpHNcQMuWrDKhghAT_k" alt="">
+    </nav>
+
+
+     <main>
+        <section class="main">
+            <h2 >Welcome to My Portfolio</h2>
+            <h4 class="quote"> Coding my way to the future — passionate about building great experiences.
+
+             </h4>
+
+        </section>
+    </main>
+   <script src="index.js"></script> 
+</body>
+</html> 
diff --git a/img.jpg b/img.jpg
diff --git a/index.js b/index.js
diff --git a/portfolio.css b/portfolio.css
diff --git a/portfolio.html b/portfolio.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Portfolio</title> 
+     <link rel="stylesheet" href="style.css">
+</head>
+<header></header>
+<body>
+    <header>
+        <nav>
+            <h1 class="name">Twinkle Devwanshi</h1>
+        <ul class="ul">
+        <li><a href="home.html">Home</a></li>
+        <li><a href="about.html">About</a></li>
+        <li><a href="portfolio.html">Portfolio</a></li>
+        <li><a href="contact.html">Contact</a></li>
+        </ul>
+
+        </nav>
+        </header>
+
+        <main> 
+
+            <section class="portfolio">
+                <h2>My Projects</h2>
+            <div class="project">
+                <h4>OTP-Verification-System</h4>
+                <p>Developed a secure desktop application for One-Time Password (OTP) generation, email delivery, and verification.
+
+                </p>
+                <a href="https://github.com/Twinkledev1/OTP-Verification-System">firstProject</a>
+            </div>
+            <div>
+                <h4>html-css-mini-project</h4>
+                <p>Created a mini project using HTML and CSS to enhance web development skills.</p>
+               <a href="https://github.com/Twinkledev1/html-css-mini-project">secondProject</a>
+            </div>
+            <div>
+                <h4>furniture_emporium_workshop</h4>
+                <p>Developed a furniture emporium workshop website using HTML and CSS showcasing products and services.</p>
+            <a href="https://github.com/Twinkledev1/furniture_emporium_workshop">thirdProject</a>
+            </div>
+            </section>
+
+         </main>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,196 @@
+* {
+    box-sizing: border-box;
+}
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    background-color: #f4f4f4;
+}
+header {
+    background-color: #e5c8ec;
+     padding: 1em 0;
+     margin: 0;
+
+}
+
+.name{
+    display: flex;
+    justify-content: flex-start;
+    margin: 1em 2em 0 2em;
+
+}
+nav ul{
+    display: flex;
+    list-style: none;
+    padding-left:12px 0;
+    justify-content:flex-end;
+    gap: 2em;
+    margin: 0 auto;
+
+
+
+}
+
+
+@media (max-width: 600px) {
+    nav ul {
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 1em;
+        margin: 1em;
+    }}
+
+nav a{
+    font-size: 1.2em;
+    font-weight: bold;
+    text-decoration: none;
+    color: #070707; 
+    transition: color 0.3s ease-in-out;
+}
+
+header a:hover {
+    color: #005fa3;
+}
+
+.title {
+
+    display: flex;
+    align-items:center ;
+    justify-content: center;
+    color:rgb(122, 46, 46);
+    padding-top:2.5rem;
+    margin-bottom: 2rem;
+    font-size: 2em;
+    font-weight: bold;
+    text-align: center;
+} 
+
+img{
+
+    display: block;
+    margin: 0 auto 2rem auto;
+    max-width: 100%;
+
+
+}
+.main{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2rem 1rem;
+    margin: 0 auto;
+    max-width: 900px;
+    width: 100%;
+} 
+
+/* about page css style */
+
+
+
+.about{
+    padding-left: 2rem;
+    padding-right: 2rem;
+    padding-top: 4rem;
+}
+.about p {
+    text-align: center;
+    color: #070707;
+    font-size: 1.5em;
+    margin-bottom: 6rem;
+}
+
+.about h2 {
+    text-align: center;
+    color: #070707;
+    font-size: 2.5em;
+    margin-bottom: 2rem;
+    padding-top: 2rem;
+
+}
+.journey img{
+    width: 100%;
+    max-width: 500px;
+    display: block;
+    margin: 0 auto 2rem auto;
+    height:auto;
+}
+
+@media (max-width: 600px) {
+    .title {
+        font-size: 1.3em;
+        padding-top: 1.5rem;
+    }
+    .journey img {
+        max-width: 100%;
+    }
+    .main {
+        padding: 1em 0.25em;
+    }
+}
+
+.portfolio {
+    display: flex;
+flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    gap: 2rem;
+    padding: 2rem;
+    border: #070707;
+    gap: 4rem;
+    margin: 40px;
+
+}
+
+/* contact css styles */
+.mission{
+    font-style: italic;
+    font-family:Georgia, 'Times New Roman', Times, serif;
+    color: blue;
+}
+
+.form{
+    display: flex;
+    flex-direction: column;
+
+    padding: 2rem;
+    border-radius: 10px;
+    width: 100%;
+    max-width: 400px;
+    margin: 2rem auto;
+   gap: 1.5rem
+
+}
+
+.form>label{
+    display: flex;
+    align-items: flex-start;
+    font-weight: bold;
+}
+
+button:hover {
+    background-color: #005fa3;
+  }
+
+.form button{
+    background-color: rgb(138, 142, 214);
+    color: white;
+    border: none;
+    padding: 0.7em;
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 1em;
+}
+
+button:hover {
+    background-color: #005fa3;
+  }
+
+.footer{
+  background-color: gainsboro;
+padding: 1rem 0;    
+text-align: center;
+margin-top: 4rem;
+
+}