Scribd Logo
Upload

Welcome to Scribd!

  • IICT LAB TASK 10 Products

    Uploaded by

    shazma rahim
    11 views3 pages
    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.

    Original Description:

    Original Title

    IICT LAB TASK 10 products

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    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.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    11 views3 pages

    IICT LAB TASK 10 Products

    Uploaded by

    shazma rahim
    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.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 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