- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rotating the text in the background</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
<article>
<h1><span>CSS3 rules!</span></h1>
<p>border-radius border-image break-after break-before break-inside columns transition transition-delay transition-duration transition-timing-function transition-property backface-visibility perspective perspective-origin transform transform-origin transform-style background-clip background-origin background-size box-shadow box-decoration-break opacity @keframes animation animation-delay animation-direction animation-duration</p>
</article>
</div>
</body>
</html>
CSS
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #2ecc40;
color: #ffffff;
font-family: "Arial Narrow", "Arial", sans-serif;
}
.content {
height: 100%;
overflow: hidden;
}
article {
position: relative;
}
article h1 {
position: relative;
z-index: 1;
width: 200px;
margin: 100px auto;
padding: 30px;
font-size: 30px;
text-align: center;
background-color: black;
}
h1 span {
display: inline-block;
}
article p {
position: absolute;
top: -200px;
left: -150px;
width: 150%;
font-size: 50px;
opacity: 0.15;
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
- Assign a skew of
15°to the right to theh1header. - Also assign a left skew of
15°to thespaninside the heading. - Rotate
pinsidearticle15°counterclockwise.
Comments