Skip to content

Commit

Permalink
updated the login signup and hero section
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ayushswirlon
Ayushswirlon committed Jul 16, 2024
1 parent d585fa7 commit cd478cb
Show file tree
Hide file tree
Showing 4 changed files with 366 additions and 82 deletions.
2 changes: 1 addition & 1 deletion .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"liveServer.settings.port": 5501
"liveServer.settings.port": 5502
}
94 changes: 53 additions & 41 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,14 +113,16 @@
}
body {
font-family: 'Roboto', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
/* background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%); */
}

.intro-section {
position: relative;
overflow: hidden;
opacity: 0;
transition: opacity 1s ease-out;
display: flex;
align-items: center;
min-height: 100vh;
padding: 2rem 0;
overflow: hidden;

}

.intro-section.fade-in {
Expand Down Expand Up @@ -173,6 +175,11 @@

}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
Expand Down Expand Up @@ -226,7 +233,7 @@

.landing-animate {
opacity: 0;
animation: landingAnimation 0.8s ease-out forwards;
animation: fadeIn 1s ease-out forwards;
}

.text-container.landing-animate {
Expand All @@ -248,6 +255,11 @@
.delay-400 { animation-delay: 0.4s; }


@media (max-width: 768px) {
.intro-section {
padding-top: 5rem; /* Adjust based on your navbar height */
}
}

</style>
</head>
Expand Down Expand Up @@ -345,49 +357,49 @@



<div class="intro-section" id="home-section">
<div class="intro-section min-h-screen flex items-center" id="home-section">
<div class="floating-shape shape-1"></div>
<div class="floating-shape shape-2"></div>
<div class="floating-shape shape-3"></div>
<div class="floating-shape shape-4"></div>



<div class="flex p-5 items-center justify-center ml-5 mr-5">
<div class="sm:w-full md:w-2/4">
<div class="mr-5 text-container landing-animate">
<h1 class="text-4xl font-semibold sm:text-5xl md:text-6xl text-black mb-4 animate-fade-in-up">
The <span style="color: rgb(219, 127, 219);">#1</span> Sorting
<span class="whitespace-nowrap">Visualization Tool</span>
</h1>

<p class="mb-4 text-base sm:text-sm md:text-lg text-black animate-fade-in-up delay-100">
<i class="fas fa-chart-bar feature-icon"></i>Interactive visualization
<br>
<i class="fas fa-tachometer-alt feature-icon"></i>Understand algorithm efficiency
<br>
<i class="fas fa-lightbulb feature-icon"></i>Learn sorting techniques
</p>
</div>
<div class="button-container animate-fade-in-up delay-200">
<a class="mr-3 p-2 rounded-md font-semibold text-white" style="background: rgb(219, 127, 219);" href="visual.html">
<span>Get Started</span>
</a>
<a class="mr-3 bg-gray-300 p-2 rounded-md font-semibold hover:text-purple-700" href="#programs-section">
<span class="items-center">Explore</span>
</a>
</div>

<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center justify-between">
<div class="w-full md:w-1/2 mb-8 md:mb-0">
<div class="text-container landing-animate">
<h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-black mb-4 animate-fade-in-up">
<span class="block">The <span style="color: rgb(219, 127, 219);">#1</span> Sorting</span>
<span class="block">Visualization Tool</span>
</h1>

<p class="mb-6 text-sm sm:text-base text-gray-700 animate-fade-in-up delay-100">
<i class="fas fa-chart-bar feature-icon"></i>Interactive visualization
<br>
<i class="fas fa-tachometer-alt feature-icon"></i>Understand algorithm efficiency
<br>
<i class="fas fa-lightbulb feature-icon"></i>Learn sorting techniques
</p>
</div>
<div class="button-container animate-fade-in-up delay-200">
<a class="inline-block mr-4 px-6 py-3 rounded-full font-semibold text-white transition duration-300 ease-in-out hover:shadow-lg" style="background: rgb(219, 127, 219);" href="visual.html">
<span>Get Started</span>
</a>
<a class="inline-block px-6 py-3 bg-gray-200 rounded-full font-semibold text-gray-700 transition duration-300 ease-in-out hover:bg-gray-300 hover:text-purple-700" href="#programs-section">
<span>Explore</span>
</a>
</div>
</div>
<div class="w-2/4 md:flex hidden image-container animate-fade-in-up delay-300">
<div class="image-wrapper">
<div class="image-inner">
<img src="./images/home.png" alt="" class="main-image">
<div class="ripple-effect"></div>
</div>
<div class="w-full md:w-1/2 image-container animate-fade-in-up delay-300">
<div class="image-wrapper">
<div class="image-inner">
<img src="./images/home.png" alt="Sorting Visualization" class="main-image w-full h-auto max-w-md mx-auto">
<div class="ripple-effect"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="site-section algorithm-title" id="algorithm-section">
<div class="container">
Expand Down
173 changes: 154 additions & 19 deletions login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,166 @@
<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>Login</title>
<link rel="stylesheet" href="css/login.css"/>
<title>Login - Visual Sort</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow-x: hidden;
padding: 20px;
}
.container {
display: flex;
width: 100%;
max-width: 900px;
background: white;
border-radius: 20px;
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
overflow: hidden;
}
.left-side {
flex: 1;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.right-side {
flex: 1;
background: linear-gradient(135deg, #db7fdb, #c84fd1);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
h1 {
font-size: 2.5em;
color: #333;
margin-bottom: 20px;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 5px;
color: #666;
}
.input-group input {
width: 100%;
padding: 10px;
border: none;
border-bottom: 2px solid #ddd;
font-size: 1em;
transition: border-color 0.3s;
}
.input-group input:focus {
outline: none;
border-color: #c84fd1;
}
button {
background: #c84fd1;
color: white;
border: none;
padding: 12px 20px;
border-radius: 25px;
font-size: 1em;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #db7fdb;
}
.signup-link {
margin-top: 20px;
text-align: center;
color: #666;
}
.signup-link a {
color: #c84fd1;
text-decoration: none;
}
.back-btn {
position: fixed;
top: 20px;
left: 20px;
background: #c84fd1;
color: white;
border: none;
padding: 10px 15px;
border-radius: 50%;
cursor: pointer;
transition: background 0.3s;
text-decoration: none;
z-index: 1000;
}
.back-btn:hover {
background: #db7fdb;
}
.animated-bg {
position: absolute;
width: 200%;
height: 200%;
background: linear-gradient(45deg, #db7fdb, #c84fd1, #db7fdb, #c84fd1);
animation: bgAnimation 15s linear infinite;
}
@keyframes bgAnimation {
0% {
transform: translateX(-50%) translateY(-50%) rotate(0deg);
}
100% {
transform: translateX(-50%) translateY(-50%) rotate(360deg);
}
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.right-side {
display: none;
}
.left-side {
padding: 30px;
}
h1 {
font-size: 2em;
}
}
</style>
</head>
<body>
<a href="index.html" class="back-btn">&#8592;</a>
<div class="container">
<div class="left-section">
<button class="back-button" onclick="window.location.href='index.html'"><img src="./images/back-button.png" width="50px" height="50px"/></button>
<h1 class="animated-heading">Visual Sort<span class="blinking-cursor">|</span></h1>
<p class="description">
Visual Sort is a website designed to visually demonstrate how different sorting algorithms work. It provides an interactive and educational experience for users to understand the steps and logic behind various sorting methods.
</p>
<form id="loginForm" class="login-form">
<input type="text" id="username" placeholder="Username" class="input-field">
<input type="password" id="password" placeholder="Password" class="input-field">
<button type="submit" class="submit-button">Login</button>
<div class="left-side">
<h1>Welcome Back</h1>
<form>
<div class="input-group">
<label for="username">Username</label>
<input type="text" id="username" required>
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" required>
</div>
<button type="submit">Login</button>
</form>
<p class="already-signed-up">
Not signed up? <a href="signup.html">Sign In</a>
</p>
<p class="signup-link">Don't have an account? <a href="signup.html">Sign up</a></p>
</div>
<div class="right-section">
<img src="./images/login_image.png" alt="Sorting images" class="transition-image">
<div class="right-side">
<div class="animated-bg"></div>
</div>
</div>
</body>
</html>
</html>
Loading

0 comments on commit cd478cb

Please sign in to comment.