GOVERNMENT

POLYTECHNIC COLLEGE
CHERTHALA

LABORATORY RECORD

Name .............................................................................
Branch ................................................... Roll No. ..........
Reg. No. ..................................... Year ............................
 GOVERNMENT
POLYTECHNIC COLLEGE
CHERTHALA

LABORATORY RECORD

Name ............................................................................
Branch ................................................... Roll No. .........
Reg. No. ..................................... Year ..........................

Certificate
Certified that this is the bonafide record of work done
in………………………………………… ………………… ……………....laboratory
by Sri. ………………… ………………………… ……………… …………………..
during the year…………………..

Internal Examiner Staff in Charge

External Examiner Head of Section

 INDEX

PAGE INITIAL OF
SL NO NAME OF EXPERIMENT DATE
NO TEACHER

1. Python Program - Odd or Even 07-02-2023 1-2

2. Python Program - Factorial of a Number 07-02-2023 3-4

3. Python Program - Sum of 'n' numbers 07-02-2023 5-6

4. Python Program - List Operations 07-02-2023 7 - 10

5. Python Program - Dictionary operations 14-02-2023 11 - 13

Python Program - Sum of digits using

6. function
02-03-2023 15 - 16

7. Python Program - Class - tax 02-03-2023 17 - 20

8. Python Program - Class - Bank Application 02-03-2023 21 - 24

9. Django - Installation 06-03-2023 25 - 30

10. Django - Print "Hello World" 06-03-2023 31 - 34

11. Django - College Website 14-03-2023 35 - 40

12. Django - User Registration & Login 28-04-2023 41 - 50

13. Open Ended Experiment 28-04-2023 51 - 79

Output:-

1
EXPERIMENT-1
ODD OR EVEN

AIM:- Write a program to check whether the given number is odd or even

PROGRAM:-

a=int(input("Enter a number"))
if a%2==0:
print(a," is an Even Number")
else:
print(a," is an odd Number")

RESULT:- Program Is Executed And Output Is Verified

2
Output:-

3
EXPERIMENT-2
FACTORIAL

AIM:- Write a program to find the factorial of a number (use for loop)

PROGRAM:-

num = int(input("enter a number: "))

fac = 1

for i in range(1, num + 1):

fac = fac*i

print ("factorial of ", num, " is ", fac)

RESULT:- Program Is Executed And Output Is Verified

4
Output:-

5
EXPERIMENT-3
SUM OF N NUMBERS

AIM:- Write a program to find the sum of ‘n’ numbers (use while loop)

PROGRAM:-

a = int(input('Enter a Number'))
sum=0
i=1
while i<=a:
sum+=i
i+=1
print("sum of numbers is",sum)

RESULT:- Program Is Executed And Output Is Verified

6
Output:-

7
EXPERIMENT-4
OPERATIONS ON LIST

AIM:- Write a Menu Driven Program to perform various operations on List

PROGRAM:-

my_list = []

def add_item():
item = input("Enter an item to add: ")
my_list.append(item)
print("Item added to the list.")

def remove_item():
item = input("Enter an item to remove: ")
if item in my_list:
my_list.remove(item)
print("Item removed from the list.")
else:
print("Item not found in the list.")

def display_list():
print("List items:")
for item in my_list:
print(item)

def clear_list():
my_list.clear()
print("List cleared.")

while True:
print("\nSelect an operation:")
print("1. Add item to the list")
print("2. Remove item from the list")
print("3. Display list items")

8
9
Print("4. Clear the list")
print("5. Exit")

choice = int(input("Enter your choice: "))

if choice == 1:
add_item()
elif choice == 2:
remove_item()
elif choice == 3:
display_list()
elif choice == 4:
clear_list()
elif choice == 5:
print("Exiting program...")
else:
print("Invalid choice.")

RESULT:- Program Is Executed And Output Is Verified

10
Output:-

11
EXPERIMENT-5
OPERATIONS ON DICTIONARY

AIM:- Write a Menu Driven Program to perform various operations on Dictionary

PROGRAM:-

my_dict = {}

def add_entry():
key = input("Enter the key: ")
value = input("Enter the value: ")
my_dict[key] = value
print("Entry added to the dictionary.")

def remove_entry():
key = input("Enter the key to remove: ")
if key in my_dict:
del my_dict[key]
print("Entry removed from the dictionary.")
else:
print("Key not found in the dictionary.")

def display_dict():
print("Dictionary entries:")
for key, value in my_dict.items():
print(key, ":", value)

def clear_dict():
my_dict.clear()
print("Dictionary cleared.")

while True:
print("\nSelect an operation:")
print("1. Add entry to the dictionary")
print("2. Remove entry from the dictionary")

12
13
 print("3. Display dictionary entries")
print("4. Clear the dictionary")
print("5. Exit")

choice = int(input("Enter your choice: "))

if choice == 1:
add_entry()
elif choice == 2:
remove_entry()
elif choice == 3:
display_dict()
elif choice == 4:
clear_dict()
elif choice == 5:
print("Exiting program...")
break
else:
print("Invalid choice.")

RESULT:- Program Is Executed And Output Is Verified

14
Output:-

15
EXPERIMENT-6
SUM OF DIGITS USING FUNCTION

AIM:- Write a python program to input a number, pass it to a function, calculate

sum of digits of that number, return result and display it.

PROGRAM:-

def getSum(n):

sum = 0
for digit in str(n):
sum += int(digit)
return sum

n = input("Enter a Number")
print("sum of digit is",getSum(n))

RESULT:- Program Is Executed And Output Is Verified

16
Output:-

17
EXPERIMENT-7
TAX CALCULATION

AIM:- Create a class Item having data members : itemno, name, quantity, rate , tax
rate, Tax & Total. Calculate
Tax = (quantity * rate ) * taxrate/100 and
Total = (quantity * rate )+ tax.
Implement member functions such as getdata(), calculate(){to find tax and total}
and display().

PROGRAM:-

class Item:
def __init__(self):
self.itemno = 0
self.name = ""
self.quantity = 0
self.rate = 0.0
self.tax_rate = 0.0
self.tax = 0.0
self.total = 0.0

def getdata(self):
self.itemno = int(input("Enter item number: "))
self.name = input("Enter item name: ")
self.quantity = int(input("Enter quantity: "))
self.rate = float(input("Enter rate: "))
self.tax_rate = float(input("Enter tax rate: "))

def calculate(self):
self.tax = (self.quantity * self.rate) * self.tax_rate / 100
self.total = (self.quantity * self.rate) + self.tax

def display(self):
print("Item Number:", self.itemno)
print("Item Name:", self.name)
print("Quantity:", self.quantity)

18
19
 print("Rate:", self.rate)
print("Tax Rate:", self.tax_rate)
print("Tax:", self.tax)
print("Total:", self.total)

item1 = Item()

item1.getdata()

item1.calculate()

item1.display()

RESULT:- Program Is Executed And Output Is Verified

20
Output:-

21
EXPERIMENT-8
BANK OPERATIONS

AIM:- Define a class to represent a Bank account. Include the following members.
Data members:- Name, Accountno, Balanceamount.
Member Functions :-
Initialize balance amount to Rs. 500/- while object is created using constructor.
Implement member functions :
deposit() - to deposit amount,
withdraw() - to withdraw amount( after checking for minimum balance)
display()- to display all the details of an account holder

PROGRAM:-

class BankAccount:
def __init__(self, name, accountno):
self.name = name
self.accountno = accountno
self.balanceamount = 500.0

def deposit(self, amount):

self.balanceamount += amount
print("Deposit successful.")
self.display()

def withdraw(self, amount):

