diff --git a/Landing Page/images/back1.jpg b/Landing Page/images/back1.jpg new file mode 100644 index 0000000..f53c907 Binary files /dev/null and b/Landing Page/images/back1.jpg differ diff --git a/Landing Page/images/card-1.jpg b/Landing Page/images/card-1.jpg new file mode 100644 index 0000000..d9006db Binary files /dev/null and b/Landing Page/images/card-1.jpg differ diff --git a/Landing Page/images/card-2.jpg b/Landing Page/images/card-2.jpg new file mode 100644 index 0000000..075f4d2 Binary files /dev/null and b/Landing Page/images/card-2.jpg differ diff --git a/Landing Page/images/card-3.jpg b/Landing Page/images/card-3.jpg new file mode 100644 index 0000000..b5d2dfe Binary files /dev/null and b/Landing Page/images/card-3.jpg differ diff --git a/Landing Page/images/dfs.jpg b/Landing Page/images/dfs.jpg new file mode 100644 index 0000000..3a25f29 Binary files /dev/null and b/Landing Page/images/dfs.jpg differ diff --git a/Landing Page/images/logo - Copy.png b/Landing Page/images/logo - Copy.png new file mode 100644 index 0000000..b113810 Binary files /dev/null and b/Landing Page/images/logo - Copy.png differ diff --git a/Landing Page/images/logo.png b/Landing Page/images/logo.png new file mode 100644 index 0000000..9d59bb7 Binary files /dev/null and b/Landing Page/images/logo.png differ diff --git a/Landing Page/index.html b/Landing Page/index.html new file mode 100644 index 0000000..822970e --- /dev/null +++ b/Landing Page/index.html @@ -0,0 +1,152 @@ + + + + + + + + + + + + + + + + + + + + Landing Page + + + + +
+
+ + +
+ Search + +
+
+
+ + + + +
+
+
+ +

Food Fusion

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto consectetur sit illo in minus soluta ratione est rerum nobis? Iste quisquam quis architecto debitis quo sequi possimus dolor laboriosam placeat.

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

Food Menu

+
+
+ card1 +
+

Burger

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, optio illo esse consequuntur praesentium explicabo nisi. +

+
+
+ +
+
+
+ card2 +
+

Pasta

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, optio illo esse consequuntur praesentium explicabo nisi. +

+
+
+ +
+
+
+ card3 +
+

Grilled Meat

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, optio illo esse consequuntur praesentium explicabo nisi. +

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

Our Story

+
+

+ Food Fusion is all about redefining ‘Cooking’ for you! +

+ + It’s the solution to that never ending problem of preparing high quality delicious food and curtailing the eating out habits of your loved ones! With modernized and yet simple cooking methods, you are surely in for a flavorsome treat with our recipes that will surely make you the next talk of the town!

