Login/Signup & CRUD Operation in Django

Leave a Comment / Django, Python / By Ravi

First You need to known about basic setup of Django project . I am assuming you know about basic html file rendering with addition CSS and Image files and App too.

Python Django Setup: –

Pip install Django
Create a folder then open folder cmd
Django-admin startproject projectname
Now cd (change directory) projectname
For creating App: – Python manage.py startapp APPNAME
Now you can check : python manage.py runserver(By default 8000)
If you want to change port : Python manage.py runserver (Port number)
Example : If you want to change port : python manage.py runserver 4444

Step 1 : Create Models (model.py)

from django.db import models

class administrator(models.Model):

    username=models.CharField(max_length=32, unique=True)
    password = models.CharField(max_length=32)
    email = models.CharField(max_length=100)

    class Meta:
        db_table= "administrator"

    def __str__(self):
        return self.name

class Doctor(models.Model):

    name = models.CharField(max_length=100)
    email = models.EmailField(blank=True)
    address = models.CharField(max_length=300)
    phone = models.CharField(max_length=20)

    class Meta:
        db_table= "doctors"

    def __str__(self):
        return self.name

Step 2 : Django Admin (admin.py)

from django.contrib import admin
from all_app.models import administrator, Doctor

# Register your models here.
admin.site.register(administrator)
admin.site.register(Doctor)

Step 3 : Create View (views.py)

from django.shortcuts import render, redirect, reverse
from all_app.models import administrator
from all_app.models import Doctor
from all_app.forms import UserReg

from all_app import models

def register(request):
    if request.method=='POST':
        username=request.POST.get('username')
        email = request.POST.get('email')
        password = request.POST.get('password')

        user_list= models.administrator.objects.filter(username= username)

        error_name=[]
        if user_list:
            error_name='The user name already exists'

            return render (request, 'register.html',{'error_name': error_name})
        else:
            username=models.administrator.objects.create(username=username, password=password,email=email)
            username.save()

        return redirect('/login')
    return render(request, 'register.html')

def login(request):
    if request.method=='POST':
        username=request.POST.get('username')
        password = request.POST.get('password')

        obj_user= models.administrator.objects.filter(username=username,password=password)
        if obj_user:
            return redirect('/index')
        error='Wrong username and password'

    return render(request, 'login.html', locals())




def welcome(request):
    return render(request, "welcome.html")


def main(request):
    return render(request, "main.html")

def index(request):
    return render(request, "index.html")

def doctors(request):
    doctor_list = Doctor.objects.all()
    context={
        'doctor_list':doctor_list
    }
    return render(request, "doctors.html", context)

def add_doctor(request):
    if request.method=='POST':
        name=request.POST.get('name')
        email = request.POST.get('email')
        address = request.POST.get('address')
        phone = request.POST.get('phone')
        entry=Doctor(
            name = name,
            email = email,
            address= address,
            phone=phone
        )
        entry.save()
        return redirect("/doctors")


def edit_doctor(request):
    doctor_list = Doctor.objects.all()
    context = {
        'doctor_list': doctor_list
    }
    return render(request, "doctors.html", context)

def update_doctor(request,id):
    if request.method =='POST':
        name = request.POST.get('name')
        email = request.POST.get('email')
        address = request.POST.get('address')
        phone = request.POST.get('phone')
        entry=Doctor(
            id=id,
            name = name,
            email = email,
            address= address,
            phone=phone
        )
        entry.save()
        return redirect("/doctors")

def delete_doctor(request,id):
    doctor = Doctor.objects.filter(id=id)    #--You Can also use :- doctor = Doctor.objects.get(id=id)
    doctor.delete()
    return redirect("/doctors")

Step 4 : Create Url (urls.py)

from django.contrib import admin
from django.urls import path
from all_app import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.main),
    path('login/', views.login),
    path('register/', views.register),
    path('welcome/', views.welcome),
    path('index/', views.index),
    path('patients/', views.patients),
    path('staff/', views.staff),
    path('doctors/', views.doctors, name='doctor'),
    path('add_doctor/', views.add_doctor, name='add_doctor'),
    path('edit_doctor/', views.edit_doctor, name='edit_doctor'),
    path('update_doctor/<int:id>', views.update_doctor, name='update_doctor'),
    path("delete_doctor/<int:id>", views.delete_doctor, name='delete_doctor'),

]

