Skip to content

Commit

Permalink
Improvement of the design of the Website (#65)
Browse files Browse the repository at this point in the history 
* modified:   frontend/LandingPage.html
	new file:   frontend/contact.html

* new file:   frontend/IMG.webp
	modified:   frontend/LandingPage.html
	new file:   frontend/pexels-photo-924824.jpeg

* modified:   frontend/LandingPage.html
	modified:   frontend/contact.html
	new file:   frontend/pexels-photo-2882509.webp

* modified:   frontend/LandingPage.html
	new file:   frontend/pexels-photo-2387533.webp
  • Loading branch information
@noobremon
noobremon authored Oct 27, 2024
1 parent e5160de commit e288105
Show file tree
Hide file tree
Showing 6 changed files with 258 additions and 27 deletions.
Binary file added frontend/IMG.webp
View file
Binary file not shown.
100 changes: 73 additions & 27 deletions frontend/LandingPage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Advanced Landing Page</title>

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">

<style>
Expand All @@ -21,7 +20,6 @@
scroll-behavior: smooth;
}

/* Navbar */
header {
display: flex;
justify-content: space-between;
Expand Down Expand Up @@ -60,13 +58,12 @@
color: #FFD700;
}

/* Hero Section */
.hero {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-image: url('https://source.unsplash.com/1920x1080/?technology');
background-image: url("pexels-photo-924824.jpeg");
background-size: cover;
background-position: center;
position: relative;
Expand All @@ -85,16 +82,25 @@

.hero-content {
z-index: 1;
padding: 20px;
background-image: url("IMG.webp");
background-size: cover;
background-position: center;
border-radius: 10px;
box-shadow: 0 4px 15px rgb(255, 255, 255);
}

.hero-content h1 {
font-size: 60px;
margin-bottom: 20px;
margin-bottom: 30px;
color: #000000;
}

.hero-content p {
font-size: 18px;
margin-bottom: 30px;
font-size: 40px;
margin-bottom: 40px;
color: #000000;
font-weight: bolder;
}

.btn {
Expand All @@ -112,31 +118,48 @@
background-color: #FFA500;
}

/* About Section */
.about {
padding: 100px 10%;
background-color: #f4f4f4;
text-align: center;
background-image: url("pexels-photo-2882509.webp");
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;

}

.about h2 {
font-size: 36px;
color: #333;
color: #000000;
margin-bottom: 20px;
}

.about p {
font-size: 18px;
color: #666;
font-size: 20px;
color: #000000;
line-height: 1.8;
}

/* Contact Section */
.extra-background {
height: 100vh;
background-image: url();
background-size: cover;
background-position: center;
}

.contact {
padding: 100px 10%;
background-color: #222;
color: #fff;
text-align: center;
background-image: url("pexels-photo-2387533.webp");
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;

}

.contact h2 {
Expand All @@ -150,20 +173,19 @@
margin-bottom: 30px;
}

/* Footer */
footer {
padding: 30px 10%;
background-color: #111;
background-color: #000000;
color: #fff;
text-align: center;
background-image: url("IMG.webp");
}

footer p {
font-size: 14px;
color: #666;
font-size: 20px;
color: #000000;
}

/* Media Queries */
@media (max-width: 768px) {
.hero-content h1 {
font-size: 40px;
Expand All @@ -173,48 +195,72 @@
font-size: 16px;
}
}
.We{
font-size: 40px;
color: #000000;
font-weight: bolder;
}

.highlight{
font-size: 20px;
font-weight: bolder;
color: #000000;
}
</style>
</head>
<body>
<!-- Navbar -->

<header>
<div class="logo">TechSavvy</div>
<ul>
<li><a href="#hero">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</header>

<!-- Hero Section -->
<section class="hero" id="hero">
<div class="hero-overlay"></div>
<div class="hero-content">
<h1>Welcome to TechSavvy</h1>
<p>Empowering Technology, One Step at a Time</p>
<p>Empowering Technology,
<br>One Step at a Time</p>
<a href="#about"><button class="btn">Learn More</button></a>
</div>
</section>

<!-- About Section -->


<section class="about" id="about">
<h2>About Us</h2>
<p>At TechSavvy, we are dedicated to helping individuals and businesses harness the power of technology. We provide innovative solutions, insightful blogs, and expert advice to make technology accessible and useful to everyone.</p>
<p>At TechSavvy, we are dedicated to helping individuals and businesses harness the power of technology. We provide
innovative solutions, insightful blogs, and expert advice to make technology accessible and useful to everyone.</p>
<p>
TechSavvy Support is your go-to platform for comprehensive technical assistance,
offering expert solutions for both individuals and businesses. Our mission is
to make technology accessible, user-friendly, and efficient, empowering you to overcome
any technical challenges. Whether you're facing hardware issues, software troubleshooting,
or need advice on the latest tech innovations, our dedicated team is here to help.<br><br>
<span class="We">We provide:</span> <br>
<span class="highlight">Instant Support:</span> Quick responses to your tech-related inquiries.<br>
<span class="highlight">Expert Guidance:</span> Professional insights and personalized advice to enhance your tech experience.<br>
<span class="highlight">Resource Library:</span> A vast collection of tutorials, FAQs, and troubleshooting guides for DIY support.<br>
<span class="highlight">Remote Assistance:</span> Get direct help from our experts through remote access solutions.<br><br>
<span class="highlight">At TechSavvy Support, we prioritize your convenience and satisfaction,
ensuring you stay connected, productive, and informed every step of the way.</span>
</p>
</section>

<!-- Contact Section -->
<section class="contact" id="contact">
<h2>Get in Touch</h2>
<p>If you have any questions or need further assistance, feel free to reach out. We’re here to help you!</p>
<button class="btn">Contact Us</button>
<a href="contact.html"><button class="btn">Contact Us</button></a>
</section>

<!-- Footer -->
<footer>
<p>&copy; 2024 TechSavvy. All Rights Reserved.</p>
</footer>

<!-- Smooth Scrolling -->
<script>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
Expand Down
Loading

0 comments on commit e288105

Please sign in to comment.