Last active
May 24, 2025 11:04
-
-
Save matthieua/2fb09d52a94b1dc07fde996bf61d5696 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 name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Greek Yogurt 🥛</title> | |
| <style> | |
| h1 { | |
| text-align: center; | |
| color: #7d51e8; | |
| } | |
| h2 { | |
| text-align: center; | |
| border: 1px solid #7d51e8; | |
| padding: 15px; | |
| font-size: 18px; | |
| border-radius: 4px; | |
| } | |
| img { | |
| display: block; | |
| margin: 0 auto; | |
| max-width: 100%; | |
| border-radius: 10px; | |
| } | |
| p { | |
| line-height: 1.5; | |
| font-size: 13px; | |
| margin: 20px 0 10px; | |
| } | |
| button { | |
| display: block; | |
| margin: 20px auto; | |
| background: #7d51e8; | |
| color: white; | |
| font-size: 18px; | |
| padding: 15px 20px; | |
| border: none; | |
| border-radius: 6px; | |
| box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); | |
| transition: all 200ms ease-in-out; | |
| } | |
| button:hover { | |
| opacity: 0.9; | |
| cursor: pointer; | |
| } | |
| .container { | |
| max-width: 600px; | |
| margin: 0 auto; | |
| padding: 15px 60px; | |
| } | |
| .learn-more { | |
| color: #7d51e8; | |
| text-decoration: none; | |
| font-size: 12px; | |
| } | |
| .learn-more:hover { | |
| text-decoration: underline; | |
| } | |
| .footer { | |
| text-align: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>I love Yogurt</h1> | |
| <h2>Especially Greek Yogurt</h2> | |
| <img | |
| src="https://images.eatthismuch.com/site_media/img/254520_ldementhon_71b6a3e2-ec54-48c0-9ba3-73d8596244ae.png" | |
| alt="Greek Yogurt" | |
| /> | |
| <p> | |
| Strained yogurt, Greek yogurt, yogurt cheese, or sack yoghurt is yogurt | |
| that has been strained to remove most of its whey, resulting in a | |
| thicker consistency than unstrained yogurt, while preserving yogurt's | |
| distinctive sour taste. | |
| </p> | |
| <a | |
| href="https://en.wikipedia.org/wiki/Strained_yogurt" | |
| target="_blank" | |
| class="learn-more" | |
| > | |
| Learn more on Wikipedia | |
| </a> | |
| <button class="buy-button">👉 Buy Greek Yogurt</button> | |
| <p class="footer"> | |
| This page was built by | |
| <a href="https://www.delac.io/" target="_blank"> Matt Delac </a> | |
| </p> | |
| </div> | |
| </body> | |
| </html> |
I thought the same too.
the same
I also need the css...:(
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I expected to see CSS code here 🤔