food-network/index.html at main · jahedripon9/food-network · 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!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">
    <title>Food Network</title>

    <!-------------------- Google Fonts ----------------------->

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Zen+Loop&display=swap" rel="stylesheet">

     <!-------------------- Main CSS ----------------------->

    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-------------------- Heading Items ----------------------->
    <section class="main-section">
        <ul class="menu d-flex">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#recipies">My Recipies</a></li>
            <li><a href="#views">Views</a></li>
            <li><a href="#footer">Footer</a></li>
        </ul>

        <div id="home" class="main-banner d-flex">
            <div class="main-text">
                <h4><span>THINK WITH HEART</span></h4>
                <h1>Tasty & Healthy Organic Food</h1>
                <p>Skip the diet, Just eat Healthy <br> Food is a source of health, energy and enjoyment. </p> <br>
                <a class="main-button" href="#">Learn More</a>
            </div>
            <div class="banner-image">
                <img src="img/organic-food.jpg" alt="Organic Food">
            </div>
        </div>
    </section>
<!-------------------- About Section ----------------------->

<section id="about" class="about-section">
    <div class="about-items d-flex">
        <div class="about-photo ">
            <img src="img/female/Person Image.png" alt="">
        </div>
        <div class="about-info">
            <div class="about-text">
                <h2>About me</h2>
                <p>Nutrition is all about looking after yourself and eating to stay fit and healthy.  Along with exercise and stress management, it’s one of the three things that can have a huge impact of how well you feel, how much energy you have over the day and how in shape you stay.</p> <br> <br>

                <a class="main-button" href="#">Contact Me</a>
            </div>
        </div>
    </div>
</section>
<!-------------------- My Recipies Section ----------------------->
<section id="recipies">
    <div class="recipies">
        <h1>My Recipies</h1>
        <p>On Smart Displays, if you see a recipe you want to make later, you can say “Save this recipe.” To see your saved recipes, say “Show me my cookbook.”</p>
    </div>
</section>

<!-------------------- Card Section ----------------------->

<section class="card-section">
    <div class="card-items d-flex">
        <div class="card01">
            <img src="img/food/Project Cover.jpg" alt="">
            <h2>Gravy</h2>
            <p>Make your meal more delicious by adding some gravy!</p>
        </div>
        <div class="card01">
            <img src="img/food/Project Cover1.jpg" alt="">
            <h2>Hot wings Rice Bowl</h2>
            <p>The classic rice and gravy with a side of hot wings. An explosion of flavors with every mouthful.</p>
        </div>
        <div class="card01">
            <img src="img/food/Project Cover.png" alt="">
            <h2>Hot and crispy</h2>
            <p>Need a quick decision for lunch? Try this mighty meal of rice & gravy with a side of Hot and Crispy chicken.</p>
        </div>
    </div>
</section>

<!-------------------- Views Section ----------------------->

<section id="views" class="views-section">
    <div class="views-items d-flex">
        <div class="view1">
            <h1>700K</h1>
            <p>Youtube Subscribere</p>
        </div>
        <div class="view1">
            <h1>2.4m</h1>
            <p>Instagram followers</p>
        </div>
        <div class="view1">
            <h1>100k</h1>
            <p>Dribble Shot Likes</p>
        </div>
    </div>
</section>

<!-------------------- Footer Section ----------------------->
<section id="footer" class="footer-section">
    <footer class="footer">
        <h1><span>Food</span> Network</h1>
        <p>© Jahed Ahmed Ripon. All Rights Reserved.</p>
    </footer>
</section>
</body>
</html>