Scribd
Upload
88 views9 pages

WE Lab 3 - Huzaifa - 015

The document discusses a student's lab work on learning CSS. The student designed two coffee shop websites using HTML and CSS. For the first task, the student created code for a coffee shop website with navigation, images, and styling. For the second task, the student designed a website for an elementary school with navigation, text content, and styling.

Uploaded by

Huzaifa Arshad
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
88 views9 pages

WE Lab 3 - Huzaifa - 015

The document discusses a student's lab work on learning CSS. The student designed two coffee shop websites using HTML and CSS. For the first task, the student created code for a coffee shop website with navigation, images, and styling. For the second task, the student designed a website for an elementary school with navigation, text content, and styling.

Uploaded by

Huzaifa Arshad
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/ 9

Web Engineering

LAB JOURNAL# 03

Name: Huzaifa Arshad


Enrollment No: 01-131182-015
Class: BSE-6A
Lab Instructor: Aamir Suhail
Date Submitted: March 15, 2021

DEPARTMENT OF SOFTWARE ENGINEERING

BAHRIA UNIVERSITY
ISLAMABAD CAMPUS
Problem Statement:
Introduction to the CSS

Introduction:
CSS is a language that we used to design the websites

Objectives:
To know about the CSS

Tools Used:
Visual Studio Code
Lab Tasks

Task 1:
Design the coffee Website
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jake's Coffee Shop</title>
    <link rel="stylesheet" href="task1.css">
</head>
<body>
    <div class="main__screen__content">

        <div class="main__screen__content__header">
            <h2>Jake's Coffee Shop</h2>
        </div>
        <div class="main__screen__content__nav">
            <a id="nav" href="http://home.com">Home</a>
            <a id="nav" href="http://Menu.com">Menu</a>
            <a id="nav" href="http://Music.com">Music</a>
            <a id="nav" href="http://Jobs.com">Jobs</a>
        </div>
        <div class="main__screen__content__data">
            <p>Come in Experience</p>
            <img id="CoffeePic" class="floatright" src="cofee.jpg" alt="coffee c
up" width="200" height="200">
            <ul>
                <li>Speciality Cofee and Tea</li>
                <li>Freshly made sandwiches</li>
                <li>Bagles, Muffins, and Organic Snacks</li>
                <li>Music and Poetry Reading</li>
                <li>Open mic nights</li>
                <li>...</li>
            </ul>
            <p>23 Pine Road<br>Nottingham, NGI 5YU<br>0115 9324567</p>
        </div>
        <div class="main__screen__content__footer">
            Copyright &copy; 2011 Jake's Coffee House<br>
            <a href="mailto:jake@jcoffee.com">jake@jcoffee.com</a>
        </div>
    </div>
</body>
</html>

CSS Code:
body{
    background-color: #ffffcc;
    color: #330000;
    font-family: Verdana;
}
#nav{
    text-align: left;
}
#CoffeePic {
    position: absolute;
    right: 20px;
}

.main__screen__content{
    margin-top: 20px;
    margin-left: 20%;
    margin-right: 20%;
    height: 480px;
    width: 750px;
    border-style: solid;
    padding: 0px;
}

.main__screen__content__header{
    background-color: #ccaa66;
    text-align: center;
    border-bottom-style: solid;
    border-top-style: solid;
    height: 81.5px;
    margin: 0px;
}

.main__screen__content__footer{
    background-color: #ccaa66;
    border-top-style: solid;
    height: 62px;
    text-align: center;
    font-style: italic;
    width: 750px;
    margin-top: 320px;
    padding-top: 10px;
}

.main__screen__content__data{
    background-color: #f1e8b0;
    position: relative;
    width: 580px;
    height: 300px;
    padding: 10px;
    float: right;
}

.main__screen__content__nav{
    background-color: #e8d882;
    position: relative;
    padding-left: 20px;
    left: 0px;
    width: 130px;
    height: 320px;
    float: left;
    white-space: pre-line;
}

