My very first challenge with CODEPEN !!!!!!
A Pen by sumayya khanam on CodePen.
Created
August 23, 2021 21:37
-
-
Save iAMNABHON/34261b2ad4395ea618584e5cc1eaa45b to your computer and use it in GitHub Desktop.
food truck challenge
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
| <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"> | |
| <title>Food Truck Menu</title> | |
| <link rel="stylesheet" href="./style.css"> | |
| </head> | |
| <body> | |
| <div class="name"> | |
| SK's Food Truck Menu | |
| </div> | |
| <div class="menu"> | |
| <div class="card burger"> | |
| <h2>Burgers</h2> | |
| <p>Hamburger | |
| <span class="price"> $3</span> | |
| </p> | |
| <p>Cheeseburger | |
| <span class="price"> $3.50</span> | |
| </p> | |
| <p>Double Cheese | |
| <span class="price"> $4.50</span> | |
| </p> | |
| <p>Veggie Burger | |
| <span class="price"> $3</span> | |
| </p> | |
| <p>Black Bean Burgers | |
| <span class="price"> $3</span> | |
| </p> | |
| <p>Turkey Burgers | |
| <span class="price"> $3</span> | |
| </p> | |
| <p>Wild Salmon Burgers | |
| <span class="price"> $3</span> | |
| </p> | |
| <p>Mushroom Burgers | |
| <span class="price"> $3</span> | |
| </p> | |
| <p>Elk Burgers | |
| <span class="price"> $3</span> | |
| </p> | |
| <p>Bison Burgers | |
| <span class="price"> $3</span> | |
| </p> | |
| </div> | |
| <div class=" card hotdogs"> | |
| <h2>Hot Dogs</h2> | |
| <p>Hot Dog <span class="price"> $3</span></p> | |
| <p>Chilli Dog <span class="price"> $5</span></p> | |
| <p>Veggie Hot Dog <span class="price"> $3</span></p> | |
| <p>Dodger Dog. <span class="price"> $3</span></p> | |
| <p>bagel dog. <span class="price"> $3</span></p> | |
| <p>Montreal hot dogs <span class="price"> $3</span></p> | |
| </div> | |
| <div class="card chilli"> | |
| <h2>Chili</h2> | |
| <p>Cup <span class="price"> $2</span></p> | |
| <p>Bowl <span class="price"> $4</span></p> | |
| <p>Chili Verde. <span class="price"> $4</span></p> | |
| <p>Cincinnati Chili. <span class="price"> $4</span></p> | |
| <p>Chili con Carne. <span class="price"> $4</span></p> | |
| </div> | |
| <div class="card sides"> | |
| <h2>Sides</h2> | |
| <p>Chips<span class="price"> $1</span></p> | |
| <p>Fries<span class="price"> $2</span></p> | |
| <p>Sweet Potato Fries <span class="price"> $3</span></p> | |
| <p>Onion Rings <span class="price"> $3</span></p> | |
| <p>Baked potatoes. <span class="price"> $3</span></p> | |
| <p>Broccoli. <span class="price"> $3</span></p> | |
| <p>Coleslaw.<span class="price"> $3</span></p> | |
| <p>Corn on the Cob <span class="price"> $3</span></p> | |
| </div> | |
| <div class="card drinks"> | |
| <h2>Drinks</h2> | |
| <p>Soda <span class="price"> $1</span></p> | |
| <p>Iced Tea <span class="price"> $1</span></p> | |
| <p>Fresh Lemonade <span class="price"> $2</span></p> | |
| <p>Pomegranate mojito <span class="price"> $2</span></p> | |
| <p>Mint sparkle<span class="price"> $2</span></p> | |
| <p>Club soda<span class="price"> $1</span></p> | |
| <p>Iced tea<span class="price"> $1</span></p> | |
| <p>Cranberry juice<span class="price"> $1</span></p> | |
| </div> | |
| </div> | |
| </body> |
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
| // MY first challenge with the codepen!!! |
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
| @import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"); | |
| /* font-family: 'Bebas Neue', cursive; */ | |
| @import url("https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap"); | |
| /* font-family: 'Shadows Into Light', cursive; */ | |
| @import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap"); | |
| /* font-family: 'Permanent Marker', cursive; */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background-color: rgba(0, 0, 0); | |
| } | |
| .name { | |
| display: inline; | |
| width: 600px; | |
| text-align: center; | |
| font-size: 5rem; | |
| font-family: "Permanent Marker", cursive; | |
| color: rgb(255, 255, 255, 0.8); | |
| position: absolute; | |
| top: 150px; | |
| left: 250px; | |
| transform: rotate(-12deg); | |
| /* border:2px solid yellow; */ | |
| } | |
| .card { | |
| width: 200px; | |
| height: auto; | |
| border: 2px solid white; | |
| border-radius: 10px; | |
| border: none; | |
| padding: 5px; | |
| font-family: "Bebas Neue", cursive; | |
| text-transform: capitalize; | |
| } | |
| /* -------images------ */ | |
| .card h2 { | |
| text-align: center; | |
| font-family: "Shadows Into Light", cursive; | |
| } | |
| .price { | |
| text-align: right; | |
| color: whitesmoke; | |
| } | |
| .burger { | |
| background-color: #39ff14; | |
| box-shadow: 2px 2px 20px 0px #39ff14; | |
| position: absolute; | |
| top: 240px; | |
| left: 100px; | |
| transform: rotate(-24deg); | |
| } | |
| .hotdogs { | |
| background-color: #ff5412; | |
| box-shadow: 2px 2px 20px 0px #ff5412; | |
| position: absolute; | |
| top: 430px; | |
| left: 380px; | |
| transform: rotate(-14deg); | |
| } | |
| .chilli { | |
| background-color: #8000ff; | |
| box-shadow: 2px 2px 20px 0px #8000ff; | |
| position: absolute; | |
| top: 40px; | |
| left: 170px; | |
| transform: rotate(12deg); | |
| } | |
| .sides { | |
| background-color: #ff0bac; | |
| box-shadow: 2px 2px 20px 0px #ff0bac; | |
| position: absolute; | |
| top: 400px; | |
| left: 700px; | |
| transform: rotate(-10deg); | |
| } | |
| .drinks { | |
| background-color: #01dee6; | |
| box-shadow: 2px 2px 20px 0px #01dee6; | |
| position: absolute; | |
| top: 80px; | |
| left: 830px; | |
| transform: rotate(-15deg); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment