Scribd
Upload
297 views5 pages

HTML and CSS Code For Webpage

The document is a lab assignment for a course on web technologies. It provides the source code for implementing a webpage layout using Flexbox. The code includes styling for a header, navigation bar, flexible grid layout with columns, footer and responsive design for smaller screens. It then displays screenshots of the generated output webpage showing the Tim Hortons menu and contact information laid out using Flexbox.

Uploaded by

ZARAR AIMAN
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
297 views5 pages

HTML and CSS Code For Webpage

The document is a lab assignment for a course on web technologies. It provides the source code for implementing a webpage layout using Flexbox. The code includes styling for a header, navigation bar, flexible grid layout with columns, footer and responsive design for smaller screens. It then displays screenshots of the generated output webpage showing the Tim Hortons menu and contact information laid out using Flexbox.

Uploaded by

ZARAR AIMAN
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 5

Course Name: Web-Tech Topic: Flexbox

Lab-Assignment M. Hanzalah Hashmi Reg # FA20-BCS-015

The following below is an implementation of flexbox: -

Source code:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<style>
* {
box-sizing: border-box;
}

/* Style the body */


body {
font-family: Arial;
margin: 0;
}

/* Header/logo Title */
.header {

background: #C8102F;
color: white;
height:20%;

/* Style the top navigation bar */


.navbar {
display: flex;
background-color: #333;
}

FA20-BCS-015 Web-Tech Page |1


/* Style the navigation bar links */
.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}

/* Change color on hover */


.navbar a:hover {
background-color: #ddd;
color: black;
}

/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */


/* Sidebar/left column */
.side {
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}

/* Main column */
.main {
flex: 70%;
background-color: white;
padding: 20px;
}

/* Fake image, just for this example */


.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}

/* Footer */
.footer {
padding: 20px;
text-align: right;
background: #ddd;
}

FA20-BCS-015 Web-Tech Page |2


.left-imgs{
float:left;
padding-left:10%;

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on
top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row, .navbar {
flex-direction: column;
}
}

.text-header
{
padding-top:10px;
margin-left:30%;
height:40%;
}
</style>
</head>
<body>

<!-- Header -->

<div class="header">
<div class="left-imgs">
<img width=150px height=150px src="https://i0.wp.com/stmarysstationgallery.ca/wp-
content/uploads/2018/11/tim-hortons-logo.png?w=225&ssl=1" alt="Tim Hortons" >
</div>
<div class="text-header">
<h1>Tim Hortons</h1>

<h2>Always Fresh. Always Tim Hortons.</h2>


<br>
<br>
<br>
</div>
</div>

<!-- Navigation Bar -->


<div class="navbar">
<a href="#">Link</a>

FA20-BCS-015 Web-Tech Page |3


<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>

<!-- The flexible grid (content) -->


<div class="row">
<div class="side">
<h2>About Tim Hortons</h2>
<h5>Photo of Mark Wafer(Owner):</h5>
<div style="height:200px;"><img height="200px"
src="https://www.chs.ca/sites/default/files/mark_wafer_0.jpg"></div>
<p text-alighn="center">"Mark Wafer is the owner of six Tim Hortons locations in Toronto.
Over the past 20 years Mark and his wife Valarie have hired 107 people with disabilities and
currently employ 46 people with disabilities from a workforce of 250.</p>
<h3>More Text abou timmies</h3>
<p>Lorem ipsum dolor sit ame.</p>

</div>

<div class="main">
<h2>Tim Hortons</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;"><strong>Tim Hortons is a popular Canadian fast
food chain that serves a variety of baked goods, coffee, and other hot and cold beverages.
The Lahore location is one of the franchise locations, offering customers in Lahore, Pakistan
the chance to experience Tim Hortons’ classic menu items. Whether you’re in the mood for a
freshly brewed coffee, a delicious donut, or a hearty sandwich, Tim Hortons in Lahore is the
place to be. With its convenient location, friendly staff, and high-quality menu items, it’s
no wonder why Tim Hortons has become a favorite among locals and visitors
alike.</strong></div>

<h2>Contact Us</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg"
style="height:200px;"><table><tbody><tr><th>Location</th><th>Address</th></tr><tr><td>Tim
Hortons DHA</td><td>145-MB Main Boulevard commercial lane Phase 6 DHA.</td></tr><tr><td>Tim
Hortons Kasoori Road (Gulberg III)</td><td>Mian Mehmood Ali Kasoori Rd</td></tr><tr><td>Tim
Hortons Mall One (Main Gulberg)</td><td>94-D Main Blvd Gulberg, near Liberty Chowk, Block
“D1” Gulberg III</td></tr><tr><td>Contact
Number</td><td>923024444793</td></tr></tbody></table></div>

</div>
</div>

</body>
</html>

FA20-BCS-015 Web-Tech Page |4


The Code above generates the following Output: -

FA20-BCS-015 Web-Tech Page |5

You might also like