To design a responsive website with two break points.
Requirement collection.
Creating the layout using HTML and CSS.
Updating the sample content.
Choose the appropriate style and color scheme.
Validate the layout in various browsers.
Validate the HTML code.
Create a database model and migrate the database.
Retrieve data from database and display it in a dynamic webpage.
Publish the website in the given URL.
{% load static %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>AR Industries Limited</title>
</head>
<body>
<div class="jumbotron">
<div class="container text-center">
<h1 class="display-3">AR Industries Limited</h1>
<p class="lead">We manufacture high qualilty electronic products</p>
</div>
</div>
<div class="container">
<div class="row text-center">
<div class="col-12 col-md-3"><a href="/responsivehome">Home</a></div>
<div class="col-12 col-md-3"><a href="/responsiveproduct">Product</a></div>
<div class="col-12 col-md-3"><a href="/responsivepeople">People</a></div>
<div class="col-12 col-md-3"><a href="/responsivecontactus">Contact us</a></div>
</div>
</div>
<div class="container">
{% block content %}
{% endblock %}
</div>
<div class="container">
<div class="row align-items-end">
<div class="col text-center">
Copyright © 2021 AR Industries Limited, Developed by ARUN RAJ
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
{% extends "design/responsivebase.html" %}
{% block content %}
<div class="card">
<img class="card-img-top" src="/static/img/office.jpg" alt="Card image cap" height="300">
<div class="card-body">
<h5 class="card-title">About Us</h5>
<p class="card-text">AR Industries Limited, provides a broad range of semiconductor and infrastructure software applications that serve the data center, networking, software, broadband, wireless, and storage and industrial markets. Common applications for its products include: data center networking, home connectivity, broadband access, telecommunications equipment, smartphones, base stations, data center servers and storage, factory automation, power generation and alternative energy systems, displays, and mainframe operations and management, and application software development. Some of Silicon's core technologies and products include:
<ul>
<li>Memory Chips</li>
<li>SATA HDD</li>
<li>SATA SSD </li>
<li>Broadband Modems</li>
<li>Wifi Devices</li>
<li>Switching Devices</li>
<li>Optical Sensors</li>
</ul>
</div>
</div>
{% endblock %}
{% extends "design/responsivebase.html" %}
{% block content %}
<div class="row text-center">
<div class="col-12">
<p class="lead">Our Premium Products</p>
</div>
</div>
<div class="row text-center">
<div class="card col-12 col-md-6 col-lg-3">
<img class="card-img-top" src="/static/img/i1.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b> RAM 4GB DDR4</b></h5>
<p class="card-text">(2666 MHz CL19 Desktop Memory)<br>Price: Rs.1,429.00</p>
<a href="#" class="btn btn-primary">Buy now</a>
</div>
</div>
<div class="card col-12 col-md-6 col-lg-3">
<img class="card-img-top" src="/static/img/i2.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b>HyperX Fury 8GB DDR4</b></h5>
<p class="card-text">(3200MHz CL16 XMP Desktop Memory)<br> Price: Rs.3,241.00</p>
<a href="#" class="btn btn-primary">Buy now</a>
</div>
</div>
<div class="card col-12 col-md-6 col-lg-3">
<img class="card-img-top" src="/static/img/i3.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b>XPG DDR4 D60G RGB 16GB</b></h5>
<p class="card-text">(3200MHz PC4-25600 U-DIMM)<br>Price: Rs.10,999.00</p>
<a href="#" class="btn btn-primary">Buy now</a>
</div>
</div>
<div class="card col-12 col-md-6 col-lg-3">
<img class="card-img-top" src="/static/img/i4.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b>Seagate BarraCuda 1 TB HDD</b></h5>
<p class="card-text">(HDD – 3.5 Inch SATA 6 Gb/s 7200 RPM)<br>Price: Rs.6500.00</p>
<a href="#" class="btn btn-primary">Buy now</a>
</div>
</div>
<div class="card col-12 col-md-6 col-lg-3">
<img class="card-img-top" src="/static/img/i5.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b>Western Digital HDD for Desktop</b></h5>
<p class="card-text"> (WD10EZEX 1TB Internal Hard Drive)<br>Price: Rs.5450.00</p>
<a href="#" class="btn btn-primary">Buy now</a>
</div>
</div>
<div class="card col-12 col-md-6 col-lg-3">
<img class="card-img-top" src="/static/img/i6.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b>Western Digital Gold 2TB HDD</b></h5>
<p class="card-text">(Internal SATA Hard Drive (WD2005FBYZ))<br>Price: Rs.16,999.00</p>
<a href="#" class="btn btn-primary">Buy now</a>
</div>
</div>
<div class="card col-12 col-md-6 col-lg-3">
<img class="card-img-top" src="/static/img/i7.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b>Western Digital WD Green 240 GB</b></h5>
<p class="card-text">(SATA III (WDS240G2G0A))<br>Price: Rs.4,300.00</p>
<a href="#" class="btn btn-primary">Buy now</a>
</div>
</div>
<div class="card col-12 col-md-6 col-lg-3">
<img class="card-img-top" src="/static/img/i8.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b>Crucial BX500 240GB 3D NAND SSD</b></h5>
<p class="card-text"> (SATA 2.5-inch SSD (CT240BX500SSD1))<br>Price: Rs.3,500.00</p>
<a href="#" class="btn btn-primary">Buy now</a>
</div>
</div>
<div class="card col-12 col-md-6 col-lg-3">
<img class="card-img-top" src="/static/img/i9.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b>Seagate Barracuda Q1 SSD 240GB</b></h5>
<p class="card-text"> (2.5 Inch SATA 6Gb/s (ZA240CV1A001))<br>Price: Rs.5,099.00</p>
<a href="#" class="btn btn-primary">Buy now</a>
</div>
</div>
<div class="card col-12 col-md-6 col-lg-3">
<img class="card-img-top" src="/static/img/i10.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b>TP-LINK TD-W8961N Wireless</b></h5>
<p class="card-text"> (Wi-Fi Modem Router,2x 5dBi)<br>Price: Rs.2,399.00</p>
<a href="#" class="btn btn-primary">Buy now</a>
</div>
</div>
<div class="card col-12 col-md-6 col-lg-3">
<img class="card-img-top" src="/static/img/i11.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b>TP-Link AC750 Wireless</b></h5>
<p class="card-text"> (Portable Mini Travel Router (TL-WR902AC))<br>Price: Rs.2,199.00</p>
<a href="#" class="btn btn-primary">Buy now</a>
</div>
</div>
<div class="card col-12 col-md-6 col-lg-3">
<img class="card-img-top" src="/static/img/i12.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b>Linksys Velop WiFi 6 AX 5300</b></h5>
<p class="card-text"> (Whole-Home WiFi Mesh Network)<br>Price: Rs.39,999.00</p>
<a href="#" class="btn btn-primary">Buy now</a>
</div>
</div>
</div>
{% endblock %}
{% extends "design/responsivebase.html" %}
{% block content %}
<div class="jumbotron">
<div class="container text-center">
<h1 class="display-3">AR Private Limited</h1>
<h5 class="display-6">crew people</h5>
</div>
</div>
<div class="row text-center">
<div class="col-12">
<h5 class="display-6">Our Crew People</h5>
</div>
</div>
<div class="row text-center">
<div class="card col-12 col-md-6 col-lg-3">
<img class="card-img-top" src="/static/img/c.jpg" alt="card image cap">
<div class="card-body">
<h5 class="card-title">ASHWIN</h5>
<p class="card-text">President of a company</p>
<a href="#" class="btn btn-primary">More Details</a>
</div>
</div>
<div class="card col-12 col-md-6 col-lg-3">
<img class="card-img-top" src="/static/img/c1.jpg" alt="card image cap">
<div class="card-body">
<h5 class="card-title">AAKAASH</h5>
<p class="card-text">Cheif Executive Officer of a company</p>
<a href="#" class="btn btn-primary">More Details</a>
</div>
</div>
<div class="card col-12 col-md-6 col-lg-3">
<img class="card-img-top" src="/static/img/c2.jpg" alt="card image cap">
<div class="card-body">
<h5 class="card-title">RAGAV</h5>
<p class="card-text">Cheif Operating Officer of a company</p>
<a href="#" class="btn btn-primary">More Details</a>
</div>
</div>
<div class="card col-12 col-md-6 col-lg-3">
<img class="card-img-top" src="/static/img/c3.jpg" alt="card image cap">
<div class="card-body">
<h5 class="card-title">CHETAN DINESH</h5>
<p class="card-text">Cheif Financial Officer of a company</p>
<a href="#" class="btn btn-primary">More Details</a>
</div>
</div>
<div class="card col-12 col-md-6 col-lg-3">
<img class="card-img-top" src="/static/img/c4.jpg" alt="card image cap">
<div class="card-body">
<h5 class="card-title">VINCENT</h5>
<p class="card-text">Cheif Legal Officer of a company</p>
<a href="#" class="btn btn-primary">More Details</a>
</div>
</div>
<div class="card col-12 col-md-6 col-lg-3">
<img class="card-img-top" src="/static/img/c5.jpg" alt="card image cap">
<div class="card-body">
<h5 class="card-title">SURYA PRASANNA</h5>
<p class="card-text">Cheif Marketing Officerof a company</p>
<a href="#" class="btn btn-primary">More Details</a>
</div>
</div>
</div>
{% endblock %}
{% extends "design/responsivebase.html" %}
{% block content %}
<div class="card">
<img class="card-img-top" src="/static/img/contact.jpg" alt="Card image cap">
<div class="card-body">
<div class="card-title">
<h5 class="col text-center">Contact Us</h5>
</div>
<p class="card-text">
<hr>
<div class="col text-center">
<h4 class="lead">Email: [email protected]</h4><br>
<h4 class="lead">Phone: +1-1594227</h4><br>
<h4 class="lead">Address: © AR Industries Limited,Mountain View, California, United-States</h4>
</div>
<hr>
</div>
</div>
{% endblock %}
Thus, a responsive website with two break points is designed and is hosted in the URL http://arun.student.saveetha.in:8000/