Đề cương học tập
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pest</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="navbar-contact container d-flex">
<div class="details d-flex">
<div><strong>Emergency calls open 24/7 </strong></div>
<div>+44 (0)1843 657 097</div>
</div>
<div class="contact ">
<img src="./img/icons8_phone_3.svg" alt="">
<a href="">+44 (0)1843 498 783</a>
<img src="./img/new_post_2.svg" alt="">
<a href="">[email protected]</a>
</div>
</div>
<div class="navigation container d-flex">
<a href=""><img src="./img/Pet Care.svg" alt=""></a>
<nav>
<ul class="d-flex">
<li>HOME</li>
<li>TEATMENTS</li>
<li>TEAM</li>
<li>CONTACT</li>
<li>
<div>Make an Appointment</div>
</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="banner">
<div class="container">
<div class="text " >
<h1>London's <span>premier <br> veterinary <br>surgery</span></h1>
<p><strong>Highest level of care.</strong>
London's premier veterinary surgery.
</p>
<div class="hero-book d-flex">
<img src="./img/_event.svg" alt="">
Schedule your appointment
<div>Make an Appointment</div>
</div>
</div>
<div class="img">
<img src="./img/_Hero Dog Crest_1.svg" alt="">
<img src="./img/Dog Cutout.png" alt="">
</div>
</div>
</div>
</main>
<footer>
<div class="container ft-top">
<div class="ft-menu1">
<img src="./img/Pet Care.svg" alt="">
</div>
<div class="ft-menu2">
<ul>NAVIGATION
<li>Home</li>
<li>Service</li>
<li>Team</li>
<li>Contact</li>
<li>Covid19 policy</li>
</ul>
</div>
<div class="ft-menu3">
<ul>LEGAL
<li>Terms of use</li>
<li>Privacy policy</li>
<li>Licenses and assets</li>
<li>Instructions and tutorials</li>
<li>Styleguide</li>
<li>404</li>
<li>Password page</li>
</ul>
</div>
<div class="ft-menu4">
<ul>CONNECT & CONTACT
<li>Instagram</li>
<li>Facebook</li>
<ul class="Head-Office">Head Office
<li>
+44 (0)20 7946 0940</li>
<li>[email protected]
</li>
<li>230 Mill Lane
London
SE92 5VB</li>
</ul>
</ul>
</div>
</div>
<div>Copyright © PetCare LTD. All rights reserved.</div>
</footer>
</body>
</html>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.d-flex {
display: flex;
}
body {
font-family: 'Baloo Chettan 2', sans-serif;
color: #274883;
font-size: 14px;
line-height: 20px;
}
header {
padding: 5px 0;
z-index: 1000;
font-weight: 600;
position: fixed;
top: 0;
left: 0;
width: 100vw;
background-color: #f0faff;
}
main{
margin-top: 112px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.navbar-contact>.details div:last-child {
margin-left: 10px;
}
.navbar-contact {
justify-content: space-between;
border-bottom: 1px solid #f1f1f1;
padding-bottom: 10px;
}
.contact>img {
width: 13px;
margin-right: 6px;
margin-left: 30px;
}
.navigation {
padding: 10px 0;
justify-content: space-between;
}
.navigation>a>img {
width: 130px;
align-self: center;
}
.navigation>nav>ul>li {
padding-right: 20px;
padding-left: 20px;
align-items: center;
align-self: center;
color: #274883;
font-size: 14px;
font-weight: 600;
}
.navigation>nav>ul>li:hover {
color: #e69e77;
}
.navigation>nav>ul>li:last-child>div {
overflow: hidden;
padding: 15px 30px;
border-radius: 4px;
background-color: #e69e77;
text-decoration: none;
color: #f1f1f1;
}
footer>.ft-top {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr 1.3fr;
grid-gap: 30px;
}
.ft-menu1 {
width: 190px;
height: 63px;
}
footer>.ft-top>div>ul {
margin-bottom: 10px;
color: #274883;
font-size: 15px;
line-height: 36px;
font-weight: 700;
}
footer>.ft-top>div>ul>li {
margin-bottom: 5px;
color: #52678bf5;
font-size: 13px;
font-weight: 300;
}
.Head-Office>li {
margin-bottom: 5px;
color: #52678bf5;
font-size: 14px;
font-weight: 300;
}
footer>div:last-child {
margin-top: 40px;
font-size: 15px;
text-align: center;
}
.banner>div>.text>h1 {
font-size: 60px;
margin-top: 0;
margin-bottom: 30px;
line-height: 1.1;
font-weight: 700;
}
.banner>div>.text>h1>span {
margin-top: 10px;
color: #7fc2d8;
}
.banner {
background-color: #f0faff;
padding-top: 20px ;
}
.banner>.container {
display: grid;
grid-template-columns: 52% 45%;
}
.banner>div>.text>p {
font-size: 18px;
}
.hero-book {
display: flex;
max-width: 530px;
margin-top: 40px;
padding: 10px 10px 10px 25px;
justify-content: space-between;
align-items: center;
border-radius: 3px;
background-color: #fff;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .05);
font-size: 17px;
}
.hero-book>img {
width: 22px;
height: 22px;
}
.hero-book>div {
display: flex;
overflow: hidden;
padding: 15px 30px;
justify-content: center;
align-items: center;
border-radius: 4px;
background-color: #e69e77;
color: #fff;
}
.banner>div>.img {
position: relative;
margin-left: 100px;
}
.banner>div>.img>img:first-child {
position: absolute;
left: -10%;
top: 0;
right: -10%;
bottom: auto;
z-index: 0;
width: 100%;
max-width: 120%;
vertical-align: middle;
display: inline-block;
}
.banner>div>.img>img:last-child {
position: relative;
z-index: 1;
width: 462px;
height: 556px;
}
Last updated