Step 5 : HTML PAGE (doctors.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Doctors</title>
  {% include "dashboard_base.html" %}
</head>
<body>
<nav class="navbar navbar-inverse visible-xs">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Hospital Management System</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="/index">Dashboard</a></li>
        <li class="active" ><a href="/doctors">Doctors</a></li>
        <li><a href="/patients">Patients</a></li>
        <li><a href="/staff">Staff</a></li>
        <li><a href="/login">Logout</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container-fluid">
  <div class="row content">
    <div class="col-sm-3 sidenav hidden-xs">
      <h2>Hospital Management System</h2>
      <ul class="nav nav-pills nav-stacked">
        <li ><a href="/index">Dashboard</a></li>
        <li class="active"><a href="/doctors">Doctors</a></li>
        <li><a href="/patients">Patients</a></li>
        <li><a href="/staff">Staff</a></li>
        <li><a href="/login">Logout</a></li>
      </ul><br>
    </div>
    <br>
<div class="col-sm-9">
  <div class="container-xl">
   <div class="table-responsive">
      <div class="table-wrapper">
         <div class="table-title">
            <div class="row">
               <div class="col-sm-6">
                  <h2>Manage <b>Doctors</b></h2>
               </div>
               <div class="col-sm-6">
                  <a href="#addEmployeeModal" class="btn btn-success" data-toggle="modal"><i class="material-icons">&#xE147;</i> <span>Add New Doctor</span></a>
                  <a href="#deleteEmployeeModal-{{forloop.counter}}" class="btn btn-danger" data-toggle="modal"><i class="material-icons">&#xE15C;</i> <span>Delete</span></a>
               </div>
            </div>
         </div>
         <table class="table table-striped table-hover">
            <thead>
               <tr>
                  <th>
                     <span class="custom-checkbox">
                        <input type="checkbox" id="selectAll">
                        <label for="selectAll"></label>
                     </span>
                  </th>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Address</th>
                  <th>Phone</th>
                  <th>Actions</th>
               </tr>
            </thead>

            <tbody>
               {% for i in doctor_list %}
               <tr>
                  <td>
                     <span class="custom-checkbox">
                        <input type="checkbox" id="checkbox1" name="options[]" value="1">
                        <label for="checkbox1"></label>
                     </span>
                  </td>
                  <td>{{i.name}}</td>
                  <td>{{i.email}}</td>
                  <td>{{i.address}}</td>
                  <td>{{i.phone}}</td>
                  <td>
                     <a href="#editEmployeeModal-{{forloop.counter}}" class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit">&#xE254;</i></a>
                     <a href="#deleteEmployeeModal-{{forloop.counter}}" class="delete" data-toggle="modal">
                        <i class="material-icons" data-toggle="tooltip" title="Delete">&#xE872;</i></a>
                  </td>
               </tr>
               {% endfor %}
            </tbody>
         </table>
         <div class="clearfix">
            <div class="hint-text">Showing <b>5</b> out of <b>25</b> entries</div>
            <ul class="pagination">
               <li class="page-item disabled"><a href="#">Previous</a></li>
               <li class="page-item"><a href="#" class="page-link">1</a></li>
               <li class="page-item"><a href="#" class="page-link">2</a></li>
               <li class="page-item active"><a href="#" class="page-link">3</a></li>
               <li class="page-item"><a href="#" class="page-link">4</a></li>
               <li class="page-item"><a href="#" class="page-link">5</a></li>
               <li class="page-item"><a href="#" class="page-link">Next</a></li>
            </ul>
         </div>
      </div>
   </div>
</div>
<!-- Add/Create Modal HTML -->
<div id="addEmployeeModal" class="modal fade">
   <div class="modal-dialog">
      <div class="modal-content">
         <form action="{% url 'add_doctor' %}" method="post">
         {% csrf_token %}
            <div class="modal- header">
               <h4 class="modal-title">Add Doctor</h4>
               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
               <div class="form-group">
                  <label>Name</label>
                  <input name="name" type="text" class="form-control" required>
               </div>
               <div class="form-group">
                  <label>Email</label>
                  <input name="email" type="email" class="form-control" required>
               </div>
               <div class="form-group">
                  <label>Address</label>
                  <textarea name="address" class="form-control" required></textarea>
               </div>
               <div class="form-group">
                  <label>Phone</label>
                  <input name="phone" type="text" class="form-control" required>
               </div>
            </div>
            <div class="modal-footer">
               <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
               <input type="submit" class="btn btn-success" value="Add">
            </div>
         </form>
      </div>
   </div>
</div>
<!-- Edit Modal HTML -->
{% for i in doctor_list %}
<div id="editEmployeeModal-{{forloop.counter}}" class="modal fade">
   <div class="modal-dialog">
      <div class="modal-content">
         <form action="/update_doctor/{{i.id}}" method="post">
            {% csrf_token %}
            <div class="modal-header">
               <h4 class="modal-title">Edit Doctor</h4>
               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
               <div class="form-group">
                  <label>Name</label>
                  <input name="name" value="{{i.name}}" type="text" class="form-control" required>
               </div>
               <div class="form-group">
                  <label>Email</label>
                  <input name="email" value="{{i.email}}" type="email" class="form-control" required>
               </div>
               <div class="form-group">
                  <label>Address</label>
                  <textarea name="address" class="form-control" required >{{i.address}}</textarea>
               </div>
               <div class="form-group">
                  <label>Phone</label>
                  <input name="phone" value="{{i.phone}}" type="text" class="form-control" required>
               </div>
            </div>
            <div class="modal-footer">
               <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
               <input type="submit" class="btn btn-info" value="Update">
            </div>
         </form>
      </div>
   </div>
</div>
{% endfor %}
<!-- Delete Modal HTML -->
{% for i in doctor_list %}
<div id="deleteEmployeeModal-{{forloop.counter}}" class="modal fade">
   <div class="modal-dialog">
      <div class="modal-content">
         <form action="/delete_doctor/{{i.id}}" method="post">
            {% csrf_token %}
            <div class="modal-header">
               <h4 class="modal-title">Delete Doctor</h4>
               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
               <p>Are you sure you want to delete these Records?</p>
            </div>
            <div class="modal-footer">
               <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
               <input type="submit" class="btn btn-danger"  value="Delete">

            </div>
         </form>
      </div>
   </div>
</div>
{% endfor %}
</div>
 </div>
</div>
</body>

Step 6 : Dashboard Base file(dashboard_base.html)

<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
<!--  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">-->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>
  body {
   color: #566787;
   background: #f5f5f5;
   font-family: 'Varela Round', sans-serif;
   font-size: 13px;
}
.table-responsive {
    margin: 30px 0;
}
.table-wrapper {
   background: #fff;
   padding: 20px 25px;
   border-radius: 3px;
   min-width: 1000px;
   box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.table-title {
   padding-bottom: 15px;
   background: #435d7d;
   color: #fff;
   padding: 16px 30px;
   min-width: 100%;
   margin: -20px -25px 10px;
   border-radius: 3px 3px 0 0;
}
.table-title h2 {
   margin: 5px 0 0;
   font-size: 24px;
}
.table-title .btn-group {
   float: right;
}
.table-title .btn {
   color: #fff;
   float: right;
   font-size: 13px;
   border: none;
   min-width: 50px;
   border-radius: 2px;
   border: none;
   outline: none !important;
   margin-left: 10px;
}
.table-title .btn i {
   float: left;
   font-size: 21px;
   margin-right: 5px;
}
.table-title .btn span {
   float: left;
   margin-top: 2px;
}
table.table tr th, table.table tr td {
   border-color: #e9e9e9;
   padding: 12px 15px;
   vertical-align: middle;
}
table.table tr th:first-child {
   width: 60px;
}
table.table tr th:last-child {
   width: 100px;
}
table.table-striped tbody tr:nth-of-type(odd) {
   background-color: #fcfcfc;
}
table.table-striped.table-hover tbody tr:hover {
   background: #f5f5f5;
}
table.table th i {
   font-size: 13px;
   margin: 0 5px;
   cursor: pointer;
}
table.table td:last-child i {
   opacity: 0.9;
   font-size: 22px;
   margin: 0 5px;
}
table.table td a {
   font-weight: bold;
   color: #566787;
   display: inline-block;
   text-decoration: none;
   outline: none !important;
}
table.table td a:hover {
   color: #2196F3;
}
table.table td a.edit {
   color: #FFC107;
}
table.table td a.delete {
   color: #F44336;
}
table.table td i {
   font-size: 19px;
}
table.table .avatar {
   border-radius: 50%;
   vertical-align: middle;
   margin-right: 10px;
}
.pagination {
   float: right;
   margin: 0 0 5px;
}
.pagination li a {
   border: none;
   font-size: 13px;
   min-width: 30px;
   min-height: 30px;
   color: #999;
   margin: 0 2px;
   line-height: 30px;
   border-radius: 2px !important;
   text-align: center;
   padding: 0 6px;
}
.pagination li a:hover {
   color: #666;
}
.pagination li.active a, .pagination li.active a.page-link {
   background: #03A9F4;
}
.pagination li.active a:hover {
   background: #0397d6;
}
.pagination li.disabled i {
   color: #ccc;
}
.pagination li i {
   font-size: 16px;
   padding-top: 6px
}
.hint-text {
   float: left;
   margin-top: 10px;
   font-size: 13px;
}
/* Custom checkbox */
.custom-checkbox {
   position: relative;
}
.custom-checkbox input[type="checkbox"] {
   opacity: 0;
   position: absolute;
   margin: 5px 0 0 3px;
   z-index: 9;
}
.custom-checkbox label:before{
   width: 18px;
   height: 18px;
}
.custom-checkbox label:before {
   content: '';
   margin-right: 10px;
   display: inline-block;
   vertical-align: text-top;
   background: white;
   border: 1px solid #bbb;
   border-radius: 2px;
   box-sizing: border-box;
   z-index: 2;
}
.custom-checkbox input[type="checkbox"]:checked + label:after {
   content: '';
   position: absolute;
   left: 6px;
   top: 3px;
   width: 6px;
   height: 11px;
   border: solid #000;
   border-width: 0 3px 3px 0;
   transform: inherit;
   z-index: 3;
   transform: rotateZ(45deg);
}
.custom-checkbox input[type="checkbox"]:checked + label:before {
   border-color: #03A9F4;
   background: #03A9F4;
}
.custom-checkbox input[type="checkbox"]:checked + label:after {
   border-color: #fff;
}
.custom-checkbox input[type="checkbox"]:disabled + label:before {
   color: #b8b8b8;
   cursor: auto;
   box-shadow: none;
   background: #ddd;
}
/* Modal styles */
.modal .modal-dialog {
   max-width: 400px;
}
.modal .modal-header, .modal .modal-body, .modal .modal-footer {
   padding: 20px 30px;
}
.modal .modal-content {
   border-radius: 3px;
   font-size: 14px;
}
.modal .modal-footer {
   background: #ecf0f1;
   border-radius: 0 0 3px 3px;
}
.modal .modal-title {
   display: inline-block;
}
.modal .form-control {
   border-radius: 2px;
   box-shadow: none;
   border-color: #dddddd;
}
.modal textarea.form-control {
   resize: vertical;
}
.modal .btn {
   border-radius: 2px;
   min-width: 100px;
}
.modal form label {
   font-weight: normal;
}


    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .row.content {height: 550px}

    /* Set gray background color and 100% height */
    .sidenav {
      background-color: #f1f1f1;
      height: 100%;
    }

    /* On small screens, set height to 'auto' for the grid */
    @media screen and (max-width: 767px) {
      .row.content {height: auto;}
    }
  </style>
  <script>
$(document).ready(function(){
   // Activate tooltip
   $('[data-toggle="tooltip"]').tooltip();

   // Select/Deselect checkboxes
   var checkbox = $('table tbody input[type="checkbox"]');
   $("#selectAll").click(function(){
      if(this.checked){
         checkbox.each(function(){
            this.checked = true;
         });
      } else{
         checkbox.each(function(){
            this.checked = false;
         });
      }
   });
   checkbox.click(function(){
      if(!this.checked){
         $("#selectAll").prop("checked", false);
      }
   });
});
</script>

Step 7 : Login Page (login.html)

{% include "header.html" %}

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LOGIN</title>
    <link rel="stylesheet" href="/static/css/main.css">
</head>

<body>
    <div class="wrapper login">
        <div class="container">
            <div class="col-left">
                <div class="login-text">
                    <h2>Welcome!</h2>
                    <p>Create your account.<br>For Free!</p> <a href="/register" class="btn">Sign Up</a>
                </div>
            </div>
            <div class="col-right">
                <div class="login-form">
                    <h2>Login</h2>
                    <form action="" method="post">
                    {% csrf_token %}
                        <p> <label>Username<span>*</span></label> <input type="text" name="username" placeholder="Username or Email" required> </p>
                        <p> <label>Password<span>*</span></label> <input type="password" name="password" placeholder="Password" required> </p>
                        <p> <input type="submit" value="Sign In"> </p>
                        <p> {{error}}  </p>
                        <p> <a href="">Forgot password?</a> </p>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Step 8 : Register Page (register.py)

{% include "header.html" %}

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SIGN UP</title>
    <link rel="stylesheet" href="/static/css/main.css">
</head>

<body>
    <div class="wrapper login">
        <div class="container">
            <div class="col-left">
                <div class="login-text">
                    <h2>Welcome!</h2>
                    <p>Go to Login page</p> <a href="/login" class="btn">Login</a>
                </div>
            </div>
            <div class="col-right">
                <div class="login-form">
                    <h2>New Sign Up</h2>
                    <form action="" method="post">
                    {% csrf_token %}
                        <p> <label>Username<span>*</span></label> <input type="text" name="username" placeholder="Username" required> </p>
                         <p> <label>Email</label> <input type="text" name="email" placeholder="Email"> </p>
                        <p> <label>Password<span>*</span></label> <input type="password" name="password" placeholder="Password" required> </p>
                        <p> <input type="submit" value="Register"> </p>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Step 9 : Dashboard (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Welcome</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>
    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .row.content {height: 550px}

    /* Set gray background color and 100% height */
    .sidenav {
      background-color: #f1f1f1;
      height: 100%;
    }

    /* On small screens, set height to 'auto' for the grid */
    @media screen and (max-width: 767px) {
      .row.content {height: auto;}
    }
  </style>
</head>
<body>

<nav class="navbar navbar-inverse visible-xs">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Hospital Management System</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/index">Dashboard</a></li>
        <li><a href="/doctors">Doctors</a></li>
        <li><a href="/patients">Patients</a></li>
        <li><a href="/staff">Staff</a></li>
        <li><a href="/login">Logout</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container-fluid">
  <div class="row content">
    <div class="col-sm-3 sidenav hidden-xs">
      <h2>Hospital Management System</h2>
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="/index">Dashboard</a></li>
        <li><a href="/doctors">Doctors</a></li>
        <li><a href="/patients">Patients</a></li>
        <li><a href="/staff">Staff</a></li>
        <li><a href="/login">Logout</a></li>
      </ul><br>
    </div>
    <br>

    <div class="col-sm-9">
      <div class="well">
        <h4>Dashboard</h4>
        <p> {{username}}  </p>
        <p>Welcome to live long Hospital!!</p>
      </div>
      <div class="row">
        <div class="col-sm-3">
          <div class="well">
            <h4>Users</h4>
            <p>4 User</p>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="well">
            <h4>Pages</h4>
            <p>100 Million</p>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="well">
            <h4>Sessions</h4>
            <p>10 Million</p>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="well">
            <h4>Bounce</h4>
            <p>30%</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4">
          <div class="well">
            <p>The chapter you are learning today is going to save someone's life tomorrow.</p>

          </div>
        </div>
        <div class="col-sm-4">
          <div class="well">
            <p>I want to experience the most beautiful adrenaline rush of my life. A rush while taking medical pledge/oath</p>

          </div>
        </div>
        <div class="col-sm-4">
          <div class="well">
            <p>Wherever the art of medicine is loved, there is also a love for humanity.</p>

          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-8">
          <div class="well">
            <p>I think it is possible for ordinary people to choose to be extraordinary.</p>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="well">
            <p>We must accept finite disappointment but never lose infinite hope.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

Step 10 : Creating Header (header.html)

<!DOCTYPE html>
<html lang="en">
    <head>
      <!-- basic -->
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <!-- mobile metas -->
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1">
      <!-- site metas -->
      <title>LiveLong</title>
      <meta name="keywords" content="">
      <meta name="description" content="">
      <meta name="author" content="">
      <!-- bootstrap css -->
      <link rel="stylesheet" href="/static/css/bootstrap.min.css">
      <!-- style css -->
      <link rel="stylesheet" href="/static/css/style.css">
      <!-- Responsive-->
      <link rel="stylesheet" href="/static/css/responsive.css">
      <!-- fevicon -->
      <link rel="icon" href="/static/media/fevicon.png" type="image/gif" />
      <!-- Scrollbar Custom CSS -->
      <link rel="stylesheet" href="/static/css/jquery.mCustomScrollbar.min.css">
      <!-- Tweaks for older IEs-->
      <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
      <!-- owl stylesheets -->
      <link rel="stylesheet" href="/static/css/owl.carousel.min.css">
      <link rel="stylesheet" href="/static/css/owl.theme.default.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">

    </head>
    <body>
      <!-- header section start -->
      <div class="header_section">
        <nav class="destop_header navbar navbar-expand-lg navbar-light bg-light">
          <div class="logo"></div>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="/">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Doctor</a>
              </li>
              <li class="nav-item">
                <a class="logo_main" href="/"><img src="/static/media/logo.png"></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/login">LOGIN</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/register">Register</a>
              </li>
            </ul>
          </div>
        </nav>
        <nav class="mobile_header navbar navbar-expand-lg navbar-light bg-light">
          <div class="logo"><a href="/"><img src="/static/media/logo.png"></a></div>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent2">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Doctor</a>
              </li>
              <li class="nav-item">
                <a class="logo_main" href="/"><img src="/static/media/logo.png"></a>
              </li>


              <li class="nav-item">
                <a class="nav-link" href="/login">LOGIN</a>
              </li>
              <li class="nav-item active">
                <a class="nav-link" href="/Register">Register</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
      <!-- header section end -->

Leave a Comment Cancel Reply