Scribd
Upload
5 views

WEB Assignment 2

Uploaded by

Muhammad Junaid
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

WEB Assignment 2

Uploaded by

Muhammad Junaid
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

National University of Modern

Languages
(Faisalabad Campus)

Subject Web

Semester BSSE 5th

Assignment 02

Date 9 Dec 2024

Student Name Muhammad Junaid Akbar

Student Roll No FSD-FL-114


TASK: 1
HTML:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="task1.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<title>Moccafe | Home</title>
</head>

<body>
<section id="header">
<div id="logo">
<a href="#"><img src="assets/logo.png" class="logo" alt="LOGO"></a>
</div>
<div>
<ul id="navigate">
<li><a class="active" href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<div id="cart">
<a href="#"><i class="fa-solid fa-cart-shopping fa-lg"></i></a>
</div>
</section>

<section id="banner">
<div id="beansImg">
<img src="Assets/Coffee-beans.png" alt="">
</div>

<div id="heroText">
<h1>The best quality coffee beans<br>for the best coffee brew</h1>
<p>A cup is enough to give you energy <br> all day long</p>
<button>Order Now</button>
</div>

<div id="cupImg">
<img src="Assets/coffee-cup.png" alt="">
</div>
</section>

<section id="products" class="section-p1">


<div id="proHeading">
<h1>Product</h1>
<div id="input-pages">
<i class="fa-solid fa-magnifying-glass fa-xl" id="searchIcon"></i>
<input type="search" id="searchField" placeholder="Search">
<i class="fa-solid fa-arrow-left" id="arrows"></i>
<i class="fa-solid fa-arrow-right" id="arrows"></i>
</div>
</div>
<div id="proContainer">
<div id="pro">
<img src="Assets/espresso-con-panna.png" alt="">
<div id="proDesc">
<h1>$6.50</h1>
<p>Espresso Con Panna with Butterscotch</p>
</div>
</div>

<div id="pro">
<img style="width: 18%; margin-right: 30px;" src="Assets/iced-mocha.png" alt="">
<div id="proDesc">
<h1>$5.20</h1>
<p>Iced Mocha with Peppermint</p>
</div>
</div>

<div id="pro">
<img src="Assets/sumatra.png" alt="">
<div id="proDesc">
<h1>$24.10 / <span style="font-size: large;">250gr</span></h1>
<p>Sumatra Mandheling Coffee Blend</p>
</div>
</div>
</div>
</section>

</body>

</html>

CSS:
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
}

body {
font-family: Arial, Helvetica, sans-serif;
background: linear-gradient(#333, #333, #736051eb);
color: #fff;
display: block;
width: 100%;
}

.section-p1 {
padding: 70px 40px 30px 40px;
}

/* Header */

#header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #333;
color: #fff;
padding: 12px 40px;
}

#logo {
width: 10%;
height: 100%;
& img {
width: 100%;
}
}

#navigate {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

#navigate li {
list-style: none;
padding: 0 40px 0 0;
margin-left: 0%;
}

#header a {
color: #fff;
text-decoration: none;
}

#navigate li a:hover,
#navigate li a.active {
color: #b6a589;
}

#navigate li a.active::after,
#navigate li a:hover::after {
content: "";
width: 5px;
height: 5px;
border-radius: 100%;
background: #b6a589;
position: absolute;
bottom: -8px;
left: 18px;
}

#cart i {
display: absolute;
top: 50%;
translate: 0 -50%;
}

/* Hero Section */

#banner {
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: 47vh;
background: linear-gradient(#333, #736051);
}

#banner #beansImg img{


position: absolute;
top: 3%;
width: 24%;
left: 3%;
}

#banner #heroText {
text-align: center;
}

#banner #heroText h1 {
font-size: 44px;
padding-top: 10px;
font-weight: 900;
}

#banner #heroText p {
padding: 15px 0 25px 0;
line-height: 30px;
}

#banner #heroText button {


padding: 10px 40px;
border: 0px;
border-radius: 10px;
color: #fff;
background-color: #b6a589;
}

#banner #heroText button:hover {


background-color: #736051;
box-shadow: 2px 2px 5px rgba(250, 250, 250, 0.233);
transform: translateY(-5%);
}

#banner #cupImg img {


position: absolute;
width: 30%;
top: 27%;
right: 2.5%;
rotate: 11deg;
}

/* Products Section */

#products #proHeading {
display: flex;
justify-content: space-between;
padding-bottom: 20px;
}

#products #proHeading #input-pages{


position: relative;
}

#products #proHeading #input-pages #searchField {


width: 15rem;
height: 40px;
padding-left: 41px;
border: 2px solid #fff;
background-color: transparent;
border-radius: 10px;
color: #fff;
margin-right: 20px;
}

#products #proHeading #input-pages #searchField:hover,


#products #proHeading #input-pages #searchField:focus {
outline: none;
}

#products #proHeading #input-pages #searchIcon {


position: absolute;
top: 22px;
left: 10px;
}

