diff --git a/Frontend-Projects/index1.html b/Frontend-Projects/index1.html
new file mode 100644
index 00000000..94574ac4
--- /dev/null
+++ b/Frontend-Projects/index1.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="stylesheet1.css">
+    <title>My First Project</title>
+</head>
+<body>
+    <h1>Project Simple</h1>
+    <h2>Project Simple</h2>
+    <h3>Project Simple</h3>
+    <script src="script1.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Frontend-Projects/index2.html b/Frontend-Projects/index2.html
new file mode 100644
index 00000000..62e43d29
--- /dev/null
+++ b/Frontend-Projects/index2.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="stylesheet2.css">
+    <title>2nd Dynamic Project Nilay</title>
+</head>
+<body><b>Nilay</b>
+    <div class="container">
+        <div class="panel active" style="background-image: url('https://c0.wallpaperflare.com/preview/100/95/607/vietnam-h%E1%BA%A3i-van-pass-world-travel-explore.jpg');">
+            <h3>Explore the world</h3>
+        </div>
+
+        <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1610028877875-a1810b68db5c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8d2lsZCUyMGZvcmVzdHxlbnwwfHwwfHw%3D&w=1000&q=80 ');">
+            <h3>Wild Forest</h3>
+        </div>
+
+        <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1593854417296-e74e9f620e31?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8c3VubnklMjBiZWFjaHxlbnwwfHwwfHw%3D&w=1000&q=80');">
+            <h3>Sunny Beach</h3>
+        </div>
+
+        <div class="panel" style="background-image: url('https://img.traveltriangle.com/blog/wp-content/uploads/2021/08/Places-to-Visit-in-Winter-in-USA1.jpg');">
+            <h3>City on winter</h3>
+        </div>
+
+        <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1514527893004-f77d3d773644?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bW91bnRhaW4lMjBjbG91ZHxlbnwwfHwwfHw%3D&w=1000&q=80');">
+            <h3>Mountains - Cloud</h3>
+        </div>
+
+    </div>
+    <script src="script2.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Frontend-Projects/script1.js b/Frontend-Projects/script1.js
new file mode 100644
index 00000000..e69de29b
diff --git a/Frontend-Projects/script2.js b/Frontend-Projects/script2.js
new file mode 100644
index 00000000..346aa4c5
--- /dev/null
+++ b/Frontend-Projects/script2.js
@@ -0,0 +1,14 @@
+const panels = document.querySelectorAll('.panel')
+
+panels.forEach(panel => {
+    panel.addEventListener('click', () => {
+        removeActiveClasses()
+        panel.classList.add('active')
+    })
+})
+
+function removeActiveClasses() {
+    panels.forEach(panel =>{
+        panel.classList.remove('active')
+    })
+}
\ No newline at end of file
diff --git a/Frontend-Projects/stylesheet1.css b/Frontend-Projects/stylesheet1.css
new file mode 100644
index 00000000..cc7170a5
--- /dev/null
+++ b/Frontend-Projects/stylesheet1.css
@@ -0,0 +1,15 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+
+*{
+    box-sizing: border-box;
+}
+body{
+    font-family: 'Roboto', sans-serif;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    overflow: hidden;
+}
\ No newline at end of file
diff --git a/Frontend-Projects/stylesheet2.css b/Frontend-Projects/stylesheet2.css
new file mode 100644
index 00000000..a2800d8f
--- /dev/null
+++ b/Frontend-Projects/stylesheet2.css
@@ -0,0 +1,62 @@
+@import url('https://fonts.googleapis.com/css2?family=Muli&display=swap');
+
+*{
+    box-sizing: border-box;
+}
+body{
+    font-family: 'Muli', sans-serif;
+    display: flex;
+    margin: 0;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.container{
+    display: flex;
+    width: 80vh;
+}
+
+.panel{
+    background-size: auto 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    height: 80vh;
+    border-radius: 50px;
+    color: azure;
+    cursor: pointer;
+    flex:0.5;
+    margin: 10px;
+    position: relative;
+    transition: flex 0.7s ease-in;
+}
+.panel h3{
+    font-size: 24px;
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+    margin: 0px;
+    opacity: 0;
+}
+
+.panel.active{
+    flex:5;
+}
+
+.panel.active h3{
+    opacity: 1;
+    transition: opacity 0.3s ease-in 0.4s;
+}
+
+@media (max-width:480px) {
+    .container{
+        width: 100vw;
+    }
+
+.panel:nth-of-type(4),
+.panel:nth-of-type(5){
+    display: none;
+}
+    
+}
\ No newline at end of file
