Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Enhancing-Footer #180

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Enhancing-Footer #180

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cbde573
Enhanced the Footer
aatmajajoshi May 12, 2024
fe369d3
Added-iconForLogo-andFooter
aatmajajoshi May 16, 2024
05aefe4
Merge branch 'main' into Enhancing-Footer
aatmajajoshi May 16, 2024
faeb740
Merge branch 'PranavBarthwal:main' into Enhancing-Footer
aatmajajoshi May 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
160 changes: 160 additions & 0 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
<!DOCTYPE html>
<html lang="en">



<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cosmoXplore</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
</head>



<body>

<div id="bg"></div>



<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg bg-* ">
<div class="container-fluid pt-2">
<a class="navbar-brand d-flex align-items-center justify-content-center" href="#">
<img src="./assets/icon.gif" alt="Icon" width="45" style="margin-right: 10px;">
<img class="mb-2" src="./assets/logo_white.png" alt="Bootstrap" width="370">
</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>
</button>
<div class="collapse navbar-collapse pe-5" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link text-light" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="/index.html#apod">APoD</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="/index.html#mars">MartianImagery</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="about.html">About Us</a>
</li>
<li class="nav-item">
<a href="/index.html#contact"> <button class="btn btn-outline-light rounded-pill" type="submit">Contact Us</button></a>
</li>
</div>
</div>
</nav>






<!-- Mars Rover Photos -->
<h1 align="center" class="section_title" id="mars">About Us</h1>
<br>

<!-- Default display -->
<div class="rover_container">
<div class="rover_section_img">
<img src="./assets/earth.png" class="aboutus">
</div>
<div class="rover_section_text">
<p class="">
Welcome to CosmoXplore, where our passion for space exploration meets innovative technology to bring the wonders of the universe closer to you.
<p>At CosmoXplore, we're on a mission to make the cosmos accessible to everyone. </p>
<p>Through our platform, we aim to inspire curiosity, spark wonder, and foster a deeper understanding of the universe we inhabit. Dive into the mesmerizing beauty of space with NASA's Astronomy Picture of the Day, where captivating celestial images are accompanied by brief explanations, providing you with a daily dose of cosmic beauty and scientific insight. Embark on an extraordinary adventure into the Martian landscape with our collection of Martian imagery, offering a glimpse into the mysteries of Mars through the lens of various rovers that have traversed its surface. </p>
<p>Whether you're a space enthusiast or a curious explorer, our team is dedicated to providing exceptional service and support.</p>
<p>Join us as we embark on a cosmic adventure, unlocking the mysteries of the universe one discovery at a time.

</p></p>
</div>
</div>



</body>
</html>
<br>
<br>


<!-- Enhanced Footer -->
<div class="container">
<footer class="row py-3 my-4 border-top">
<!-- Subscription Section -->
<div class="col-md-6 mb-3 mb-md-0">
<h5>Subscribe to Our Newsletter</h5>
<form id="subscribeForm">
<div class="input-group rounded" style="width: 33pc !important;">
<input type="email" class="form-control rounded" id="emailInput" placeholder="Enter your email address" aria-label="Enter your email address" aria-describedby="button-addon2">
<button class="btn btn-primary" type="button" id="subscribeButton" onclick="subscribe()">Subscribe</button>
</div>
<div id="emailError" class="text-danger mt-2" style="display: none;">Please enter a valid email address.</div>
</form>
<a href="about.html" class="btn btn-primary rounded mt-3 ">For More Info <img src="./assets/right-arrow.png"></a>
</div>

<!-- Explore and Contact Us Section -->
<div class="col-md-6 mb-3 mb-md-0">
<div class="row">
<!-- Explore Section with Additional Links -->
<div class="col-md-6 mb-3 mb-md-0">
<h5>Explore</h5>
<ul class="list-unstyled">
<li><a href="index.html">Home</a></li>
<li><a href="/index.html#apod">APoD</a></li>
<li><a href="/index.html#mars">Martian Imagery</a></li>
</ul>
</div>

