Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title></title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width">
- <style>
- body {
- margin:0;
- }
- .header {
- font-size:8vw;
- text-align:center;
- font-family:arial;
- text-shadow:3px 3px 3px red;
- }
- .responsive {
- display:none;
- font-size:8vw;
- text-align:center;
- font-family:arial;
- text-shadow:3px 3px 3px red;
- }
- .landscape {
- display:none;
- font-size:8vw;
- text-align:center;
- font-family:segoe script;
- font-weight:900;
- }
- iframe {
- border:5px solid red;
- padding:2px;
- width:70vw;
- height:39vw;
- display:block;
- margin:auto;
- }
- .box {
- margin:8vw 0 6vw 0;
- }
- .about {
- text-decoration:none;
- font-size:8vw;
- color:black;
- font-family:arial;
- text-shadow:3px 3px 3px red;
- }
- .text {
- text-indent:100px;
- padding:6vw 4vw 8vw 4vw;
- display:block;
- font-size:3vw;
- text-align:justify;
- text-justify:inter-word;
- font-family:courier;
- font-weight:bold;
- }
- @media all and (max-width: 425px){
- .header { display:none; }
- .responsive {
- font-size:9vw;
- color:red;
- display:block;
- text-shadow:3px 3px 2px black;
- }
- .about {
- font-size:8vw;
- color:green;
- font-weight:900;
- text-shadow:3px 3px 3px black;
- }
- .about:after {
- content:'Click here!';
- display:block;
- font-size:8vw;
- color:green;
- font-weight:900;
- text-shadow:3px 3px 3px black;
- }
- .text {
- text-indent:50px;
- padding:6vw 6vw 8vw 6vw;
- font-size:5vw;
- font-family:segoe print;
- }
- iframe {
- border:0;
- padding:0;
- width:80vw;
- height:45vw;
- }
- }
- @media all and (min-width: 426px) and (max-width: 538px){
- .header { display:none; }
- .responsive { display:none; }
- .landscape {
- display:block;
- font-size:10vw;
- text-align:center;
- font-family:impact;
- font-weight:900;
- }
- .about {
- text-decoration:underline;
- font-size:8vw;
- font-weight:900;
- font-family:impact;
- text-shadow:0 0 0 black;
- }
- .text {
- text-indent:50px;
- padding:6vw 6vw 8vw 6vw;
- font-size:4vw;
- font-family:arial;
- font-weight:bold;
- }
- iframe {
- border:0;
- padding:0;
- width:90vw;
- height:50vw;
- border-radius:20px;
- }
- }
- </style>
- </head>
- <body>
- <h1 class='header'>Responsive Basics</h1>
- <h1 class='responsive'>Responsive <br> Basics</h1>
- <h1 class='landscape'>Responsive</h1>
- <div class='box'>
- <iframe width="560" height="315" src="https://www.youtube.com/embed/qJ0_r1Emui8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
- </div>
- <center><a class='about' href='http://www.bebobestmusic.com'>About</a></center>
- <span class='text'>Italian composer, producer and multi-instrumentalist Bebo Best and his Super Lounge Orchestra blend bossanova, nu funk, and jazz-dance with the sounds of 60s and 70s lounge and exotica.</span>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement