Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Maharsh-Nayak
Maharsh-Nayak authored May 2, 2024
1 parent d1bdd35 commit d4bf98c
Show file tree
Hide file tree
Showing 13 changed files with 2,998 additions and 0 deletions.
177 changes: 177 additions & 0 deletions Contact.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us - Skill Route</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
header {
width: 100%;
background-color: #2B3035;
color: white;
/* border: 3px solid bisque; */
display: grid;
grid-template-columns: [l]1fr [s]2fr [h]1fr;
align-items: center;
padding: 0.8%;
}

hr {
margin: 0;
padding: 0;
height: 3px;
background-color: #0B5ED7;
width: 100%;
border: 0px;
}

header .logo {
grid-area: l;
}

header .logo img {
height: 5vh;
margin: 0%;
padding: 0;
mix-blend-mode: lighten;
}

header .home {
grid-area: h;
justify-self: end;
}

header .home a {
text-decoration: none;
color: white;
font-size: larger;
}

header .home a:hover {
text-decoration: underline;
}

/* Additional CSS styles specific to the contact page */
body {
/* display: flex;
justify-content: center;
align-items: center;
min-height: 100vh; */
background: #EFF1F3;
}

.main {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10vw;
}

.main img {
mix-blend-mode: multiply;
width: 35vw;
}

.contact-container {
max-width: 800px;
padding: 50px;
background-color: #f9f9f9;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.form-control {
margin-bottom: 20px;
border: 2px solid #ddd;
transition: border-color 0.3s ease-in-out;
}

.form-control:focus {
border-color: #007bff;
}

.btn-primary {
background-color: #007bff;
border: none;
transition: background-color 0.3s ease-in-out;
}

.btn-primary:hover {
background-color: #0056b3;
transform: scale(1.1);
}

.success-message,
.error-message {
display: none;
margin-top: 20px;
font-weight: bold;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}

.animated {
animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
from {
opacity: 0;
}

to {
opacity: 1;
}
}
</style>
</head>

<body>
<header>
<div class="logo"><img src="../Pics/logo3-modified.jpg" alt="Logo"></div>
<div class="home">
<a href="index.html">
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAATlJREFUSEvtlb0uBVEUhb8VOlEpPAAa0agkQoKEQi8anoD+vsKNmiegEQ8gEaEgEpVGIiEeQKESHVlmkjuTmbnzcwa3u6c8Z+31ndlZe44Y8NKA/QkG2J4EzgEDm5LeQi4XBLA9DtwBcz3TR2BR0kcTpBFgexS4BpYKZrfAqqSvOkgtwHZ8fgpsVZicAduS4raVribAIbDX0IYjSfutAbY7QLepx73zjqSDMm3pF9jeAY4DzRPZrqSTYk0fwPZalJALYKQl4DtK2oakq2xdDmB7HrgBxlqaJ/JPYFnSQ7KRAmxPAffAxC/Nk7L3aCAXJL3GG1nACzD9R/Ok/EnSbBHwDMz8E+BS0noOkDW2XTk4tVMr9YWmKqZDQNrJYYtyoVKLFMUPzErLmUizX/kvamkYJG98MoNcakQ/T6NkGSZCR0MAAAAASUVORK5CYII=" />
</a>
</div>
</header>
<hr>
<div class="main">
<div class="container contact-container">
<h1 class="text-center mb-4">Contact Us</h1>
<form action="https://example.com/send-message" method="POST">
<div class="mb-3">
<label for="fullName" class="form-label">Full Name</label>
<input type="text" class="form-control" id="fullName" name="fullName" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" name="message" rows="5" required></textarea>
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-between">
<button type="submit" class="btn btn-primary">Submit</button>
<a href="Index.html" class="btn btn-secondary">Home</a>
</div>
</form>
<div class="success-message text-center animated" id="successMessage">Message sent successfully!</div>
<div class="error-message text-center animated" id="errorMessage">Failed to send message. Please try again
later.</div>
</div>
</div>
</body>

</html>
198 changes: 198 additions & 0 deletions Index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,198 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../CSS/home_style.css">
</head>

<body>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a href="Index.html" class="navbar-brand">
<img src="../Pics/logo3-modified.jpg" alt="Logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<!-- <span class="navbar-toggler-icon"></span> -->
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAFFJREFUSEvtlEkKADAIA83/H52eu1APZQShnquTBaqAR/D9+IA04fqIbDuVdXkgaRK9OcABL+pPu/Ud4A7wDnAAHlF/AN4BDujfwXewJoD/pgNrVBgZX2h0sgAAAABJRU5ErkJggg==" />
</button>
<div class="links collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" aria-current="page" href="Index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" aria-current="page" href="">Profile</a></li>
<li class="nav-item"><a class="nav-link" aria-current="page" href="Contact.html">Contacts</a></li>
</ul>
<div class="user links">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<button type="button" class="btn btn-outline-primary btn-lg" onclick="Login()">Login</button>
<button type="button" class="btn btn-primary btn-lg" onclick="SignUp()">Sign up</button>
</ul>
</div>
</div>
</div>
</nav>
<main>
<div class="info">
Build Skills with <br>
Online Course <br>
<div class="sub">
On <b>Skill Route </b><br>
Your Pathfinder to Skill Mastery
</div>
</div>
</main>


<div class="section">
<h3 class="skills">Benefits of using Skil Route</h3>
<div class="info container">
<div class="card">
<h2>01</h2>
<p class="first">Flexible Learning Schedule</p>
<p>Fit your coursework around your existing commitments and obligations.</p>
</div>
<div class="card">
<h2>02</h2>
<p class="first">Expert InstructionExpert Instruction</p>
<p>Learn from industry experts who have hands-on experience in design and development.</p>
</div>
<div class="card">
<h2>03</h2>
<p class="first">Diverse Course Offerings</p>
<p>Explore a wide range of design and development courses covering various topics.</p>
</div>
<div class="card">
<h2>04</h2>
<p class="first">Updated Curriculum</p>
<p>Access courses with up-to-date content reflecting the latest trends and industry practices.</p>
</div>
<div class="card">
<h2>05</h2>
<p class="first">Practical Projects and Assignments</p>
<p>Develop a portfolio showcasing your skills and abilities to potential employers.</p>
</div><div class="card">
<h2>06</h2>
<p class="first">Interactive Learning Environment</p>
<p>Collaborate with fellow learners, exchanging ideas and feedback to enhance your understanding.</p>
</div>
</div>

<div class="skills">
Explore Our Popular skills
</div>
<div class="container">

<!-- C Card -->
<div class="card">
<img src="../Pics/c.jpg" alt="C">
<h2>C</h2>
<p>C is used for server-side web development.</p>
<a href="c1.html">Learn More</a>
</div>

<!-- C++ Card -->
<div class="card">
<img src="../Pics/c++.jpg" alt="C++">
<h2>C++</h2>
<p>C++ is a powerful programming language.</p>
<a href="c++.html">Learn More</a>
</div>

<!-- JavaScript Card -->
<div class="card">
<img src="../Pics/JavaScript.jpg" alt="JavaScript">
<h2>JavaScript</h2>
<p>JavaScript is used for interactive web development.</p>
<a href="js.html">Learn More</a>
</div>

<!-- Java Card -->
<div class="card">
<img src="../Pics/java.png" alt="Java">
<h2>Java</h2>
<p>Java is widely used for enterprise applications.</p>
<a href="j.html">Learn More</a>
</div>

<!-- Python Card -->
<div class="card">
<img src="../Pics/python.jpg" alt="Python">
<h2>Python</h2>
<p>Python is a versatile language with many applications.</p>
<a href="python.html">Learn More</a>
</div>

<!-- MySQL Card -->
<div class="card">
<img src="../Pics/mysql.png" alt="MySQL">
<h2>MySQL</h2>
<p>MySQL is a popular relational database management system.</p>
<a href="mysql.html">Learn More</a>
</div>


<!-- HTML Card -->
<div class="card">
<img src="../Pics/html.jpg" alt="HTML">
<h2>HTML</h2>
<p>HTML is a powerful programming language.</p>
<a href="h.html">Learn More</a>
</div>

<!-- CSS Card -->
<div class="card">
<img src="../Pics/css.jpg" alt="CSS">
<h2>CSS</h2>
<p>CSS is a powerful programming language.</p>
<a href="cs.html">Learn More</a>
</div>
</div>
</div>

<button id="toTop"><b>Top</b></button>

<footer>
<div class="About_us">
<h4>About us</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur magni, nihil consequatur deserunt
quos quaerat odio. Enim adipisci assumenda molestiae? Ea nemo esse optio labore est at harum incidunt
tenetur, earum cupiditate quae? Hic, reprehenderit temporibus blanditiis molestias voluptas veritatis
facere doloribus provident praesentium earum a accusamus quis quod velit et corporis eum aliquam ipsam
fugit unde quas aliquid omnis fugiat. Dicta doloremque sint animi consectetur esse ullam error nemo
earum, ipsa quisquam eos soluta corrupti, delectus dolore. Blanditiis sequi quidem, ea in reiciendis
iure quaerat voluptatum sapiente et quod praesentium veniam, voluptates id ab deleniti ratione
recusandae at unde!</p>
&copy 2024 Skill Route. All rights reserved.
</div>
</footer>

<script>
function Login() {
window.location.href = 'login.html', '_blank';
}
function SignUp() {
window.location.href = 'sign up.html';
}
let toTop = document.getElementById('toTop');
toTop.style.display = 'none';
window.addEventListener('scroll', () => {
if (this.scrollY > 500) {
toTop.style.display = 'block';
} else {
toTop.style.display = 'none';
}
})
toTop.onclick = function () {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>
Loading

0 comments on commit d4bf98c

Please sign in to comment.