if self.balanceamount - amount < 500:
print("Withdrawal failed. Minimum balance of Rs. 500/- must be
maintained.")
else:
self.balanceamount -= amount
print("Withdrawal successful.")
self.display()

def display(self):

22
23
 print(f"Name: {self.name}")
print(f"Account No.: {self.accountno}")
print(f"Balance Amount: Rs. {self.balanceamount:.2f}")

account = BankAccount("John Doe", "1234567890")

account.display()
account.deposit(1000)
account.withdraw(800)
account.withdraw(300)

RESULT:- Program Is Executed And Output Is Verified

24
25
EXPERIMENT-9
PYTHON DJANGO INSTALLATION

AIM:- Demonstrate installation of Python and Django framework

PROGRAM:-

PYTHON & DJANGO INSTALLATION STEPS IN UBUNTU

1)
Install Python
sudo apt install python3
After Installation – Close Terminal & Open New terminal
2)
Install Python3 venv
sudo apt install python3-venv
3)
Install Django
pip install django
4)
Create new python virtual environment
python3 -m venv env
5)
Activate Python Virtual Environment ‘env’
source env/bin/activate
6)
Create new Django Project
django-admin startproject proj
7)
Move to newly created project directory
cd proj/
8)
Create new App
django-admin startapp dept
9)
Open the project in vscodium
10) go to ‘setting.py’ in Project Folder and add line import os in import section (if it
not there)
26
27
11) go to the section Installed Apps in settings.py and add our app name in single
quotes.
For example see below ,
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'dept', ]
12) create folders templates and static inside the new app ‘dept’ (static for storing
images and
template for keeping html files)
13) create file urls.py inside the new app. this is for keeping the urls of the project
- add the following lines to urls.py (initially empty)
from django.conf.urls import url
from .import views
urlpatterns = [
url('',views.index,name="index"),
]
Here we have to import path and views from django first. Then inside urlpatterns ,
you have
to give the path of each urls in the app. Remember each urls should have
curresponding views
in the views.py file.
14) Go to the dept (app folder) and open views.py file. Create a view for the index
page, ie, the
first page. The views.py then will look like
from django.shortcuts import render
# Create your views here.
def index(request):
return render(request,'index.html')
where render is used to redirect to an html page named index.html, which we have
to create
in the template folder.
15) Go to templates section of your app and create a new html file named
index.html and write
some html code there (The same name we gave for urls,views)

28
29
16) There is a file named urls.py inside the project folder.(Listen, in project folder,
not in the app
folder).
Open that file.There you can see the default code as
from django.conf.urls import include, url
from django.contrib import admin
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
]
- add import for include statement so that you can include all the urls in the
newapp so that
the final urls.py file in the project folder will be as follows.
from django.conf.urls import include, url
from django.contrib import admin urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'', include('dept.urls')),
]
This says django to include whatever the urls in our dept into the project.
17) We are ready to go.
Run the following on terminal
python manage.py makemigrations ( This is to migrate everything we done,
important
when we do edits on model file)
python manage.py migrate
python manage.py runserver(to run the server on 127.0.0.1:8000)
Output: You can see whatever you done on index.html as output

RESULT:- Program Is Executed And Output Is Verified

30
31
EXPERIMENT-10
HELLO WORLD IN DJANGO

AIM:- Write a program to print hello world in Django framework

PROGRAM:-

->Proj(Main)
--settings.py
1)
INSTALLED_APPS = (
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'dept',
)
2)
STATIC_URL = '/static/'
STATIC_ROOT=os.path.join(BASE_DIR,'static')

--urls.py

from django.conf.urls import include, url

from django.contrib import admin

urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'',include('dept.urls')),
]

32
33
->dept(app)
Create static and template folder and save images on static folder

--urls.py

from django.conf.urls import url

from.import views
urlpatterns=[
url("^$",views.index,name="index"),

--views.py

from django.shortcuts import render

# Create your views here.

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

->Index.html
<html>
<title><head>Hello World</head></title>
<body>Hello world</body>
</html>

RESULT:- Program Is Executed And Output Is Verified

34
35
EXPERIMENT-11
COLLEGE WEBSITE

AIM:- Create a multipage website for your college

PROGRAM:-
->gptc(Main)
--settings.py
1)
INSTALLED_APPS = (
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'gpt'
)2)
STATIC_URL = '/static/'
STATIC_ROOT=os.path.join(BASE_DIR,'static')

--urls.py

from django.conf.urls import include, url

from django.contrib import admin

urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r"",include('gpt.urls')),
]

36
37
 ->gpt(app)
Create static and template folder and save images on static folder

--urls.py

from django.conf.urls import url

from.import views
urlpatterns=[
url("^$",views.index,name="index"),
url("about/",views.about,name="about"),
url("contact/",views.contact,name="contact"),
]
--views.py

from django.shortcuts import render

# Create your views here.\

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

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

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

