diff --git a/.vs/Assignment_LookAndFeel/config/applicationhost.config b/.vs/Assignment_LookAndFeel/config/applicationhost.config new file mode 100644 index 000000000..0d88f0db3 --- /dev/null +++ b/.vs/Assignment_LookAndFeel/config/applicationhost.config @@ -0,0 +1,1016 @@ + + + + + + + +
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+
+ + +
+
+
+
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/.vs/Assignment_LookAndFeel/v16/.suo b/.vs/Assignment_LookAndFeel/v16/.suo new file mode 100644 index 000000000..85efca563 Binary files /dev/null and b/.vs/Assignment_LookAndFeel/v16/.suo differ diff --git a/.vs/Assignment_LookAndFeel/v17/.suo b/.vs/Assignment_LookAndFeel/v17/.suo new file mode 100644 index 000000000..e496b2357 Binary files /dev/null and b/.vs/Assignment_LookAndFeel/v17/.suo differ diff --git a/.vs/Assignment_LookAndFeelnew/config/applicationhost.config b/.vs/Assignment_LookAndFeelnew/config/applicationhost.config new file mode 100644 index 000000000..0d88f0db3 --- /dev/null +++ b/.vs/Assignment_LookAndFeelnew/config/applicationhost.config @@ -0,0 +1,1016 @@ + + + + + + + +
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+
+ + +
+
+
+
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/.vs/Assignment_LookAndFeelnew/project-colors.json b/.vs/Assignment_LookAndFeelnew/project-colors.json new file mode 100644 index 000000000..069efb914 --- /dev/null +++ b/.vs/Assignment_LookAndFeelnew/project-colors.json @@ -0,0 +1,11 @@ +{ + "Version": 1, + "ProjectMap": { + "a2fe74e1-b743-11d0-ae1a-00a0c90fffc3": { + "ProjectGuid": "a2fe74e1-b743-11d0-ae1a-00a0c90fffc3", + "DisplayName": "Miscellaneous Files", + "ColorIndex": -1 + } + }, + "NextColorIndex": 0 +} \ No newline at end of file diff --git a/.vs/Assignment_LookAndFeelnew/v17/.suo b/.vs/Assignment_LookAndFeelnew/v17/.suo new file mode 100644 index 000000000..8bf4b93e8 Binary files /dev/null and b/.vs/Assignment_LookAndFeelnew/v17/.suo differ diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json new file mode 100644 index 000000000..74ca9dfad --- /dev/null +++ b/.vs/VSWorkspaceState.json @@ -0,0 +1,8 @@ +{ + "ExpandedNodes": [ + "", + "\\css" + ], + "SelectedNode": "\\food.html", + "PreviewInSolutionExplorer": false +} \ No newline at end of file diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite new file mode 100644 index 000000000..e86a4d4c8 Binary files /dev/null and b/.vs/slnx.sqlite differ diff --git a/AboutUs.html b/AboutUs.html new file mode 100644 index 000000000..c16112d52 --- /dev/null +++ b/AboutUs.html @@ -0,0 +1,202 @@ + + + + + Know Your Food + + + + + + + + + +
+
+ +
+

Know your Food provides nutrition data to empower you to create a better diet based on food components and ingredients. You can even look for calorie count and get the nutritional data based on recipies .The data is sourced from the USDA Food Data Central.

+
+ no image +

Surbhi Sharma

+

Surbhi is a USF's Business Analytics and Information Systems graduate program student. She has worked for over four years as a Software Engineer. Her contributions include designing(Home AboutUs, Footer, and Navigation), making the website responsive, creating the data model and chart.

+

Git

+
+
+ no image +

Shabana Ajamal

+

Surbhi is a student at USF's Business Analytics and Information Systems graduate program. She has worked for over four years as a Software Engineer. Her contributions include designing(Home AboutUs, Footer, and Navigation), making the website responsive, and creating the data model.

