Scribd Logo
Upload

Welcome to Scribd!

  • 01 135211 053 10550787033 21032023 022339pm

    Uploaded by

    Islamic Duniya
    21 views8 pages

    Original Title

    01-135211-053-10550787033-21032023-022339pm

    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

    Copyright:

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

    01 135211 053 10550787033 21032023 022339pm

    Uploaded by

    Islamic Duniya

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 8

    Web Systems & Technologies

    ITL-226

    Lab Journal 5

    Student Name: Muhmmad Junaid


    Enrolment No.01-135211-053
    Class and Section: BSIT 5A

    Department of Computer Science


    BAHRIA UNIVERSITY, ISLAMABAD
    Lab # 5: HTML5 and CSS

    Objectives:

    Learn about HTML5 and CSS

    Tools Used:

    Visual Studio

    Submission Date:

    Evaluation: Signatures of Lab Engineer:


    Task # 1:

    Design the following webpages (Use HTML and CSS):

    Procedure/Program:

    Html:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"
    Inherits="WebApplication1.WebForm1" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head runat="server">
    <title>Web Page</title>
    <link rel="stylesheet" href="junaid.css" />
    </head>
    <body>
    <div class="one">
    <figure>
    <img src="https://cdn.pixabay.com/photo/2018/05/08/21/28/airbnb-
    3384008_1280.png" width="3%" align="left" />
    </figure>
    <h1>airbnb</h1>
    </div>
    <div class ="Button">
    <a href="#">Become A Host</a>
    </div>
    <div class="dropdown">

    <div class="dropdown-content">
    <a href="#">place to stay</a>
    <a href="#">Experiences</a>
    <a href="#">Online Experience</a>
    </div>

    </div>
    <form class="search">
    <div class="search input">
    <label for="location">
    <div class="label">Location</div>
    <input name="location" id="location" placeholder="Where are you going" />
    </label>
    </form>
    </div>
    <div class="search input">
    <label for="check In">
    <div class="lable">Check In</div>
    <input name="Check In" id="Check In" placeholder="Add Date" />
    </label>
    </div>
    <div class ="search input">
    <label for="Guests">
    <div class="lable">Guests</div>
    <input name="Guests" id="Guests" placeholder="Add Guests" />
    </label>
    </div>
    <style>
    body{
    background-image :
    url('https://techcrunch.com/wp-content/uploads/2021/08/GettyImages-1234731223.jpg');
    background-attachment:fixed;
    background-size: cover;
    }
    </style>

    </body>
    </html>

    Css:

    .one:hover{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin:3%;
    }

    .dropdown{
    text-decoration:none;
    text-decoration-color: black;
    align-content:center;
    margin: auto;
    width:50%;
    }
    a{
    float:center;
    color:black;
    text-decoration:none;
    margin:2%;

    }
    .Button{
    align-content: right;
    color:green;
    text-align:right;
    }
    .search{
    float:center;
    display:flex;
    background: white;
    display:inline;
    }

    Result/Output:
    Analysis/Conclusion:
    Task # 2:

    Design the following webpages (Use HTML and CSS):

    Procedure/Program:

    Result/Output:

    Analysis/Conclusion:

    You might also like