-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnutrients.html
179 lines (151 loc) · 8.54 KB
/
nutrients.html
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style> #myCarousel {
width: 100%;
height: 25vh;
}
.carousel-inner img {
width: 100%;
height: auto;
object-fit: cover;
}
.supplement-section {
padding: 20px;
/* position: fixed; Fixed position */
/*top: 50%; /* Position from the top */
/* left: 50%; /* Position from the left */
/* transform: translate(-50%, -50%); /* Center horizontally and vertically */
}
.supplement-img {
float: left;
margin-right: 20px;
max-width: 150px;
}
.supplement {
display: inline-block;
margin-right: 20px;
vertical-align: top;
}
.supplement-img::after {
content: "";
display: table;
clear: both;
}
.supplement p {
margin-top: 10px; /* Add some space between the image and the description */
}
.carousel-caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.5);
color: #fbf539;
padding: 20px;
}
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images-prod.healthline.com/hlcmsresource/images/topic_centers/Food-Nutrition/1296x728_6_Essential_Nutrients_and_Why_Your_Body_Needs_Them-Vitamins.jpg" alt="Image 1">
<div class="carousel-caption">
<h2>nutrition</h2>
<p style="color:#3bf911 ; font-style:italic ; font-size:18px">Nutrition is essential for fitness and sports. It provides the body with the energy and nutrients it needs to perform at its best, <br>
recover from exercise, and build and repair muscle.some benefits of nutrition:
<ul style="list-style:circle; text-align:left">
<li>Improved athletic performance</li>
<li>Reduced risk of injury</li>
<li>Faster recovery</li>
<li>Improved overall health and well-being</li>
</ul></p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.nia.nih.gov/sites/default/files/inline-images/dietary-supplements-elderly-inline.jpg" alt="Image 2">
<div class="carousel-caption">
<h2>Supplements</h2>
<p style="color:#43f80c;font-style:italic; font-size:18px">
Supplements can be important for fitness and sports, but they are not essential.<br>
A healthy diet can provide all the nutrients that most athletes need.<br>
However, there are some supplements that may be beneficial for certain athletes or sports.
<ul style="list-style:circle;text-align:left;">
<li>Fast recovery</li>
<li>Reduced muscle soreness</li>
<li>Improved performance</li>
</ul>
</p>
</div>
</div>
<div class="carousel-item">
<img src="https://nourishingjoy.com/wp-content/uploads/2021/12/meal-planning-how-to-simplify-featured.jpg" alt="Image 3">
<div class="carousel-caption">
<h2>Meal Plans</h2>
<p style="color:#4feb11;font-style:italic, font-size:18px;">Meal planning is the process of deciding what meals you will eat for a certain period of time, such as a week or a month.<br>Meal plans are important for fitness and sports because they can help you to:
<ul style="list-style:circle;text-align:left">
<li>Eat a healthy,balanced diet</li>
<li>meal planning can save your time and money by helping you to avoid impulse purchases and reduce food waste.</li>
<li>Meal plans can help you to reach your fitness goals by helping you to control your calorie intake</li>
</ul></p>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="supplement-section">
<h2 style="color:#493aef;font-style:bold">Basic Informations</h2>
<div class="supplement">
<img src="https://media.istockphoto.com/id/1296030180/photo/composition-with-high-protein-food.jpg?s=612x612&w=0&k=20&c=DJDYM9qte_Mz04jh-YsjQg6va8ht_PKbMV1yhndRdvs=" alt="Protein" class="supplement-img">
<p>Protein is essential for building and repairing muscle tissue. <br>
Good sources of protein include lean meat, poultry, fish, eggs, dairy products, legumes, and nuts.
However, some athletes may need to supplement their diet with protein powder to meet their needs.</p>
</div>
<div class="supplement">
<img src="https://hips.hearstapps.com/hmg-prod/images/gettyimages-1383504099-6478b23e14d6e.jpg" alt="ceratine" class="supplement-img">
<p> Creatine is a natural substance found in muscle cells. <br>
It helps to improve muscle strength and endurance. <br>
Creatine supplementation has been shown to be effective for athletes who participate in high-intensity, short-duration activities, such as weightlifting and sprinting.</p>
</div>
<div class="supplement">
<img src="https://t4.ftcdn.net/jpg/01/72/85/11/360_F_172851151_0D6lLBVdxzRzplPs6r75CO11BZrjcy5S.jpg" alt="caffeine" class="supplement-img">
<p>Caffeine is a stimulant that can improve alertness and energy levels.<br>
It can also help to improve athletic performance in certain types of sports, such as endurance events and team sports.</p>
</div>
<div class="supplement">
<img src="https://media.sciencephoto.com/f0/30/49/97/f0304997-800px-wm.jpg" alt="beat-alanine" class="supplement-img">
<p>Beta-alanine is an amino acid that helps to reduce muscle fatigue. <br>
It may be beneficial for athletes who participate in high-intensity, short-duration activities, such as weightlifting and sprinting.</p>
</div>
<div class="supplement">
<img src="https://media.istockphoto.com/id/1328640006/vector/amino-acid-flat-line-icon-vector-outline-illustration-of-structural-formula-black-thin.jpg?s=612x612&w=0&k=20&c=mWFDCkWb80sObc1R2gvrDb9R3Mph5ogcrRU3K_5T6T8=" alt="branced-chain amino acid" class="supplement-img">
<p>BCAAs are a group of amino acids that help to promote muscle growth and reduce muscle breakdown.
They may be beneficial for athletes who participate in all types of sports.</p>
</div>
</div>
<script>
$(document).ready(function(){
// Initialize the carousel
$('#myCarousel').carousel();
});
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>