#products #proHeading #input-pages #arrows {


padding: 13px;
background-color: #736051;
border-radius: 10px;
margin-left: 5px;
}

#products #proContainer {
display: flex;
justify-content: space-between;
}

#products #proContainer #pro {


display: flex;
justify-content: center;
align-items: center;
width: 32.5%;
background-color: #75604f;
padding: 15px 30px;
border-radius: 20px;
}

#products #proContainer img {


width: 25%;
margin-right: 10px;
}
#proDesc h1 {
margin-bottom: 10px;
}

#products #proContainer #pro #proDesc {


margin-left: 15px; }
Result:

TASK: 2

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="task2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<title>Gostudy | Home</title>
</head>
<body>
<section id="header">
<div id="logo">
<a href="#"><img src="assets/gostudy.png" class="logo" alt="LOGO"></a>
</div>
<div id="rightContent">
<div>
<ul id="navigate">
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Pages</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="cart">
<a href="#"><i class="fa-solid fa-magnifying-glass fa-lg"></i></a>
<a href="#"><i class="fa-solid fa-cart-shopping fa-lg"></i></a>
</div>
<hr>
<div id="buttons">
<a href="#" id="login">Login</a>
<button id="signup">Sign Up</button>
</div>
</div>
</section>
<section id="hero">
<div id="heroText">
<h1>Build Skills With<br>Online Courses from<br>Expert Instructors</h1>
<p>Start streaming on-demand video lectures today from top level instructors Attention beatmaps.</p>
<div id="searchInput">
<input type="search" id="searchField" placeholder="What do you want to learn?">
<button id="searchbtn">Search</button>
</div>
<div id="confirmation">
<i class="fa-solid fa-check" id="tick"></i>
<h4>Get Certified</h4>
<i class="fa-solid fa-check" id="tick"></i>
<h4>Gain Job-Ready Skills</h4>
</div>
</div>
<div id="heroImg">
<img src="Assets/hero-Image.png" alt="">
</div>
</section>
</body>
</html>

CSS:
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
}

body {
font-family: Arial, Helvetica, sans-serif;
background: #fff;
color: #000;
display: block;
width: 100%;
}

/* Header */

#header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
color: #000;
padding: 5px 80px;
box-shadow: 0 0 50px solid rgb(0, 0, 0);
}

#logo {
width: 10%;
height: 100%;
& img {
width: 100%;
}
}

#navigate {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
#navigate li {
list-style: none;
padding: 0 40px 0 0;
margin-left: 0%;
}

#header a {
color: #000;
text-decoration: none;
font-weight: 725;
}

#navigate li a:hover,
#navigate li a.active {
color: #ff195a;
}

#header #rightContent {
display: flex;
justify-content: space-between;
align-items: center;
}

#cart i {
display: absolute;
top: 50%;
translate: 0 -50%;
margin-left: 10px;
}

hr {
color: black;
width: 2px;
height: 55px;
margin: 0 20px;
}

#header #signup {
padding: 13px 27px;
background-color: #ff195a;
border: 0px;
color: #fff;
cursor: pointer;
border-radius: 5px;
font-weight: 700;
}

#header #rightContent #login {


cursor: pointer;
text-decoration: none;
margin-right: 10px;
}

#cart i:hover,
#rightContent #login:hover {
color: #ff195a;
}

/* Hero Section */

#hero {
width: 100%;
height: 90vh;
display: flex;
align-items: center;
justify-content: space-between;
padding: 30px 80px;
background-color: #f6f5f3;
}

#hero #heroText {
width: 40%;
display: flex;
flex-direction: column;
align-items: left;
justify-content: flex-start;
flex-wrap: wrap;
}

#hero #heroText h1 {
font-size: 50px;
text-decoration: underline #054a9f;
line-height: 65px;
margin-bottom: 25px;
}

#heroText p {
font-size: 18px;
line-height: 30px;
}

#hero #heroText #searchInput {


display: flex;
align-items: left;
justify-content: flex-start;
margin-top: 25px;
}

#hero #heroText #searchInput #searchField {


height: 45px;
width: 20rem;
border-radius: 5px 0 0 5px;
border: 0px;
padding: 10px;
}

#hero #heroText #searchInput button {


height: 45px;
width: 6rem;
border-radius: 0 5px 5px 0;
border: 0px;
background-color: #ff195a;
color: #fff;
}

#searchInput #searchField:hover,
#searchInput #searchField:focus {
outline: none;
}

#hero #heroText #confirmation {


display: flex;
align-items: center;
justify-content: flex-start;
margin-top: 30px;
}

#confirmation #tick {
font-weight: bolder;
padding: 8px;
border-radius: 50%;
background-color: #b9f3db;
color: rgb(74, 195, 155);
margin-right: 10px;
}

#confirmation h4 {
margin-right: 20px;
}

#hero #heroImg {
width: 50%;
display: flex;
justify-content: end;
align-items: center;
}

#hero #heroImg img{


width: 90%;
}

Result:

You might also like