Scribd
Upload
15 views

Django Basic

Uploaded by

aliyumuhammad9990
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
15 views

Django Basic

Uploaded by

aliyumuhammad9990
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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:info@mywebsite.com" style="color: #007BFF; text-decoration:
none;">info@mywebsite.com</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