Video:
Source Code
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&displa
y=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>About Us Page</title>
</head>
<body>
<div class="container">
<div class="text">
<h1>Code Incredible..</h1>
<br><br>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias
aliquid et numquam blanditiis vitae! Illum quidem magni numquam minima, velit suscipit
, voluptatum accusantium, beatae animi inventore eveniet pariatur! Similique, recusan
dae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ex di
stinctio soluta laboriosam sapiente consectetur illum nesciunt saepe fugiat porro vol
uptatibus placeat quisquam nobis, repudiandae praesentium sit fuga doloremque! Reicie
ndis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus mo
llitia dignissimos ab tempore in magnam doloremque illum atque corporis. Eaque facere
labore reprehenderit, inventore optio quod quibusdam sit doloremque dignissimos?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facilis m
axime eius animi repudiandae eveniet earum officiis, voluptatum quasi quos natus non
laboriosam recusandae fugit enim adipisci. Sit, totam? Voluptates, aliquam!
</p>
</div>
<div class="img">
</div>
<button class="btn">Read More</button>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: gray;
font-family: 'Dancing Script', cursive;
}
.container{
background: #ffffff;
height: 95vh;
width: 95%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.img{
height: 100%;
width: 30%;
background: url("bg.jpg")no-repeat;
background-size: cover;
background-position: center;
}
.text{
width: 60%;
padding: 10px 10px;
position: absolute;
top: 40%;
left: 65%;
transform: translate(-50%,-50%);
text-align: center;
font-size: 20px;
}
.btn{
position: absolute;
top: 85%;
left: 65%;
transform: translate(-50%,-50%);
border: none;
outline: none;
font-family: Century Gothic;
background: purple;
border-radius: 15px;
padding: 10px 20px;
cursor: pointer;
font-size: large;
color: #ffffff;
width: 15%;
transition: 0.3s ease;
}
.btn:hover{
background: #00a3e8;
}
Comments
Post a Comment