Program 4

Develop a layout.html with a suitable header (containing navigation menu) and footer with copyright and developer information. Inherit this layout.html and create 3 additional pages: contact us, About Us and Home page of any website.

views.py

from django.shortcuts import render

# Create your views here.
def home(request):
    return render(request, 'home.html')

def about(request):
    return render(request, 'about.html')

def contact(request):
    return render(request, 'contact.html')

urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('home', views.home),
    path('about', views.about),
    path('contact', views.contact),
]

templates/layout.html

<!DOCTYPE html>
<head>
  <title>{% block title %} Program 4 default title {% endblock %}</title>
  <style>
    body {
      background-color: rgb(202, 186, 216);
    }
    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: aquamarine;
      padding: 10px 20px;
      border-radius: 5px;
      text-decoration: none;
    }

    footer {
        display: flex;
        justify-content: center;
        background-color: rgb(238, 238, 238);
        padding: 10px 20px;
        border-radius: 5px;
    }

    a {
      text-decoration: none;
      color: rgb(50, 50, 50);
    }

    a:hover {
      text-decoration: underline;
    }

    #links {
      display: flex;
      gap: 10px;
      background-color: rgb(198, 151, 117);
      padding: 10px;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <nav>
    <div>
      <a href="home">DEV SITE</a>
    </div>
    <div id="links">
      <a href="home">Home</a> 
      <a href="about">About</a> 
      <a href="contact">Contact Us</a> 
    </div>
  </nav>

  {% block content %}{% endblock %}

  <footer>
    <center>&copy ayshmnmm 2024</center>
  </footer>
</body>

templates/contact.html

{% extends "layout.html" %}

{% block title %}Contact{% endblock %}

{% block content %}
    <h1>Contact Us</h1>
    <p>Send us a message!</p>
    <a href="tel:123-456-7890">Call us</a>
{% endblock %}

templates/about.html

{% extends "layout.html" %} 
{% block title %}About{% endblock %} 
{% block content %}
<h1>About Us</h1>
<p>
  We are the best dev company in the world!
</p>
{% endblock %}

templates/home.html

{% extends "layout.html" %}

{% block title %}Home{% endblock %}

{% block content %}
    <h1>Home</h1>
    <p>Welcome to the home page!</p>
{% endblock %}

Fullstack Development