project03/index.html at main · gravity-coding/project03 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Project 03</title>
    <link
      href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <nav class="d-flex">
        <div class="lft-nav d-flex">
          <a id="logo" href="#">
            <img src="./Images/Black-logo.70ed228c.svg" alt="logo" />
          </a>
          <a href="#">Menu</a>
          <a href="#">Food</a>
          <a href="#">Services</a>
        </div>
        <div class="rght-nav d-flex">
          <i class="ri-shopping-cart-2-line"></i>
          <button class="btn">Order Now</button>
        </div>
      </nav>
    </header>
    <div id="part-1" class="d-flex">
      <div class="lft-part1 d-flex-c">
        <h1>Spice of Life: Discovering Hidden Ingredients</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum
          accusamus, ipsum voluptates eligendi, debitis quidem harum
          exercitationem rerum voluptas consequatur recusandae aut quasi
          explicabo provident rem qui error inventore perspiciatis.
        </p>
        <div class="cta d-flex">
          <button class="btn">Explore Menu</button>
          <div class="review d-flex">
            <div class="cir"></div>
            <div class="cir"></div>
            <div class="cir"></div>
          </div>
        </div>
      </div>
      <div class="rght-part1 d-flex">
        <img width="55%" src="./Images/file (1).png" alt="plate dish" />
      </div>
      <div class="overlay-glass d-flex">
        <div class="dish d-flex">
          <div class="dish-img"></div>
          <div class="dish-desc d-flex-c">
            <h3>Maggie</h3>
            <h2>$10.2</h2>
          </div>
          <i class="ri-shopping-bag-fill"></i>
        </div>
        <div class="dish d-flex">
          <div class="dish-img"></div>
          <div class="dish-desc d-flex-c">
            <h3>Maggie</h3>
            <h2>$10.2</h2>
          </div>
          <i class="ri-shopping-bag-fill"></i>
        </div>
        <div class="dish d-flex">
          <div class="dish-img"></div>
          <div class="dish-desc d-flex-c">
            <h3>Maggie</h3>
            <h2>$10.2</h2>
          </div>
          <i class="ri-shopping-bag-fill"></i>
        </div>
      </div>
    </div>
    <div id="part-2" class="d-flex">
      <div class="lft-part-2 d-flex-c">
        <img id="leaf1" src="./Images/Leaf.svg" alt="leaf" />
        <img id="chef" width="80%" src="./Images/Image.png" alt="" />
      </div>
      <div class="rght-part-2 d-flex-c">
        <h1>Excellent <br>Cook</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil dolores
          aspernatur facilis eligendi voluptate repellendus doloremque
          laboriosam animi tenetur impedit alias, quod corrupti vero suscipit.
        </p>
        <button class="btn">Cook Now</button>
        <img width="50%" src="./Images/Leaf (1).svg" alt="leaf2">
      </div>
    </div>
  </body>
</html>