Skip to content

Created About us page #16

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

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Created About us page #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
21f3796
Update index.html
RinkiTejwani Oct 3, 2023
1123c4c
Create about.html
RinkiTejwani Oct 3, 2023
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
99 changes: 99 additions & 0 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
<style>
/* Reset some default browser styles */
html, body {
margin: 0;
padding: 0;
}

/* Define page colors */
:root {
--primary-bg-color: #343a40; /* Dark gray for header background */
--secondary-bg-color: #fff; /* White for content background */
--page-bg-color: #f0f0f0; /* Light gray for page background */
--text-color: #333; /* Dark gray for text */
}

/* Define basic styles */
body {
font-family: Arial, sans-serif;
background-color: var(--page-bg-color); /* Change the page background color here */
color: var(--text-color);
}

.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}

header {
background-color: var(--primary-bg-color);
color: #fff;
text-align: center;
padding: 20px 0;
}

h1 {
font-size: 36px;
}

.about-content {
background-color: var(--secondary-bg-color);
padding: 20px;
margin-top: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
font-size: 24px;
margin-bottom: 10px;
}

p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}

/* Remove the link style for Contact Us */
a {
color: inherit;
text-decoration: none;
}

/* Add a link style */
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<header>
<h1>About Us</h1>
</header>
<section class="about-content">
<div class="container">
<h2>Our Story</h2>
<p>
Welcome to our online store! We are dedicated to bringing you the latest and greatest in the world of technology with our trending phone and headphone collection.
</p>
<p>
At New Inspiration , we curate the best and most innovative phones and headphones for our customers. Our team of experts carefully selects each product to ensure you get the best quality and performance.
</p>
<p>
We believe in providing top-notch customer service and ensuring your shopping experience is nothing short of exceptional.
</p>
<p>
Thank you for choosing us as your destination for the latest in phone and headphone technology. We look forward to serving you and providing you with an unbeatable shopping experience.
</p>
</div>
</section>
</body>
</html>
133 changes: 66 additions & 67 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1032,81 +1032,80 @@ <h3>SUBSCRIBE TO OUR NEWSLETTER</h3>
<!-- End Main -->

<!-- Footer -->
<footer id="footer" class="section footer">
<div class="container">
<div class="footer__top">
<div class="footer-top__box">
<h3>EXTRAS</h3>
<a href="#">Brands</a>
<a href="#">Gift Certificates</a>
<a href="#">Affiliate</a>
<a href="#">Specials</a>
<a href="#">Site Map</a>
<footer id="footer" class="section footer">
<div class="container">
<div class="footer__top">
<div class="footer-top__box">
<h3>EXTRAS</h3>
<a href="#">Brands</a>
<a href="#">Gift Certificates</a>
<a href="#">Affiliate</a>
<a href="#">Specials</a>
<a href="#">Site Map</a>
</div>
<div class="footer-top__box">
<h3>INFORMATION</h3>
<a href="about.html">About Us</a> <!-- Updated link to About Us -->
<a href="#">Privacy Policy</a>
<a href="#">Terms & Conditions</a>
<a href="#">Contact Us</a>
<a href="#">Site Map</a>
</div>
<div class="footer-top__box">
<h3>MY ACCOUNT</h3>
<a href="#">My Account</a>
<a href="#">Order History</a>
<a href="#">Wish List</a>
<a href="#">Newsletter</a>
<a href="#">Returns</a>
</div>
<div class="footer-top__box">
<h3>CONTACT US</h3>
<div>
<span>
<svg>
<use xlink:href="./images/sprite.svg#icon-location"></use>
</svg>
</span>
42 Dream House, Dreammy street, 7131 Dreamville, USA
</div>
<div class="footer-top__box">
<h3>INFORMATION</h3>
<a href="#">About Us</a>
<a href="#">Privacy Policy</a>
<a href="#">Terms & Conditions</a>
<a href="#">Contact Us</a>
<a href="#">Site Map</a>
<div>
<span>
<svg>
<use xlink:href="./images/sprite.svg#icon-envelop"></use>
</svg>
</span>
[email protected]
</div>
<div class="footer-top__box">
<h3>MY ACCOUNT</h3>
<a href="#">My Account</a>
<a href="#">Order History</a>
<a href="#">Wish List</a>
<a href="#">Newsletter</a>
<a href="#">Returns</a>
<div>
<span>
<svg>
<use xlink:href="./images/sprite.svg#icon-phone"></use>
</svg>
</span>
456-456-4512
</div>
<div class="footer-top__box">
<h3>CONTACT US</h3>
<div>
<span>
<svg>
<use xlink:href="./images/sprite.svg#icon-location"></use>
</svg>
</span>
42 Dream House, Dreammy street, 7131 Dreamville, USA
</div>
<div>
<span>
<svg>
<use xlink:href="./images/sprite.svg#icon-envelop"></use>
</svg>
</span>
[email protected]
</div>
<div>
<span>
<svg>
<use xlink:href="./images/sprite.svg#icon-phone"></use>
</svg>
</span>
456-456-4512
</div>
<div>
<span>
<svg>
<use xlink:href="./images/sprite.svg#icon-paperplane"></use>
</svg>
</span>
Dream City, USA
</div>
<div>
<span>
<svg>
<use xlink:href="./images/sprite.svg#icon-paperplane"></use>
</svg>
</span>
Dream City, USA
</div>
</div>
</div>
<div class="footer__bottom">
<div class="footer-bottom__box">

</div>
<div class="footer-bottom__box">
</div>
<div class="footer__bottom">
<div class="footer-bottom__box">

</div>
</div>
<div class="footer-bottom__box">

</div>
</footer>
<!-- End Footer -->
</div>
</footer>
<!-- End Footer -->

<!-- PopUp -->
<div class="popup hide__popup">
Expand Down Expand Up @@ -1156,4 +1155,4 @@ <h1>Get Discount <span>30%</span> Off</h1>

</body>

</html>
</html>