Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>Title</title>
- <meta name="description" content="content">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <style>
- @import url('https://fonts.googleapis.com/css2?family=Pirata-One&display=swap');
- body {
- background: #FCE327;
- font-family: sans-serif;
- margin: 0px;
- }
- /* header */
- header {
- background-color: #F827FB;
- text-align: center;
- color: #FCE327;
- text-shadow: black 2px 2px;
- }
- header::before {
- content: "Title";
- font-family: 'Pirata One', sans-serif;
- font-size: 48pt;
- }
- /* container */
- #container {
- margin: 10px;
- text-align: center;
- }
- /* items */
- .item {
- font-family: 'Pirata One', 'Arial', sans-serif;
- background-color: #ebe9d7;
- display: inline-block;
- margin: 10px;
- height: 250px;
- width: 250px;
- border-radius: 5px;
- border: outset #23F2FB 5px;
- }
- .item h1 {
- width:100%;
- margin: 0px;
- background: #23F2FB;
- }
- .item:hover {
- border: inset #23F2FB 5px;
- }
- /* footer */
- footer {
- font-size: small;
- color: #F827FB;
- text-align: center;
- }
- footer a {
- color: gray;
- }
- </style>
- </head>
- <body>
- <header> </header>
- <div id="container">
- <div class="item"
- style="background: url('#IMG'); background-size: 250px;">
- <h1>item 1</h1>
- </div>
- <div class="item"
- style="background: url('#IMG'); background-size: 250px;">
- <h1>item 2</h1>
- </div>
- <div class="item"
- style="background: url('#IMG'); background-size: 250px;">
- <h1>item 3</h1>
- </div>
- <div class="item"
- style="background: url('#IMG'); background-size: 250px;">
- <h1>item 4</h1>
- </div>
- <div class="item"
- style="background: url('#IMG'); background-size: 250px;">
- <h1>item 5</h1>
- </div>
- <div class="item"
- style="background: url('#IMG'); background-size: 250px;">
- <h1>item 6</h1>
- </div>
- </div>
- <footer>copyright information.</footer>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement