diff --git a/FriendsMeal/css/phone.css b/FriendsMeal/css/phone.css new file mode 100644 index 0000000..c8a49ab --- /dev/null +++ b/FriendsMeal/css/phone.css @@ -0,0 +1,105 @@ +/* Navigation Section */ + +#navbar{ + flex-direction: column; + font-size: 1.2rem; +} + +#navbar::before{ + height: 170%; +} + +#navbar ul{ + position: relative; + top: -16px; +} + +#navbar ul li a{ + font-size: 1.1rem; + padding: 3px 5px; + padding-bottom: 6px; +} + +#logo img{ + height: 45px; + margin: -15px -26px; +} + +/* Home Section */ + +#home{ + height: 360px; + padding: 80px 8px; +} + +#home:before{ + height: 585px; +} + +#home p{ + font-size: 1rem; +} + +/* Service Section */ + +#services{ + flex-direction: column; +} + +#services .box { + box-sizing: border-box; + /* border: 2px solid red; */ + padding: 46px 18px; + margin: 12px 10px; + border-radius: 25px; + background-color: rgb(202, 199, 199); +} + +#services .box img{ + height: 5rem; + padding: 4px 20px; +} + +/* Client Section */ + +#clients{ + flex-wrap: wrap; + +} + +#client-selection::before{ + height: 100%; +} +#clients img{ + height: 60px; +} + +/* Contact Section */ + +#contact-box label, #contact-box input, #contact-box textarea{ + font-size: 1rem; +} +#contact-box form{ + width: 80%; + +} + +/* Utility Class */ + +.headingprimary{ + font-size: 2rem; +} + +.headingsecondary{ + font-size: 1.5rem; +} + +.btn{ + font-size: 1.1rem; + padding: 7px 10px; + /* border: 2px solid white; + background-color: gray; + color: white; + margin: 14px 65px; + border-radius: 40px;*/ +} \ No newline at end of file diff --git a/FriendsMeal/css/style.css b/FriendsMeal/css/style.css new file mode 100644 index 0000000..d47a465 --- /dev/null +++ b/FriendsMeal/css/style.css @@ -0,0 +1,273 @@ +/* CSS RESET */ +*{ + margin: 0px; + padding: 0px; +} + +html{ + scroll-behavior: smooth; +} + +/* CSS VARIABLES */ +:root{ + --navbar-height:50px; +} + +/* NAVIGATION BAR */ +#navbar{ + /* border: 2px solid red; */ + display: flex; + align-items: center; + /* justify-content: center; */ + height: 65px; + font-family: 'Orelega One', cursive; + position: sticky; + top: 0; +} + +#navbar::before{ + content: ""; + background-color: black; + position: absolute; + height: 100%; + width: 100%; + z-index: 1; + opacity: 0.7; + /* display: block; */ +} + +/* NAVIGATION BAR: LOGO AND IMAGE */ +#logo{ + margin: 36px 70px; + z-index: 1; +} + +#logo img{ + height: 60px; + margin: -25px -46px; + +} +/* NAVIGATION BAR: LIST STYLING */ + +#navbar ul{ + display: flex; + z-index: 1; +} + +#navbar ul li{ + /* color: white; */ + list-style: none; + font-size: 1.3rem; +} + +#navbar ul li a{ + color: white; + /* display: block; */ + padding: 3px 22px; + text-decoration: none; + /* border: 2px solid blue; */ + border-radius: 32px; +} + +#navbar ul li a:hover{ + color: black; + background-color: white; +} + +/* HOME SECTION */ + +#home{ + display: flex; + flex-direction: column; + /* border: 2px solid red; */ + height: 432px; + justify-content: center; + align-items: center; + padding: 2px 200px; +} + +#home::before{ + content: ""; + background: url("../img/bg1.jpg") no-repeat center center/cover; + position: absolute; + top: 0px; + left: 0; + height: 52%; + width: 100%; + z-index: -1; + opacity: 0.9; +} + +#home h1{ + color: white; + text-align: center; + font-family: 'Merriweather', serif; +} +#home p{ + color: white; + text-align: center; + font-size: 1.5rem; + font-family: 'Merriweather', serif; +} + +/* SERVICES SECTION */ + +#services{ + margin: 35px; + display: flex; + position: relative; + top: -22px; + z-index: -1; +} + +#services .box{ + box-sizing: border-box; + /* border: 2px solid red; */ + padding: 50px 50px; + margin: -15px 12px; + border-radius: 25px; + background-color: rgb(202, 199, 199); + +} + +#services .box:hover{ + box-shadow: 9px 8px #757373; +} + +#services .box img{ + height: 150px; + padding: 10px 5px; + margin: auto; + display: block; +} + +/* CLIENT SECTION */ + +#client-selection{ + /* height: 344px; */ + position: relative; + z-index: -2; +} + +#client-selection::before{ + content: ""; + background: url("../img/bg2.jpg"); + position: absolute; + width: 100%; + height: 100%; + z-index: -1; + opacity: 0.7; +} + +#clients{ + display: flex; + align-items: center; + justify-content: center; +} + +#clients img{ + height: 105px; +} + +.client-item{ + padding: 34px; +} + +/* CONTACT SECTION */ + +#contact{ + position: relative; +} + +#contact::before { + content: ""; + background: url(../img/computer.jpg) no-repeat center center/cover; + position: absolute; + height: 100%; + width: 100%; + z-index: -2; + opacity: 0.4; +} + +#contact-box{ + display: flex; + align-items: center; + justify-content: center; + padding-bottom: 34px; +} +#contact-box input, #contact-box textarea{ + width: 100%; + padding: 0.5rem; + font-size: 1.1rem; + /* text-align: center; */ + font-family: 'Merriweather', serif; + z-index: 1; + +} + +#contact-box label{ + font-size: 1.3rem; + font-family: 'Merriweather', serif; +} + +#contact-box form{ + width: 40%; +} + +#contact-box input[type="submit"]{ + padding: 7px 20px; + margin: 3px 6px; +} + +#contact-box input[type="submit"]:hover{ + background-color: rgb(121, 120, 120); + color: white; + cursor: pointer; +} + +/* FOOTER SECTION */ + +footer{ + text-align: center; + background-color: rgb(42, 31, 31); + color: white; + padding: 5px 10px; +} + +/* UTILITY CLASSES */ + +.headingprimary{ + font-size: 2.8rem; + padding: 20px 12px; + text-align: center; + font-family: 'Merriweather', serif; +} + + +.headingsecondary{ + font-size: 1.8rem; + padding: 6px 20px; + text-align: center; + font-family: 'Merriweather', serif; +} + +p{ + text-align: center; + font-family: 'Merriweather', serif; +} + +.btn{ + padding: 6px 48px; + border: 2px solid white; + background-color: gray; + color: white; + font-size: 1.5rem; + margin: 14px 65px; + border-radius: 40px; +} + +.btn:hover{ + cursor: pointer; + background-color: rgb(128, 119, 119); + color: white; +} \ No newline at end of file diff --git a/FriendsMeal/img/bg1.jpg b/FriendsMeal/img/bg1.jpg new file mode 100644 index 0000000..d92b69d Binary files /dev/null and b/FriendsMeal/img/bg1.jpg differ diff --git a/FriendsMeal/img/bg2.jpg b/FriendsMeal/img/bg2.jpg new file mode 100644 index 0000000..6a46deb Binary files /dev/null and b/FriendsMeal/img/bg2.jpg differ diff --git a/FriendsMeal/img/computer.jpg b/FriendsMeal/img/computer.jpg new file mode 100644 index 0000000..a6392b7 Binary files /dev/null and b/FriendsMeal/img/computer.jpg differ diff --git a/FriendsMeal/img/food-delivery.png b/FriendsMeal/img/food-delivery.png new file mode 100644 index 0000000..a40f021 Binary files /dev/null and b/FriendsMeal/img/food-delivery.png differ diff --git a/FriendsMeal/img/hamburger.jpg b/FriendsMeal/img/hamburger.jpg new file mode 100644 index 0000000..4e386bb Binary files /dev/null and b/FriendsMeal/img/hamburger.jpg differ diff --git a/FriendsMeal/img/logo1.jpg b/FriendsMeal/img/logo1.jpg new file mode 100644 index 0000000..0e31ecf Binary files /dev/null and b/FriendsMeal/img/logo1.jpg differ diff --git a/FriendsMeal/img/logo2.png b/FriendsMeal/img/logo2.png new file mode 100644 index 0000000..926d911 Binary files /dev/null and b/FriendsMeal/img/logo2.png differ diff --git a/FriendsMeal/img/logo3.png b/FriendsMeal/img/logo3.png new file mode 100644 index 0000000..b5bff18 Binary files /dev/null and b/FriendsMeal/img/logo3.png differ diff --git a/FriendsMeal/img/logo4.png b/FriendsMeal/img/logo4.png new file mode 100644 index 0000000..db24ee6 Binary files /dev/null and b/FriendsMeal/img/logo4.png differ diff --git a/FriendsMeal/img/logo5.png b/FriendsMeal/img/logo5.png new file mode 100644 index 0000000..84c6163 Binary files /dev/null and b/FriendsMeal/img/logo5.png differ diff --git a/FriendsMeal/img/logo6.png b/FriendsMeal/img/logo6.png new file mode 100644 index 0000000..72802ed Binary files /dev/null and b/FriendsMeal/img/logo6.png differ diff --git a/FriendsMeal/img/mylogo.png b/FriendsMeal/img/mylogo.png new file mode 100644 index 0000000..4a7ac12 Binary files /dev/null and b/FriendsMeal/img/mylogo.png differ diff --git a/FriendsMeal/img/pizza.jpg b/FriendsMeal/img/pizza.jpg new file mode 100644 index 0000000..565ba50 Binary files /dev/null and b/FriendsMeal/img/pizza.jpg differ diff --git a/FriendsMeal/index.html b/FriendsMeal/index.html new file mode 100644 index 0000000..b74e10e --- /dev/null +++ b/FriendsMeal/index.html @@ -0,0 +1,120 @@ + + + + + + + + Friends Food + + + + + + + + + + +
+

Welcome to Friends meal

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci molestias vero voluptates necessitatibus, + eum fuga obcaecati? Sapiente dolore quo vel. Velit dolorum omnis consectetur quam!

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci molestias vero voluptates necessitatibus, +

+ +
+ +
+

Our Services

+
+
+ +

Food Ordering

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi dicta nisi id quaerat perferendis + illum. Cumque fuga quaerat nisi tenetur id corrupti, incidunt recusandae ut impedit suscipit tempore + consequatur quis?

+
+ +
+ +

Food Catering

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi dicta nisi id quaerat perferendis + illum. Cumque fuga quaerat nisi tenetur id corrupti, incidunt recusandae ut impedit suscipit tempore + consequatur quis?

+
+ +
+ +

Bulk Ordering

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi dicta nisi id quaerat perferendis + illum. Cumque fuga quaerat nisi tenetur id corrupti, incidunt recusandae ut impedit suscipit tempore + consequatur quis?

+
+ +
+
+
+

Our Sponsors

+
+
+ Our Client +
+
+ Our Client +
+
+ Our Client +
+
+ Our Client +
+
+ Our Client +
+
+
+ +
+

Contact Us

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+
+ + + + + \ No newline at end of file