Queens of the Stone Age Rated R Album Cover in CSS

Developer
Size
2,958 Kb
Views
16,192

How do I make an queens of the stone age rated r album cover in css?

What is a queens of the stone age rated r album cover in css? How do you make a queens of the stone age rated r album cover in css? This script and codes were developed by Samuel Janes on 02 November 2022, Wednesday.

Queens of the Stone Age Rated R Album Cover in CSS Previews

Queens of the Stone Age Rated R Album Cover in CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Queens of the Stone Age Rated R Album Cover in CSS</title> <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='album s'>	<div class='half'></div>	<div class='half used'>	<div class='wrapper'>	<div class='above'>	<p class='bold'>Queens of the Stone Age</p>	</div>	<div class='bar'>	<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/RATED_R.svg/2000px-RATED_R.svg.png' />	</div>	<div class='below'>	<p class='bold' style='margin-bottom: 0;'>RESTRICTED</p>	<p class='small'>TO EVERYONE, <br/> EVERYWHERE, ALL THE TIME</p>	</div>	</div>	</div>
</div>
</body>
</html>

Queens of the Stone Age Rated R Album Cover in CSS - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { widtH: 100%; min-heighT: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(45deg, #CC222B, #e3575f);
}
.album { font-family: "Roboto", sans-serif; widtH: 640px; height: 640px; background: #0088D6; display: flex; flex-direction: column; box-shadow: 0px 0px 20px 10px rgba(255, 255, 255, 0.5);
}
@media (max-width: 700px) { .album { width: 320px; height: 320px; }
}
.album .bold { font-weight: bold;
}
.album .half { width: 640px; height: 320px; color: white;
}
@media (max-width: 700px) { .album .half { width: 320px; height: 160px; }
}
.album .half.used { display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.album .half.used .wrapper { widtH: 640px;
}
@media (max-width: 700px) { .album .half.used .wrapper { width: 320px; }
}
.album .half.used .wrapper .above, .album .half.used .wrapper .below { text-align: center; width: 150px; max-width: 33.333%; margin-left: calc(640px - 33.333% + 40px); font-size: 15px;
}
.album .half.used .wrapper .above .small, .album .half.used .wrapper .below .small { margin: 0; font-size: 10px;
}
@media (max-width: 700px) { .album .half.used .wrapper .above .small, .album .half.used .wrapper .below .small { font-size: 5px; }
}
@media (max-width: 700px) { .album .half.used .wrapper .above, .album .half.used .wrapper .below { width: 75px; margin-left: calc(320px - 33.333% + 20px); font-size: 7.5px; }
}
.album .half.used .wrapper .bar { padding: 10px; padding-right: 40px; width: 100%; background: white; display: flex; align-items: center; justify-content: flex-end;
}
.album .half.used .wrapper .bar img { width: 100%; max-width: 100px;
}
@media (max-width: 700px) { .album .half.used .wrapper .bar { padding-right: 20px; } .album .half.used .wrapper .bar img { width: 50%; max-width: 50px; }
}
Queens of the Stone Age Rated R Album Cover in CSS - Script Codes
Queens of the Stone Age Rated R Album Cover in CSS - Script Codes
Home Page Home
Developer Samuel Janes
Username SamuelJanes
Uploaded November 02, 2022
Rating 3
Size 2,958 Kb
Views 16,192
Do you need developer help for Queens of the Stone Age Rated R Album Cover in CSS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Samuel Janes (SamuelJanes) Script Codes
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!