-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
254 changed files
with
59,445 additions
and
819 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,3 @@ | ||
{ | ||
"liveServer.settings.port": 5501 | ||
"liveServer.settings.port": 5502 | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>AI Quotes Generator</title> | ||
<link rel="stylesheet" href="styles.css"> | ||
</head> | ||
<body> | ||
<header> | ||
<h1>AI Quotes Generator</h1> | ||
</header> | ||
<div class="container"> | ||
<div id="quoteContainer"> | ||
<p id="quoteText"></p> | ||
</div> | ||
<button id="getQuoteBtn" style="background-color: 3498db;">Get Quote</button> | ||
</div> | ||
<script src="script.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
const getQuoteBtn = document.getElementById("getQuoteBtn"); | ||
const quoteText = document.getElementById("quoteText"); | ||
|
||
getQuoteBtn.addEventListener("click", () => { | ||
getQuoteBtn.classList.add("loading"); | ||
getQuoteBtn.textContent = "Loading..."; | ||
getQuote(); | ||
}); | ||
|
||
// Initially, remove loading state | ||
getQuoteBtn.classList.remove("loading"); | ||
getQuoteBtn.textContent = "Get Quote"; | ||
|
||
function getQuote() { | ||
fetch("https://api.quotable.io/random") | ||
.then((response) => response.json()) | ||
.then((data) => { | ||
quoteText.innerHTML = `"${data.content}" - ${data.author}`; | ||
getQuoteBtn.classList.remove("loading"); | ||
getQuoteBtn.textContent = "Get Quote"; | ||
}) | ||
.catch((error) => { | ||
console.error("Error fetching quote:", error); | ||
quoteText.innerHTML = "Failed to fetch a quote. Please try again later."; | ||
getQuoteBtn.classList.remove("loading"); | ||
getQuoteBtn.textContent = "Get Quote"; | ||
}); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
body { | ||
font-family: Arial, sans-serif; | ||
background-color: #3498db; | ||
margin: 0; | ||
padding: 0; | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
justify-content: flex-start; /* Adjusted to align header at the top */ | ||
height: 100vh; | ||
} | ||
|
||
header { | ||
background-color: #2c3e50; | ||
color: #ecf0f1; | ||
text-align: center; | ||
padding: 10px; | ||
width: 100%; | ||
} | ||
|
||
.container { | ||
text-align: center; | ||
background-color: #fff; | ||
padding: 20px; | ||
margin-left: 2%; | ||
margin-right: 2%; | ||
border-radius: 5px; | ||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); | ||
} | ||
|
||
button { | ||
padding: 10px 20px; | ||
font-size: 18px; | ||
cursor: pointer; /* Set default cursor to pointer */ | ||
background-color: #3498db; /* Default background color */ | ||
color: #fff; | ||
border: none; | ||
border-radius: 5px; | ||
transition: background-color 0.3s, transform 0.3s, filter 0.3s; | ||
} | ||
|
||
button.loading { | ||
background-color: #ddd; | ||
cursor: not-allowed; | ||
} | ||
|
||
button:hover { | ||
background-color: #2980b9; | ||
transform: scale(1.05); /* Zoom in effect on hover */ | ||
filter: brightness(0.9); /* Darken the button on hover */ | ||
} | ||
|
||
#quoteContainer { | ||
margin-top: 20px; | ||
font-size: 20px; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
kmgkrsgmkfdsmkgmnrd |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
### Animated-Rainbow | ||
|
||
It's a simple animated Rainbow without using Javascript.. | ||
|
||
|
||
### Used Technologies | ||
* HTML5 | ||
* CSS3 | ||
|
||
|
||
|
||
#### Steps to Use: | ||
|
||
--- | ||
|
||
- Download or clone the repository | ||
|
||
``` | ||
git clone https://github.com/VaibhavSuryavanshi93/Web-dev-mini-projects.git | ||
``` | ||
|
||
- Go to the directory | ||
- Run the Rainbow.html file | ||
|
||
|
||
## Screenshots | ||
![Rainbow](rainbow.png) | ||
![Default View](rainbow.png) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
|
||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Document</title> | ||
<link rel="stylesheet" href="rainbow.css"> | ||
</head> | ||
<body> | ||
<div class="center"> | ||
<ul> | ||
<li class="one"></li> | ||
<li class="two"></li> | ||
<li class="three"></li> | ||
<li class="four"></li> | ||
<li class="five"></li> | ||
<li class="six"></li> | ||
<li class="seven"></li> | ||
</ul> | ||
</div> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,109 @@ | ||
body{ | ||
margin: 0; | ||
padding: 0; | ||
background-color: black; | ||
} | ||
|
||
.center{ | ||
position: absolute; | ||
top: 40%; | ||
left: 50%; | ||
transform: translate(-50%,-50%); | ||
} | ||
|
||
ul{ | ||
margin: 0; | ||
padding: 0; | ||
position: relative; | ||
width: 400px; | ||
height: 240px; | ||
overflow: hidden; | ||
border-bottom: 1px solid rgba(0,0,0,.2); | ||
} | ||
|
||
ul li{ | ||
list-style: none; | ||
border-radius: 50%; | ||
border: 15px solid #000; | ||
position: absolute; | ||
top: 100%; | ||
left: 50%; | ||
border-bottom-color: transparent !important; | ||
border-left-color: transparent !important; | ||
box-shadow: 0 0 10px rgba(0,0,0,.5); | ||
animation: animate 5s infinite alternate; | ||
transform: translate(-50%,-50%); | ||
} | ||
|
||
.one{ | ||
width: 60px; | ||
height: 60px; | ||
border-color:#FF0000; | ||
animation-delay: .2s; | ||
animation-duration: 5s; | ||
animation-name: animate; | ||
} | ||
|
||
.two{ | ||
width: 90px; | ||
height: 90px; | ||
border-color:#FF7F00; | ||
animation-delay: .4s; | ||
animation-duration: 5s; | ||
animation-name: animate; | ||
} | ||
|
||
.three{ | ||
width: 120px; | ||
height: 120px; | ||
border-color:#FFFF00; | ||
animation-delay: .6s; | ||
animation-duration: 5s; | ||
animation-name: animate; | ||
} | ||
|
||
.four{ | ||
width: 150px; | ||
height: 150px; | ||
border-color:#00FF00; | ||
animation-delay: .8s; | ||
animation-duration: 5s; | ||
animation-name: animate; | ||
} | ||
|
||
.five{ | ||
width: 180px; | ||
height: 180px; | ||
border-color:#0000FF; | ||
animation-delay: 1s; | ||
animation-duration: 5s; | ||
animation-name: animate; | ||
} | ||
|
||
.six{ | ||
width: 210px; | ||
height: 210px; | ||
border-color:#4B0082; | ||
animation-delay: 1.2s; | ||
animation-duration: 5s; | ||
animation-name: animate; | ||
} | ||
|
||
.seven{ | ||
width: 240px; | ||
height: 240px; | ||
border-color:#9400D3; | ||
animation-delay: 1.4s; | ||
animation-duration: 5s; | ||
animation-name: animate; | ||
} | ||
|
||
@keyframes animate{ | ||
0%{ | ||
transform: translate(-50%,-50%) rotate(-45deg); | ||
} | ||
|
||
100%{ | ||
transform: translate(-50%,-50%) rotate(315deg); | ||
} | ||
} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -38,4 +38,4 @@ git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git | |
|
||
<br> | ||
|
||
## Happy Coding! | ||
## Happy Coding! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
# An attractive Login Page UI. | ||
|
||
A Basic Login Page ui with a beautifull navbar written in **HTML**, **CSS**, and **JavaScript**. | ||
|
||
### Use of the Project: | ||
|
||
This basic contact form can be added to any website to make it more interactive and attractive. | ||
|
||
### Used Technologies: | ||
|
||
- HTML5 | ||
- CSS3 | ||
- JavaScript | ||
|
||
### Steps to Use: | ||
|
||
- Download or clone the repository: | ||
|
||
```bash | ||
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git | ||
``` | ||
|
||
- Go to the directory | ||
- Run the index.html file | ||
- Result is here!!! | ||
|
||
## Screenshot | ||
|
||
<img src="https://github.com/xshshahab/LoginPage/blob/main/images/Auth.png" alt="Screenshot" style="max-width:100%;"> | ||
|
||
## Live Preview | ||
|
||
<a target="_blank" href="https://xshshahab.github.io/LoginPage/">Click Here!!</a> | ||
|
||
## Connect with Me | ||
|
||
[![GitHub](https://img.shields.io/badge/GitHub-%2312100E.svg?style=for-the-badge&logo=github&logoColor=white)](https://github.com/xshshahab) | ||
[![LinkedIn](https://img.shields.io/badge/LinkedIn-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/mdshahbuddin82/) | ||
[![Twitter](https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/xsh_shahab) | ||
|
||
Feel free to reach out and connect with me! | ||
|
||
## Thank You! | ||
|
||
Thank you for visiting my profile! I truly appreciate your time and interest in my work. Let's stay connected and keep building great things together! 🚀 |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.