+
+
+ no image +

Sowmya Nanduri

+

Surbhi is a student at USF's Business Analytics and Information Systems graduate program. She has worked for over four years as a Software Engineer. Her contributions include designing(Home AboutUs, Footer, and Navigation), making the website responsive, and creating the data model.

+
+
+
+
+

Nutrition Chart

+ +

+ +

+ +
+
+ + +
+ + + + + +
+
+ + +
+
+
+
+

About Us

+ How It Works + Testimonials + Carrers + Terms of Service +
+
+

Contact Us

+ Contact + Destination + Sponsorships + Support + +
+
+
+
+

Videos

+ Submit Videos + Agency + Influencer + Ambassador + +
+
+

Social Media

+ Facebook + Instagram + Youtube + Twitter +
+
+
+ + +
+ + + + \ No newline at end of file diff --git a/Component.html b/Component.html new file mode 100644 index 000000000..edb7ae722 --- /dev/null +++ b/Component.html @@ -0,0 +1,121 @@ + + + + + Know Your Food + + + + + + + + + + +
+
+ +
+ +
+

Nutrition Value by Component

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MilkEggSpinachBroccoliAppleMashroomTomato
Proteins7.86.30.62.60.431.6
Carbs10.70.60.9624.23.16.5
Fat105.30.20.30.90.30.4
Fiber000.82.45.813
+ +
+ +
+
+ + + + \ No newline at end of file diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 000000000..ec80b43c8 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,566 @@ + +*{ + box-sizing:border-box; + margin:0; + padding:0; + font-family: 'kumbh Sans',sans-serif; + + +} +.navbar { + background: hsl(0, 0%, 0%); + height: 80px; + display: flex; + justify-content: center; + align-items: center; + font-size: 1.2rem; + position: sticky; + top: 0; + z-index: 999; + opacity: 0.6; +} +.navbar_Container{ + display:flex; + justify-content:space-between; + height:80px; + z-index:1; + width:100%; + max-width:1300px; + margin:0 auto; + padding:0 50px; + +} +#navbar_logo { + background-color: #ff8177; + background-image: linear-gradient(to top,#ff0844 0%,#ffb1 100%); + background-size: 100%; + -webkit-background-clip: text; + -moz-background-clip: text; + -webkit-text-fill-color: transparent; + display:flex; + align-items:center; + cursor:pointer; + text-decoration:none; + font-size:2rem; +} +.fa-burger { + margin: 0.5rem; + +} +.navbar_menu{ + display:flex; + align-items:center; + list-style:none; + text-align:center; +} +.navbar_item{ + height:80px; +} +.navbar_links{ + color:#fff; + display:flex; + align-items:center; + justify-content:center; + text-decoration:none; + padding:0 1rem; + height:100%; + +} +.button{ + display:flex; + justify-content:center; + align-items:center; + text-decoration:none; + padding:10px 20px; + height:100%; + width:100%; + border:none; + outline:none; + border-radius:4px; + background-color:black; + color:white; +} +.button:hover{ + background:#ff8177; + transition:all 0.3s ease; + + +} +.navbar_links:hover { + color: #f77062; + transition: all 0.3s ease; +} +@media screen and (max-width:960px){ + .navbar_Container { + display: flex; + justify-content: space-between; + height: 100%; + z-index: 1; + width: 100%; + max-width: 1300px; + padding: 0; + box-sizing: border-box; + } + .navbar_menu { + display: grid; + grid-template-columns: auto; + margin: 0; + width: 100%; + position: absolute; + top: -1000px; + opacity: 0; + transition: all 0.5s ease; + height: 50vh; + z-index: -1; + background: black; + box-sizing: border-box; + } + .navbar_menu.active{ + background:#131313; + top:100%; + opacity:1; + transition:all 0.5s ease; + z-index:99; + height:50vh; + font-size:1.6rem; + + } + #navbar_logo{ + padding-left:25px; + + } + .navbar_toggle .bar{ + width:25px; + height:3px; + margin:5px auto; + transition: all 0.3s ease; + background:#fff; + box-sizing:border-box; + } + .navbar_item{ + width:100%; + } + .navbar_links{ + text-align:center; + padding:2rem; + width:100%; + display:table; + } + #mobile_menu{ + position:absolute; + top:20%; + right:5%; + transform:translate(5%,20%); + } + .button{ + display:flex; + justify-content:center; + align-items:center; + width:80%; + height:80px; + margin:0; + } + .navbar_toggle .bar { + display: block; + cursor: pointer; + box-sizing: border-box; + } + #mobile_menu.is_active .bar:nth-child(2){ + opacity:0; + + } + #mobile_menu.is_active .bar:nth-child(1) { + transform:translateY(8px) rotate(45deg) + } + #mobile_menu.is_active .bar:nth-child(3) { + transform: translateY(-8px) rotate(-45deg) + } +} +.main { + background-color:#141414; + +} +main_Container{ + display:grid; + grid-template-columns:1fr 1fr; + align-items:center; + justify-self:center; + margin:0 auto; + height:90vh; + background-color:#141414; + z-index:1; + width:100%; + max-width:1300px; + padding: 0 50px; +} +.main_Content h1{ + font-size:2rem; + background-color:#ff8177; + background-image: linear-gradient(to top,#ff084 0%,#ffb14 100%); + background-size:100%; + -webkit-background-clip:text; + -moz-background-clip:text; + -webkit-text-fill-color:transparent; + +} +.main_Content h2 { + font-size: 2rem; + background-color: #ff8177; + background-image: linear-gradient(to top,#21d4fd 0%,#ffb14 100%); + background-size: 100%; + -webkit-background-clip: text; + -moz-background-clip: text; + -webkit-text-fill-color: transparent; + +} +.main_Content p{ + margin-top:1rem; + font-size:2rem; + font-weight:700; + color:#fff; +} +.main_btn{ + font-size:1rem; + background-image:linear-gradient(to top, #f77062 0%, #fe5196 100%); + padding:14px 32px; + border:none; + border-radius:4px; + color:#fff; + margin-top:2rem; + cursor: pointer; + position:relative; + transition:all 0.35s; + outline:none; +} +.main_btn a{ + position:relative; + z-index:2; + color:#fff; + text-decoration:none; +} +.main_btn:after{ + position:absolute; + content:''; + top:0; + left:0; + width:0; + height:100%; + background:#21d4fd; + transition:all 0.35s; + border-radius:4px; +} +.main_btn:hover{ + color:#fff; + +} +.main_btn:hover:after{ + width:100%; +} +.main_img_Container { + text-align: center; + height: 100%; + background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(17,17,0.6) 100%),url("../img/HomeImage.jpg"); + height: 80%; + width: 100%; + padding: 5rem 0; + box-sizing:border-box; +} +#mian_img{ + height:80%; + width:80%; +} + +/*Mobile Responsive*/ +@media screen and (max-width:768px){ + .main_Container { + display: grid; + grid-template-columns: auto; + align-items: center; + justify-self: center; + width: 100%; + margin: 0 auto; + height: 90vh; + box-sizing: border-box; + } + .main_Content{ + text-align:center; + margin-bottom:4rem; + + } + .main_Content h1{ + font-size:2.5rem; + margin-top:2rem; + } + .main_Content h2 { + font-size: 3rem; + + } + .main_Content p { + + margin-top: 1rem; + font-size:1.5rem; + } +} + +@media screen and (max-width:480px) { + .main_Container { + display: grid; + grid-template-columns: auto; + align-items: center; + justify-self: center; + width: 100%; + margin: 0 auto; + height: 80vh; + box-sizing: border-box; + } + + .main_Content h1 { + font-size: 2rem; + margin-top: 3rem; + } + + .main_Content h2 { + font-size: 2rem; + } + + .main_Content p { + margin-top: 2rem; + font-size: 1.5rem; + } + .main_btn{ + padding:12px 36px; + margin:2.5rem 0; + } + + + +} +.services { + background: #141414; + display: flex; + flex-direction: column; + align-items: center; + height: 100vh; + padding: 10rem 0; + +} + .services h1 { + background-color: #ff8177; + background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%,#ff8c7f 21%,#f99185 52%,#cf556c 78%, #b12a5b 100%); + background-size: 100%; + margin-bottom: 1rem; + font-size: 2.5rem; + -webkit-background-clip: text; + -moz-background-clip: text; + -webkit-text-fill-color: transparent; + } + .services_Container{ + display:flex; + justify-content:center; + flex-wrap:wrap; + + } +.services_card { + margin: 1rem; + height: 525px; + width: 400px; + border-radius: 4px; + background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(17,17,0.6) 100%),url("../img/Food.jpg"); + background-size: cover; + position: relative; + color: #fff; +} + .services_card:nth-child(2) { + background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(17,17,0.6) 100%),url("../img/component.jpg"); + background-size: cover; + position: relative; + color: #fff; + justify-content: right; + } + .services h2{ + position:absolute; + top:350px; + left:30px; + } +.services_card p { + position: absolute; + top: 400px; + left: 30px; +} +.services_card button{ + color:#fff; + padding:10px 20px; + border:none; + outline:none; + border-radius:4px; + background:#f77062; + position:absolute; + top:440px; + left:30px; + font-size:1rem; + cursor:pointer; +} +.services_card:hover{ + transform:scale(1.075); + transition:0.2s ease-in; + cursor:pointer; + +} +@media screen and (max-width: 960px){ + .services{ + height: 1600px; + + } + .services h1{ + font-size:2rem; + margin-top:12rem; + } + .services_card{ + width:300px; + } +} +/* +footer CSS*/ +.footer_Container { + background-color: #141414; + padding: 10rem 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + +} +#footer_logo{ + color:#fff; + display:flex; + align-items:center; + cursor:pointer; + text-decoration:none; + font-size:2rem; +} +.footer_link{ + width:100%; + max-width:1000px; + display:flex; + justify-content:center; +} +.footer_link_wrapper { + display: flex; +} +.footer_link_items{ + display:flex; + flex-direction:column; + align-items:flex-start; + margin:16px; + text-align:left; + width:160px; + box-sizing:border-box; +} +.footer_link_items h2{ + margin-bottom:16px; + +} +.footer_link_items > h2{ + color:#fff; +} +.footer_link_items a{ + color:#fff; + text-decoration:none; + margin-bottom:0.5rem; +} +.footer_link_items a:hover{ + color:#e9e9e9; + transition:0.3s ease-out +} +.social_icon_link{ + color:#fff; + font-size:24px; +} +.social_media{ + max-width:1000px; + width:100%; +} +.social_media_wrap{ + display:flex; + justify-content:space-between; + align-items:center; + width:90%; + max-width:1000px; + margin:40px auto 0 auto; +} +social_icons{ + display:flex; + justify-content:space-between; + align-items:center; + width:240px; +} +.social_logo{ + color:#fff; + justify-self:flex-start; + margin-left:20px; + cursor:pointer; + text-decoration:none; + font-size:2rem; + display:flex; + align-items:center; + margin-bottom:16px; +} +.website_right{ + color:#fff; + } +@media screen and (max-width:820px){ + .footer_links{ + padding-top:2rem; + } + #footer_logo{ + margin-bottom:2rem; + } + .website_right { + margin-bottom: 2rem; + } + .footer_link_wrapper{ + flex-direction:column; + } + .social_media_wrap { + flex-direction: column; + } +} +@media screen and (max-width:480px) { + .footer_links_items { + margin: 0; + padding: 10px; + width: 100% ; + box-sizing: border-box; + } +} +.column { + float: left; + width: 33.33%; + padding:2rem; +} + +/* Clear floats after the columns */ +.row:after { + content: ""; + display: table; + clear: both; + +} +.AboutUs h3{ + margin-top: 1rem; + flex-wrap:wrap; + box-sizing:border-box; +} +.AboutImage { + height: 120px; + width: 120px; + flex-wrap: wrap; + /*//border-radius: 60%;*/ + align-items: center; +} +@media screen and (max-width: 600px) { + .column { + width: 100%; + } +} \ No newline at end of file diff --git a/food.html b/food.html new file mode 100644 index 000000000..36eca3561 --- /dev/null +++ b/food.html @@ -0,0 +1,138 @@ + + + + + Know Your Food + + + + + + + + + + +
+
+ +
+ +
+

