diff --git a/images/1.webp b/images/1.webp new file mode 100644 index 0000000..fcfe6cf Binary files /dev/null and b/images/1.webp differ diff --git a/images/2.webp b/images/2.webp new file mode 100644 index 0000000..6a08980 Binary files /dev/null and b/images/2.webp differ diff --git a/images/3.webp b/images/3.webp new file mode 100644 index 0000000..e6821d4 Binary files /dev/null and b/images/3.webp differ diff --git a/images/4.webp b/images/4.webp new file mode 100644 index 0000000..e036c4e Binary files /dev/null and b/images/4.webp differ diff --git a/images/5.webp b/images/5.webp new file mode 100644 index 0000000..08b64ce Binary files /dev/null and b/images/5.webp differ diff --git a/images/food.webp b/images/food.webp new file mode 100644 index 0000000..a4c7635 Binary files /dev/null and b/images/food.webp differ diff --git a/images/gym.png b/images/gym.png new file mode 100644 index 0000000..6cf4014 Binary files /dev/null and b/images/gym.png differ diff --git a/images/gym2.png b/images/gym2.png new file mode 100644 index 0000000..89d47c4 Binary files /dev/null and b/images/gym2.png differ diff --git a/images/gym3.png b/images/gym3.png new file mode 100644 index 0000000..f91655c Binary files /dev/null and b/images/gym3.png differ diff --git a/images/gym4.png b/images/gym4.png new file mode 100644 index 0000000..49ac719 Binary files /dev/null and b/images/gym4.png differ diff --git a/images/hero-background.webp b/images/hero-background.webp new file mode 100644 index 0000000..c174538 Binary files /dev/null and b/images/hero-background.webp differ diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000..48d440a Binary files /dev/null and b/images/logo.png differ diff --git a/index.html b/index.html index a2219e1..808c5e2 100644 --- a/index.html +++ b/index.html @@ -6,8 +6,160 @@ Document + +
+ +
+
+
+
    +
  • GET FIT
    • +
  • EAT BETTER
    • +
  • MANAGE WEIGHT
    • + +
+
+
+ +
+ +
+
+
+
+
+

This is heading

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus sit, molestias accusamus porro voluptatibus earum tempore iure ab facilis voluptas.

+ Click Me + +
+
+
+
+ +
+

Lorem, ipsum dolor.

+

Lorem ipsum dolor Lorem ipsum dolor sitamet consectetur adipisicing, amet consectetur adipisicing elit. Cupiditate aut enim quisquam similique at eaque iusto ex facere incidunt blanditiis.

+
+
+ + + +
+
+
+
+

Food and Diet

+

Lorem ipsum Provident reprehenderit veniam nemo? Suscipit eveniet voluptas quidem alias cumque a distinctio consectetur adipisicing elit. Provident reprehenderit veniam nemo? Suscipit eveniet voluptas quidem alias cumque a distincti?

+
+
+ +
+ +
+

Lorem ipsum dolor consectetur sit amet consectetur.

+
+ + +
+
+ +
+

Lorem ipsum dolor consectetur sit amet consectetur.

+
+
+
+ +
+

Lorem ipsum dolor consectetur sit amet consectetur.

+
+
+
+ +
+

Lorem ipsum dolor consectetur sit amet consectetur.

+
+
+
+ +
+

Lorem ipsum dolor consectetur sit amet consectetur.

+ +
+
+
+
+
+ +
+
+ +
+
+
+
+ gym-equipment +
+
+

Lorem ipsum ipsum dolor sit ipsum dolor sit dolor sit ipsum dolor sit

+
+ +
+ +
+
+ gym-equipment +
+
+

Lorem ipsum ipsum dolor sit ipsum dolor sit dolor sit ipsum dolor sit

+
+ +
+ +
+
+ gym-equipment +
+
+

Lorem ipsum ipsum dolor sit ipsum dolor sit dolor sit ipsum dolor sit

+
+ +
+ +
+
+ gym-equipment +
+
+

Lorem ipsum ipsum dolor sit ipsum dolor sit dolor sit ipsum dolor sit

