Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang=en>
- <head>
- <title>Rough Css Layout</title>
- <meta charset=utf-8>
- <meta name="viewport" content="width=device-width">
- <style>
- .x {
- box-sizing: border-box;
- display:block;
- width:800px;
- margin:-4px auto;
- padding:0 0 0 6px;
- }
- span {
- font-size:30px;
- width:390px;
- background-color:red;
- color:white;
- height:200px;
- display:inline-block;
- transform:translate(4px,2px);
- margin:-1px;
- overflow:hidden;
- text-align:center;
- padding:10px;
- box-sizing: border-box;
- }
- img {
- width:100%;
- height:100%;
- }
- a {
- text-decoration:none;
- color:white;
- font-family:segoe print;
- font-weight:900;
- }
- iframe {
- width:100%;
- height:100%;
- }
- </style>
- </head>
- <body>
- <div class='x'>
- <span><h1 style='font-size:40px;font-family:courier;'>I have no car. Instead i ride a donkey.</h1> </span>
- <span><img src='https://images.pexels.com/photos/2569232/pexels-photo-2569232.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'/></span>
- <span>
- <iframe width="560" height="315" src="https://www.youtube.com/embed/k32voqQhODc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
- </span>
- <span>
- <a href='https://zsndndbaxq8vhlfcswjbiq-on.drv.tw/Audio Playlist Basics 1/Audio Playlist Basics 1.html'>Link<br/>Audio Playlist<br/> Basics</a>
- </span>
- <span style='font-size:30px;margin:auto;display:block;margin-top:-1px;overflow-y:scroll;font-family:courier;font-weight:900;padding:10px 20px; '>To be centered i have needed some additional <a href='https://www.w3schools.com/html/html_styles.asp' target='_self'>INLINE</a> style. Why? Because i am not inside a <a href='https://www.w3schools.com/css/css3_flexbox.asp' target='_self'>FLEXBOX</a>. Otherwise it wouldn't be necessary such drastic measures.</span>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement