Scribd
Upload
12 views

WEB Assignment 2

Uploaded by

Muhammad Junaid
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

WEB Assignment 2

Uploaded by

Muhammad Junaid
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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