->index.html
<html>
<title><head></head></title>
<body>
<center> <h1>GPTC CHERTHALA</h1></center> <br>

<p align="justify">Govt. Polytechnic College, Cherthala is the first Professional

Engineering Institution of excellence under Government Sector in Alappuzha district of
Kerala state. Govt. Polytechnic College, Cherthala is a premier Technical Education
center in Kerala targeting the rural people. Even though the institution located in the
heart of Cherthala town, beside the national highway, it is surrounded by a number of
villages, which are backward. This institution serves as a Nodal Polytechnic for the
other Polytechnic Colleges in the Alappuzha District.</p>

</body>
</html>

38
39
 ->about.html
<html>
<title><head></head></title>
<body>
<center> <h1>ABOUT GPTC CHERTHALA</h1></center> <br>
<p align="justify">Govt. Polytechnic College, Cherthala is the first Professional Engineering
Institution of excellence under Government Sector in Alappuzha district of Kerala state. Govt.
Polytechnic College, Cherthala is a premier Technical Education center in Kerala targeting the
rural people. Even though the institution located in the heart of Cherthala town, beside the
national highway, it is surrounded by a number of villages, which are backward. This institution
serves as a Nodal Polytechnic for the other Polytechnic Colleges in the Alappuzha District.
</p>
<p align="justify">This institution started functioning as Junior Technical School in 1959 and
was later upgraded as Technical High School.In 1994 it was upgraded to Polytechnic College,
Imparting three year diploma course in Engineering/Technology under Department of Technical
Education, Government of Kerala.Later Govt. of Kerala has sanctioned two more Diploma courses in
Engineering Technology.</p>
<p align="justify">
This prestigious institution now offering 3-year diploma courses of a unique kind in five creamy
disciplines, with a view to creating excellent academic proficiency from a utilitarian point of
view, the syllabi of the courses are carefully designed giving a thrust to the needs of the
present electronics, computer, mechanical and general industries. The campus atmosphere of our
institution is very much conductive to our excellent academic performance.</p>

</body>
</html>

->contact.html
<html>
<title><head></head></title>
<body>
<center> <h1>CONTACT US</h1></center> <br>
<pre>Our Address
GPTC Cherthala
NH-47, Maruthorvattom
Muttathiparambu, Cherthala
Alappuzha, Kerala - 688539
(+91)-0478-2813427
[email protected]</pre>
</body>
</html>

RESULT:- Program Is Executed And Output Is Verified

40
41
EXPERIMENT-12

USER REGISTRATION AND LOGIN

AIM:- Write a program for user registration and login in Django framework

PROGRAM:-

1) Create new project

2) create folders templates and static inside the new app ‘logapp’ (static for storing images and
template for keeping html files)

3) create file urls.py inside the new app. this is for keeping the urls of the project

from django.conf.urls import url

from .import views

urlpatterns = [
url('',views.index,name="index"),
url('register/',views.register,name="register"),
url('login/',views.log,name="login"),
]

4) In views.py in logapp folder

from django.shortcuts import render

from django.shortcuts import render,redirect
from .forms import *
from .models import *
from django.contrib import messages

# Create your views here.

def index(request):
return render(request,'index.html')
def register(request):
form=RegisterForm()
dict={'form':form}
if request.method=="POST":
form=RegisterForm(request.POST)
if form.is_valid():
user=form.save()
messages.success(request," User Registered succeessfully")
return render(request,'register.html',dict)

42
43
 def log(request):
if request.method == 'POST':
# Process the request if posted data are available
username = request.POST['username']
password = request.POST['password']
# Check username and password combination if correct
user = authenticate(username=username, password=password)
if user is not None:
# Save session as cookie to login the user
login(request, user)
# Success, now let's login the user.
return render(request, 'dashboard.html')
else:
# Incorrect credentials, let's throw an error to the screen.
return render(request, 'login.html', {'error_message': 'Incorrect
username and / or password.'})
else:
# No post data availabe, let's just show the page to the user.
return render(request, 'login.html')

5) For basic registration, we have a basic model named "User" in django. You have to import the user model. The
user model is provided with fields username, email, password, first_name, last_name by default. For a basic
registration, use as it is.

a) open forms.py in logapp folder create a class named RegisterForm and add the following

