Created
December 13, 2022 03:49
-
-
Save solanoize/a85febb2ae8cf27821a5a30279374bc2 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="style.css"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <h1>My Blog</h1> | |
| <ul> | |
| <li> | |
| <div class="card"> | |
| <h2>Kehidupan Asek</h2> | |
| <p> | |
| Lorem ipsum dolor, sit amet consectetur adipisicing elit. | |
| Quis adipisci quas, animi id similique at omnis ipsa voluptates | |
| eius sint nulla! Minus magnam alias deserunt veniam commodi eos aut laboriosam. | |
| </p> | |
| <a href="./post-detail.html">Read more...</a> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="card"> | |
| <h2>Back to home</h2> | |
| <p> | |
| Lorem ipsum, dolor sit amet consectetur adipisicing elit. | |
| Eaque maxime molestias modi doloremque, voluptates ducimus | |
| veritatis. Eius quisquam neque velit nostrum quo nulla dicta | |
| saepe sapiente, voluptatem necessitatibus hic accusantium. | |
| </p> | |
| <a href="./post-detail.html">Read more...</a> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="card"> | |
| <h2>Kopi Hitam</h2> | |
| <p> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. | |
| Fugit exercitationem dignissimos esse placeat ex quibusdam | |
| excepturi aliquid ipsum optio voluptate. | |
| Et ullam repellat excepturi, veniam incidunt doloribus numquam. Provident, qui! | |
| </p> | |
| <a href="./post-detail.html">Read more...</a> | |
| </div> | |
| </li> | |
| </ul> | |
| <script src="halo.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| font-family: Arial, Helvetica, sans-serif; | |
| } | |
| h1 { | |
| background-color: black; | |
| color: white; | |
| padding: 10px | |
| } | |
| div.card { | |
| width: 900px; | |
| margin: 10px; | |
| border: 1px solid gray; | |
| padding: 20px; | |
| background-color: aliceblue; | |
| border-radius: 10px; | |
| } | |
| ul { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| a { | |
| text-decoration: none; | |
| padding: 7px; | |
| border: 1px solid gray; | |
| border-radius: 10px; | |
| } | |
| div.content { | |
| width: 800px; | |
| font-size: 30px; | |
| color: grey; | |
| margin: 0 auto; | |
| } | |
| div.content > img { | |
| border-radius: 10px; | |
| margin: 0 auto; | |
| display: block; | |
| } | |
| h2 { | |
| text-align: center; | |
| font-weight: lighter; | |
| font-size: 60px; | |
| color: #000; | |
| } | |
| p:hover { | |
| color: #000; | |
| } | |
| div.content { | |
| padding-bottom: 30px; | |
| } | |
| ul.back > li > a { | |
| display: block; | |
| text-decoration: none; | |
| text-align: center; | |
| background-color: #000; | |
| color: #fff; | |
| border: none; | |
| } | |
| ul.back { | |
| width: 800px; | |
| margin: 0 auto; | |
| font-size: 30px; | |
| margin-bottom: 20px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment