Scribd Logo
Upload

Welcome to Scribd!

  • 19 views

    IICT LAB TASK 10 Galry

    Uploaded by

    shazma rahim
    This document contains the code for a gallery page with images. The code includes CSS styling for headings, navigation links, images, and captions overlaid on the images. It defines styles for the page layout, headings, navigation links, and image boxes to display photos and captions.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd

    IICT LAB TASK 10 Galry

    Uploaded by

    shazma rahim
    19 views3 pages
    This document contains the code for a gallery page with images. The code includes CSS styling for headings, navigation links, images, and captions overlaid on the images. It defines styles for the page layout, headings, navigation links, and image boxes to display photos and captions.

    Original Title

    IICT LAB TASK 10 galry

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document contains the code for a gallery page with images. The code includes CSS styling for headings, navigation links, images, and captions overlaid on the images. It defines styles for the page layout, headings, navigation links, and image boxes to display photos and captions.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    19 views3 pages

    IICT LAB TASK 10 Galry

    Uploaded by

    shazma rahim
    This document contains the code for a gallery page with images. The code includes CSS styling for headings, navigation links, images, and captions overlaid on the images. It defines styles for the page layout, headings, navigation links, and image boxes to display photos and captions.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    of 3

    IICT LAB TASK 10(gallery)

    CODE

    <html> .nav-area{
    .gallery-image img {
    <head>
    @media (max-width:600px){
    float: right;
    height: 250px;
    list-style: none;
    <style>
    .wrapper { width: 350px;
    margin-top: 30px;
    *{
    width: 100%; transform: scale(1.0);
    }
    } margin: 0; transition: transform 0.4s ease;
    .nav-area li{
    .logo {
    padding: 0; }
    display: inline-block;
    } width: 100px; }
    float: left;
    body{ .img-box {
    .nav-area li a {
    height: auto;} color:box-sizing: content-box;
    font-family: 'Lato', sans-serif; #fff;

    margin: 10px;
    text-decoration: none;
    }
    .nav-area { height:
    padding: 250px;
    5px 20px;
    .wrapper{
    float: none; width: poppins;
    font-family: 350px;
    width: 1170px;
    margin-top: 0; font-size: 16px; hidden;
    overflow:
    margin: auto;
    } text-transform: uppercase;
    display: inline-block;
    } }
    .nav-area li a { color: white;
    header{ .nav-area li a:hover{
    padding: 5px; position: relative;
    background: linear- background: #fff;
    font-size: 11px; background-color: white;
    gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url(palace- color: #333;
    }
    2.jpg); }
    }
    .nav-area
    height:{100px;
    .logo{
    text-align: center;
    -webkit-background-size: cover; .caption {
    float: left;
    } position: absolute;
    background-size: cover; }
    .welcome-text { bottom: 5px;
    background-position: center center; .logo img{
    width: 100%; left:100px;
    width: 20px;
    position: relative;
    height: auto; opacity:
    height: 0.0;
    100px;
    }
    margin: 30% 0; transition:
    padding: 0px 0;transform 0.3s ease, opacity 0.3s ease;

    } } }

    .welcome-text h1 {

    font-size: 30px; .transparent-box {

    } height: 250px;

    width: 350px;

    background-color:rgba(0, 0, 0, 0);
    <title>GALLERY</title>

    <link href="https://fonts.googleapis.com/css?family=Raleway:600,900" rel="stylesheet">

    </head>

    <body>

    <header>

    <div class="wrapper">

    <ul class="nav-area">

    <li><a href="file:///C:/Users/glab.KIETNN/Desktop/IICT%20LAB%204/LABTASK10.html">Home</a></li>

    <li><a href="file:///C:/Users/glab.KIETNN/Desktop/IICT%20LAB%204/LAB%20TASK%2010%20(2).html">PRODUCTS</a></li>

    <li><a href="file:///C:/Users/glab.KIETNN/Desktop/IICT%20LAB%204/LAB%20TASK%2010%20(3).html">Gallery</a></li>

    <li><a href="file:///C:/Users/glab.KIETNN/Desktop/IICT%20LAB%204/LAB%20TASK%2010%20(4).html">ABOUT</a></li>

    </ul>

    </div>

    </header>

    <p class="heading"> GALLERY</p>

    <div class="gallery-image">

    <div class="img-box">

    <img src="image 5.jpg" />

    <div class="transparent-box">

    <div class="caption">

    <p>SPEAKER</p></a>

    <p class="opacity-low">They are used to produce sound to hear by the listener, create surround sound</p>

    </div>

    </div>

    </div>

    <div class="img-box">
    OUTPUT:

    You might also like