1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Nutritional Facts Check</title> 6 7 <!-- Google Font --> 8 <link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap"> 9 10 <link rel="stylesheet" href="style.css"> 11 </head> 12 13 <body> 14 15 <div class="container"> 16 <div class="cards"> 17 18 <h1 class="Title">Nutritional Facts Check</h1> 19 20 <p class="desc"> 21 Nutritional facts help us understand what our food contains and why it matters for our health. 22 </p> 23 24 <div class="category-grid"> 25 26 <a href="https://www.healthline.com/nutrition/fruits" class="categorycard"> 27 <img src="images/fruits.jpg"> 28 <span>Fruits</span> 29 </a> 30 31 <a href="https://www.healthline.com/nutrition/vegetables" class="category-card"> 32 <img src="images/vegetables.jpg"> 33 <span>Vegetables</span> 34 </a> 35 36 <a href="https://www.healthline.com/nutrition/meat" class="category-card"> 37 <img src="images/meat.png"> 38 <span>Meat</span> 39 </a> 40 41 <a href="https://www.healthline.com/nutrition/dairy" class="category-card"> 42 <img src="images/dairy.jpg"> 43 <span>Dairy</span> 44 </a> 45 46 <a href="https://www.healthline.com/nutrition/nuts" class="category-card"> 47 <img src="images/nuts.jpg"> 48 <span>Nuts</span> 49 </a> 50 51 <a href="https://www.healthline.com/nutrition/carbs" class="category-card"> 52 <img src="images/carbs.jpg"> 53 <span>Carbs</span> 54 </a> 55 56 </div> 57 58 </div> 59 </div> 60 61 </body> 62 </html>
1 * { 2 margin 0; 3 padding: 0; 4 box-sizing: border box; 5 font-family: Arial, sans-serif; 6 } 7 8 body { 9 height: 100; 10 background: url("images/background.jpg") no-repeat center center cover; 11 display: flex; 12 justify-content: center; 13 alignign-items: center; 14 } 15 16 .container { 17 width: 100%; 18 display: flex; 19 justify-content: center; 20 } 21 22 .card { 23 width: 95%; 24 max-width: 1400px; 25 background: rgba(255, 255, 255, 0.5); 26 border-radius: 24px; 27 padding: 60px; 28 text-align: center; 29 } 30 31 .title { 32 font-family: "Luckiest Guy", cursive; 33 font-size: 80px; 34 color: #2e7d32; 35 margin-bottom: 25px; 36 } 37 38 .description { 39 font-size: 18px; 40 color: #333; 41 max-width: 1000px; 42 margin: 0 auto 40px auto; 43 line-height: 1.7; 44 } 45 46 .category-grid { 47 display: grid; 48 grid-template-columns: repeat(6 1fr); 49 gap: 24px; 50 } 51 52 .category-card { 53 text-decoration: none; 54 color: #000; 55 border-radius: 18px; 56 overflow: hidden; 57 background: #ffffff; 58 transition: transform 0.3s ease box-shadow 0.3s ease; 59 } 60 61 .category-card img { 62 width: 100%; 63 height: 150px; 64 object-fit: cover; 65 } 66 67 .category-card span { 68 display: block; 69 padding: 14px; 70 font-weight: bold; 71 font-size: 16px; 72 }