Nutrients of Food Items

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ProteinsCarbsFatFiber
Milk7.810.7100
Egg6.30.65.30
Spinach0.60.90.20.8
Broccoli2.660.32.4
Mashroom33.10.31
Tomato1.66.50.43
Apple0.424.40.95.8
Banana1.627.50.32
+ +
+ +
+
+ + + + \ No newline at end of file diff --git a/img/Food.jpg b/img/Food.jpg new file mode 100644 index 000000000..3f9b3f980 Binary files /dev/null and b/img/Food.jpg differ diff --git a/img/HomeImage.jpg b/img/HomeImage.jpg new file mode 100644 index 000000000..1e8eceabc Binary files /dev/null and b/img/HomeImage.jpg differ diff --git a/img/component.jpg b/img/component.jpg new file mode 100644 index 000000000..2d78c0cb7 Binary files /dev/null and b/img/component.jpg differ diff --git a/img/surbhi.jpg b/img/surbhi.jpg new file mode 100644 index 000000000..395f277af Binary files /dev/null and b/img/surbhi.jpg differ diff --git a/index.html b/index.html index fbae197cd..f186ddae2 100644 --- a/index.html +++ b/index.html @@ -1 +1,154 @@ - \ No newline at end of file + + + + + Know Your Food + + + + + + + + + + +
+
+ +
+ +
+

