diff --git a/Mini_projects/.DS_Store b/Mini_projects/.DS_Store
new file mode 100644
index 0000000..dbf65b1
Binary files /dev/null and b/Mini_projects/.DS_Store differ
diff --git a/Mini_projects/Country Guide App/index.htm b/Mini_projects/Country Guide App/index.htm
new file mode 100644
index 0000000..0b89ef1
--- /dev/null
+++ b/Mini_projects/Country Guide App/index.htm	
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Country Guide </title>
+
+    <!-- style sheet  -->
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+    <div class="search-text">
+        <input type="text" name="" id="country-name" placeholder="enter a country name....">
+        <button id="Submit-btn" > Submit</button>
+    </div>
+    <div id="result"></div>
+    </div>
+
+    <!-- script tag -->
+
+    <script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Mini_projects/Country Guide App/netlify.toml b/Mini_projects/Country Guide App/netlify.toml
new file mode 100644
index 0000000..f3b84f8
--- /dev/null
+++ b/Mini_projects/Country Guide App/netlify.toml	
@@ -0,0 +1,4 @@
+[[redirects]]
+from ="/*"
+to ="/index.htm"
+status=200
\ No newline at end of file
diff --git a/Mini_projects/Country Guide App/notes.txt b/Mini_projects/Country Guide App/notes.txt
new file mode 100644
index 0000000..2ae7ca1
--- /dev/null
+++ b/Mini_projects/Country Guide App/notes.txt	
@@ -0,0 +1,3 @@
+add shimmer effctr until the data is fetched through the api 
+
+and do alert the user if he entred the country name wrong 
\ No newline at end of file
diff --git a/Mini_projects/Country Guide App/script.js b/Mini_projects/Country Guide App/script.js
new file mode 100644
index 0000000..6bcbc48
--- /dev/null
+++ b/Mini_projects/Country Guide App/script.js	
@@ -0,0 +1,82 @@
+let btn= document.getElementById('Submit-btn');
+const inputCountry=document.getElementById('country-name');
+const resultCont=document.getElementById('result');
+btn.addEventListener("click",()=>{
+    let countryName=inputCountry.value; //spain
+    let Url=`https://restcountries.com/v3.1/name/${countryName}`;
+
+    async function getData(){
+        let data = await fetch(Url);
+        let value = await data.json();
+        // console.log(value);
+        console.log(value[0]);
+        console.log(value[0]?.name?.common);
+        console.log(value[0]?.capital[0]);
+        console.log(value[0]?.continents[0]);
+        console.log(value[0]?.flags?.svg);
+        console.log(value[0]?.timezones[0]);
+        console.log(value[0]?.population);
+        console.log(value[0]?.currencies);
+        console.log(value[0]?.area);
+        console.log(value[0]?.maps?.googleMaps);
+
+        resultCont.innerHTML=`
+          <img src=${value[0]?.flags?.svg} class="flag-image" >
+            <h2>${value[0]?.name?.common}</h2>
+           <div id="wrapper"> 
+            <div id="data-wrapper">
+            <h4>continents:</h4>
+           <span>${value[0]?.continents[0]}</span>
+           </div>
+           </div>
+           <div id="wrapper"> 
+           <div id="data-wrapper">
+           <h4>capital:</h4>
+           <span>${value[0]?.capital[0]}</span>
+           </div>
+           </div>
+           <div id="wrapper"> 
+           <div id="data-wrapper">
+           <h4>timezone:</h4>
+           <span>${value[0]?.timezones[0]}</span>
+           </div>
+           </div>
+           <div id="wrapper"> 
+           <div id="data-wrapper">
+           <h4>population:</h4>
+           <span>${value[0]?.population}</span>
+           </div>
+           </div>
+           <div id="wrapper"> 
+           <div id="data-wrapper">
+           <h4>currencies:</h4>
+           <span>${value[0]?.currencies[Object.keys(value[0]?.currencies)].name} - ${Object.keys(value[0]?.currencies)}</span>
+           </div>
+           </div>
+           <div id="wrapper"> 
+           <div id="data-wrapper">
+           <h4>total area :</h4>
+           <span>${value[0]?.area}</span>
+           </div>
+           </div>
+           <div id="wrapper"> 
+           <div id="data-wrapper">
+           <h4>map link:</h4>
+           <span>${value[0]?.maps?.googleMaps} </span>
+           </div>
+           </div>` 
+
+    }
+    getData();
+    
+})
+        
+       
+   
+    
+       
+
+  
+
+
+
diff --git a/Mini_projects/Country Guide App/style.css b/Mini_projects/Country Guide App/style.css
new file mode 100644
index 0000000..e8d8849
--- /dev/null
+++ b/Mini_projects/Country Guide App/style.css	
@@ -0,0 +1,86 @@
+@import url('https://fonts.googleapis.com/css2?family=Anek+Odia&display=swap');
+*{
+    margin: 0;
+    padding: 0;
+    font-family: 'Anek Odia', sans-serif;
+    box-sizing: border-box;
+}
+
+body{
+    background-color: black;
+
+}
+.container{
+    background-color: white;
+    width: 80vw;
+    max-width: 37.5em;
+    position: absolute;
+    transform: translate(-50%,-50%);
+    top: 50%;
+    left: 50%;
+    padding: 1em 1.2em ;
+    border-radius: 8px;
+}
+
+.search-text{
+    display: grid;
+    grid-template-columns: 9fr 2fr;
+    grid-gap: 1.2em;
+}
+
+#Submit-btn{
+    font-size: 1rem;
+    background-color: yellow;
+    outline: none;
+    border: none;
+    padding: 0.7rem ;
+    border-radius: 8px;
+    text-transform: capitalize;
+    cursor: pointer;
+}
+
+.search-text input{
+    border: none;
+    outline:none;
+    text-transform: capitalize;
+    font-size: 0.9rem;
+    border-bottom: 1px solid orangered;
+}
+
+#result{
+    /* border: 2px solid red; */
+    margin: 1.2rem 0 ;
+}
+
+.container .flag-image{
+display: block;
+width: 45%;
+min-width:7.5rem;
+margin: 1.2rem auto 1.2rem auto ;
+}
+
+.container h2{
+    font-weight: 600;
+    text-align: center;
+    color: black;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+#wrapper{
+    /* border: 2px solid rebeccapurple; */
+}
+#data-wrapper{
+    /* border: 2px solid darkgoldenrod; */
+    margin-bottom: 1.2rem;
+    letter-spacing: 0.3px;
+}
+.container h4{
+    display: inline;
+    text-transform: capitalize;
+    font-weight: 800;
+    color: #050607;
+}
+.containe span{
+    font-weight: 400;
+    color: #5d625d;
+}
\ No newline at end of file
diff --git a/Mini_projects/Dictionary App/fee recipt.pdf b/Mini_projects/Dictionary App/fee recipt.pdf
new file mode 100644
index 0000000..3bfecfb
Binary files /dev/null and b/Mini_projects/Dictionary App/fee recipt.pdf differ
diff --git a/Mini_projects/Dictionary App/index.htm b/Mini_projects/Dictionary App/index.htm
new file mode 100644
index 0000000..d454d5e
--- /dev/null
+++ b/Mini_projects/Dictionary App/index.htm	
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dictionary App</title>
+    <!-- style sheet  -->
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="search-word">
+            <input type="text" name="" id="word-search" placeholder="enter the word ....">
+            <button id="submit-btn"> Search</button>
+        </div>
+        <div class="result" id="result"></div>
+        </div>
+        <script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Mini_projects/Dictionary App/netlify.toml b/Mini_projects/Dictionary App/netlify.toml
new file mode 100644
index 0000000..b354d9a
--- /dev/null
+++ b/Mini_projects/Dictionary App/netlify.toml	
@@ -0,0 +1,4 @@
+[[_redirects]]
+from ="/*"
+to ="/index.htm"
+status=200
\ No newline at end of file
diff --git a/Mini_projects/Dictionary App/script.js b/Mini_projects/Dictionary App/script.js
new file mode 100644
index 0000000..19725a4
--- /dev/null
+++ b/Mini_projects/Dictionary App/script.js	
@@ -0,0 +1,75 @@
+const url="https://api.dictionaryapi.dev/api/v2/entries/en/";
+const result= document.getElementById("result");
+const btn=document.getElementById('submit-btn');
+
+btn.addEventListener(
+    "click",
+    ()=>{
+
+        let inputWord=document.getElementById("word-search").value;
+        console.log(inputWord);
+
+        async  function getData(){
+            let data= await fetch(`${url}${inputWord}`);
+            let jsonData= await data.json();
+            console.log(jsonData);
+            console.log(jsonData[0].word);
+            console.log(jsonData[0].meanings[0].partOfSpeech);
+            console.log(jsonData[0].phonetics[0].text);
+            console.log(jsonData[0].meanings[0].definitions[0].definition);
+            console.log(jsonData[0].meanings[1].synonyms);
+            console.log(jsonData[0].meanings[1].definitions[0].definition);
+            console.log(jsonData[0].meanings[2].definitions[0].definition);
+            result.innerHTML=`
+            <div class="word">
+             <h2>${jsonData[0].word}</h2>
+            </div>
+            
+            <div class="details">
+             <p>${jsonData[0].meanings[0].partOfSpeech}</p>
+             <p>/${jsonData[0].phonetics[0].text}/</p>
+            </div>
+            <p className="defination">
+            ${jsonData[0].meanings[0].definitions[0].definition}
+            </p>
+            <p className="synonyms">
+            ${jsonData[0].meanings[1].synonyms}
+            </p>
+            <p class="word-meaning">
+            ${jsonData[0].meanings[1].definitions[0].definition}
+            </p>
+            <p class="word-example">
+            ${jsonData[0].meanings[2].definitions[0].definition} 
+             </p>
+            `;
+
+
+        }
+        getData();
+        
+        
+
+    }
+)
+
+
+
+
+
+
+
+       
+      
+
+      
+
+
+
+ 
+
+    
+
+    
+
+
+
diff --git a/Mini_projects/Dictionary App/style.css b/Mini_projects/Dictionary App/style.css
new file mode 100644
index 0000000..4828d1b
--- /dev/null
+++ b/Mini_projects/Dictionary App/style.css	
@@ -0,0 +1,97 @@
+@import url('https://fonts.googleapis.com/css2?family=Anek+Odia&display=swap');
+*{
+    margin: 0;
+    padding: 0;
+    font-family: 'Anek Odia', sans-serif;
+    box-sizing: border-box;
+}
+
+body{
+    background:rgb(47, 179, 255);
+
+}
+.container{
+    background-color: rgb(216, 211, 212);
+    width: 80vw;
+    max-width: 37.5em;
+    position: absolute;
+    transform: translate(-50%,-50%);
+    top: 50%;
+    left: 50%;
+    padding: 1em 1.2em ;
+    border-radius: 8px;
+}
+
+.search-word{
+    display: grid;
+    grid-template-columns: 9fr 2fr;
+    grid-gap: 1.2em;
+}
+
+#submit-btn {
+    font-size: 1rem;
+    background-color: rgb(255, 0, 98);
+    outline: none;
+    text-align: center;
+    border: none;
+    padding: 0.7rem ;
+    border-radius: 10px;
+    text-transform: capitalize;
+    cursor: pointer;
+    transition: all 1s;
+}
+#submit-btn:hover{
+color: black;
+background-color: white;
+}
+
+.search-word input{
+    border: none;
+    outline:none;
+    text-transform: capitalize;
+    font-size: 0.9rem;
+    border-bottom: 1px solid orangered;
+}
+
+.result{
+    position: relative;
+}
+
+.result h2{
+    font-size: 23px;
+    color: rgba(0, 0, 0, 0.671);
+    text-transform: capitalize;
+}
+
+.result .word{
+    display: flex;
+    justify-content: space-between;
+
+}
+.result button{
+    background-color: transparent;
+    border: none; 
+    outline: none;
+    font-size: 18px;
+}
+
+.result .details{
+    display: flex;
+    gap:10px;
+    color: #4b57e2;
+    margin: 5px 0 20px 0;
+    font-size: 14px;
+}
+
+.word-meaning{
+    color: #2935b6;
+
+}
+.word-example{
+    color: #0e0f14;
+    font-style: italic;
+    border-left: 5px solid black;
+    padding-left: 20px ;
+    margin-top: 30px;
+    
+}
\ No newline at end of file
diff --git a/Mini_projects/Github profile viewer/Tut23.html b/Mini_projects/Github profile viewer/Tut23.html
new file mode 100644
index 0000000..6d96276
--- /dev/null
+++ b/Mini_projects/Github profile viewer/Tut23.html	
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GitHub Card Profile</title>
+  
+    <link rel="stylesheet" href="style23.css">
+ 
+    <!-- Bootstrap Font Icon CSS -->
+    <link rel="stylesheet" href=
+"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" />
+</head>
+<body style="display: flex; justify-content: center; align-items: center;">
+    <div class="main-content">
+        <h1>Github Profile Card </h1>
+        <div class="searchBar">
+        <input type="search"  id="search-word" placeholder="enter your  github username...">
+        <button id="btn"><i class="bi bi-search"></i></button>
+    </div>
+        
+    <div class="card">
+      
+    </div>
+</div>
+
+<script src="Tut24.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Mini_projects/Github profile viewer/Tut24.js b/Mini_projects/Github profile viewer/Tut24.js
new file mode 100644
index 0000000..4b6b48b
--- /dev/null
+++ b/Mini_projects/Github profile viewer/Tut24.js	
@@ -0,0 +1,65 @@
+
+const btn = document.getElementById('btn');
+const searchBarValue = document.getElementById('search-word');
+const card = document.querySelector('.card');
+btn.addEventListener('click',()=>{
+let value = searchBarValue.value;
+console.log(value);
+const url = `https://api.github.com/users/${value}`;
+let newData = new XMLHttpRequest();
+newData.open("GET",url);
+newData.onreadystatechange=()=>{
+
+    // console.log(newData.readyState);
+    /* 
+    The XMLHttpRequest.readyState property returns the state an XMLHttpRequest client is in
+    So basically there are 4 ready State that are  from 0 -4 and every state has its own meaning 
+    0- client is created and open is not called 
+    1- open is called 
+    2- send has been called 
+    3 - respone hold partial data 
+    4 - operation is completed 
+    */
+
+   if(newData.readyState == 4){
+    let data = JSON.parse(newData.responseText);
+    console.log(data);
+    console.log("about the github data ");
+    console.log("image link");
+    console.log(data.login);
+    console.log(data?.avatar_url);
+    console.log(data.url);
+    console.log(data.html_url);
+    console.log(data.name);
+    console.log(data.bio);
+    console.log(data.public_repos);
+    console.log(data.followers);
+    console.log(data.following);
+    console.log(data.created_at);
+
+    // now let's add the data to the card 
+    card.innerHTML=`
+    <div class="card-main">
+        <div class="image">
+        <img src='${data?.avatar_url}' alt="myphoto">
+        </div>
+        <div class="info">
+           <h2 class="name"> <span>Name:</span> ${data.name} </h2>
+           <h3 class="userName" ><span>UserName:</span> ${data.login}</h3>
+           <div className="newBox">
+           <h4 class="followers grid-cont"><span>followers:</span>${data.followers}</h4>
+           <h4 class="following grid-cont"><span>following:</span>${data.following}</h4>
+           <h4 class="total_Repo grid-cont"><span>public_repos:</span>${data.public_repos}</h4>
+           </div>
+           
+           <h4 class="link"><span>link:</span>${data.html_url}</h4>
+          
+
+        </div>
+    </div>
+    
+    `
+   }
+}
+newData.send();
+});
diff --git a/Mini_projects/Github profile viewer/style23.css b/Mini_projects/Github profile viewer/style23.css
new file mode 100644
index 0000000..1725d4b
--- /dev/null
+++ b/Mini_projects/Github profile viewer/style23.css	
@@ -0,0 +1,161 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+body{
+    background-color: #333333;
+    
+}
+.main-content{
+    border: 2px solid black ;
+    height:fit-content;
+    width: 500px;
+
+   position: absolute;
+   top: 10%;
+   margin: auto;
+    padding: 10px;
+    background-color: #CBD18F;
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+    border-radius: 12px;
+ 
+    
+}
+.main-content > h1{
+    /* border: 2px solid gold; */
+    text-align: center;
+    font-weight: 400;
+}
+.searchBar {
+/* border: 2px solid green; */
+/* margin: auto; */
+margin: 2% auto;
+width: 80%;
+display: flex;
+justify-content: center;
+align-items: center;
+background:  #3A6B35;
+border-radius: 30px;
+padding: 10px; /* Add some padding to the container */
+}
+.searchBar > input {
+    outline: none;
+    border: none;
+    flex-grow: 1;
+    padding: 10px;
+    background: transparent;
+    font-weight: bold;
+    border-radius: 30px;
+    font-size: 16px;
+    color: #333; /* Text color */
+/* border-bottom: 1px solid black; */
+}
+::placeholder{
+ padding-left: 5px;
+ background: #3A6B35;
+ font-weight: bold;
+ color: white;
+ opacity: 0.7;
+ 
+}
+
+.searchBar > button {
+    /* border: 2px solid white; */
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 18px;
+    margin-left: 10px; /* Add some spacing between the input and button */
+    color: #333; /* Text color */
+}
+.card{
+    /* border: 2px solid red; */
+    height:fit-content;
+    width:400px ;
+    margin: auto;
+}
+
+
+.card-main{
+    /* border: 2px solid black ; */
+}
+
+.image{
+    /* border: 2px solid blue; */
+    padding-left: 30%;
+}
+
+.image > img{
+   /* border: 2px solid hotpink; */
+    height: 150px;
+    width: 150px;
+    border-radius: 50%;
+
+}
+.info{
+    /* border: 2px solid yellow; */
+}
+.name > span , .userName > span{
+    text-align: center;
+    font-weight: 800;
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+}
+.name , .userName{
+    /* border: 2px solid aqua; */
+    text-align: center;
+    font-weight: 500;
+    letter-spacing: 1px;
+    padding-left:1px; 
+}
+
+.newBox {
+    /* display: grid; */
+    grid-template-columns: repeat(3, 1fr); /* Create 3 equal-width columns */
+    gap: 10px; /* Add some spacing between grid items */
+    text-align: center; /* Center-align the text within the grid items */
+  }
+  
+  .grid-cont {
+    /* border: 1px solid #ccc;// Add a border for visibility */
+    padding: 10px; /* Add padding for spacing */
+  }
+  
+.followers > span , .following > span {
+    font-weight: 800;
+    text-transform: capitalize;
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+    /* border: 2px solid red; */
+    margin: 2px;
+}
+.followers , .following{
+    font-weight: 500;
+    letter-spacing: 1px;
+    padding-left:1px; 
+    margin: 2px;
+}
+.total_Repo > span{
+    text-transform: capitalize;
+    font-weight: 800;
+    margin: 2px;
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;  
+}
+.total_Repo{
+    font-weight: 500;
+    letter-spacing: 1px;
+    padding-left:1px; 
+}
+
+.link > span{
+    font-weight: 800;
+    margin: 2px;
+    text-transform: capitalize;
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+}
+
+.link{
+    font-weight: 500;
+    letter-spacing: 1px;
+    padding-left:1px;  
+}
+  
diff --git a/Mini_projects/QR Code  maker/icon.ico b/Mini_projects/QR Code  maker/icon.ico
new file mode 100644
index 0000000..5f8b6c2
Binary files /dev/null and b/Mini_projects/QR Code  maker/icon.ico differ
diff --git a/Mini_projects/QR Code  maker/index.htm b/Mini_projects/QR Code  maker/index.htm
new file mode 100644
index 0000000..3fad9e5
--- /dev/null
+++ b/Mini_projects/QR Code  maker/index.htm	
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>QR code maker </title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    
+    <div class="box">
+       <div  class="box2">
+        <h1>Enter your text or url</h1>
+      
+        <input type="text" name="" id="searchWord" placeholder="Enter your text or url">
+        <div id="imageShown">
+            <img src="" id="qrimage" >
+            <h4 id="heading"></h4>
+        </div>
+        <button id="btn">generate qr code</button>
+
+        
+       </div>
+    </div>
+    
+
+    <script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Mini_projects/QR Code  maker/script.js b/Mini_projects/QR Code  maker/script.js
new file mode 100644
index 0000000..917621a
--- /dev/null
+++ b/Mini_projects/QR Code  maker/script.js	
@@ -0,0 +1,21 @@
+let term = document.getElementById('searchWord');
+let imageDiv = document.getElementById('imageShown');
+let clickedBtn = document.getElementById('btn');
+let qrimage = document.getElementById('qrimage');
+let textInImageDiv = document.getElementById('heading')
+
+clickedBtn.addEventListener('click', ()=>{
+    let termValue   = term.value.trim();
+    // console.log(termValue);
+    if(termValue.length != 0){
+    qrimage.src = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${termValue}`
+    imageDiv.classList.add('show-img');
+    
+    }
+    // else{
+    //     // Display an error message
+    //     console.log("else is running");
+    //    textInImageDiv.innerText="please enter a valid value";
+    //     imageDiv.classList.remove('show-img');
+    // }
+})
\ No newline at end of file
diff --git a/Mini_projects/QR Code  maker/search-icon.png b/Mini_projects/QR Code  maker/search-icon.png
new file mode 100644
index 0000000..a030d6b
Binary files /dev/null and b/Mini_projects/QR Code  maker/search-icon.png differ
diff --git a/Mini_projects/QR Code  maker/style.css b/Mini_projects/QR Code  maker/style.css
new file mode 100644
index 0000000..6d2b1e9
--- /dev/null
+++ b/Mini_projects/QR Code  maker/style.css	
@@ -0,0 +1,127 @@
+@import url('https://fonts.googleapis.com/css2?family=Anek+Odia&family=Poppins:wght@300&display=swap');
+*{
+    margin: 0; 
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Anek Odia', sans-serif;
+    font-family: 'Poppins', sans-serif;
+}
+
+body{
+    background-color: #7D7C7C;
+}
+.box{
+    /* border: 8px solid white; */
+    position: absolute;
+    top: 50%;
+    left: 50%;
+  transform: translate(-50%, -50%);
+    height: 400px;
+    width: 400px;
+    background-color: #CCC8AA;
+    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+    border-radius: 7px;
+}
+.box2{
+    /* border: 2px solid red; */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+
+}
+.box2 > h1{
+    /* border: 2px solid hotpink; */
+    text-align: center;
+    text-transform: capitalize;
+    
+}
+
+
+.box2 > input{
+    width: 80%;
+    padding: 10px;
+    margin-top: 12px;
+    /* border: 1px solid #ccc; */
+    border-radius: 5px;
+    font-size: 16px;
+    color: #333;
+    background-color: #fff;
+    transition: border-color 0.3s ease;
+    outline: none;
+    border: none;
+}
+
+  /* Style for when the input is focused */
+  .box2:focus {
+    border-color: #007bff; /* Change the border color on focus */
+    outline: none; /* Remove the default focus outline */
+}
+
+/* Style for placeholder text */
+.box2::placeholder {
+    color: #999;
+}
+
+.box2 > button{
+display: block;
+width: 80%;
+padding: 10px;
+margin: 12px;
+background-color: #007bff;
+color: #fff;
+border: none;
+border-radius: 5px;
+font-size: 16px;
+cursor: pointer;
+transition: background-color 0.3s ease;
+text-transform: capitalize;
+}
+
+.box2 > button:hover{
+    background-color: #0056b3;
+}
+
+#imageShown{
+    width: 200px;
+    border-radius: 5px ;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 1s;
+
+}
+
+#imageShown img{
+    width: 100%;
+    padding: 10%;
+}
+
+#imageShown.show-img{
+    max-height: 300px;
+    margin: 10px auto;
+    border: 1px solid #d1d1d1;
+}
+
+/* Add your existing CSS code above */
+
+/* Media query for screens smaller than 600px */
+@media (max-width: 600px) {
+    .box {
+        width: 90%;
+        max-width: 300px;
+    }
+
+    .box2 > input {
+        width: 90%;
+    }
+
+    .box2 > button {
+        width: 90%;
+    }
+
+    #imageShown {
+        width: 90%;
+    }
+}
diff --git a/Mini_projects/Random meme Genertator/index.htm b/Mini_projects/Random meme Genertator/index.htm
new file mode 100644
index 0000000..fce3fd7
--- /dev/null
+++ b/Mini_projects/Random meme Genertator/index.htm	
@@ -0,0 +1,29 @@
+<!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">
+    <title>Random meme generator </title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <div class="App">
+      <button class="App-btn">Generate Meme</button>  
+      <h2 class="meme-title">Loading .........</h2>
+      <img src="" alt="" srcset="">
+
+      <div class="meme-author">
+        
+      </div>
+
+
+    </div>
+
+    
+
+
+    <script src="script.jsx"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Mini_projects/Random meme Genertator/script.jsx b/Mini_projects/Random meme Genertator/script.jsx
new file mode 100644
index 0000000..29a3456
--- /dev/null
+++ b/Mini_projects/Random meme Genertator/script.jsx	
@@ -0,0 +1,20 @@
+const GenerateMemeBtn=document.querySelector(".App .App-btn");
+const MemeImage=document.querySelector(".App img");
+const MemeTitle=document.querySelector(".App .meme-title");
+const MemeAuthor=document.querySelector(".meme-author");
+
+
+const updateDetails =(url,title,author) =>{
+    MemeImage.setAttribute("src",url);
+    MemeTitle.innerHTML=title;
+    MemeAuthor.innerHTML=author;
+}
+
+const GenerateMeme =() =>{
+    fetch("https://meme-api.com/gimme").then((Response)=>Response.json()).then(data =>{
+        updateDetails(data.url,data.title,data.author)
+    });
+}
+
+
+GenerateMemeBtn.addEventListener("click", GenerateMeme);
\ No newline at end of file
diff --git a/Mini_projects/Random meme Genertator/style.css b/Mini_projects/Random meme Genertator/style.css
new file mode 100644
index 0000000..7803ed3
--- /dev/null
+++ b/Mini_projects/Random meme Genertator/style.css	
@@ -0,0 +1,43 @@
+*{
+box-sizing: border-box;
+margin: 0;
+padding: 0;
+}
+
+.App{
+font-family: 'Times New Roman', Times, serif;
+text-align: center;
+}
+
+.App img{
+height: 430px;
+object-fit: cover;
+}
+
+
+.App .App-btn{
+    padding: 9px 20px ;
+    border: none;
+    border-left: 3px solid #222 ;
+    border-right: 4px solid #222;
+    color:#f64d4d ;
+    background: #fff;
+    margin: 28px;
+    cursor: pointer;
+    transition: all 400ms ease-in;
+}
+
+
+.App .App-btn:hover{
+    padding: 8px 36px ;
+    border-left: 3px solid #222 ;
+    border-right: 4px solid #222;
+    letter-spacing: 3.4px;
+   
+
+}
+
+
+.App .meme-author{
+    margin: 8px;
+}
\ No newline at end of file
