Scribd
Upload
34 views3 pages

IICT LAB TASK 10 Products

The document is the code for a website page on products. It includes CSS code for formatting elements like headers, navigation links, and text sections. The navigation bar is floated right with unordered links. There is a welcome text section with a heading centered on the page within a wrapper container.

Uploaded by

shazma rahim
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
34 views3 pages

IICT LAB TASK 10 Products

The document is the code for a website page on products. It includes CSS code for formatting elements like headers, navigation links, and text sections. The navigation bar is floated right with unordered links. There is a welcome text section with a heading centered on the page within a wrapper container.

Uploaded by

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

IICT LAB TASK 10(PRODUCTS)

CODE

<!DOCTYPE html> .nav-area li{

<html lang="en"> display: inline-block;

<head> }

<style> .nav-area li a {

*{ color: #fff;

margin: 0; text-decoration: none;

padding: 0; padding: 5px 20px;

} font-family: poppins;

body{ font-size: 16px;

font-family: 'Lato', sans-serif; text-transform: uppercase;

} }

.wrapper{ .nav-area li a:hover{

width: 1170px; background: #fff;

margin: auto; color: #333;

} }

header{ .welcome-text{

background: linear-gradient(rgba(227, 211, 211, position: absolute;


0.8),rgba(0,0,0,0.8)),url(image\ 7.jpg);
width: 600px;
height: 100vh;
height: 300px;
-webkit-background-size: cover;
margin: 20% 30%;
background-size: cover;
text-align: center;
background-position: center center;
}
position: relative;
.welcome-text h1{
}
text-align: center;
.nav-area{
color: rgb(21, 20, 20);
float: right;
text-transform: uppercase;
list-style: none;
font-size: 60px;
margin-top: 30px;
}
}
.welcome-text a { <body>

border: 1px solid #fff; <header>

padding: 10px 25px; <div class="wrapper">

text-decoration: none; <ul class="nav-area">

text-transform: uppercase; <li><a


href="file:///C:/Users/glab.KIETNN/Desktop/IICT
font-size: 14px;
%20LAB%204/LABTASK10.html">HOME</a></li>
margin-top: 20px;

display: inline-block;
<li><a
color: #fff; href="file:///C:/Users/glab.KIETNN/Desktop/IICT
%20LAB%204/LAB%20TASK
} %2010%20(2).html">PRODUCTS</a></li>
.welcome-text a:hover{ <li><a
background: #fff; href="file:///C:/Users/glab.KIETNN/Desktop/IICT
%20LAB%204/LAB%20TASK
color: #333; %2010%20(3).html">GALLERY</a></li>
} <li><a
href="file:///C:/Users/glab.KIETNN/Desktop/IICT
%20LAB%204/LAB%20TASK
</style> %2010%20(4).html">ABOUT</a></li>
<meta charset="UTF-8"> </ul>
<meta http-equiv="X-UA-Compatible" </div>
content="IE=edge">
<div class="welcome-text">
<meta name="viewport" content="width=device-
width, initial-scale=1.0"> <h1>OUR PRODUCTS</h1>

<title>PRODUCTS</title>

</head> </div>

</header>
OUTPUT:

You might also like