bbc website
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/b766c6b920.js" crossorigin="anonymous"></script>
<title>swimming</title>
<style>
body {
position: relative;
margin: 0;
background-image: url("/Users/FAIZAN/Desktop/freepik/img/psd saturday.png");
background-repeat: no-repeat;
background-size: cover;
}
.menu {
position: absolute;
left: 100px;
top: -30px;
}
p {
color: aqua;
}
.home {
position: absolute;
padding: 35px 25px 25px 35px;
background-color: white;
text-decoration: none;
color: blue;
font-family: "MavenPro";
font-size: 30px;
line-height: 7px;
text-align: center;
border-radius: 15px;
cursor: pointer;
}
a.joinus {
position: absolute;
padding: 30px 30px 30px 30px;
background-color: white;
left: 350px;
top: 800px;
width: 100px;
text-decoration: none;
color: darkblue;
font-family: "MavenPro";
font-size: 30px;
line-height: 7px;
text-align: center;
border-radius: 15px;
cursor: pointer;
}
.button2 {
padding: 25px 25px 25px 35px;
left: 300px;
background-color: white;
text-decoration: none;
color: rgb(232, 232, 250);
font-family: "MavenPro";
font-size: 30px;
line-height: 7px;
border-radius: 15px;
text-align: center;
display: inline-block;
cursor: pointer;
position: relative;
}
.level {
position: absolute;
padding: 25px 35px 25px 35px;
left: 700px;
background-color: #0c276e;
text-decoration: none;
color: rgb(232, 232, 250);
font-family: "MavenPro";
font-size: 30px;
line-height: 7px;
border-radius: 15px;
text-align: center;
display: inline-block;
cursor: pointer;
}
input[type=text] {
position: absolute;
left: 1010px;
top: 90px;
padding: 15px 25px 25px 15px;
background-color: white;
color: black;
font-family: "MavenPro";
font-size: 20px;
border-radius: 15px;
text-align: left;
}
.design {
position: absolute;
padding: 25px 35px 25px 35px;
background-color: #0c276e;
}
.Logo {
position: absolute;
padding: 25px 25px 25px 25px;
left: 480px;
top: 200px;
}
.swimmer {
position: absolute;
left: -170px;
top: 1000px;
}
.white {
position: absolute;
left: 100px;
}
.image {
position: absolute;
padding: 50px;
}
.lessons {
position: absolute;
padding: 100px;
left: -150px;
top: -60px;
}
div {
position: absolute;
padding: 100px;
top: 550px;
}
.Read-more {
position: absolute;
padding: 25px 35px 25px 35px;
left: 800px;
top: 800px;
width: 200px;
border-radius: 50%;
background-color: #070d38;
text-decoration: none;
color: white;
font-family: "MavenPro";
font-size: 30px;
line-height: 30px;
text-align: center;
border-radius: 15px;
cursor: pointer;
}
.blue {
position: absolute;
padding: 30px 40px 50px 50px;
background-color: #070d38;
}
</style>
</head>
<body>
<div class="menu">
<a class="home" href="#home">HOME</a>
<a class="button2" href="#about-us">ABOUT-US</a>
<a class="level" href="#level">LEVELS</a>
<a class="slider" href="#slider"></a>
<input type="text" placeholder="search" name="search">
<a class="joinus" href="/Users/FAIZAN/Desktop/freepik/html/joinus.html">join-us</a>
<img class="lessons " src="/Users/FAIZAN/Desktop/freepik/img/SWIMMING LESSONS.png " alt="swimming ">
<a class="Read-more " href="#Read-more ">Read-more</a>
<img class="Logo " src="/Users/FAIZAN/Desktop/freepik/img/logo.png ">
</body>
</html>
Comments
Post a Comment