Scribd
Upload
12 views

Web Technologies Assignment 1

Uploaded by

Revenger Mian
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

Web Technologies Assignment 1

Uploaded by

Revenger Mian
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

WEB TECHNOLOGIES

ASSIGNMENT#1

Mian Habib Jan


SP21-BSE-042
QUESTION# 1

Create a Navigation Bar Using Flexbox


Task: Design a navigation bar using Flexbox.
1. HTML Structure: Outline how you will structure your HTML for the navigation links.
2. CSS Properties: Describe the CSS properties you will use to achieve a horizontal layout.
3. Alignment and Spacing: Explain how you will center the navigation items and space
them evenly.

1. HTML Structure:
• <nav class="navbar">: A <nav> element to designate the main navigation bar, with a
navbar class for styling.
• <div class="logo">Stock Price Prediction website</div>: An optional <div> for a logo
or brand name, which can also hold an image if preferred.
• <ul class="nav-links">: An unordered list <ul> with a nav-links class to hold the
individual navigation links.
• <li><a href="#section">Link</a></li>: Each link is wrapped in an <li> element for
easier styling and Flexbox alignment.

2. CSS Properties
display: flex
• This property enables Flexbox on an element, allowing child items to be aligned in
various ways. When applied to .navbar, it makes it easy to arrange items (logo and links)
horizontally or vertically.

justify-content
• This property defines the alignment of flex items along the main axis (horizontal by
default). Setting justify-content: space-between; spaces items (like the logo and links) at
the outer edges of the navbar with space between them.

Align-items
• This property aligns items along the cross-axis (vertical by default in a row layout).
Setting align-items: center; centers the items vertically within the navbar, creating a
balanced appearance.

Gap
• The gap property (used in .nav-links) specifies the space between flex items. This
property is useful for setting consistent spacing between navigation links, creating an
organized and even look.

Padding and Margin


• Padding: Adds space inside an element, pushing content away from the edges.
• Margin: Adds space outside an element, pushing it away from neighboring elements. In
this design, padding is used to space links within the navbar, while margin and padding
on .nav-links ensure proper layout without additional gaps around the navbar itself.

Transition
• The transition property is used to animate CSS changes smoothly, such as color changes
on hover. Here, it’s applied to .nav-links li a:hover to create a soft color transition effect
when the user hovers over a link.

3. Alignment and Spacing:


• Horizontal Layout with display: flex: By setting .navbar and .nav-links to display: flex,
we ensure all items are placed in a row.
• Centering Items: The combination of justify-content: space-between; and align-items:
center; centers the items within the navbar and spaces the logo and links evenly.
• Even Spacing with gap: Setting gap: 20px; between .nav-links items spaces each link
consistently, ensuring an organized appearance without excessive code.

Code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/web.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav class="navbar">
<div class="logo">Stock Price Prediction</div>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

</body>
</html>

CSS:
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
background-color: #1f3a93;
color: white;
}

.logo {
font-size: 1.5em;
font-weight: bold;
color: #ffffff;
}

.nav-links {
display: flex;
list-style: none;
gap: 20px;
margin: 0;
padding: 0;
}

.nav-links li a {
text-decoration: none;
color: #f0f0f0;
padding: 8px 15px;
font-size: 1em;
transition: color 0.3s ease, background-color 0.3s ease;
}

.nav-links li a:hover {
color: #1f3a93;
background-color: #f0f0f0;
border-radius: 5px;
}

Screenshot:

QUESTION #2

Design a web page layout using CSS Grid based on a theme of your choice (e.g., a personal
portfolio, a blog, a product showcase, or a landing page). Outline your layout by specifying the
following:
1. Sections: Identify the main sections of your page (e.g., header, main content area,
sidebar, footer).
2. Grid Structure: Describe how you will use CSS Grid properties, such as grid-template-
areas, grid-template-columns, and grid-template-rows, to organize these sections.
Provide a brief sketch of your layout, along with a sample CSS code snippet to illustrate your
grid design.

1. Sections:
1. Header: Contains the logo, navigation bar, and a brief introduction.
2. Main Content Area: Displays the portfolio items, including project titles, descriptions,
and images.
3. Sidebar: Features a profile picture, a short bio, and links to social media profiles.
4. Footer: Includes copyright information, contact details, and links to other relevant pages.

2. Grid Structure:
I'll use a 2-column grid layout to structure the page. The header and footer will span both
columns, while the main content area and sidebar will occupy one column each.

CSS Grid Properties:

• grid-template-areas: Defines named areas for grid items.


• grid-template-columns: Sets the width of grid columns.
• grid-template-rows: Sets the height of grid rows.

CSS Code Snippet:


.container {
display: grid;
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
grid-template-columns: 2fr 1fr;
}

.header {
grid-area: header;
}

.main {
grid-area: main;
}

.sidebar {
grid-area: sidebar;
}

.footer {
grid-area: footer;
}
Layout Sketch:

You might also like