Output screenshot:
Task 2:
Design the coffee Website
HTML Code:
<html>
  <head>
    <link rel="stylesheet" href="task2.css" />
    <title>Elementary School</title>
  </head>
  <body>
    <header>
      <p>Elementary School</p>
    </header>
    <ul class="sidebarup">
      <li><a href="index.htm">Home</a></li>
      <li><a href="schoolinfo/schoolinfo.htm">School Information</a></li>
      <li><a href="schoolinfo/calendar.htm">Calendar</a></li>
      <li><a href="academics/academics.htm">Academics</a></li>
      <li><a href="extracurricular/extracurricularactivities.htm">Extracurricula
r Activities</a></li>
      <li><a href="students/students.htm">For Students</a></li>
      <li><a href="parents/parents.htm">For Parents</a></li>
      <li><a href="staff/staff.htm">For Staff</a></li>
      <li><a href="staff/schooldevelopment.htm">School Development</a></li>
      <li><a href="search/demosearch.htm">Search</a></li>
    </ul>
    <div class="middle">
      <h1>Welcome to our school</h1>
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diamnonumy 
eirmod tempor invidunt ut labore et dolore
        magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
duo dolores et ea rebum. Stet clita kasd
        gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem 
ipsum dolor sit amet, consetetur sadipscing
        elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
aliquyam erat, sed diam voluptua. At vero eos
        et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
no sea takimata sanctus est Lorem ipsum dolor
        sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed d
iam nonumy eirmod tempor invidunt ut labore
        et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
et justo duo dolores et ea rebum. Stet clita         kasd gubergren, no sea taki
mata sanctus est Lorem ipsum dolor sit amet.
        <img src="school.png" width="300" height="225" />
      </p>
      <h1>School News</h1>
      <p>
        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper sus
cipit lobortis nisl ut aliquip ex ea commodo
        consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate vel
it esse molestie consequat, vel illum dolore
        eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignis
sim qui blandit praesent luptatum zzril
        delenit augue duis dolore te feugait nulla facilisi.
      </p>
    </div>
    <h1>Upcoming Events</h1>
    <ul>
      <li>Dec 8 ~ Christmas Concert</li>
      <li>Dec 19th ~ last day of classes for 2017</li>
      <li>Jan 5th ~ first day of classes for 2017</li>
      Web Engineering 46
    </ul>
    <footer>
      <p>© Name of Elementary | Contact | Site Map |Last Updated: 12/12/2017</p>
    </footer>
  </body>
</html>

CSS Code:
header {
    font-size: 24px;
    font-weight: bold;
    color: black;
    letter-spacing: 2px;
    text-align: center;
    height: 120px;
    padding-top: 30px;
    padding-right: 0px;
    padding-bottom: 30px;
    padding-left: 0px;
  background: #1e5799; 
  background: -moz-linear-gradient(top, #1e5799 0%, #24e250 0%, #e5e5e5 100%);
  background: -webkit-linear-gradient(top, #1e5799 0%, #24e250 0%, #e5e5e5 100
%); 
  background: linear-gradient(
    to bottom,
    #1e5799 0%,
    #24e250 0%,
    #e5e5e5 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', en
dColorstr='#e5e5e5',GradientType=0 );
}

.sidebarup {
  text-align: left;
  float: left;
  width: 200px;
  list-style-type: none;
  margin-left: -10px;
  margin-right: 10px;
  text-decoration: none;
}

.sidebarup li {
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 5px;
  margin-top: 2px;
  background-color: lightgreen;
}

.sidebardown {
  width: 200px;
  float: left;
  text-align: left;
  clear: left;
}

.middle {
    width: 750px;
}

h1 {
  background-color: limegreen;
  color: darkgreen;
  font-weight: bold;
  width: 750px;
  font-size: 12px;
  margin-left: 200px;
}

Output screenshot:

Conclusion:
In this lab, we have learned about the CSS, How to style Websites, Box Model etc.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy