Scribd
Upload
15 views

Django Basic

Uploaded by

aliyumuhammad9990
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
15 views

Django Basic

Uploaded by

aliyumuhammad9990
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

1.

NAVBER

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beautiful Navbar</title>
</head>
<body style="margin: 0; font-family: Arial, sans-serif;">

<!-- Navbar -->


<div style="background-color: #333; overflow: hidden; padding: 10px 0;">
<div style="max-width: 1200px; margin: 0 auto; display: flex; justify-
content: space-between; align-items: center;">

<!-- Logo -->


<div style="color: white; font-size: 24px; font-weight: bold; padding-
left: 20px;">
MyWebsite
</div>

<!-- Links -->


<div style="display: flex; gap: 20px; padding-right: 20px;">
<a href="#" style="text-decoration: none; color: white; font-size:
16px; padding: 10px 15px; transition: background-color 0.3s;">
Home
</a>
<a href="#" style="text-decoration: none; color: white; font-size:
16px; padding: 10px 15px; transition: background-color 0.3s;">
About
</a>
<a href="#" style="text-decoration: none; color: white; font-size:
16px; padding: 10px 15px; transition: background-color 0.3s;">
Services
</a>
<a href="#" style="text-decoration: none; color: white; font-size:
16px; padding: 10px 15px; transition: background-color 0.3s;">
Contact
</a>
</div>
</div>
</div>

<!-- Hover Effect -->


<style>
a:hover {
background-color: #575757;
border-radius: 5px;
}
</style>

</body>
</html>

2. FOOTER

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beautiful Footer</title>
</head>
<body style="margin: 0; font-family: Arial, sans-serif;">

<!-- Footer -->


<div style="background-color: #333; color: white; padding: 20px 0; text-align:
center;">

<!-- Social Media Links -->


<div style="margin-bottom: 10px;">
<a href="#" style="text-decoration: none; color: white; margin: 0 10px;
font-size: 20px;">Facebook</a>
<a href="#" style="text-decoration: none; color: white; margin: 0 10px;
font-size: 20px;">Twitter</a>
<a href="#" style="text-decoration: none; color: white; margin: 0 10px;
font-size: 20px;">Instagram</a>
<a href="#" style="text-decoration: none; color: white; margin: 0 10px;
font-size: 20px;">LinkedIn</a>
</div>

<!-- Links -->


<div style="margin-bottom: 10px;">
<a href="#" style="text-decoration: none; color: white; margin: 0 15px;
font-size: 16px;">Privacy Policy</a>
<a href="#" style="text-decoration: none; color: white; margin: 0 15px;
font-size: 16px;">Terms of Service</a>
<a href="#" style="text-decoration: none; color: white; margin: 0 15px;
font-size: 16px;">Contact Us</a>
</div>

<!-- Copyright -->


<div style="font-size: 14px; margin-top: 10px;">
© 2024 MyWebsite. All rights reserved.
</div>
</div>

</body>
</html>

3. HOME

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Home Page</title>
</head>
<body style="margin: 0; font-family: Arial, sans-serif; background-color: #f4f4f9;
color: #333;">

<!-- Header -->


<header style="background-color: #333; color: white; padding: 20px; text-align:
center;">
<h1 style="margin: 0;">Welcome to My Website</h1>
<p style="margin: 0; font-size: 18px;">Your one-stop solution for
everything</p>
</header>

<!-- Main Content -->


<main style="padding: 20px; text-align: center;">
<h2 style="margin-bottom: 10px;">About Us</h2>
<p style="font-size: 16px; line-height: 1.6; max-width: 600px; margin: 0
auto;">
We are a leading provider of quality services and solutions that make
your life easier.
Explore our website to learn more about what we offer.
</p>

<div style="margin-top: 30px;">


<a href="#" style="text-decoration: none; background-color: #007BFF;
color: white; padding: 10px 20px; border-radius: 5px; font-size: 16px; transition:
background-color 0.3s;">
Learn More
</a>
</div>
</main>

<!-- Footer -->


<footer style="background-color: #333; color: white; padding: 10px; text-align:
center; margin-top: 40px;">
<p style="margin: 0; font-size: 14px;">© 2024 MyWebsite. All rights
reserved.</p>
</footer>

</body>
</html>

4. ABOUT

<!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>
</head>
<body style="margin: 0; font-family: Arial, sans-serif; background-color: #f9f9f9;
color: #333;">

<!-- Header -->


<header style="background-color: #333; color: white; padding: 20px; text-align:
center;">
<h1 style="margin: 0;">About Us</h1>
<p style="margin: 0; font-size: 18px;">Learn more about who we are and what
we do</p>
</header>

<!-- Main Content -->


<main style="padding: 20px; max-width: 800px; margin: 30px auto;">
<section>
<h2 style="text-align: center; color: #007BFF;">Who We Are</h2>
<p style="font-size: 16px; line-height: 1.6; text-align: justify;">
We are a team of passionate professionals dedicated to delivering
high-quality products and services.
With a focus on innovation and excellence, we strive to exceed our
customers' expectations and make
a positive impact in our industry.
</p>
</section>

<section style="margin-top: 30px;">


<h2 style="text-align: center; color: #007BFF;">Our Mission</h2>
<p style="font-size: 16px; line-height: 1.6; text-align: justify;">
Our mission is to empower individuals and businesses by providing
reliable solutions that meet their
needs. We are committed to continuous improvement, fostering a
culture of collaboration, and ensuring
customer satisfaction.
</p>
</section>

<section style="margin-top: 30px; text-align: center;">


<h2 style="color: #007BFF;">Contact Us</h2>
<p style="font-size: 16px;">Have questions? Reach out to us at <a
href="mailto:[email protected]" style="color: #007BFF; text-decoration:
none;">[email protected]</a>.</p>
</section>
</main>

<!-- Footer -->


<footer style="background-color: #333; color: white; padding: 10px; text-align:
center;">
<p style="margin: 0; font-size: 14px;">© 2024 MyWebsite. All rights
reserved.</p>
</footer>

</body>
</html>

You might also like