<!-- Contact Us Section with Social Media Icons -->
<div class="col-md-6 mb-3 mb-md-0">
<h5><a href="/index.html#contact">Contact Us</a></h5>
<p class="text-light">Email: info@cosmoxplore.com<br>Phone: +91 1234567890<br>Address: 123 Street, City, Country</p>
<!-- Social Media Icons -->
<ul class="social-media-icons list-inline mt-2 mb-0">
<li class="list-inline-item"><a href="https://www.linkedin.com/" target="_blank"><i class="fab fa-linkedin"></i></a></li>
<li class="list-inline-item"><a href="https://twitter.com/" target="_blank"><i class="fab fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="https://www.instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>

<!-- Copyright Section -->
<div class="col-md-12 text-light text-center">
<p>© 2024 CosmoXplore India, Inc. All Rights Reserved</p>
</div>
</footer>
</div>



<!-- validation for subscription of email -->
<script>
function subscribe() {
var email = document.getElementById("emailInput").value;
var emailError = document.getElementById("emailError");

// Email validation
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
emailError.style.display = "block";
return;
}

// If email is valid, proceed with subscription
alert("Successfully subscribed to our newsletter!");

// Reset email error message and input field
emailError.style.display = "none";
document.getElementById("subscribeForm").reset();
}
</script>
2 changes: 1 addition & 1 deletion app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,4 +233,4 @@ fetch('https://images-api.nasa.gov/search?q=apollo')
console.log(data)

})
.catch((error) => console.error(error))
.catch((error) => console.error(error))
Binary file added assets/earth.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/icon.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/right-arrow.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
102 changes: 84 additions & 18 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,13 @@

<!-- NAVBAR -->

<nav class="navbar navbar-expand-lg bg-* ">
<div class="container-fluid pt-2">
<a class="navbar-brand d-flex align-items-center justify-content-center" href="#">
<img src="./assets/icon.gif" alt="Icon" width="45" style="margin-right: 10px;">
<img class="mb-2" src="./assets/logo_white.png" alt="Bootstrap" width="370">



<!-- <nav class="navbar navbar-expand-lg fixed-top navbar_background">
<div class="container-fluid">
Expand Down Expand Up @@ -122,6 +129,10 @@
<a class="nav-link text-light decorate-text" href="#mars">MartianImagery</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="about.html">About Us</a>
</li>
<li class="nav-item">
<a href="#contact"> <button class="btn btn-outline-light rounded-pill" type="submit">Contact Us</button></a>
<a href="#contact" class="nav-link">
<button class="btn btn-outline-light rounded-pill contact-btn" type="submit">Contact Us</button>
</a>
Expand Down Expand Up @@ -313,15 +324,16 @@ <h1 align="center" class="section_title" id="contact">Contact Us</h1>
<form id="form">
<div class="mb-3">
<label for="exampleInputName" class="form-label text-light">Name</label>
<input type="text" class="form-control" id="exampleInputName" placeholder="Enter your name">
<input type="text" class="form-control" id="exampleInputName" placeholder="Enter your name" required>
</div>
<div class="mb-3">
<label for="exampleInputEmail2" class="form-label text-light">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" aria-describedby="emailHelp" placeholder="Enter your email">
<input type="email" class="form-control" id="exampleInputEmail2" aria-describedby="emailHelp" placeholder="Enter your email" required>
<div id="emailHelp" class="form-text text-light">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputMessage" class="form-label text-light">Message</label>
<textarea class="form-control" id="exampleInputMessage" rows="4" placeholder="Feel free to ask your queries!" required></textarea>
<textarea class="form-control" name="message" id="exampleInputMessage" rows="4" placeholder="feel free to ask your queries!"></textarea>
</div>
<button type="submit" class="btn btn-primary" onclick="alert('Mail has been sent successfully!')">Submit</button>
Expand All @@ -335,30 +347,83 @@ <h1 align="center" class="section_title" id="contact">Contact Us</h1>
<br>





<!-- FOOTER -->
<!-- Enhanced Footer -->
<div class="container">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">