from django import forms

from django.contrib.auth.models import User
from .import models

class RegisterForm(forms.ModelForm):
class Meta:
model=User
fields=['username','email','password','first_name','last_name']
widgets={
'password':forms.PasswordInput(),
'email':forms.EmailInput()
}
def save(self):
self.clean()
user = self.Meta.model(
username = self.cleaned_data['username'],
email = self.cleaned_data['email'],
)

# Set password with method is solution

user.set_password(self.cleaned_data['password'])
user.save()
return user

Here model=User means we are created a User model (in built in django).

44
45
6) Create register.html inside templates folder and add the following code.
<html>

{% load widget_tweaks %}
<body>

<form method="POST">
{% csrf_token %}
<table border =0 >
<tr><td>
Username
</td><td>
{% render_field form.username class="form-control" %}
</td></tr>
<tr><td>
Email
</td><td>
{% render_field form.email class="form-control" %}</td></tr>
<tr><td>
Password
</td><td>
{% render_field form.password class="form-control" %}</td></tr>
<tr><td>
Firstname
</td><td>
{% render_field form.first_name class="form-control" %}</td></tr>
<tr><td>
Last Name
</td><td>
{% render_field form.last_name class="form-control" %}</td></tr>
<tr><th>
<button type="submit">Register</button></th></tr>
</table>
</form>
{%if messages%}
{%for message in messages%}
{% if message.tags %}
{% endif %}>
<br>
{{message}}

{% endfor %}

{% endif %}
</body>
</html>

7) Create index.html inside templates folder and add the following code.

Welcome to User Registration & Login

<br>
<a href="/register">User Registration</a>
<br>
<br>
<br>
<a href="/login">User Login</a>

46
47
8) Create login.html inside templates folder and add the following code.

{% block content %}
<div class="container">
<form action="{% url 'login' %}" method="post">
{% csrf_token %}

{% if error_message %}
<p class="bg-danger p-d ml-b">{{ error_message }}</p>
{% endif %}
Username
<input name="username" value="" type="text" class="form-
control" />

<br>
Password
<input name="password" type="password" class="form-control" />
<br>

<input name="login" type="submit" value="Login" /> &nbsp;

</form>
</div>
{% endblock %}

9) add import for include statement so that you can include all the urls in the newapp so that the
final urls.py file in the project folder will be as follows.

from django.conf.urls import include, url

from django.contrib import admin

urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'', include(logapp.urls')),
]

10) create a super user by using the command python manage.py createsuperuser and assign a
username and password.

python manage.py createsuperuser

48
49
11) We are ready to go.

Run the following on terminal

python manage.py makemigrations ( This is to migrate everything we done, important when

we do edits on model file)
python manage.py migrate

python manage.py runserver(to run the server on 127.0.0.1:8000)

12) Install Widget Tweaks for Django

pip install django-widget-tweaks

13) Verify admin panel for database at

http://127.0.0.1:8000/admin

RESULT:- Program Is Executed And Output Is Verified

