Scribd
Upload
58 views

Design Web Page Using HTML AND CSS

The document is an assignment submission for a web design project using HTML and CSS. It includes the HTML code to create the basic structure and layout of a webpage with different sections like navigation bar, content, and form. It also includes the CSS code which defines styles and designs for various page elements like colors, positioning, fonts etc. The submission is by Maira Afzal, a student with the aim of designing a webpage for a coaching company.

Uploaded by

Aiman zahra
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
58 views

Design Web Page Using HTML AND CSS

The document is an assignment submission for a web design project using HTML and CSS. It includes the HTML code to create the basic structure and layout of a webpage with different sections like navigation bar, content, and form. It also includes the CSS code which defines styles and designs for various page elements like colors, positioning, fonts etc. The submission is by Maira Afzal, a student with the aim of designing a webpage for a coaching company.

Uploaded by

Aiman zahra
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Assignment no

Topic: Design web page using HTML AND CSS


Subject: WEB ENGINEERING
SUBMITTED BY:
Maira Afzal
20-CS-74
SECTION A
SUBMITTED TO:
Mam Samina
❖ HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>

<title>Webpage Design</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body background="C:\Users\M.Abdullah\Downloads\jmfnfh.JPG" >
<div class="main" id="home">

<div class="main">
<div class="navbar">
<div class="icon">
<h2 class="logo">SOURCE CODER</h2>
</div>

<div class="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">DESIGN</a></li>
<li><a href="#">CONTACT</a></li>

</ul>
</div>

<div class="search">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
<a href="#"> <button class="btn">SIGN UP</button></a>
<a href="#"> <button class="btn">LOG IN</button></a>
</div>

</div>
<div class="content">
<h1>LIFE COACH</h1>
<p class="par">Climb the mountain, not so the world can see you, but so you
can see the world
<br> Travel makes one modest. You see what a tiny place you
occupy in the world
<br We are always here to help you</p>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button class="cn"><a href="#">SEE MORE</a></button>
</div>
<script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>

</body>
</html>

❖ CSS CODE:
*{
margin: 0;
padding: 0;
}

.main{
width: 100%;
background: linear-gradient(to top, rgba(0,0,0,0.5)50%,rgba(0,0,0,0.5)50%),
url(1.jpg);
background-position: center;
background-size: cover;
height: 100vh;
}

.navbar{
width: 1200px;
height: 75px;
margin: auto;
}

.icon{
width: 200px;
float: left;
height: 70px;
}

.logo{
color: #058283;
font-size: 35px;
font-family: Arial;
padding-left: 20px;
float: left;
padding-top: 10px;
margin-top: 5px
}

.menu{
width: 400px;
float: left;
height: 70px;
}

ul{
float: left;
display: flex;
justify-content: center;
align-items: center;
}

ul li{
list-style: none;
margin-left: 62px;
margin-top: 27px;
font-size: 14px;
}

ul li a{
text-decoration: none;
color: #fff;
font-family: Arial;
font-weight: bold;
transition: 0.4s ease-in-out;
}

ul li a:hover{
color: #058283;

.btn{
width: 100px;
height: 40px;
background: #058283;
border: 2px solid ##058283;
margin-top: 13px;
color: #fff;
font-size: 15px;
border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
transition: 0.2s ease;
cursor: pointer;
}
.btn:hover{
color: #000;
}
.btn:focus{
outline: none;
}

.srch:focus{
outline: none;
}
.content{
width: 1200px;
height: auto;
margin: auto;
color: #fff;
position: relative;
}

.content .par{
padding-left: 20px;
padding-bottom: 25px;
font-family: Arial;
letter-spacing: 1.2px;
line-height: 30px;
}

.content h1{
font-family: 'Times New Roman';
font-size: 50px;
padding-left: 20px;
margin-top: 9%;
letter-spacing: 2px;
}

.content .cn{
width: 160px;
height: 40px;
background: ##058283;
border: none;
margin-bottom: 10px;
margin-left: 20px;
font-size: 18px;
border-radius: 10px;
cursor: pointer;
transition: .4s ease;

}
.content .cn a{
text-decoration: none;
color: #000;
transition: .3s ease;
}

.cn:hover{
background-color: #fff;
}

.content span{
color: ##058283;
font-size: 65px
}

.form{
width: 250px;
height: 380px;
background: linear-gradient(to top, rgba(0,0,0,0.8)50%,rgba(0,0,0,0.8)50%);
position: absolute;
top: -20px;
left: 870px;
transform: translate(0%,-5%);
border-radius: 10px;
padding: 25px;
}

.form h2{
width: 220px;
font-family: sans-serif;
text-align: center;
color: ##058283;
font-size: 22px;
background-color: #058283;
border-radius: 10px;
margin: 2px;
padding: 8px;
}

.form input{
width: 240px;
height: 35px;
background: transparent;
border-bottom: 1px solid ##058283;
border-top: none;
border-right: none;
border-left: none;
color: #fff;
font-size: 15px;
letter-spacing: 1px;
margin-top: 30px;
font-family: sans-serif;
}

.form input:focus{
outline: none;
}

::placeholder{
color: #fff;
font-family: Arial;
}

.btnn{
width: 240px;
height: 40px;
background: ##058283;
border: none;
margin-top: 30px;
font-size: 18px;
border-radius: 10px;
cursor: pointer;
color: #fff;
transition: 0.4s ease;
}
.btnn:hover{
background: #fff;
color: ##058283;
}
.btnn a{
text-decoration: none;
color: #000;
font-weight: bold;
}
.form .link{
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
padding-top: 20px;
text-align: center;
}
.form .link a{
text-decoration: none;
color: ##058283;
}
.liw{
padding-top: 15px;
padding-bottom: 10px;
text-align: center;
}
.icons a{
text-decoration: none;
color: #fff;
}
.icons ion-icon{
color: #fff;
font-size: 30px;
padding-left: 14px;
padding-top: 5px;
transition: 0.3s ease;
}
.icons ion-icon:hover{
color: #058283;
}
➢ OUTPUT:

You might also like