+ Being Pakistan’s first digital food video portal, we understand your difficulty of being unable to execute that perfect dish just by going through those long recipes & ending up with something not as good as the one you see on paper. Hence, we make sure to get this covered by bringing in videos that will help you prepare the same delicious food as you see in our videos. + +
+
+ +
+ + + + + + + + + + \ No newline at end of file diff --git a/Landing Page/style.css b/Landing Page/style.css new file mode 100644 index 0000000..c39b45d --- /dev/null +++ b/Landing Page/style.css @@ -0,0 +1,657 @@ + body { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + background: linear-gradient(45deg, #292828, #000000); +} + section { + overflow: auto; + } + +/* header start */ + +.navbar { + background: linear-gradient(45deg, #292828, #000000); + display: flex; + justify-content: space-between; + align-items: center; + height: 80px; + padding: 0 20px; + box-shadow: 0 4px 8px 0 rgba(71, 33, 1, 0.2); + transition-duration: 0.5s; + position: fixed; + z-index: 1; + min-width: 100%; +} + +nav { + display: inline-block; + margin: 0 0 0 auto; +} + +.nav-logo img{ + max-height: 60px !important; + padding-left: 60px; +} + + +.navbar a { + visibility: hidden; + font-weight: 600; + font-family: cursive; + color: #f49d00; + text-align: center; + text-decoration: none; + margin: 0 10px; + font-size: 1rem; + transition: color 0.3s; +} + +.navbar a:hover { + color: #fff; + transition-duration: 0.4s; +} + +.search { + margin-right: 60px; + justify-content: center; + align-items: center; + display: inline-block; +} + + +.search-box { + height: 35px; + margin: 0 10px; + outline: none; + border: 2px solid #f49d00; + background-color: #f49d00; + border-radius: 20px; + padding-left: 10px; + transition-duration: 0.5s; + padding-right: 38px; +} +.search-box::placeholder { + color: #000000; +} + +.material-symbols-outlined { + position: absolute; + right: 100px; + top: 28px; + font-weight: 600 !important; +} + +/* header end */ + + + + +/* intro section start */ +.intro-section { + min-height: 750px; + min-width: 100%; + display: flex; + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; + background-image: url(./images/back1.jpg); + background-repeat: no-repeat; + background-size: cover; + box-shadow: 0 4px 8px 0 #ec6916; + transition-duration: 0.5s; +} +.intro-section:hover { + box-shadow: 0 4px 8px 0 #3f3e3d; + transition: 0.5s; + +} +.intro-section-text { + width: 50%; + margin-left: 60px; + line-height: 1.5rem; +} + +.intro-section-text .logo img { + min-width: 6rem; + max-width: 180px; + +} + +.intro-section-text h1 { + font-size: 4rem; + min-width: 130%; + font-family: 'Brush Script MT', cursive; + font-weight: 900; + color: #f49d00; + margin-top: 20px; +} +.intro-section-text p { + text-align: justify; + font-family: Arial, Helvetica, sans-serif; + text-justify: inter-word; + color: #c0bebe; + min-width: 160%; + font-size: 1.2rem; + margin-top: 0px; +} +.search-box-2 { + display: inline-block; +} +.search-box-input { + visibility: hidden; + box-shadow: 0 4px 8px 0 #3f3e3d; + transition-duration: 0.5s; + min-width: auto; + min-height: 1.5rem; + border: none; + outline: none; + padding: 1rem; + border-radius: 25px; +} +.search-box-input:hover { + box-shadow: 0 4px 8px 0 #ec6916; +} +.search-box-btn { + visibility: hidden; + max-width: 8rem; + min-height: 3.5rem; + border: none; + outline: none; + padding: 1rem; + border-radius: 25px; + position: absolute; + left: 62%; + background-color: #f49d00; + border: 1px solid #ec6916; + font-size: 15px; + font-weight: 600; + font-family: cursive; +} +.intro-section-img { + content-visibility: hidden; + width: 50%; + text-align: start; + float: left; + +} +/* media query start */ +@media screen and (min-width: 1352px) { + .intro-section-text h1{ + font-size: 6rem; + + } + .intro-section-text p { + font-size: 1.3rem; + min-width: 90%; + } + .search-box-input { + visibility: visible; + min-width: 20rem; + } + .search-box-btn { + visibility: visible; + position: absolute; + left: 21.4%; + } + .navbar a { + margin: 0 20px; + font-size: 1.3rem; + visibility: visible; + } +} + +@media screen and (min-width: 728px) { + .intro-section-text h1{ + font-size: 6rem; + } + .intro-section-text p { + font-size: 1.3rem; + min-width: 90%; + } + .navbar a { + margin: 0 15px; + font-size: 1.1rem; + visibility: visible; + } + +} +@media screen and (min-width: 600px) { + .intro-section-text h1{ + font-size: 5rem; + } + .intro-section-text p { + font-size: 1.3rem; + min-width: 80%; + } + .navbar a { + visibility: visible; + } + +} + + +/* media query end */ + +.intro-section button:hover { + background-color: #ec6916; + color: #ffffff; + cursor: pointer; +} +/* intro section end */ + +/* food section start */ +.food-section { + height: 700px; + min-width: 100%; + box-shadow: 0 8px 8px 0 #ec6916; + margin-bottom: 7rem; + transition: 0.6s; + margin-top: 0rem; + +} +.food-section:hover { + box-shadow: 0 8px 8px 0 #3f3e3d; + transition: 0.6s; + +} +.food-menu-title { + text-align: center; + font-size: 5rem; + font-family: 'Brush Script MT', cursive; + font-weight: 900; + color: #f49d00; + margin-bottom: 0.5rem; +} + +.cards { + margin-top: 0rem; + display: flex; + align-items: center; + justify-content: center; + padding-left: 60px; + padding-right: 60px; + padding-bottom: 5rem; +} +.card { + min-width: 33.2%; + float: left; + min-height: 400px; + box-shadow: 0 4px 8px 0 #ec6916; + transition: 0.5s; + margin: 15px; + border-radius: 20px; + float: left; +} +.card:hover { + box-shadow: 0 4px 8px 0 #3f3e3d; + transform: scale(1.1); + transition: 1s; +} +.card img{ + max-width: 100%; + max-height: 250px; + border-radius: 20px; +} +.card-details { + padding: 2px 16px; +} +.card-title { + color: #ec6916; + font-size: 2.5rem; + line-height: 1rem; + font-family: 'Brush Script MT', cursive; + margin-bottom: 25px; + margin-top: 35px; +} +.card-description { + color: #c0bebe; + margin-bottom: 25px; +} + +.food-section button { + background-color: #ec6916; + color: #000000; + outline: none; + border: none; + min-width: 10rem; + min-height: 3rem; + border-top-right-radius: 20px; + border-bottom-left-radius: 20px; + font-weight: 700; + font-size: 20px; + padding: 2px; +} +.food-section button:hover { + background-color: #ff5500; + color: #ffffff; + cursor: pointer; + transition-duration: 0.6s; +} + +/* Story section start */ +.our-story-section { + min-width: 100%; + margin-bottom: 6rem; + text-align: center; + place-items: center; +} +.our-story-title { + text-align: center; + font-size: 5rem; + font-family: 'Brush Script MT', cursive; + font-weight: 900; + color: #f49d00; + margin: 0rem; +} + +.container-story { + font-family: "arial"; + font-size: 24px; + display: grid; + place-items: center; + padding-left: 60px; + padding-right: 60px; + margin-bottom: 50px; + color: #c0bebe; + text-align: center; + +} + +.typed { + overflow: hidden; + animation-delay: 6s; + white-space: nowrap; + border-right: 2px solid; + width: 0; + -webkit-animation: typing 6s steps(50, end) infinite, blinking 1s linear infinite both; + animation: typing 6s steps(50, end) infinite, blinking 1s linear infinite both; +} + +@-webkit-keyframes typing { + from { width: 0 } + to { width: 60% } + } + +@keyframes typing { + from { width: 0 } + to { width: 60% } + } + +@keyframes blinking { + 0% { border-right-color: transparent } + 50% { border-right-color: #c0bebe } + 100% { border-right-color: transparent } + } + + + +/* Story section end */ + + +/* Footer styles */ +footer { + background-color: #333; + color: #fff; + padding: 20px; + text-align: center; + display: flex; + justify-content: space-between; + align-items: center; + box-shadow: 4px 4px 8px 8px #ff8000; + transition-duration: 0.4s; +} +footer:hover { + box-shadow: 4px 4px 8px 8px #3f3e3d; + transition-duration: 0.4s; + +} + +/* Logo styles */ +.footer-logo img { + margin-left: 60px; + width: 70px; /* Adjust the width as needed */ + height: 70px; +} + +/* Footer content styles */ +.footer-content { + text-align: right; + margin-right: 60px; +} + +/* Hyperlink styles */ +.footer-content a { + color: #fff; + text-decoration: none; + margin: 0 10px; +} + +/* Change link color on hover */ +.footer-content a:hover { + color: #f49d00; /* Change to your preferred link hover color */ +} + +.flicker-3 { + -webkit-animation: flicker-3 5s linear infinite both; + animation: flicker-3 5s linear infinite both; +} + @-webkit-keyframes flicker-3 { + 0%, + 100% { + opacity: 1; + } + 32.98% { + opacity: 1; + } + 33% { + opacity: 0; + } + 34% { + opacity: 0; + } + 34.02% { + opacity: 1; + } + 34.98% { + opacity: 1; + } + 35% { + opacity: 0; + } + 35.9% { + opacity: 0; + } + 35.92% { + opacity: 1; + } + 38.98% { + opacity: 1; + } + 39% { + opacity: 0; + } + 39.8% { + opacity: 0; + } + 39.82% { + opacity: 1; + } + 83.98% { + opacity: 1; + } + 84% { + opacity: 0; + } + 84.9% { + opacity: 0; + } + 84.92% { + opacity: 1; + } + } + @keyframes flicker-3 { + 0%, + 100% { + opacity: 1; + } + 32.98% { + opacity: 1; + } + 33% { + opacity: 0; + } + 34% { + opacity: 0; + } + 34.02% { + opacity: 1; + } + 34.98% { + opacity: 1; + } + 35% { + opacity: 0; + } + 35.9% { + opacity: 0; + } + 35.92% { + opacity: 1; + } + 38.98% { + opacity: 1; + } + 39% { + opacity: 0; + } + 39.8% { + opacity: 0; + } + 39.82% { + opacity: 1; + } + 83.98% { + opacity: 1; + } + 84% { + opacity: 0; + } + 84.9% { + opacity: 0; + } + 84.92% { + opacity: 1; + } + } + + .bounce-top { + -webkit-animation: bounce-top 6s both; + animation: bounce-top 6s both; +} + @-webkit-keyframes bounce-top { + 0% { + -webkit-transform: translateY(-45px); + transform: translateY(-45px); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + opacity: 1; + } + 24% { + opacity: 1; + } + 40% { + -webkit-transform: translateY(-24px); + transform: translateY(-24px); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + 65% { + -webkit-transform: translateY(-12px); + transform: translateY(-12px); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + 82% { + -webkit-transform: translateY(-6px); + transform: translateY(-6px); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + 93% { + -webkit-transform: translateY(-4px); + transform: translateY(-4px); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + 25%, + 55%, + 75%, + 87% { + -webkit-transform: translateY(0px); + transform: translateY(0px); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + 100% { + -webkit-transform: translateY(0px); + transform: translateY(0px); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + opacity: 1; + } + } + @keyframes bounce-top { + 0% { + -webkit-transform: translateY(-45px); + transform: translateY(-45px); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + opacity: 1; + } + 24% { + opacity: 1; + } + 40% { + -webkit-transform: translateY(-24px); + transform: translateY(-24px); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + 65% { + -webkit-transform: translateY(-12px); + transform: translateY(-12px); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + 82% { + -webkit-transform: translateY(-6px); + transform: translateY(-6px); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + 93% { + -webkit-transform: translateY(-4px); + transform: translateY(-4px); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + 25%, + 55%, + 75%, + 87% { + -webkit-transform: translateY(0px); + transform: translateY(0px); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + 100% { + -webkit-transform: translateY(0px); + transform: translateY(0px); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + opacity: 1; + } + } + \ No newline at end of file