50
`

51
EXPERIMENT-13
OPEN ENDED EXPERIMENT

AIM:- Open ended project to create applications like library management ,

Inventory Management, Hospital Management, Order Management, Document
Management, etc.

PROGRAM:-
->project(Main)
--settings.py

1)INSTALLED_APPS = (
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'App1'
)
2)STATIC_URL = '/static/'
STATIC_ROOT=os.path.join(BASE_DIR,'static')

--urls.py

from django.conf.urls import include, url

from django.contrib import admin

urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'',include(‘App1.urls'))
]

52
53
 ->App1(app)
Create static and template folder and save images on static folder

--urls.py

from django.conf.urls import url

from .import views

urlpatterns=[
url('^$',views.index,name='index'),
]

--views.py

from django.shortcuts import render

# Create your views here.

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

->index.html
<div class="line"></div>
{% load static %}
<link rel="stylesheet" type="text/css"
href="{% static "css/style.css" %}" />
<div class="wrapper">
<header role="banner">
<nav role="navigation">
<h1><a href="#">INSPIRE</a></h1>
<ul class="nav-ul">
<li><a href="#">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#technology">Technologies</a></li>
<li><a href="#project">Projects</a></li>
<li><a href="#contact">Contacts</a></li>
</ul>
</nav>
</header>
<main role="main">

54
55
<section class="sec-intro" role="section" id="about">
<img src="{% static "img/inspire.jpeg" %}" alt="" />
<h1>Be Innovative!</h1>
</section>
<section class="sec-boxes" role="section">
<adrticle class="box">
<h1>Open-minded</h1>
<p>Every option should be explored and tried no matter how unpredictable, impossible,
insane or ridiculous does it looks or sound.</p>
<button class="button" type="button" role="button" value="MORE">More</button>
</adrticle>
<adrticle class="box">
<h1>Creative</h1>
<p>Brainstorming, idea generation, playing sessions, note taking. You think you used
everything? We will challenge your mind and its abilities to the limits.</p>
<button class="button" type="button" role="button" value="MORE">More</button>
</adrticle>
<adrticle class="box">
<h1>Bold</h1>
<p>Our methods and ideas are are not written or following any books, curriculums or rules.
We consider ourselves rebels and we are proud of it.</p>
<button class="button" type="button" role="button" value="MORE">More</button>
</adrticle>
<adrticle class="box">
<h1>Smart</h1>
<p>Every project with innovation as a goal requires smart approach. Identify real problem
first and look for the smartest and simplest solution later.</p>
<button class="button" type="button" role="button" value="MORE">More</button>
</adrticle>
</section>
<section class="sec-events" role="section" id="technology">
<hr />

<h1>Upcomming events</h1>
<article>
<h1>Tire Technology Expo</h1>
<p>Tire Technology Expo has grown in strength and stature every year since it was started in
Europe 15 years ago. Visitors and exhibitors to the conference and exhibition staged in February
2014 universally praised it as the 'world's leading tire design and tire manufacturing event',
noting in particular the outstanding quality of the conference papers and speakers, and the
comprehensive extent of machinery manufacturers and suppliers who exhibited at the
event.</p>
<a class="link" href="#">more...</a>
</article>
<article>
<h1>Meteorology World Expo</h1>

56
57
 <p>Meteorological Technology World Expo is a truly international exhibition of the very latest
climate, weather and hydro - meteorological forecasting, measurement and analysis
technologies and service providers for a global community of key decision makers within the
aviation industry, shipping companies, marine / port installations, airports, military operations,
off-shore exploration companies, wind farm operators, met offices, agriculture operations and
research institutes.</p>
<a class="link" href="#">more...</a>
</article>
<article>
<h1>Wearable Tech Expo</h1>
<p>See live demos, listen to case studies, speak with Wearable Tech Experts The first
Wearable Tech Expo in Tokyo 2014. Key players from Japan, America and Europe announced
their new products and attracted attention from all over the world. The next Wearable Tech
Expo in Tokyo will be doubling in size and include Robotics and IoT. The main players in the
wearable industry, human factor engineers, brain scientists, media providers and creators will
discuss the future of wearable technology! </p>
<a class="link" href="#">more...</a>
</article>
<article>
<h1>Space Tech Expo</h1>
<p>Space Tech Expo is the West Coast's premier B2B space event for spacecraft, satellite,
launch vehicle and space-related technologies.
Taking place in Long Beach, the Space Tech Expo exhibition and conference brings together
global decision-makers involved in the design, build and testing of spacecraft, satellite, launch
vehicle and space-related technologies. Leading the West Coast space and satellite industry,
Space Tech Expo is where end-users connect with solution providers.</p>
<a class="link" href="#">more...</a>
</article>
</section>
<section class="sec-projects" role="section" id="project">
<hr />
<h1>Previous Projects</h1>
<article>
<h1>Neural network for Google</h1>
<p>People from Google approached us this January with offer to create new neural network
for whole Google's ecosystem. This idea was very interesting and looked almost impossible at
first glance. However, our engineers proved their expertise and built amazing autonomous
platform. <a class="link" href="#">more...</a></p>
</article>
<article>
<h1>Faster operating system for Apple</h1>
<p>For a years, since founding days of a company, Apple always worked with its own
operating system. In October, this was about to change. Our company got chance to rewrite the
history by creating brand new OS for Apple. It was very difficult and all our employees worked
hard every day. <a class="link" href="#">more...</a></p>
</article>
<article>

58
59
 <h1>Manufacturing technology for Intel</h1>
<p>Intel has been manufacturing company for many years. They always used the latest
technologies to achieve the best results with lowest costs. However, this was not enough. Intel
decided to offer us something that could disrupt whole technology sector. <a class="link"
href="#">more...</a></p>
</article>
</section>
<section class="sec-standards" role="section">
<hr />
<h1>Our Standards</h1>
<article>
<h1>Excellence</h1>
<p>Our goal is to give our customers the best solutions in highest aquality. Our employees
strive for excellence and work hard to achieve it. Everything must work and be reliable. Great
design must be both, aesthetic and functional. Product or service that pass these conditions will
be everlasting.</p>
</article>
<article>
<h1>Uniqueness</h1>
<p>Our mantra is to create new paths. We are not interested in copying others because we
know, that if you want to succeed, you have to be different, unique. Our customers know that
we create unique products and experience for them. This is the best way to differentiate us and
our brand from the noise on market. Unique, different and proud.</p>
</article>
</section>
<section class="sec-partners" role="section" id="contact">
<hr />
<h1>Our Partners</h1>
<div class="row">
<div class="logo-container">
{% load static %} <img src="{% static "img/google.png" %}" alt="Google logo" />
</div>
<div class="logo-container">
<img src="{% static "img/apple2.png" %}" alt="Apple logo" />
</div>
<div class="logo-container">
<img src="{% static "img/wii.png" %}" alt="Wii logo" />
</div>
<div class="logo-container">
<img src="{% static "img/valve.png" %}" alt="Valve logo" />
</div>
<div class="logo-container">
<img src="{% static "img/intel.png" %}" alt="Intel logo" />
</div>
</div>
</section>

60
61
 </main>
</div>
<footer>
<nav role="navigation">
<ul class="nav-ul">
<li><a href="#">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#technology">Technologies</a></li>
<li><a href="#project">Projects</a></li>
<li><a href="#contact">Contacts</a></li>
</ul>
</nav>
<p class="copy">&copy; Alex Devero Design 2014</p>
</footer>
<div class="line"></div>
->style.css
/*
html {font: 16px 'Open Sans Condensed', 'Roboto Condensed', Verdana, sans-serif;}
h1 {font-size: 2.25em;}
h2 {font-size: 2em;}
h3 {font-size: 1.75em;}
h4 {font-size: 1.5em;}
p {font-size: 1.25em;}

body{
background-color: bisque;
} *//*Typography*/
html {
font: 16px "Open Sans Condensed", "Roboto Condensed", Verdana, sans-serif;
}
h1 {
font-size: 2.25em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.75em;
}
h4 {
font-size: 1.5em;
}
p{
font-size: 1.25em;
}

62
63
/*Layout*/
html,
body {
width: 100%;
height: 100%;
}
body {
color: #333;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.line {
float: left;
width: 100%;
border-top: 0.25em solid #333;
}
.wrapper {
margin: auto;
width: 60em;
/*960px*/
}
header,
nav,
section,
footer {
float: left;
width: 100%;
}
a{
text-decoration: none;
transition: color 0.25s;
}
.button {
display: block;
padding: 0.75em 1.25em;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
background: #ad0000;
color: #fff;
border: 0;
cursor: pointer;
}
.button:focus, .button:hover {
background: #890000;
}
.button:active {
background: #c10000;

64
65
}
.link {
font-weight: bold;
color: #ad0000;
}
.link:focus, .link:hover {
color: #7a0000;
}
.link:active {
color: #c70000;
}
/*Navigation*/
nav h1 {
float: left;
padding: 0.25em 0.25em 0 0;
font-size: 4.5em;
text-transform: uppercase;
}

nav h1 a {
color: #ad0000;
}
.nav-ul {
display: flex;
}
header li {
width: 41%;
font-size: small;
}
header li:not(:first-child) {
margin-left: 2%;
}
header .nav-ul a {
display: block;
padding: 1.75em 0.5em;
font-size: 1.5em;
text-align: center;
text-transform: uppercase;
color: #333;
}
header .nav-ul a:focus, header .nav-ul a:hover {
color: #ad0000;
}
header .nav-ul a:active {
color: #c70000;
}
header li:first-child a {
background: #ad0000;
color: #fff;
}
header li:first-child a:hover {

66
67
 color: #fff;
}
/*Sections*/
section {
margin: 1em 0;
}
section h1 {
text-transform: uppercase;
}
hr {
border-color: #d3d3d3;
border-style: dashed;
}
.vertical {
width: 0;
height: 10px;
}
/*Intro*/
.sec-intro {
position: relative;
}
.sec-intro img {
width: 100%;
}
.sec-intro img {
width: 100%;
height: 50%;
}
.sec-intro h1 {
position: absolute;
bottom: 0.5em;
left: 0.5em;
padding: 0.5em;
background: rgba(0, 0, 0, 0.5);
color: #fff;
}
/*Boxes*/
.box {
float: left;
padding: 1.5em 1em;
width: 25%;
height: 400px;
border-top: 0.1em solid #d3d3d3;
border-bottom: 0.1em solid #d3d3d3;
border-left: 0.1em solid #d3d3d3;
transition: background 0.25s;
}
.box:focus, .box:hover {
background: #f5f5f5;
}
.box:last-child {

68
69
 border-right: 0.1em solid #d3d3d3;
}
.box h1 {
text-align: center;
}
.box p {
margin-top: 4em;
height: 6em;
text-align: justify;
}
.box .button {
margin: 4em auto;
}
/*Events*/
.sec-events > h1 {
margin-top: 1em;
}
.sec-events article {
float: left;
padding: 0 0.25em;
width: 25%;
text-align: justify;
}
.sec-events article h1,
.sec-events article p {
display: block;
margin: 0.5em 0;
padding: 0.25em 1em;
font-size: 110%;
}
.sec-events article a {
float: right;
padding-right: 1em;
}
.sec-events article h1 {
font-weight: bold;
text-align: center;
}
/*Projects*/
.sec-projects {
width: 60%;
}
.sec-projects > h1 {
margin-top: 1em;
text-align: center;
}
.sec-projects article {
padding: 0.5em 0;
width: 100%;
}
.sec-projects article h1,

70
71
.sec-projects article p {
font-size: 110%;
}
.sec-projects article h1 {
font-weight: bold;
}
.sec-projects article p {
margin: 0.5em 0.5em 0.5em 0;
text-align: justify;
}
.sec-projects p a {
float: right;
}
.sec-projects button {
position: relative;
left: 80%;
}
/*Standards*/
.sec-standards {
width: 40%;
}
.sec-standards > h1 {
margin-top: 1em;
text-align: center;
}
.sec-standards article {
float: left;
padding: 0.5em 1em;
width: 50%;
text-align: justify;
}
.sec-standards article:last-child {
padding: 0.5em 0;
}
.sec-standards article h1 {
text-align: center;
}
/*Partners*/
.sec-partners h1 {
margin-top: 1em;
}
.sec-partners .row {
float: left;
margin: 2em 0;
width: 100%;
}
.logo-container {
float: left;
width: 16%;
width: 100px;
}

72
73
.logo-container:not(:first-child) { margin-left: 7.5%; }
.logo-container:first-child { margin-top: 0.2em; }
.logo-container:nth-of-type(2) img { margin-top: 1.2em; }
.logo-container:nth-of-type(3) img { margin-top: 1.8em; }
.logo-container:nth-of-type(4) img { margin-top: 2.35em; }
.logo-container:nth-of-type(5) img { margin-top: 0.35em; }
.logo-container:last-of-type img { margin-top: 0.65em; }
.sec-partners img {
float: left;
width: 100%;
}
/*Footer*/
footer {
padding: 2em 0;
width: 100%;
text-align: center;
background: #d3d3d3;
}
footer .nav-ul {
justify-content: center;
margin-bottom: 1em;
}
footer li:not(:first-child) {
margin-left: 0.75em;
}
footer li:first-child a { color: #333;
}
footer a {
font-size: 1.25em;
font-weight: bold;
color: #a9a9a9;
}
footer a:focus, footer a:hover { color: #333; }
.copy {
font-size: 0.85em;
}

RESULT:- Program Is Executed And Output Is Verified

74