≪!DOCTYPE html≫
≪html lang="en"≫
≪head≫
≪meta charset="UTF-8"≫
≪meta name="viewport" content="width=device-width, initial-scale=1.0"≫
≪title≫Document≪/title≫
≪style≫
h1{
text-align: center;
color: bisque;
font-size: xx-large;
font-weight: bolder;
}
.header_div{
width: 100%;
height: 50px;
background-color: blue;
margin: 0;
}
.main_section{
width: 100%;
height: 500px;
margin: 0;
background-color: burlywood;
background-repeat: no-repeat;
background-size: cover;
}
.main_div{
display: flex;
}
.list_div{
background-color: rgb(228, 240, 215) ;
margin-left: 300px;
border-radius: 10px;
padding-top: 20px;
padding-bottom: 20px;
}
.list_item{
text-decoration: none;
background-color: rgb(228, 240, 215);
font-size:x-large;
font-weight: bolder;
padding-right: 20px;
padding-left: 20px;
transition: 2s ease-in-out;
}
.list_item:hover{
background-color: rgb(79, 79, 193);
transform: translateY(0.5rem);
}
.description{
background-color: rgb(222, 250, 192) ;
border-radius: 10px;
width: 200px;
}
≪/style≫
≪/head≫
≪body≫
≪header style="margin: 0;"≫
≪div class="header_div"≫
≪/div≫
≪/header≫
≪main≫
≪section class="main_section"≫
≪h1≫Services and Experiences≪/h1≫
≪div class="main_div"≫
≪div class="list_div"≫
≪h2 style="padding-left: 20px;"≫Available Services≪/h2≫
≪a class="list_item" href=""≫Car rental Service≪/a≫≪br/≫
≪a class="list_item" href=""≫Dry cleaning≪/a≫≪br/≫
≪a class="list_item" href=""≫Catering Services≪/a≫≪br/≫
≪a class="list_item" href=""≫Courier Services≪/a≫≪br/≫
≪a class="list_item" href=""≫Doctor On Call≪/a≫≪br/≫
≪/div≫
≪div class="description"≫hello≪/div≫
≪/div≫
≪/section≫
≪/main≫
≪footer≫≪/footer≫
≪/body≫
≪/html≫