Know Your Food

+

Based on food items

+

See what makes us diffrent

+ +
+
+ +
+
+
+

Want to know more about your food

+
+
+

Calorie Count

+

Based on Ingredients

+ +
+ +
+

How Healthy Your Food Is?

+

Based on components

+ +
+
+
+ + + +
+
+
+
+

About Us

+ How It Works + Testimonials + Carrers + Terms of Service +
+
+

Contact Us

+ Contact + Destination + Sponsorships + Support + +
+
+
+
+

Videos

+ Submit Videos + Agency + Influencer + Ambassador + +
+
+

Social Media

+ Facebook + Instagram + Youtube + Twitter +
+
+
+ + +
+ + + + \ No newline at end of file diff --git a/js/main.js b/js/main.js index 848a3f230..41e999aa6 100644 --- a/js/main.js +++ b/js/main.js @@ -5,10 +5,16 @@ /** * Sample code */ -document.addEventListener('DOMContentLoaded', function() { - var ulElement = document.getElementById('links'); - var liElement = document.createElement('li'); - liElement.appendChild(document.createTextNode('created by main.js')); +//document.addEventListener('DOMContentLoaded', function() { +// var ulElement = document.getElementById('links'); +// var liElement = document.createElement('li'); +// liElement.appendChild(document.createTextNode('created by main.js')); - ulElement.appendChild(liElement); -}); +// ulElement.appendChild(liElement); +//}); +const menu = document.querySelector('#mobile_menu'); +const menuLinks = document.querySelector('.navbar_menu'); +menu.addEventListener('click', function () { + menu.classList.toggle('is_active'); + menuLinks.classList.toggle('active'); +}) \ No newline at end of file