diff --git a/Donthineni Santhosh/EASY_01/easy_01.css b/Donthineni Santhosh/EASY_01/easy_01.css
new file mode 100644
index 0000000..3732b80
--- /dev/null
+++ b/Donthineni Santhosh/EASY_01/easy_01.css	
@@ -0,0 +1,327 @@
+*{
+    font-family: 'Times New Roman', Times, serif;
+    color: #000;
+    scroll-behavior: smooth;
+}
+*::-webkit-scrollbar{
+    display: none;
+}
+body{
+    background-color: #000;
+    margin:0;
+    padding:0;
+    display: flex;
+    justify-content: center;
+}
+.main-background{
+    min-height:3530px;
+    width:1492px;
+    background-color: #fffbfb;
+    box-sizing: border-box;
+}
+header{
+    height:70px;
+    width:100%;
+    border-radius: 4px;
+    box-sizing: border-box;
+    padding:12px 30px;
+    background-color: #e8e9e7;
+    /* backdrop-filter: blur(40px); */
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: sticky;
+    top:0;
+    z-index: 2;
+    /* border: 1px solid; */
+}
+.header-logo{
+    height:46px;
+    width:46px;
+    font-weight: bolder;
+    cursor: pointer;
+    user-select: none;
+}   
+nav{
+    height:46px;
+    width:600px;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    box-sizing: border-box;
+    /* border: 1px solid; */
+}
+.nav-items{
+    text-decoration: none;
+    font-weight: bolder;
+    font-size: 18px;
+    height:36px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    padding: 0px 18px;
+    border: 1px solid;
+    transition: all 0.2s ease-out;
+}
+.nav-items:hover{
+    color: #fff;
+    background-color: #363434;
+}
+hr{
+    position: sticky;
+    top:80px;
+    z-index: 2;
+}
+
+
+.hero-section{
+    position: absolute;
+    top:70px;
+    height:870px;
+    width:1492px;
+    box-sizing: border-box;
+    background-image: url('./images/bg.jpg');
+    background-size: cover;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+.hero-section-title{
+    font-size: 52px;
+    position: relative;
+    top:40px;
+    left:180px;
+    font-weight: bolder;
+    margin-top: 0;
+    margin-left: 0;
+    margin-right: 0;
+    margin-bottom:12px;
+    text-decoration: underline;
+}
+.hero-section-description{
+    margin-top: 0;
+    margin-left: 0;
+    margin-right: 0;
+    margin-bottom:4px;
+    position: relative;
+    top:40px;
+    left:300px;
+    font-size: 20px;
+    font-weight: bold;
+}
+
+.feature-section{
+    position: absolute;
+    top:950px;
+    height:850px;
+    width:1490px;
+    box-sizing: border-box;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin:0;
+    padding: 0px 50px
+}
+.feature-section-head{
+    font-size: 42px;
+    margin:0px;
+    text-decoration: underline;
+}
+.feature-section-desc{
+    font-size: 18px;
+    line-height: 22px;
+    font-weight: 600;
+}
+.feature-section-item{
+    text-decoration: none;
+    font-weight: bolder;
+    font-size: 18px;
+    height:36px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    padding: 0px 18px;
+    border: 1px solid;
+    border-radius: 12px;
+    transition: all 0.2s ease-out;
+}
+.feature-section-item:hover{
+    color: #fff;
+    background-color: #363434;
+}
+
+
+.testimonial-section{
+    position: absolute;
+    top:1810px;
+    height:850px;
+    width:1490px;
+    box-sizing: border-box;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin:0;
+    /* border: 1px solid; */
+}
+.testimonial-section-head{
+    font-size: 42px;
+    margin:70px 0px 12px 0px;
+    text-decoration: underline;
+}
+.testimonial-container{
+    height:700px;
+    width:800px;
+    border-radius: 12px;
+    box-sizing: border-box;
+    padding: 22px;
+    border:1.5px solid
+}
+.testimonial-desc{
+    font-size: 18px;
+    line-height:26px;
+    font-style: italic;
+    color: #000;
+}
+.testimonial-name{
+    font-size: 18px;
+    line-height: 22px;
+    font-style: italic;
+    font-weight: 600;
+}
+
+
+.contact-section{
+    position: absolute;
+    top:2680px;
+    height:850px;
+    width:1490px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin:0;
+}
+.contact-section-head{
+    font-size: 36px;
+    margin: 0;
+    text-decoration: underline;   
+}
+.contact-section-desc{
+    position: relative;
+    left:140px;
+    font-size: 18px;
+    line-height:26px;
+    font-style: italic;
+    font-weight: 600;
+    margin: 0;
+}
+.conatct-conatiner{
+    margin-top: 12px;
+    height:600px;
+    width:450px;
+    border-radius: 12px;
+    border: 1px solid;
+    box-sizing: border-box;
+    padding:40px 20px;
+    display: flex;
+    /* justify-content: center; */
+    /* align-items: center; */
+    flex-direction: column;
+}
+.contact-section-label{
+    font-size: 20px;
+    line-height:26px;
+    font-weight: 600;
+    font-style:italic;
+}
+.contact-section-input{
+    height:30px;
+    width:100%;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    border-bottom: 2px solid;
+    background-color: transparent;
+    color: #000;
+    text-align: center;
+    outline: none;
+    font-weight: bolder;
+}
+.contact-section-textarea{
+    height:100px;
+    background-color: transparent;
+    color: #000;
+    text-align: center;
+    outline: none;
+    font-weight: bolder;
+    border:2px solid;
+    margin-top:12px;
+    border-radius: 12px;
+}
+.contact-section-submit{
+    text-decoration: none;
+    font-weight: bolder;
+    font-size: 18px;
+    height:36px;
+    width: 100px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    padding: 0px 18px;
+    border: 1px solid;
+    transition: all 0.2s ease-out;
+    margin: 20px auto;
+    border-radius: 12px;
+    cursor: pointer;
+}
+.contact-section-submit:hover{
+    color: #fff;
+    background-color: #363434;
+}
+.contact-section-href{
+    margin-top: 50px;
+    height:60px;
+    width: 100%;
+    text-align: center;
+    box-sizing: border-box;
+}
+.contact-section-eachhref-one{
+    min-height:50px;
+    min-width:50px;
+    border-radius: 25px;
+    margin: 0px 20px;
+    background-image: url('./images/github.png');
+    background-size: cover;
+    border:1px solid;
+    background-repeat: no-repeat;
+    cursor: pointer;
+}
+.contact-section-eachhref-two{
+    height:50px;
+    width:50px;
+    border-radius: 25px;
+    margin: 0px 20px;
+    background-image: url('./images/instagram.jpg');
+    background-size: cover;
+    border:1px solid;
+    background-repeat: no-repeat;
+    cursor: pointer;
+}
+.contact-section-eachhref-three{
+    height:50px;
+    width:50px;
+    border-radius: 25px;
+    margin: 0px 20px;
+    background-image: url('./images/linkedIn.png');
+    background-size: cover;
+    border:1px solid;
+    background-repeat: no-repeat;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/Donthineni Santhosh/EASY_01/easy_01.html b/Donthineni Santhosh/EASY_01/easy_01.html
new file mode 100644
index 0000000..d788170
--- /dev/null
+++ b/Donthineni Santhosh/EASY_01/easy_01.html	
@@ -0,0 +1,67 @@
+<!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="./easy_01.css">
+    <title>Easy_01</title>
+</head>
+<body>
+    <div class="main-background">
+        <header>
+            <h1 class="header-logo">CSEdge</h1>
+            <nav>
+                <a href="#" class="nav-items">Home</a>
+                <a href="#features" class="nav-items">Features</a>
+                <a href="#testimonial" class="nav-items">Testimonial</a>
+                <a href="#contact" class="nav-items">Contact</a>
+            </nav>
+        </header>
+        <hr>
+        <section id="home">
+            <div class="hero-section">
+                <h1 class="hero-section-title">CSEdge</h1>
+                <p class="hero-section-description">Where learning meets opportunity in</p>
+                <p class="hero-section-description">a month-long online internship</p>
+                <p class="hero-section-description">journey.</p>
+            </div>
+        </section>
+        <section id="features" class="feature-section">
+            <h1 class="feature-section-head">Features</h1>
+            <p class="feature-section-desc">⦾ CSEdge is an excellent platform that provides internships for new fresh graduates to gain practical experience. It is recognized as a verified company, instilling confidence in users that the internship opportunities offered here are genuine and valuable. CSEdge serves as a great starting point for new professionals in their career journey, fostering their growth and development.</p>
+            <p class="feature-section-desc">⦾ At CSEdge, the internship program offers a comprehensive learning experience. Proudly MSME Registered, AICTE Accredited, and recognized by LinkedIn, CSEdge internship includes WhatsApp support for quick queries, E-Certificate upon completion, and access to free resources. Join us at CSEdge to gain valuable skills and practical knowledge</p>
+            <p class="feature-section-desc">⦾ At CSEdge, the contact feature facilitates seamless communication with the team. Stay connected and informed by following the company on social media platforms like YouTube,Facebook, Instagram, and LinkedIn. For direct correspondence, feel free to reach out via Gmail. We're here to address inquiries and welcome feedback.</p>
+            <p class="feature-section-desc">⦾ (CSEdge) has a great user interface,It features a user-friendly design,Smooth navigation is also a highlight,Overall, it provides an excellent experience!</p>
+            <br>
+            <a href="https://csedge.courses/" class="feature-section-item">Click here to Visit (CSEdge)</a>
+        </section>
+        <section id="testimonial" class="testimonial-section">
+            <h1 class="testimonial-section-head">Testimonial</h1>
+            <div class="testimonial-container">
+                <p class="testimonial-desc">"My internship at CSEdge was a transformative experience. From day one, I was welcomed into a team of talented and supportive professionals who were always willing to share their knowledge. Working on real-world web development projects allowed me to apply my academic knowledge in practical ways and develop new skills rapidly. The mentorship and feedback I received were invaluable, and the collaborative environment fostered my growth as both a developer and a team member. I am grateful for the opportunity to have interned at CSEdge, and it has solidified my passion for web development."</p>
+                <p class="testimonial-name">-Azmatulla Khan</p><br>
+                <p class="testimonial-desc">"Interning at CSEdge was one of the best decisions I've made in my career. The hands-on experience I gained in web development was unparalleled. I had the chance to work on innovative projects that challenged me and helped me grow both technically and professionally. The team's dedication to fostering a learning environment was evident through their constant guidance and encouragement. This internship not only enhanced my coding skills but also taught me the importance of teamwork, communication, and problem-solving in a professional setting. I am proud to have been a part of the CSEdge team and highly recommend this internship to anyone looking to advance their career in tech."</p>
+                <p class="testimonial-name">-Balaji Chennupati</p>
+            </div>
+        </section>
+        <section id="contact" class="contact-section">
+            <h1 class="contact-section-head">Contact Us</h1>
+            <p class="contact-section-desc">-For more queries and repesctive information</p>
+            <div class="conatct-conatiner">
+                <label for="name" class="contact-section-label">Name</label>
+                <input type="text" id="name" class="contact-section-input" placeholder="Enter your name"><br><br>
+                <label for="email" class="contact-section-label">Email</label>
+                <input type="email" id="email" class="contact-section-input" placeholder="Enter your email"><br><br>
+                <label for="message" class="contact-section-label">Message</label>
+                <textarea type="text" id="message" class="contact-section-textarea" placeholder="Enter your message"></textarea>
+                <button class="contact-section-submit">Submit</button>
+                <div class="contact-section-href">
+                    <a target="_blank" href="https://github.com/CSEdgeOfficial"><button class="contact-section-eachhref-one"></button></a>
+                    <a target="_blank" href="https://www.instagram.com/csedgeofficial/"><button class="contact-section-eachhref-two"></button></a>
+                    <a target="_blank" href="https://www.linkedin.com/company/csedge/"><button class="contact-section-eachhref-three"></button></a>
+                </div>
+            </div>
+        </section>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/Donthineni Santhosh/EASY_01/images/bg.jpg b/Donthineni Santhosh/EASY_01/images/bg.jpg
new file mode 100644
index 0000000..83d8835
Binary files /dev/null and b/Donthineni Santhosh/EASY_01/images/bg.jpg differ
diff --git a/Donthineni Santhosh/EASY_01/images/github.png b/Donthineni Santhosh/EASY_01/images/github.png
new file mode 100644
index 0000000..0744f8c
Binary files /dev/null and b/Donthineni Santhosh/EASY_01/images/github.png differ
diff --git a/Donthineni Santhosh/EASY_01/images/instagram.jpg b/Donthineni Santhosh/EASY_01/images/instagram.jpg
new file mode 100644
index 0000000..79a6162
Binary files /dev/null and b/Donthineni Santhosh/EASY_01/images/instagram.jpg differ
diff --git a/Donthineni Santhosh/EASY_01/images/linkedIn.png b/Donthineni Santhosh/EASY_01/images/linkedIn.png
new file mode 100644
index 0000000..cccea43
Binary files /dev/null and b/Donthineni Santhosh/EASY_01/images/linkedIn.png differ
diff --git a/Donthineni Santhosh/EASY_02/easy_02.html b/Donthineni Santhosh/EASY_02/easy_02.html
new file mode 100644
index 0000000..7ecc7de
--- /dev/null
+++ b/Donthineni Santhosh/EASY_02/easy_02.html	
@@ -0,0 +1,42 @@
+<!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="https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.4.0/css/lightgallery.min.css">
+    <link rel="stylesheet" href="./easy_o2.css">
+    <title>Easy_02</title>
+</head>
+<body>
+    <div class="main-background">
+        <h1 class="main-conatainer-head">Light Box Gallery</h1>
+        <div class="gallery-holder">
+            <a href="./gallery/1.jpg" class="a"><img src="./gallery/1.jpg" alt="Image1" class="image-one"></a>
+            <a href="./gallery/2.jpg" class="a"><img src="./gallery/2.jpg" alt="Image" class="image-one"></a>
+            <a href="./gallery/3.jpg" class="a"><img src="./gallery/3.jpg" alt="Image" class="image-one"></a>
+            <a href="./gallery/4.jpg" class="a"><img src="./gallery/4.jpg" alt="Image" class="image-one"></a>
+            <a href="./gallery/5.jpg" class="a"><img src="./gallery/5.jpg" alt="Image" class="image-one"></a>
+            <a href="./gallery/6.jpg" class="a"><img src="./gallery/6.jpg" alt="Image" class="image-one"></a>
+            <a href="./gallery/7.jpg" class="a"><img src="./gallery/7.jpg" alt="Image" class="image-one"></a>
+            <a href="./gallery/8.jpg" class="a"><img src="./gallery/8.jpg" alt="Image" class="image-one"></a>
+            <a href="./gallery/9.jpg" class="a"><img src="./gallery/9.jpg" alt="Image" class="image-one"></a>
+        </div>
+    </div>
+    <div class="span">
+        <span>S</span>
+        <span>C</span>
+        <span>R</span>
+        <span>O</span>
+        <span>L</span>
+        <span>L</span>
+        <span>D</span>
+        <span>O</span>
+        <span>W</span>
+        <span>N</span>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.4.0/js/lightgallery.min.js"></script>
+    <script>
+        lightGallery(document.querySelector('.gallery-holder'));
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Donthineni Santhosh/EASY_02/easy_o2.css b/Donthineni Santhosh/EASY_02/easy_o2.css
new file mode 100644
index 0000000..43c10fd
--- /dev/null
+++ b/Donthineni Santhosh/EASY_02/easy_o2.css	
@@ -0,0 +1,65 @@
+*{
+    font-family: 'Times New Roman', Times, serif;
+    color: #fff;
+    scroll-behavior: smooth;
+    box-sizing: border-box;
+}
+*::-webkit-scrollbar{
+    display: none;
+}
+body{
+    background-color: #000;
+    margin:0;
+    padding:0;
+    display: flex;
+    justify-content: center;
+}
+
+
+.main-background{
+    height: 846px;
+    width:1492px;
+    padding: 20px 80px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    /* border: 1px solid #fff; */
+}
+.main-conatainer-head{
+    font-size: 36px;
+    text-decoration: underline;
+    font-weight: 500;
+}
+.gallery-holder{
+    height:700px;
+    width:1300px;
+    border-radius: 12px;
+    text-align: center;
+    /* border: 1px solid #fff; */
+    overflow-x:scroll ;
+}
+.a{
+    max-height:650px;
+    max-width:1100px;
+    margin:0px;
+}
+.image-one{
+    height:650px;
+    width:1000px;
+    margin: 50px 0px;
+    border-radius: 12px;
+}
+.span{
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    left:-200px;
+    top:500px;
+}
+span{
+    font-family: 'Courier New', Courier, monospace;
+    font-weight: bolder;
+    font-size: 22px;
+    transform: rotate(90deg);
+}
\ No newline at end of file
diff --git a/Donthineni Santhosh/EASY_02/gallery/1.jpg b/Donthineni Santhosh/EASY_02/gallery/1.jpg
new file mode 100644
index 0000000..67d66d9
Binary files /dev/null and b/Donthineni Santhosh/EASY_02/gallery/1.jpg differ
diff --git a/Donthineni Santhosh/EASY_02/gallery/2.jpg b/Donthineni Santhosh/EASY_02/gallery/2.jpg
new file mode 100644
index 0000000..ebcb7da
Binary files /dev/null and b/Donthineni Santhosh/EASY_02/gallery/2.jpg differ
diff --git a/Donthineni Santhosh/EASY_02/gallery/3.jpg b/Donthineni Santhosh/EASY_02/gallery/3.jpg
new file mode 100644
index 0000000..1e01b04
Binary files /dev/null and b/Donthineni Santhosh/EASY_02/gallery/3.jpg differ
diff --git a/Donthineni Santhosh/EASY_02/gallery/4.jpg b/Donthineni Santhosh/EASY_02/gallery/4.jpg
new file mode 100644
index 0000000..662120e
Binary files /dev/null and b/Donthineni Santhosh/EASY_02/gallery/4.jpg differ
diff --git a/Donthineni Santhosh/EASY_02/gallery/5.jpg b/Donthineni Santhosh/EASY_02/gallery/5.jpg
new file mode 100644
index 0000000..a30b83d
Binary files /dev/null and b/Donthineni Santhosh/EASY_02/gallery/5.jpg differ
diff --git a/Donthineni Santhosh/EASY_02/gallery/6.jpg b/Donthineni Santhosh/EASY_02/gallery/6.jpg
new file mode 100644
index 0000000..973ae11
Binary files /dev/null and b/Donthineni Santhosh/EASY_02/gallery/6.jpg differ
diff --git a/Donthineni Santhosh/EASY_02/gallery/7.jpg b/Donthineni Santhosh/EASY_02/gallery/7.jpg
new file mode 100644
index 0000000..cc42395
Binary files /dev/null and b/Donthineni Santhosh/EASY_02/gallery/7.jpg differ
diff --git a/Donthineni Santhosh/EASY_02/gallery/8.jpg b/Donthineni Santhosh/EASY_02/gallery/8.jpg
new file mode 100644
index 0000000..08abbb6
Binary files /dev/null and b/Donthineni Santhosh/EASY_02/gallery/8.jpg differ
diff --git a/Donthineni Santhosh/EASY_02/gallery/9.jpg b/Donthineni Santhosh/EASY_02/gallery/9.jpg
new file mode 100644
index 0000000..b5d1972
Binary files /dev/null and b/Donthineni Santhosh/EASY_02/gallery/9.jpg differ
diff --git a/Donthineni Santhosh/EASY_02/gallery/bg.jpg b/Donthineni Santhosh/EASY_02/gallery/bg.jpg
new file mode 100644
index 0000000..1f0a815
Binary files /dev/null and b/Donthineni Santhosh/EASY_02/gallery/bg.jpg differ
diff --git a/Donthineni Santhosh/EASY_03/easy_03.html b/Donthineni Santhosh/EASY_03/easy_03.html
new file mode 100644
index 0000000..4736249
--- /dev/null
+++ b/Donthineni Santhosh/EASY_03/easy_03.html	
@@ -0,0 +1,134 @@
+<!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="./easy_o3.css">
+</head>
+<body>
+    <div class="main-container">
+        <div class="main-about-section">
+            <div class="about-section-one">
+                <div class="about-section-description">
+                    -A passionate web developer with a strong foundation in HTML, CSS JavaScript 
+                    dedicated to creating visually appealing and user-friendly websites. With a keen 
+                    eye for design and a commitment to clean, efficient code, I bring ideas to life on
+                    the web. My expertise in front-end development ensures seamless user experiences
+                    across all devices. Continuously learning and adapting, I strive to stay ahead in the
+                    ever-evolving world of web development.
+                </div>
+                <img src="./images/avatar.jpg" alt="">
+                <h1 class="about-secction-one-name">-Donthineni Santhosh</h1>
+            </div><br><br><br><br><br><br>
+            <div class="about-section-two">
+                <div class="about-section-two-projectname">
+                    <a href="./previews/preview1.html" target="_blank" class="about-section-two-projectname">Project 1</a>
+                    <span>(Landing Page)</span>
+                </div>
+                <p class="about-section-two-projectdescription">
+                    -Our landing page showcases a clean, modern design built with robust HTML and CSS, ensuring 
+                    a seamless and responsive user experience. The visually appealing layout effectively highlights 
+                    key information and calls to action. With intuitive navigation and striking visuals, it engages 
+                    visitors and drives conversions.
+                    <a target="_blank" href="https://github.com/DonthineniSanthosh/CSEdge-Internship-Tasks/tree/main/EASY_01">👉Github👈</a>
+                </p>
+                <div class="about-section-two-img-container-preview1">
+                    <img src="./images/preview1-img1.png" class="about-section-two-images-preview1" alt="preview1-img1">
+                    <img src="./images/preview1-img2.png" class="about-section-two-images-preview1" alt="preview1-img2">
+                    <img src="./images/preview1-img3.png" class="about-section-two-images-preview1" alt="preview1-img3">
+                    <img src="./images/preview1-img4.png" class="about-section-two-images-preview1" alt="preview1-img4">
+                </div>
+                <a href="./previews/preview1.html" target="_blank" class="about-section-two-projectname">Click Here to view the page</a>
+                <br><br><br><br><br><br><br>
+
+                <div class="about-section-two-projectname">
+                    <a href="./previews/preview2.html" target="_blank" class="about-section-two-projectname">Project 2</a>
+                    <span>(Lightbox Gallery)</span>
+                </div>
+                <p class="about-section-two-projectdescription">
+                    -Create a stunning lightbox gallery using HTML, CSS, and JavaScript with resources from Cloudflare. 
+                    This setup provides a seamless and responsive way to display images, enhancing user experience with 
+                    smooth transitions and modern design. Easily implement and customize the gallery to fit any project's aesthetic.
+                    <a target="_blank" href="https://github.com/DonthineniSanthosh/CSEdge-Internship-Tasks/tree/main/EASY_02">👉GitHub👈</a>
+                </p>
+                <div class="about-section-two-img-container-preview2">
+                    <img src="./images/preview2-img1.png" class="about-section-two-images-preview2" alt="preview2-img1">
+                    <img src="./images/preview2-img2.png" class="about-section-two-images-preview2" alt="preview2-img2">
+                    <img src="./images/preview2-img3.png" class="about-section-two-images-preview2" alt="preview2-img3">
+                </div>
+                <a href="./previews/preview2.html" target="_blank" class="about-section-two-projectname">Click Here to view the page</a>
+                <br><br><br><br><br><br><br>
+
+                <div class="about-section-two-projectname">
+                    <a href="./previews/preview3.html" target="_blank" class="about-section-two-projectname">Project 3</a>
+                    <span>(Enrollment Form)</span>
+                </div>
+                <p class="about-section-two-projectdescription">-This enrollment form features a sleek design using HTML and CSS, 
+                    enhanced with animations for a dynamic user experience. It employs JavaScript to validate input data, ensuring 
+                    all entries are accurate and complete before submission. Enjoy a seamless and interactive form completion process.
+                    <a target="_blank" href="https://github.com/DonthineniSanthosh/CSEdge-Internship-Tasks/tree/main/EASY_04">👉GitHub👈</a>
+                </p>
+                <div class="about-section-two-img-container-preview3">
+                    <img src="./images/preview3-img1.png" class="about-section-two-images-preview3" alt="preview3-img1">
+                    <img src="./images/preview3-img2.png" class="about-section-two-images-preview3" alt="preview3-img2">
+                    <img src="./images/preview3-img3.png" class="about-section-two-images-preview3" alt="preview3-img3">
+                </div>
+                <a href="./previews/preview3.html" target="_blank" class="about-section-two-projectname">Click Here to view the page</a>
+                <br><br><br><br><br><br><br>
+
+                <div class="about-section-two-projectname">
+                    <a href="https://moviemate.pythonanywhere.com/" target="_blank" class="about-section-two-projectname">Project 4</a>
+                    <span>(Movie TV Show Recommendation System)</span>
+                </div>
+                <p class="about-section-two-projectdescription">-Our Movie and TV Show Recommendation System empowers users to seamlessly 
+                    access information on specific movies, createpersonalized watchlists, and enjoy a smooth user experience.Offering a 
+                    curated selection of content, our system enhancesentertainment discovery, making it easy for users to find their 
+                    favorite movies and TV shows.
+                    <a target="_blank" href="https://github.com/DonthineniSanthosh/Movie_TV_Show_Recommendation_System">👉Github👈</a>
+                </p>  
+                <div class="about-section-two-img-container-preview4">
+                    <img src="./images/preview4-img1.png" class="about-section-two-images-preview4" alt="preview4-img1">
+                    <img src="./images/preview4-img2.png" class="about-section-two-images-preview4" alt="preview4-img2">
+                    <img src="./images/preview4-img3.png" class="about-section-two-images-preview4" alt="preview4-img3">
+                    <img src="./images/preview4-img4.png" class="about-section-two-images-preview4" alt="preview4-img4">
+                </div>
+                <a href="https://moviemate.pythonanywhere.com/" target="_blank" class="about-section-two-projectname">Click Here to view the page</a>
+                <br><br><br><br><br><br><br>
+                
+                <div class="about-section-two-projectname">
+                    <a href="https://github.com/DonthineniSanthosh/Tourism-And-Hospitality-Management-ReactProject" target="_blank" class="about-section-two-projectname">Project 5</a>
+                    <span>(Tourism and Hospitality management)</span>
+                </div>
+                <p class="about-section-two-projectdescription">-Our Tourism and Hospitality Management project facilitates seamless
+                    booking experiences for travelers, streamlining hotel reservations and itinerary planning. With an intuitive interface 
+                    and robust backend powered by Mongoose, Express JS, and Node JS, we ensure efficientmanagement of travel accommodations.
+                    <a target="_blank" href="https://github.com/DonthineniSanthosh/Tourism-And-Hospitality-Management-ReactProject">👉Github👈</a>
+                </p>
+                <div class="about-section-two-img-container-preview5">
+                    <img src="./images/preview5-img1.png" class="about-section-two-images-preview5" alt="preview5-img1">
+                    <img src="./images/preview5-img2.png" class="about-section-two-images-preview5" alt="preview5-img2">
+                    <img src="./images/preview5-img3.png" class="about-section-two-images-preview5" alt="preview5-img3">
+                    <img src="./images/preview5-img4.png" class="about-section-two-images-preview5" alt="preview5-img4">
+                </div>
+                <a href="https://github.com/DonthineniSanthosh/Tourism-And-Hospitality-Management-ReactProject" target="_blank" class="about-section-two-projectname">Click Here to view the page</a>
+                <br><br><br><br><br><br><br>
+
+                <p class="about-section-two-projectdescription">
+                    <span class="head">Used Technologies:</span>
+                    HTML, CSS, JavaScript, React Js, Node Js, Express JS, Mongoose, Python, Django, Postgresql, Bootstrap, CloudFlare.</p>
+            </div>
+            <footer>
+                <p><a href="https://github.com/DonthineniSanthosh">Copyright © All Rights Reserved 2024 Azmatulla Khan ®</a></p>
+            </footer>
+        </div>
+    </div>
+</body>
+</html>
+
+
+<!-- Create a minimalistic website showcasing five past web development projects with:
+Title and brief description
+Screenshot or demo video
+Technologies used
+Live preview / GitHub repository link -->
\ No newline at end of file
diff --git a/Donthineni Santhosh/EASY_03/easy_o3.css b/Donthineni Santhosh/EASY_03/easy_o3.css
new file mode 100644
index 0000000..89222f2
--- /dev/null
+++ b/Donthineni Santhosh/EASY_03/easy_o3.css	
@@ -0,0 +1,159 @@
+*{
+    font-family: 'Times New Roman', Times, serif;
+    box-sizing: border-box;
+    scroll-behavior: smooth;
+    color: #fff;
+}
+*::-webkit-scrollbar{
+    display: none;
+}
+body{
+    display: flex;
+    justify-content: center;
+    background-color: black;
+    margin:0px;
+    padding: 0px;
+}
+
+.main-container{
+    height:3800px;
+    width:1492px;
+    background-color: #242323c0;
+}
+
+
+
+.main-about-section{
+    height:1684px;
+    width:1492px;
+    padding: 110px 41px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    margin-bottom: 20px;
+}
+
+.about-section-one{
+    min-height:700px;
+    min-width:1410px;
+    display: flex;
+    justify-content: space-evenly;
+    padding: 22px;
+    margin-bottom: 4px;
+    border: 1px solid #fff;
+}
+.about-secction-one-name{
+    position: absolute;
+    top:660px;
+    left:1150px;
+    font-weight: lighter;
+    font-style: italic;
+}
+.about-section-description{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width:700px;
+    font-family: 'Courier New', Courier, monospace;
+    padding: 0px 0px 0px 30px;
+    position: relative;
+    left:80px;
+    line-height: 36px;
+    font-style: italic;
+}
+
+
+
+
+.about-section-two{
+    min-height:2800px;
+    min-width:1410px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding:50px 12px 0px 12px;
+}   
+span{
+    font-weight: 100;
+}
+.about-section-two-projectname{
+    font-weight: bolder;
+    margin-bottom: -10px;
+}
+.about-section-two-projectdescription{
+    font-style: italic;
+}
+.head{
+    text-decoration: underline;
+    font-weight: bolder;
+}
+.about-section-two-img-container-preview1{
+    min-height:300px;
+    max-width:1400px;
+    padding: 20px;
+    display: flex;
+    width:auto;
+}
+.about-section-two-images-preview1{
+    height:260px;
+    width:300px;
+    margin: 0 12px;
+    border-radius: 12px;
+}
+.about-section-two-img-container-preview2{
+    min-height:300px;
+    max-width:1400px;
+    padding: 20px;
+    display: flex;
+    width:auto;
+}
+.about-section-two-images-preview2{
+    height:260px;
+    width:350px;
+    margin: 0 12px;
+    border-radius: 12px;
+}
+.about-section-two-img-container-preview3{
+    min-height:300px;
+    max-width:1400px;
+    padding: 20px;
+    display: flex;
+    width:auto;
+}
+.about-section-two-images-preview3{
+    height:260px;
+    width:350px;
+    margin: 0 12px;
+    border-radius: 12px;
+}
+.about-section-two-img-container-preview4{
+    min-height:300px;
+    max-width:1460px;
+    padding: 10px;
+    display: flex;
+    width:auto;
+}
+.about-section-two-images-preview4{
+    height:260px;
+    width:340px;
+    margin: 0 6px;
+    border-radius: 12px;
+}
+.about-section-two-img-container-preview5{
+    min-height:300px;
+    max-width:1460px;
+    padding: 10px;
+    display: flex;
+    width:auto;
+}
+.about-section-two-images-preview5{
+    height:260px;
+    width:340px;
+    margin: 0 6px;
+    border-radius: 12px;
+}
+footer{
+    width: 100%;
+    text-align: center;
+    font-weight: bolder;
+}
\ No newline at end of file
diff --git a/Donthineni Santhosh/EASY_03/images/avatar.jpg b/Donthineni Santhosh/EASY_03/images/avatar.jpg
new file mode 100644
index 0000000..e47543d
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/images/avatar.jpg differ
diff --git a/Donthineni Santhosh/EASY_03/images/preview1-img1.png b/Donthineni Santhosh/EASY_03/images/preview1-img1.png
new file mode 100644
index 0000000..bb0fd95
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/images/preview1-img1.png differ
diff --git a/Donthineni Santhosh/EASY_03/images/preview1-img2.png b/Donthineni Santhosh/EASY_03/images/preview1-img2.png
new file mode 100644
index 0000000..e96a5f9
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/images/preview1-img2.png differ
diff --git a/Donthineni Santhosh/EASY_03/images/preview1-img3.png b/Donthineni Santhosh/EASY_03/images/preview1-img3.png
new file mode 100644
index 0000000..02ec699
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/images/preview1-img3.png differ
diff --git a/Donthineni Santhosh/EASY_03/images/preview1-img4.png b/Donthineni Santhosh/EASY_03/images/preview1-img4.png
new file mode 100644
index 0000000..198bcb5
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/images/preview1-img4.png differ
diff --git a/Donthineni Santhosh/EASY_03/images/preview2-img1.png b/Donthineni Santhosh/EASY_03/images/preview2-img1.png
new file mode 100644
index 0000000..4dd0cbd
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/images/preview2-img1.png differ
diff --git a/Donthineni Santhosh/EASY_03/images/preview2-img2.png b/Donthineni Santhosh/EASY_03/images/preview2-img2.png
new file mode 100644
index 0000000..9373d8d
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/images/preview2-img2.png differ
diff --git a/Donthineni Santhosh/EASY_03/images/preview2-img3.png b/Donthineni Santhosh/EASY_03/images/preview2-img3.png
new file mode 100644
index 0000000..70c7f54
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/images/preview2-img3.png differ
diff --git a/Donthineni Santhosh/EASY_03/images/preview3-img1.png b/Donthineni Santhosh/EASY_03/images/preview3-img1.png
new file mode 100644
index 0000000..295d024
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/images/preview3-img1.png differ
diff --git a/Donthineni Santhosh/EASY_03/images/preview3-img2.png b/Donthineni Santhosh/EASY_03/images/preview3-img2.png
new file mode 100644
index 0000000..b828d5a
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/images/preview3-img2.png differ
diff --git a/Donthineni Santhosh/EASY_03/images/preview3-img3.png b/Donthineni Santhosh/EASY_03/images/preview3-img3.png
new file mode 100644
index 0000000..87f2416
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/images/preview3-img3.png differ
diff --git a/Donthineni Santhosh/EASY_03/images/preview4-img1.png b/Donthineni Santhosh/EASY_03/images/preview4-img1.png
new file mode 100644
index 0000000..a6091f1
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/images/preview4-img1.png differ
diff --git a/Donthineni Santhosh/EASY_03/images/preview4-img2.png b/Donthineni Santhosh/EASY_03/images/preview4-img2.png
new file mode 100644
index 0000000..152d0b5
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/images/preview4-img2.png differ
diff --git a/Donthineni Santhosh/EASY_03/images/preview4-img3.png b/Donthineni Santhosh/EASY_03/images/preview4-img3.png
new file mode 100644
index 0000000..86833af
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/images/preview4-img3.png differ
diff --git a/Donthineni Santhosh/EASY_03/images/preview4-img4.png b/Donthineni Santhosh/EASY_03/images/preview4-img4.png
new file mode 100644
index 0000000..c944f5f
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/images/preview4-img4.png differ
diff --git a/Donthineni Santhosh/EASY_03/images/preview5-img1.png b/Donthineni Santhosh/EASY_03/images/preview5-img1.png
new file mode 100644
index 0000000..92eabe6
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/images/preview5-img1.png differ
diff --git a/Donthineni Santhosh/EASY_03/images/preview5-img2.png b/Donthineni Santhosh/EASY_03/images/preview5-img2.png
new file mode 100644
index 0000000..6f15633
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/images/preview5-img2.png differ
diff --git a/Donthineni Santhosh/EASY_03/images/preview5-img3.png b/Donthineni Santhosh/EASY_03/images/preview5-img3.png
new file mode 100644
index 0000000..5251ef2
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/images/preview5-img3.png differ
diff --git a/Donthineni Santhosh/EASY_03/images/preview5-img4.png b/Donthineni Santhosh/EASY_03/images/preview5-img4.png
new file mode 100644
index 0000000..a49bb11
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/images/preview5-img4.png differ
diff --git a/Donthineni Santhosh/EASY_03/previews/gallery/1.jpg b/Donthineni Santhosh/EASY_03/previews/gallery/1.jpg
new file mode 100644
index 0000000..67d66d9
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/previews/gallery/1.jpg differ
diff --git a/Donthineni Santhosh/EASY_03/previews/gallery/2.jpg b/Donthineni Santhosh/EASY_03/previews/gallery/2.jpg
new file mode 100644
index 0000000..ebcb7da
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/previews/gallery/2.jpg differ
diff --git a/Donthineni Santhosh/EASY_03/previews/gallery/3.jpg b/Donthineni Santhosh/EASY_03/previews/gallery/3.jpg
new file mode 100644
index 0000000..1e01b04
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/previews/gallery/3.jpg differ
diff --git a/Donthineni Santhosh/EASY_03/previews/gallery/4.jpg b/Donthineni Santhosh/EASY_03/previews/gallery/4.jpg
new file mode 100644
index 0000000..662120e
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/previews/gallery/4.jpg differ
diff --git a/Donthineni Santhosh/EASY_03/previews/gallery/5.jpg b/Donthineni Santhosh/EASY_03/previews/gallery/5.jpg
new file mode 100644
index 0000000..a30b83d
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/previews/gallery/5.jpg differ
diff --git a/Donthineni Santhosh/EASY_03/previews/gallery/6.jpg b/Donthineni Santhosh/EASY_03/previews/gallery/6.jpg
new file mode 100644
index 0000000..973ae11
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/previews/gallery/6.jpg differ
diff --git a/Donthineni Santhosh/EASY_03/previews/gallery/7.jpg b/Donthineni Santhosh/EASY_03/previews/gallery/7.jpg
new file mode 100644
index 0000000..cc42395
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/previews/gallery/7.jpg differ
diff --git a/Donthineni Santhosh/EASY_03/previews/gallery/8.jpg b/Donthineni Santhosh/EASY_03/previews/gallery/8.jpg
new file mode 100644
index 0000000..08abbb6
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/previews/gallery/8.jpg differ
diff --git a/Donthineni Santhosh/EASY_03/previews/gallery/9.jpg b/Donthineni Santhosh/EASY_03/previews/gallery/9.jpg
new file mode 100644
index 0000000..b5d1972
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/previews/gallery/9.jpg differ
diff --git a/Donthineni Santhosh/EASY_03/previews/gallery/bg.jpg b/Donthineni Santhosh/EASY_03/previews/gallery/bg.jpg
new file mode 100644
index 0000000..1f0a815
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/previews/gallery/bg.jpg differ
diff --git a/Donthineni Santhosh/EASY_03/previews/images/bg-task04.jpg b/Donthineni Santhosh/EASY_03/previews/images/bg-task04.jpg
new file mode 100644
index 0000000..238c211
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/previews/images/bg-task04.jpg differ
diff --git a/Donthineni Santhosh/EASY_03/previews/images/bg.jpg b/Donthineni Santhosh/EASY_03/previews/images/bg.jpg
new file mode 100644
index 0000000..83d8835
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/previews/images/bg.jpg differ
diff --git a/Donthineni Santhosh/EASY_03/previews/images/github.png b/Donthineni Santhosh/EASY_03/previews/images/github.png
new file mode 100644
index 0000000..0744f8c
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/previews/images/github.png differ
diff --git a/Donthineni Santhosh/EASY_03/previews/images/instagram.jpg b/Donthineni Santhosh/EASY_03/previews/images/instagram.jpg
new file mode 100644
index 0000000..79a6162
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/previews/images/instagram.jpg differ
diff --git a/Donthineni Santhosh/EASY_03/previews/images/linkedIn.png b/Donthineni Santhosh/EASY_03/previews/images/linkedIn.png
new file mode 100644
index 0000000..cccea43
Binary files /dev/null and b/Donthineni Santhosh/EASY_03/previews/images/linkedIn.png differ
diff --git a/Donthineni Santhosh/EASY_03/previews/preview1.html b/Donthineni Santhosh/EASY_03/previews/preview1.html
new file mode 100644
index 0000000..8c6a0b2
--- /dev/null
+++ b/Donthineni Santhosh/EASY_03/previews/preview1.html	
@@ -0,0 +1,395 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Easy_01</title>
+</head>
+<style>
+    *{
+    font-family: 'Courier New', Courier, monospace;
+    color: #000;
+    scroll-behavior: smooth;
+}
+*::-webkit-scrollbar{
+    display: none;
+}
+body{
+    background-color: #000;
+    margin:0;
+    padding:0;
+    display: flex;
+    justify-content: center;
+}
+.main-background{
+    min-height:3530px;
+    min-width:1492px;
+    background-color: #fffbfb;
+    box-sizing: border-box;
+}
+header{
+    height:70px;
+    width:100%;
+    border-radius: 4px;
+    box-sizing: border-box;
+    padding:12px 30px;
+    background-color: #e8e9e7;
+    /* backdrop-filter: blur(40px); */
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: sticky;
+    top:0;
+    z-index: 2;
+    /* border: 1px solid; */
+}
+.header-logo{
+    height:46px;
+    width:46px;
+    font-weight: bolder;
+    cursor: pointer;
+    user-select: none;
+}   
+nav{
+    height:46px;
+    width:600px;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    box-sizing: border-box;
+    /* border: 1px solid; */
+}
+.nav-items{
+    text-decoration: none;
+    font-weight: bolder;
+    font-size: 18px;
+    height:36px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    padding: 0px 18px;
+    border: 1px solid;
+    transition: all 0.2s ease-out;
+}
+.nav-items:hover{
+    color: #fff;
+    background-color: #363434;
+}
+hr{
+    position: sticky;
+    top:80px;
+    z-index: 2;
+}
+
+
+.hero-section{
+    position: absolute;
+    top:70px;
+    height:870px;
+    width:1492px;
+    box-sizing: border-box;
+    background-image: url('./images/bg.jpg');
+    background-size: cover;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+.hero-section-title{
+    font-size: 52px;
+    position: relative;
+    top:40px;
+    left:180px;
+    font-weight: bolder;
+    margin-top: 0;
+    margin-left: 0;
+    margin-right: 0;
+    margin-bottom:12px;
+    text-decoration: underline;
+}
+.hero-section-description{
+    margin-top: 0;
+    margin-left: 0;
+    margin-right: 0;
+    margin-bottom:4px;
+    position: relative;
+    top:40px;
+    left:300px;
+    font-size: 20px;
+    font-weight: bold;
+}
+
+.feature-section{
+    position: absolute;
+    top:950px;
+    height:850px;
+    width:1490px;
+    box-sizing: border-box;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin:0;
+    padding: 0px 50px
+}
+.feature-section-head{
+    font-size: 42px;
+    margin:0px;
+    text-decoration: underline;
+}
+.feature-section-desc{
+    font-size: 18px;
+    line-height: 22px;
+    font-weight: 600;
+}
+.feature-section-item{
+    text-decoration: none;
+    font-weight: bolder;
+    font-size: 18px;
+    height:36px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    padding: 0px 18px;
+    border: 1px solid;
+    border-radius: 12px;
+    transition: all 0.2s ease-out;
+}
+.feature-section-item:hover{
+    color: #fff;
+    background-color: #363434;
+}
+
+
+.testimonial-section{
+    position: absolute;
+    top:1810px;
+    height:850px;
+    width:1490px;
+    box-sizing: border-box;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin:0;
+    /* border: 1px solid; */
+}
+.testimonial-section-head{
+    font-size: 42px;
+    margin:70px 0px 12px 0px;
+    text-decoration: underline;
+}
+.testimonial-container{
+    height:700px;
+    width:800px;
+    border-radius: 12px;
+    box-sizing: border-box;
+    padding: 22px;
+    border:1.5px solid
+}
+.testimonial-desc{
+    font-size: 18px;
+    line-height:26px;
+    font-style: italic;
+    color: #000;
+}
+.testimonial-name{
+    font-size: 18px;
+    line-height: 22px;
+    font-style: italic;
+    font-weight: 600;
+}
+
+
+.contact-section{
+    position: absolute;
+    top:2680px;
+    height:850px;
+    width:1490px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin:0;
+}
+.contact-section-head{
+    font-size: 36px;
+    margin: 0;
+    text-decoration: underline;   
+}
+.contact-section-desc{
+    position: relative;
+    left:140px;
+    font-size: 18px;
+    line-height:26px;
+    font-style: italic;
+    font-weight: 600;
+    margin: 0;
+}
+.conatct-conatiner{
+    margin-top: 12px;
+    height:600px;
+    width:450px;
+    border-radius: 12px;
+    border: 1px solid;
+    box-sizing: border-box;
+    padding:40px 20px;
+    display: flex;
+    /* justify-content: center; */
+    /* align-items: center; */
+    flex-direction: column;
+}
+.contact-section-label{
+    font-size: 20px;
+    line-height:26px;
+    font-weight: 600;
+    font-style:italic;
+}
+.contact-section-input{
+    height:30px;
+    width:100%;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    border-bottom: 2px solid;
+    background-color: transparent;
+    color: #000;
+    text-align: center;
+    outline: none;
+    font-weight: bolder;
+}
+.contact-section-textarea{
+    height:100px;
+    background-color: transparent;
+    color: #000;
+    text-align: center;
+    outline: none;
+    font-weight: bolder;
+    border:2px solid;
+    margin-top:12px;
+    border-radius: 12px;
+}
+.contact-section-submit{
+    text-decoration: none;
+    font-weight: bolder;
+    font-size: 18px;
+    height:36px;
+    width: 100px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    padding: 0px 18px;
+    border: 1px solid;
+    transition: all 0.2s ease-out;
+    margin: 20px auto;
+    border-radius: 12px;
+    cursor: pointer;
+}
+.contact-section-submit:hover{
+    color: #fff;
+    background-color: #363434;
+}
+.contact-section-href{
+    margin-top: 50px;
+    height:60px;
+    width: 100%;
+    text-align: center;
+    box-sizing: border-box;
+}
+.contact-section-eachhref-one{
+    min-height:50px;
+    min-width:50px;
+    border-radius: 25px;
+    margin: 0px 20px;
+    background-image: url('./images/github.png');
+    background-size: cover;
+    border:1px solid;
+    background-repeat: no-repeat;
+    cursor: pointer;
+}
+.contact-section-eachhref-two{
+    height:50px;
+    width:50px;
+    border-radius: 25px;
+    margin: 0px 20px;
+    background-image: url('./images/instagram.jpg');
+    background-size: cover;
+    border:1px solid;
+    background-repeat: no-repeat;
+    cursor: pointer;
+}
+.contact-section-eachhref-three{
+    height:50px;
+    width:50px;
+    border-radius: 25px;
+    margin: 0px 20px;
+    background-image: url('./images/linkedIn.png');
+    background-size: cover;
+    border:1px solid;
+    background-repeat: no-repeat;
+    cursor: pointer;
+}
+</style>
+<body>
+    <div class="main-background">
+        <header>
+            <h1 class="header-logo">CSEdge</h1>
+            <nav>
+                <a href="#" class="nav-items">Home</a>
+                <a href="#features" class="nav-items">Features</a>
+                <a href="#testimonial" class="nav-items">Testimonial</a>
+                <a href="#contact" class="nav-items">Contact</a>
+            </nav>
+        </header>
+        <hr>
+        <section id="home">
+            <div class="hero-section">
+                <h1 class="hero-section-title">CSEdge</h1>
+                <p class="hero-section-description">Where learning meets opportunity in</p>
+                <p class="hero-section-description">a month-long online internship</p>
+                <p class="hero-section-description">journey.</p>
+            </div>
+        </section>
+        <section id="features" class="feature-section">
+            <h1 class="feature-section-head">Features</h1>
+            <p class="feature-section-desc">⦾ CSEdge is an excellent platform that provides internships for new fresh graduates to gain practical experience. It is recognized as a verified company, instilling confidence in users that the internship opportunities offered here are genuine and valuable. CSEdge serves as a great starting point for new professionals in their career journey, fostering their growth and development.</p>
+            <p class="feature-section-desc">⦾ At CSEdge, the internship program offers a comprehensive learning experience. Proudly MSME Registered, AICTE Accredited, and recognized by LinkedIn, CSEdge internship includes WhatsApp support for quick queries, E-Certificate upon completion, and access to free resources. Join us at CSEdge to gain valuable skills and practical knowledge</p>
+            <p class="feature-section-desc">⦾ At CSEdge, the contact feature facilitates seamless communication with the team. Stay connected and informed by following the company on social media platforms like YouTube,Facebook, Instagram, and LinkedIn. For direct correspondence, feel free to reach out via Gmail. We're here to address inquiries and welcome feedback.</p>
+            <p class="feature-section-desc">⦾ (CSEdge) has a great user interface,It features a user-friendly design,Smooth navigation is also a highlight,Overall, it provides an excellent experience!</p>
+            <br>
+            <a href="https://csedge.courses/" class="feature-section-item">Click here to Visit (CSEdge)</a>
+        </section>
+        <section id="testimonial" class="testimonial-section">
+            <h1 class="testimonial-section-head">Testimonial</h1>
+            <div class="testimonial-container">
+                <p class="testimonial-desc">"My internship at CSEdge was a transformative experience. From day one, I was welcomed into a team of talented and supportive professionals who were always willing to share their knowledge. Working on real-world web development projects allowed me to apply my academic knowledge in practical ways and develop new skills rapidly. The mentorship and feedback I received were invaluable, and the collaborative environment fostered my growth as both a developer and a team member. I am grateful for the opportunity to have interned at CSEdge, and it has solidified my passion for web development."</p>
+                <p class="testimonial-name">-Azmatulla Khan</p><br>
+                <p class="testimonial-desc">"Interning at CSEdge was one of the best decisions I've made in my career. The hands-on experience I gained in web development was unparalleled. I had the chance to work on innovative projects that challenged me and helped me grow both technically and professionally. The team's dedication to fostering a learning environment was evident through their constant guidance and encouragement. This internship not only enhanced my coding skills but also taught me the importance of teamwork, communication, and problem-solving in a professional setting. I am proud to have been a part of the CSEdge team and highly recommend this internship to anyone looking to advance their career in tech."</p>
+                <p class="testimonial-name">-Balaji Chennupati</p>
+            </div>
+        </section>
+        <section id="contact" class="contact-section">
+            <h1 class="contact-section-head">Contact Us</h1>
+            <p class="contact-section-desc">-For more queries and repesctive information</p>
+            <div class="conatct-conatiner">
+                <label for="name" class="contact-section-label">Name</label>
+                <input type="text" id="name" class="contact-section-input" placeholder="Enter your name"><br><br>
+                <label for="email" class="contact-section-label">Email</label>
+                <input type="email" id="email" class="contact-section-input" placeholder="Enter your email"><br><br>
+                <label for="message" class="contact-section-label">Message</label>
+                <textarea type="text" id="message" class="contact-section-textarea" placeholder="Enter your message"></textarea>
+                <button class="contact-section-submit">Submit</button>
+                <div class="contact-section-href">
+                    <a target="_blank" href="https://github.com/CSEdgeOfficial"><button class="contact-section-eachhref-one"></button></a>
+                    <a target="_blank" href="https://www.instagram.com/csedgeofficial/"><button class="contact-section-eachhref-two"></button></a>
+                    <a target="_blank" href="https://www.linkedin.com/company/csedge/"><button class="contact-section-eachhref-three"></button></a>
+                </div>
+            </div>
+        </section>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/Donthineni Santhosh/EASY_03/previews/preview2.html b/Donthineni Santhosh/EASY_03/previews/preview2.html
new file mode 100644
index 0000000..1cd223e
--- /dev/null
+++ b/Donthineni Santhosh/EASY_03/previews/preview2.html	
@@ -0,0 +1,108 @@
+<!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="https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.4.0/css/lightgallery.min.css">
+    <title>Easy_02</title>
+</head>
+<style>
+*{
+    font-family: 'Courier New', Courier, monospace;
+    color: #fff;
+    scroll-behavior: smooth;
+    box-sizing: border-box;
+}
+*::-webkit-scrollbar{
+    display: none;
+}
+body{
+    background-color: #000;
+    margin:0;
+    padding:0;
+    display: flex;
+    justify-content: center;
+}
+
+
+.main-background{
+    height: 846px;
+    width:1492px;
+    padding: 20px 80px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    /* border: 1px solid #fff; */
+}
+.main-conatainer-head{
+    font-size: 36px;
+    text-decoration: underline;
+    font-weight: 500;
+}
+.gallery-holder{
+    height:700px;
+    width:1300px;
+    border-radius: 12px;
+    text-align: center;
+    /* border: 1px solid #fff; */
+    overflow-x:scroll ;
+}
+.a{
+    max-height:650px;
+    max-width:1100px;
+    margin:0px;
+}
+.image-one{
+    height:650px;
+    width:1000px;
+    margin: 50px 0px;
+    border-radius: 12px;
+}
+.span{
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    left:-200px;
+    top:500px;
+}
+span{
+    font-family: 'Courier New', Courier, monospace;
+    font-weight: bolder;
+    font-size: 22px;
+    transform: rotate(90deg);
+}
+</style>
+<body>
+    <div class="main-background">
+        <h1 class="main-conatainer-head">Light Box Gallery</h1>
+        <div class="gallery-holder">
+            <a href="./gallery/1.jpg" class="a"><img src="./gallery/1.jpg" alt="Image1" class="image-one"></a>
+            <a href="./gallery/2.jpg" class="a"><img src="./gallery/2.jpg" alt="Image" class="image-one"></a>
+            <a href="./gallery/3.jpg" class="a"><img src="./gallery/3.jpg" alt="Image" class="image-one"></a>
+            <a href="./gallery/4.jpg" class="a"><img src="./gallery/4.jpg" alt="Image" class="image-one"></a>
+            <a href="./gallery/5.jpg" class="a"><img src="./gallery/5.jpg" alt="Image" class="image-one"></a>
+            <a href="./gallery/6.jpg" class="a"><img src="./gallery/6.jpg" alt="Image" class="image-one"></a>
+            <a href="./gallery/7.jpg" class="a"><img src="./gallery/7.jpg" alt="Image" class="image-one"></a>
+            <a href="./gallery/8.jpg" class="a"><img src="./gallery/8.jpg" alt="Image" class="image-one"></a>
+            <a href="./gallery/9.jpg" class="a"><img src="./gallery/9.jpg" alt="Image" class="image-one"></a>
+        </div>
+    </div>
+    <div class="span">
+        <span>S</span>
+        <span>C</span>
+        <span>R</span>
+        <span>O</span>
+        <span>L</span>
+        <span>L</span>
+        <span>D</span>
+        <span>O</span>
+        <span>W</span>
+        <span>N</span>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.4.0/js/lightgallery.min.js"></script>
+    <script>
+        lightGallery(document.querySelector('.gallery-holder'));
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Donthineni Santhosh/EASY_03/previews/preview3.html b/Donthineni Santhosh/EASY_03/previews/preview3.html
new file mode 100644
index 0000000..c0e7346
--- /dev/null
+++ b/Donthineni Santhosh/EASY_03/previews/preview3.html	
@@ -0,0 +1,247 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Student Enrollment</title>
+</head>
+<style>
+    *{
+    font-family: 'Courier New', Courier, monospace;
+    box-sizing: border-box;
+    scroll-behavior: smooth;
+    color: #fff;
+}
+*::-webkit-scrollbar{
+    display: none;
+}
+body{
+    display: flex;
+    justify-content: center;
+    margin:0;
+    padding:0;
+    background-image:linear-gradient(360deg, #0a0804,#1d1611);
+}
+.main-container{
+    height:850px;
+    width:1492px;
+    background-image: url('./images/bg-task04.jpg');
+    background-size: cover;
+}
+.main-container-button{
+    border: none;
+    background-color: transparent;
+    height:50px;
+    width:200px;
+    position: relative;
+    top:400px;
+    left:300px;
+    border-radius: 14px;
+    font-weight: bolder;
+    font-size: 16px;
+    cursor: pointer;
+    outline: none;
+    transition: all 0.2s ease-out;
+}
+.main-container-button:hover{
+    height:60px;
+    width:210px;
+    top:395px;
+    left: 295px;
+    font-size: 15px;
+    border: 0.5px solid #fff;
+}
+.hidden{
+    display: none;
+}
+.enrollment-container-hidden{
+    display: none;
+}
+.enrollment-container-visible{
+    display: block;
+    background-image:url('./images/bg-task04.jpg');
+    background-size: cover;
+    height:850px;
+    width:1492px;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.enrollment-div{
+    border:1px solid #fff;
+    height:700px;
+    width:600px;
+    backdrop-filter: blur(20px);
+    border-radius: 12px;
+    padding: 20px 40px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    animation: enrollment-div-animation 1s ease-in-out 0s;
+}
+@keyframes enrollment-div-animation {
+    0%{position: relative; left:-1200px}
+    90%{position: relative;left:20px}
+    95%{position: relative;left: -5px;}
+    100%{position: relative;left:0px}
+}
+.enrollment-div-label{
+    font-size: 18px;
+    font-weight: bolder;
+    margin:0px;
+    margin: 0px 0px 12px 0px;
+}
+.enrollment-div-input{
+    height:35px;
+    border-top:none ;
+    border-right:none ;
+    border-left:none ;
+    border-bottom:1px solid #fff ;
+    background-color: transparent;
+    outline: none;
+    padding: 0px 12px;
+    margin:0px;
+}
+.enrollment-div-select{
+    height:35px;
+    border:1px solid #fff;
+    background-color: transparent;
+    outline: none;
+    padding: 0px 12px;
+    margin:0px;
+    border-radius: 12px;
+    font-weight: bolder;
+}
+option{
+    color: #000;
+    font-weight: bolder;
+}
+textarea{
+    background-color: transparent;
+    outline: none;
+    user-select: none;
+    resize: none;
+    border: 1px solid #fff;
+    border-radius: 12px;
+    padding: 12px;
+    height:100px;
+}
+.enrollment-div-button{
+    border: 1px solid;
+    background-color: transparent;
+    height:50px;
+    width:200px;
+    border-radius: 14px;
+    font-weight: bolder;
+    font-size: 16px;
+    cursor: pointer;
+    outline: none;
+    margin: 0px auto;
+    transition: all 0.2s ease-in;
+}
+.enrollment-div-button:hover{
+    border: none;
+    font-size: 15px;
+    background-color: #fff;
+    color: #000;
+}
+.span-hidden{
+    display: none;
+}
+.span-visible{
+    display: block;
+    font-weight: 100;
+    color: red;
+    font-size: 14px;
+}
+h1{
+    text-decoration: underline;
+}
+</style>
+<body>
+    <div class="main-container" id="main_container">
+        <button class="main-container-button" onclick="Clicked()">Get Enrolled</button>
+    </div>
+    <div class="enrollment-container-hidden" id="enrollment_container">
+        <form id="enrollmentForm" onsubmit="return checkDetails()">
+            <div class="enrollment-div">
+                <h1>Student Enrollment</h1>
+                <label for="name" class="enrollment-div-label">Name* <span class="span-hidden" id="span_name">name should only contain alphabets</span></label>
+                <input type="text" class="enrollment-div-input" id="name" placeholder="Enter your registered name" required><br><br>
+                <label for="name" class="enrollment-div-label">Email*</label>
+                <input type="email" class="enrollment-div-input" id="email" placeholder="Enter your email" required><br><br>
+                <label for="number" class="enrollment-div-label">Mobile Number* <span class="span-hidden" id="span_number">Number must contain only 0-9 digits</span></label>
+                <input type="text" class="enrollment-div-input" id="number" placeholder="Enter your registered mobile number" required minlength="10" maxlength="10"><br><br>
+                <label for="courses" class="enrollment-div-label">Select Your Course*</label>
+                <select name="select-course" id="courses" class="enrollment-div-select" required>
+                    <option value="">Select the Course</option>
+                    <option value="Course 1">Course 1</option>
+                    <option value="Course 2">Course 2</option>
+                    <option value="Course 3">Course 3</option>
+                    <option value="Course 4">Course 4</option>
+                    <option value="Course 5">Course 5</option>
+                    <option value="Course 6">Course 6</option>
+                    <option value="Course 7">Course 7</option>
+                    <option value="Course 8">Course 8</option>
+                    <option value="Course 9">Course 9</option>
+                    <option value="Course 10">Course 10</option>
+                </select><br><br>
+                <label for="additional_comments" class="enrollment-div-label">Additional Comments</label>
+                <textarea name="additionalcomments" id="additional_comments" cols="0" rows="0"></textarea><br><br>
+                <button type="submit" class="enrollment-div-button">Enroll</button>
+            </div>
+        </form>
+    </div>
+    <script>
+        function Clicked(){
+    document.getElementById('main_container').className='hidden'
+    document.getElementById('enrollment_container').className='enrollment-container-visible'
+}
+
+function checkName(name){
+    for(let i=0;i<name.length;i++){
+        if(!((name[i]>='a' && name[i]<='z') || (name[i]==' ')))
+            return false
+    }
+    return true
+}
+
+function checkNumber(number){
+    for(let i=0;i<number.length;i++){
+        if(!(number[i]>='0' && number[i]<='9'))
+            return false
+    }
+    return true
+}
+
+
+function checkDetails(){
+    let name=document.getElementById('name').value
+    let number=document.getElementById('number').value
+    
+    name=name.toLowerCase()
+
+    let isNameTrue=checkName(name)
+    let isNumberTrue=checkNumber(number)
+
+    if(isNumberTrue && isNameTrue){
+        alert('Enrollment Successfull\n'+
+              'Name: '+document.getElementById('name').value+
+              '\nMobile Number: '+number+
+              '\nEmail: '+document.getElementById('email').value+
+              '\nRegistered Course: '+document.getElementById('courses').value)
+        return true
+    }
+    else{
+        if(!isNameTrue)
+            document.getElementById('span_name').className='span-visible'
+        return false
+    }
+
+}
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Donthineni Santhosh/EASY_04/easy_04.css b/Donthineni Santhosh/EASY_04/easy_04.css
new file mode 100644
index 0000000..74a3402
--- /dev/null
+++ b/Donthineni Santhosh/EASY_04/easy_04.css	
@@ -0,0 +1,154 @@
+*{
+    font-family: 'Times New Roman', Times, serifs;
+    box-sizing: border-box;
+    scroll-behavior: smooth;
+    color: #fff;
+}
+*::-webkit-scrollbar{
+    display: none;
+}
+body{
+    display: flex;
+    justify-content: center;
+    margin:0;
+    padding:0;
+    background-image:linear-gradient(360deg, #0a0804,#1d1611);
+}
+.main-container{
+    height:850px;
+    width:1492px;
+    background-image: url('./images/bg.jpg');
+    background-size: cover;
+}
+.main-container-button{
+    border: none;
+    background-color: transparent;
+    height:50px;
+    width:200px;
+    position: relative;
+    top:400px;
+    left:300px;
+    border-radius: 14px;
+    font-weight: bolder;
+    font-size: 16px;
+    cursor: pointer;
+    outline: none;
+    transition: all 0.2s ease-out;
+}
+.main-container-button:hover{
+    height:60px;
+    width:210px;
+    top:395px;
+    left: 295px;
+    font-size: 15px;
+    border: 0.5px solid #fff;
+}
+.hidden{
+    display: none;
+}
+.enrollment-container-hidden{
+    display: none;
+}
+.enrollment-container-visible{
+    display: block;
+    background-image:url('./images/bg.jpg');
+    background-size: cover;
+    height:850px;
+    width:1492px;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.enrollment-div{
+    border:1px solid #fff;
+    height:700px;
+    width:600px;
+    backdrop-filter: blur(20px);
+    border-radius: 12px;
+    padding: 20px 40px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    animation: enrollment-div-animation 1s ease-in-out 0s;
+}
+@keyframes enrollment-div-animation {
+    0%{position: relative; left:-1200px}
+    90%{position: relative;left:20px}
+    95%{position: relative;left: -5px;}
+    100%{position: relative;left:0px}
+}
+.enrollment-div-label{
+    font-size: 18px;
+    font-weight: bolder;
+    margin:0px;
+    margin: 0px 0px 12px 0px;
+}
+.enrollment-div-input{
+    height:35px;
+    border-top:none ;
+    border-right:none ;
+    border-left:none ;
+    border-bottom:1px solid #fff ;
+    background-color: transparent;
+    outline: none;
+    padding: 0px 12px;
+    margin:0px;
+}
+.enrollment-div-select{
+    height:35px;
+    border:1px solid #fff;
+    background-color: transparent;
+    outline: none;
+    padding: 0px 12px;
+    margin:0px;
+    border-radius: 12px;
+    font-weight: bolder;
+}
+option{
+    color: #000;
+    font-weight: bolder;
+}
+textarea{
+    background-color: transparent;
+    outline: none;
+    user-select: none;
+    resize: none;
+    border: 1px solid #fff;
+    border-radius: 12px;
+    padding: 12px;
+    height:100px;
+}
+.enrollment-div-button{
+    border: 1px solid;
+    background-color: transparent;
+    height:50px;
+    width:200px;
+    border-radius: 14px;
+    font-weight: bolder;
+    font-size: 16px;
+    cursor: pointer;
+    outline: none;
+    margin: 0px auto;
+    transition: all 0.2s ease-in;
+}
+.enrollment-div-button:hover{
+    border: none;
+    font-size: 15px;
+    background-color: #fff;
+    color: #000;
+}
+.span-hidden{
+    display: none;
+}
+.span-visible{
+    display: block;
+    font-weight: 100;
+    color: red;
+    font-size: 14px;
+}
+h1{
+    text-decoration: underline;
+}
\ No newline at end of file
diff --git a/Donthineni Santhosh/EASY_04/easy_04.html b/Donthineni Santhosh/EASY_04/easy_04.html
new file mode 100644
index 0000000..c84c617
--- /dev/null
+++ b/Donthineni Santhosh/EASY_04/easy_04.html	
@@ -0,0 +1,45 @@
+<!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="./easy_04.css">
+    <title>Student Enrollment</title>
+</head>
+<body>
+    <div class="main-container" id="main_container">
+        <button class="main-container-button" onclick="Clicked()">Get Enrolled</button>
+    </div>
+    <div class="enrollment-container-hidden" id="enrollment_container">
+        <form id="enrollmentForm" onsubmit="return checkDetails()">
+            <div class="enrollment-div">
+                <h1>Student Enrollment</h1>
+                <label for="name" class="enrollment-div-label">Name* <span class="span-hidden" id="span_name">name should only contain alphabets</span></label>
+                <input type="text" class="enrollment-div-input" id="name" placeholder="Enter your registered name" required><br><br>
+                <label for="name" class="enrollment-div-label">Email*</label>
+                <input type="email" class="enrollment-div-input" id="email" placeholder="Enter your email" required><br><br>
+                <label for="number" class="enrollment-div-label">Mobile Number* <span class="span-hidden" id="span_number">Number must contain only 0-9 digits</span></label>
+                <input type="text" class="enrollment-div-input" id="number" placeholder="Enter your registered mobile number" required minlength="10" maxlength="10"><br><br>
+                <label for="courses" class="enrollment-div-label">Select Your Course*</label>
+                <select name="select-course" id="courses" class="enrollment-div-select" required>
+                    <option value="">Select the Course</option>
+                    <option value="Course 1">Course 1</option>
+                    <option value="Course 2">Course 2</option>
+                    <option value="Course 3">Course 3</option>
+                    <option value="Course 4">Course 4</option>
+                    <option value="Course 5">Course 5</option>
+                    <option value="Course 6">Course 6</option>
+                    <option value="Course 7">Course 7</option>
+                    <option value="Course 8">Course 8</option>
+                    <option value="Course 9">Course 9</option>
+                    <option value="Course 10">Course 10</option>
+                </select><br><br>
+                <label for="additional_comments" class="enrollment-div-label">Additional Comments</label>
+                <textarea name="additionalcomments" id="additional_comments" cols="0" rows="0"></textarea><br><br>
+                <button type="submit" class="enrollment-div-button">Enroll</button>
+            </div>
+        </form>
+    </div>
+    <script src="./easy_04.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Donthineni Santhosh/EASY_04/easy_04.js b/Donthineni Santhosh/EASY_04/easy_04.js
new file mode 100644
index 0000000..2eb64c4
--- /dev/null
+++ b/Donthineni Santhosh/EASY_04/easy_04.js	
@@ -0,0 +1,46 @@
+function Clicked(){
+    document.getElementById('main_container').className='hidden'
+    document.getElementById('enrollment_container').className='enrollment-container-visible'
+}
+
+function checkName(name){
+    for(let i=0;i<name.length;i++){
+        if(!((name[i]>='a' && name[i]<='z') || (name[i]==' ')))
+            return false
+    }
+    return true
+}
+
+function checkNumber(number){
+    for(let i=0;i<number.length;i++){
+        if(!(number[i]>='0' && number[i]<='9'))
+            return false
+    }
+    return true
+}
+
+
+function checkDetails(){
+    let name=document.getElementById('name').value
+    let number=document.getElementById('number').value
+    
+    name=name.toLowerCase()
+
+    let isNameTrue=checkName(name)
+    let isNumberTrue=checkNumber(number)
+
+    if(isNumberTrue && isNameTrue){
+        alert('Enrollment Successfull\n'+
+              'Name: '+document.getElementById('name').value+
+              '\nMobile Number: '+number+
+              '\nEmail: '+document.getElementById('email').value+
+              '\nRegistered Course: '+document.getElementById('courses').value)
+        return true
+    }
+    else{
+        if(!isNameTrue)
+            document.getElementById('span_name').className='span-visible'
+        return false
+    }
+
+}
\ No newline at end of file
diff --git a/Donthineni Santhosh/EASY_04/images/bg.jpg b/Donthineni Santhosh/EASY_04/images/bg.jpg
new file mode 100644
index 0000000..238c211
Binary files /dev/null and b/Donthineni Santhosh/EASY_04/images/bg.jpg differ