+
+ +
+ +
+
+ + + diff --git a/style/style.css b/style/style.css index e69de29..66788d0 100644 --- a/style/style.css +++ b/style/style.css @@ -0,0 +1,323 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap'); + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + +} +html{ + font-family: 'Roboto Mono'; + font-size: 18px; +} +#hero{ + width: 100%; + height: 100vh; + background-image: linear-gradient(rgba(56, 55, 55, 0.418), rgba(0, 0, 0, 0.253) + ), url('../images/hero-background.webp'); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + color: white; + +} + +.container{ + width: 90%; + height: 100%; + max-width: 1200px; + margin: 0 auto; + display: flex; + justify-content: center; + align-items: center; +} +.container .info h1{ + font-size: 3rem; + margin-bottom: 1rem; + +} +.container .info h2{ + font-size: 1.2rem; + margin-bottom: 2rem; +} +.container .info p{ + font-size: 1.2rem; + max-width: 50%; +} +.container .info a{ + text-decoration: none; + display: inline-block; + background-color: white; + border-radius: 4px; + font-size: 1.8rem; + padding: 0.3em 1em; + margin-top: 2rem; + color: #f77979; + + +} + +header{ + display: flex; + justify-content: space-around; + background:#557B83 ; + color: white; + align-items: center; + height:80px; + +} + +.logo img{ + width: 100px; +border-radius: 50%; +} + +.nav-links li{ + list-style-type: none; + +} +.nav-links li:hover{ + + color: #f77979; ; + cursor: pointer; + +} +.nav-links ul { + display: flex; + gap:20px; + +} +.btn{ + + background-color: #f5f5f5; + color: #f77979; + padding: 12px 20px; + border: none; + border-radius: 3px; +} +.btn:hover{ +background-color: #f78c8c ; +color: white; +cursor: pointer; +} + + +#foods{ + width: 100%; + + display: flex; + margin: 30px 20px; + +} +#foods div{ + width: 50%; +} +.food-image img{ + width: 80%; + border-radius: 6px; +} +.food-description{ + display: flex; + + flex-direction: column; + justify-content: center; + padding: 0 20px; + +} +.food-description h2{ + font-size: 3rem; + padding-bottom: 10px; + +} +.food-description p{ + font-size: 1rem; +} + +.nutrient h1{ + font-size: 2rem; + margin-top: 30px ; + display: flex; + justify-content: center; + +} +.nut-title{ + width: 70%; + display: flex; + text-align: center; + flex-direction: column; + align-items: center; + margin-left: 180px; +} +.nut-title p{ + padding-top:10px; +} + +.nutrients{ + width: 90%; + padding: 20px; + margin: 40px auto; + display: flex; + flex-direction: row; + justify-content: center; +} +.nutrients .imgs{ + width: 200px; + margin: 0 10px; + box-shadow: 0 0 20px 2px rgb(172, 170, 170); + transition:1s; + border: 5px; + height: 320px; +} +.imgs img{ + display: block; + width: 100%; + border-radius: 5px; + height: 66%; + +} + +.imgs:hover{ + transform: scale(1.2); + z-index:2; +} + +.imgs h3{ + margin: 10px 5px; + text-align: center +} + +#gym{ +background-color: rgb(252, 252, 252); + display: flex; +} +.img img{ + width: 100%; + margin: 15px auto; +} +#gym div{ + width: 50%; +} + + + +.gymleft { + display: flex; + flex-direction: column; + align-items: center; + +} + + +.e1{ + display: flex; + flex-direction: row; + text-align: center; + +} +.e1 div{ + width: 50%; +} +.gym-desc h4{ + text-align: center; + margin: 30px auto; +} + + + +.imgsleft img{ + width: 65%; + margin: 15px auto; +} + +#footer{ + background-color:#678288; + color: #f5f5f5; +} +.footer-content{ + text-align: center; + padding: 20px 0; +} +.footer-content h3{ + font-size: 2rem; + margin-bottom: 8px; +} +.footer-content a{ + padding: 10px; + font-size: 1rem; + width: 25px; +} +.coppyright{ + background: rgb(168, 168, 168); +} +.coppyright p{ + padding: 10px 0; + text-align: center; +} + + + + + + +@media only screen and (max-width:768px) { + html{ + font-size: 10px; + text-align: center; + } + .container .info p{ + + max-width: 90%; + display: flex; + align-items: center; + } + .nutrients{ + display: flex; + flex-wrap: wrap; + gap: 10px; + } + .nut-title{ + display: flex; + flex-direction: column; + align-items: center; + margin-left: 100px; + } + + #foods { + display: flex; + flex-direction: column-reverse; + align-items: center; + width: 100%; +} + +.food-description h2{ + font-size: 2rem; + padding-top: 5px; +} +.imgs h3{ +font-size: 2rem; +} + +#gym{ + display: flex; + flex-direction: column; +} +.gymleft{ + display: flex; + flex-direction: row; + width: 100%; +} +.e1{ + flex-direction: column; + width: 100%; +} +#gym div{ + width: 100%; +} +.gym-desc h4{ + margin:12px 10px; +} +.imgsleft img{ + margin-bottom: 0; +} +} +