<a href="/cosmoXplore/index.html" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
<img src="./assets/logo_white.png" width="150">
</a>
<p class="col-md-4 mb-0 text-light">© 2024 CosmoXplore India, Inc. All Rights Reserved</p>
<footer class="row py-3 my-4 border-top">
<!-- Subscription Section -->
<div class="col-md-6 mb-3 mb-md-0">
<h5>Subscribe to Our Newsletter</h5>
<form id="subscribeForm">
<div class="input-group rounded" style="width: 33pc !important;">
<input type="email" class="form-control rounded" id="emailInput" placeholder="Enter your email address" aria-label="Enter your email address" aria-describedby="button-addon2">
<button class="btn btn-primary" type="button" id="subscribeButton" onclick="subscribe()">Subscribe</button>
</div>
<div id="emailError" class="text-danger mt-2" style="display: none;">Please enter a valid email address.</div>
</form>
<a href="about.html" class="btn btn-primary rounded mt-3 ">For More Info <img src="./assets/right-arrow.png"></a>
</div>

<!-- Button for More Info -->


<!-- Explore and Contact Us Section -->
<div class="col-md-6 mb-3 mb-md-0">
<div class="row">
<!-- Explore Section with Additional Links -->
<div class="col-md-6 mb-3 mb-md-0">
<h5>Explore</h5>
<ul class="list-unstyled">
<li><a href="#">Home</a></li>
<li><a href="#apod">APoD</a></li>
<li><a href="#mars">Martian Imagery</a></li>
</ul>
</div>

<!-- Contact Us Section with Social Media Icons -->
<div class="col-md-6 mb-3 mb-md-0">
<h5><a href="#contact">Contact Us</a></h5>
<p class="text-light">Email: info@cosmoxplore.com<br>Phone: +91 1234567890<br>Address: 123 Street, City, Country</p>
<!-- Social Media Icons -->
<ul class="social-media-icons list-inline mt-2 mb-0">
<li class="list-inline-item"><a href="https://www.linkedin.com/" target="_blank"><i class="fab fa-linkedin"></i></a></li>
<li class="list-inline-item"><a href="https://twitter.com/" target="_blank"><i class="fab fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="https://www.instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>

<!-- Copyright Section -->
<div class="col-md-12 text-light text-center">
<p>© 2024 CosmoXplore India, Inc. All Rights Reserved</p>
</div>
</footer>
</div>




<script src="./particles.min.js"></script>
<script src="./app.js"></script>
<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>

<!-- validation for subscription of email -->
<script>
function subscribe() {
var email = document.getElementById("emailInput").value;
var emailError = document.getElementById("emailError");

// Email validation
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
emailError.style.display = "block";
return;
}

// If email is valid, proceed with subscription
alert("Successfully subscribed to our newsletter!");

// Reset email error message and input field
emailError.style.display = "none";
document.getElementById("subscribeForm").reset();
}
</script>

var typed = new Typed(".auto-typed", {
strings : ["pedition.", "cursion.", "ploration."],
typeSpeed : 150,
Expand Down Expand Up @@ -391,3 +456,4 @@ <h1 align="center" class="section_title" id="contact">Contact Us</h1>
</script>
</body>
</html>

38 changes: 38 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,13 +116,27 @@ body {

#apod_img {
border-radius: 25px;
transition: transform 0.7s ease-in-out;
}


#apod_img:hover {
color: rgb(191, 0, 255);

#apod_img:hover,#apod_video:hover {
color: white;
box-shadow: 0 5px 15px #9000ff;
animation: leviate 3s ease infinite;
}

/* Floating Animation */
@keyframes leviate {
50% {
transform: translateY(-20px);
}
}


.hero_img {
border-radius: 50%;
}
Expand Down Expand Up @@ -395,3 +409,27 @@ body {
z-index: 99;
}


/* Style the navigation bar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}

.navbar-brand {
display: flex;
align-items: center;
}

.aboutus {
border-radius: 50%;
margin-right: 30px;
}

.aboutus:hover {
color: rgb(191, 0, 255);
box-shadow: 0 5px 15px #ff0099;
animation: leviate 3s ease infinite;
}