MLA-VIT · annapoornaanilnair · Nov 18, 2023
diff --git a/annapoornaanilnair/image/contact.png b/annapoornaanilnair/image/contact.png
diff --git a/annapoornaanilnair/image/dp.jpg b/annapoornaanilnair/image/dp.jpg
diff --git a/annapoornaanilnair/image/dp1.jpg b/annapoornaanilnair/image/dp1.jpg
diff --git a/annapoornaanilnair/image/email.jpg b/annapoornaanilnair/image/email.jpg
diff --git a/annapoornaanilnair/image/ic1.jpeg b/annapoornaanilnair/image/ic1.jpeg
diff --git a/annapoornaanilnair/image/ic1.png b/annapoornaanilnair/image/ic1.png
diff --git a/annapoornaanilnair/image/ic2.png b/annapoornaanilnair/image/ic2.png
diff --git a/annapoornaanilnair/image/ic3.png b/annapoornaanilnair/image/ic3.png
diff --git a/annapoornaanilnair/image/ic4.png b/annapoornaanilnair/image/ic4.png
diff --git a/annapoornaanilnair/image/link.png b/annapoornaanilnair/image/link.png
diff --git a/annapoornaanilnair/image/pic1.png b/annapoornaanilnair/image/pic1.png
diff --git a/annapoornaanilnair/index.html b/annapoornaanilnair/index.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet2" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+        integrity="sha384-6oE2gW5l6I3Fg5GgOn5bsy6vbWf5fTjk5Kp8R/6ZJ6UjqHSrVo5f5Cy5d47fsMzRq" crossorigin="anonymous">
+
+    <title>Portfolio</title>
+</head>
+
+
+<body>
+    <section id="header">
+
+        <div>
+            <ul id="navbar">
+                <li><a class="active" href="index.html">Home</a></li>
+                <li><a href="shop.html">Projects</a></li>
+                <li><a href="experience.html">Experience</a></li>
+
+                <li><a href="contact.html">Contact</a></li>
+
+
+            </ul>
+        </div>
+    </section>
+    <section id="home">
+        <div class="content">
+            <h1>Hello, I'am Annapoorna.</h1>
+            <h4>I am a third-year software engineering student at Vellore Institute of
+                Technology, Vellore.</h4>
+            <h4>I am incredibly enthusiastic about emerging technologies and how they are shaping
+                the world around us. My interests lie in the exciting fields of Android and web development, as well as
+                cybersecurity-related areas. Although I am still learning, I have a solid foundation in Java application
+                development and am drawn to the flexibility and versatility of Python. For me, learning is not just
+                about acquiring knowledge, but also about exploring new ideas and pushing the boundaries of what is
+                possible.</h4>
+            <h4>I am always on the lookout for ways to challenge myself and expand my skill set, knowing that
+                the more I learn, the better equipped I will be to tackle complex real-world problems. If given the
+                opportunity, I am confident that I can make valuable contributions to any organization, leveraging my
+                creativity, technical knowledge, and passion for innovation to achieve success. </h4>
+
+        </div>
+        <div class="image">
+            <img src="image\dp1.jpg" alt="">
+        </div>
+
+    </section>
+    <h2 id="project-txt">Projects</h2>
+    <section id="projects">
+
+        <div class="project"><img src="image\ic1.png" alt="" srcset="">
+            <h6>Project-1</h6>
+        </div>
+        <div class="project"><img src="image\ic2.png" alt="" srcset="">
+            <h6>Project-2</h6>
+        </div>
+        <div class="project"><img src="image\ic3.png" alt="" srcset="">
+            <h6>Project-3</h6>
+        </div>
+        <div class="project"><img src="image\ic4.png" alt="" srcset="">
+            <h6>Project-4</h6>
+        </div>
+
+
+
+    </section>
+
+    <section id="contact">
+        <h2>Contact</h2>
+        <div class="contact-info">
+            <div class="contact-item">
+                <img src="image/email.jpg" alt="Email Icon">
+                <p><a href="mailto:annapoornaanilnair@gmail.com">annapoornaanilnair@gmail.com</a></p>
+            </div>
+            <div class="contact-item">
+                <img src="image/contact.png" alt="Phone Icon">
+                <p>+91 9778271677</p>
+            </div>
+            <div class="contact-item">
+                <img src="image/link.png" alt="LinkedIn Icon">
+                <p><a href="https://www.linkedin.com/in/annapoorna-anil-3414b6223/" target="_blank"
+                        rel="noopener noreferrer">LinkedIn Profile</a></p>
+            </div>
+        </div>
+
+        <h3>Send me a Message..!</h3>
+    </section>
+
+
+
+
+    <section id="experience">
+        <h2>Experience</h2>
+        <div class="experience-item">
+            <h3>Coordinator, Gravitass</h3>
+            <p>
+                As a coordinator of Gravitass, I have had the privilege of organizing and leading various events and
+                activities within the organization. Gravitass has provided me with valuable experience in event
+                management, team collaboration, and leadership.
+            </p>
+        </div>
+
+        <div class="experience-item">
+            <h3>Member, Malayalam Literary Association (MLA)</h3>
+            <p>
+                I am an active member of the Malayalam Literary Association (MLA), where I engage in discussions,
+                cultural events, and literary activities. My involvement with MLA has enriched my cultural understanding
+                and appreciation for Malayalam literature.
+            </p>
+        </div>
+
+        <!-- Add other experience items if applicable -->
+    </section>
+
+    <footer>
+        <p>&copy; 2023 AAN | Designed by Annapoorna</p>
+    </footer>
+</body>
+
+</html>
diff --git a/annapoornaanilnair/style.css b/annapoornaanilnair/style.css
@@ -0,0 +1,267 @@
+@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+* {
+    font-family: 'League Spartan', sans-serif;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: #111;
+
+    color: #fff;
+
+}
+
+
+#header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 80px;
+    background: #f3eb99c9;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
+    z-index: 999;
+    position: sticky;
+    top: 0;
+    left: 0;
+    transition: background-color 0.3s ease;
+
+}
+
+#navbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+#navbar li {
+    list-style: none;
+    padding: 0 20px;
+    position: relative;
+}
+
+#navbar li a {
+    text-decoration: none;
+    font-size: 16px;
+    font-weight: 600;
+    color: #1a1a1a;
+    transition: color 0.3s ease;
+
+}
+
+#navbar li a:hover {
+    color: #4CAF50;
+
+}
+
+
+#logo {
+    font-size: 24px;
+    font-weight: bold;
+    color: #333;
+
+    transition: color 0.3s ease;
+
+}
+
+#logo:hover {
+    color: #4CAF50;
+
+}
+
+#navbar li a.active {
+    color: #4CAF50;
+
+}
+
+#navbar li a.active:hover {
+    color: #1a1a1a;
+
+}
+
+#project-txt {
+    text-align: center;
+    padding-top: 10px;
+}
+
+
+#home {
+    background-color: #f1c40f;
+    text-align: center;
+    padding: 20px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    color: #333;
+    align-items: center;
+    justify-content: center;
+    margin: 10px;
+    border-radius: 10px;
+}
+
+#home img {
+    width: 100%;
+    max-width: 400px;
+
+    border-radius: 10px;
+
+    transition: transform 0.3s ease;
+}
+
+#home img:hover {
+    transform: scale(1.1);
+
+}
+
+#home .content {
+    text-align: left;
+    padding: 10px;
+}
+
+
+#projects {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+
+    gap: 20px;
+    text-align: center;
+    padding: 40px 10%;
+}
+
+.project {
+    text-align: left;
+    padding: 20px;
+    background-color: #f1c40f;
+
+    border-radius: 10px;
+    transition: background-color 0.3s ease;
+}
+
+.project:hover {
+    background-color: #4CAF50;
+
+}
+
+.project img {
+    width: 100%;
+    height: 150px;
+    object-fit: cover;
+    background-color: #fff;
+    border-radius: 8px;
+    transition: transform 0.3s ease;
+}
+
+.project:hover img {
+    transform: scale(1.1);
+
+}
+
+.project h6 {
+    margin-top: 10px;
+    font-size: 18px;
+}
+
+#projects h2 {
+    margin-bottom: 20px;
+}
+
+
+#contact {
+    text-align: center;
+    padding: 20px;
+    padding-bottom: 20px;
+}
+
+
+
+#contact {
+    text-align: center;
+    padding: 40px 10%;
+}
+
+
+#contact {
+    text-align: center;
+    padding: 40px 10%;
+}
+
+.contact-info {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+.contact-item {
+    text-align: center;
+    width: 250px;
+
+    padding: 20px;
+    background-color: #f1c40f;
+
+    border-radius: 10px;
+    transition: background-color 0.3s ease;
+}
+
+.contact-item:hover {
+    background-color: #4CAF50;
+
+}
+
+.contact-item img {
+    width: 50px;
+
+    height: 50px;
+    margin-bottom: 10px;
+    background-color: #fff;
+
+    border-radius: 10%;
+    padding: 10px;
+
+}
+
+.contact-item p {
+    font-size: 16px;
+    margin-top: 10px;
+}
+
+.contact-item a {
+    color: #000;
+
+    text-decoration: none;
+}
+
+.contact-item a:hover {
+    text-decoration: underline;
+
+}
+
+
+#contact h3 {
+    margin-top: 40px;
+    font-size: 24px;
+    color: #fff;
+}
+
+#contact h2 {
+    margin-top: 40px;
+    font-size: 24px;
+    color: #fff;
+    padding-bottom: 10px;
+}
+
+
+
+
+footer {
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    padding: 10px 0;
+    transition: background-color 0.3s ease;
+}
+
+footer:hover {
+    background-color: #4CAF50;
+
+}