Scribd
Upload
34 views6 pages

HTML Css Coding

This document contains the code for a webpage with sections for a header, title, buttons, and footer. The header includes a logo and navigation links. Below the header is a title and buttons to book an appointment or learn more. The footer lists various services in an unordered list. Styling is defined in an external CSS file to control layout, colors, fonts and other design elements.

Uploaded by

Jaisha Naz
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
34 views6 pages

HTML Css Coding

This document contains the code for a webpage with sections for a header, title, buttons, and footer. The header includes a logo and navigation links. Below the header is a title and buttons to book an appointment or learn more. The footer lists various services in an unordered list. Styling is defined in an external CSS file to control layout, colors, fonts and other design elements.

Uploaded by

Jaisha Naz
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/ 6

<!

doctype html>

<html>

<head>

<title>webpage</title>

<link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<body><header>

<div class="main">

<div class="logo">

<img src="logo.png">

</div>

<ul>

<li class="active"><a href="#">Home</a>

</li> <li><a href="#">Gallery</a>

</li> <li><a href="#">Services</a>

</li> <li><a href="#">Contact Us </a>

</li> <li><a href="#">About</a>

</li>

</ul>

</div>

</header>

<div class="title">

<h1>Book an Appointment</h1>

</div>

<div class="button">

<a href="#" class="btn">Book Now</a>

<a href="#" class="btn">Learn More</a>

</div>
<section class="footer">

<ul class="list">

<li>

<a href="#">Hair Treatment</a>

</li>

<li>

<a href="#">Facial services</a>

</li>

<li>

<a href="#">Makeups</a>

</li>

<li>

<a href="#">Menicure Pedicure</a>

</li>

<li>

<a href="#">Waxing</a>

</li>

</ul>

</section>

</body>

</html>

– css
*{

margin: 0;
padding: 0;

height: 36px;

font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco,
"Courier New", "monospace"

header{

background-image: url("../1.jpg");

height: 100vh;

background-size: cover;

background-position: center;

ul { float: right;

List-style-type: none;

ul li{ display: inline-block;

ul li a{

text-decoration: none;

color:#FFFFFF;

padding: 5px 20px;

border: 1px solid #ffff;

transition: 0.6s ease;

ul li a:hover{

background-color:#FFFFFF;

color: #000000;

ul li.active a{
background-color:#FFFFFF;

color: #000000;

.logo img{

float: left;

width: 75px;

height: auto;

.main{

max-width:2000px;

margin:auto

.title{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

.title h1{

color: aliceblue;

font-size: 50px;

font-family:Segoe, Forte, "Freestyle Script"

.button{

position: absolute;

top: 65%;

left: 50%;

transform: translate(-50%, -50%);


}

.btn{

text-decoration: none;

color:#FFFFFF;

padding: 10px 30px;

border: 1px solid #ffff;

.footer{

padding: 0;

background-color: #FFFF00;

.footer ul{

margin-top: 0;

padding-right: 150px;

list-style: none;

font-size: 18px;

line-height: 2;

margin-bottom: 0;

text-align: center;

align-content: center;

.footer ul li a{

color: inherit;

text-direction: none;

opacity: 0.8;

.footer ul li a:hover{
opacity: 1;

You might also like