ʜᴛᴍʟ ᴄᴏᴅᴇ ʜᴇʀᴇ
<!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">
<title>Marvel's Spider-Man: Miles Morales</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="logo">
<img src="./logo.png">
</div>
<div class="container">
<video src="./Spiderman Live Wallpaper.mp4" muted loop autoplay></video>
<div class="txt_con">
<div class="text">
<h3>Marvel's Spider-Man: Miles Morales</h3>
<p>Marvel's Spider-Man: Miles Morales comes exclusively to PlayStation, on PS5 and PS4. Available November 12th, 2020</p>
<button class="btn">Buy Now </button>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: "poppins", sans-serif;
}
body {
background: #000;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.container {
width: 100%;
height: 100vh;
background: #000;
}
video {
padding: 5px;
width: 100%;
z-index: -1;
}
img {
position: absolute;
top: 0;
left: 0;
width: 200px;
padding: 95px 50px;
}
.text {
position: absolute;
right: 0;
top: 30%;
color: #fff;
width: 300px;
/* background: rgba(255, 255, 255, 0.3); */
height: 200px;
margin: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
/* border: 1px solid #ff0000; */
border-radius: 4px;
z-index: 1000;
transition: all 0.5s;
}
h3 {
font-size: 15px;
margin-bottom: 15px;
}
p {
font-size: 12px;
margin-bottom: 15px;
}
.btn {
background: #ff2020;
width: 100px;
color: #fff;
height: 30px;
border: none;
outline: none;
border-radius: 4px;
cursor: pointer;
}
.btn:hover {
background: #e70505;
}
@media (max-width:900px) {
.logo {
width: 100%;
height: 140px;
display: flex;
justify-content: center;
align-items: center;
}
.txt_con {
width: 100%;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
body {
background: #000;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
flex-direction: column;
overflow: auto;
}
img {
position: absolute;
top: 0px;
left: 0px;
margin: 0px auto;
width: 200px;
padding: 50px;
}
.text {
position: relative;
margin: 10px;
}
}
----------------------------------------------------------------------------------------------
ꜱᴄʜᴏᴏʟ ᴡᴀʟʟᴘᴀᴘᴇʀ
https://www.mediafire.com/file/ccz3cnumpdb6uf8/wallpaper.png/file
https://www.mediafire.com/file/scgacaixy6fculn/wallpaper_%25281%2529.png/file
https://www.mediafire.com/file/fqd9nsd3oymejwe/wallpaper_%25282%2529.png/file
https://www.mediafire.com/file/1qshm0ytstj178t/wallpaper_%25283%2529.png/file
https://www.mediafire.com/file/xfbg38mtwe7bf8v/wallpaper_%25284%2529.png/file
https://www.mediafire.com/file/8achetaz4ja6aej/wallpaper_%25285%2529.png/file
ᴅᴇꜱᴋᴛᴏᴘ ᴡᴀʟʟᴘᴀᴘᴇʀ
https://www.mediafire.com/file/dlan44yzc7oua3j/BG.png/file
