From 21850c3c87aa6416688751a271060a1bfa89f34d Mon Sep 17 00:00:00 2001 From: Hassan Date: Fri, 17 Feb 2023 20:23:52 +0300 Subject: [PATCH] waan badalay --- index.html | 120 +++++++++++++++++++ styles.css | 335 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 455 insertions(+) diff --git a/index.html b/index.html index 64867a7..6ae7aad 100644 --- a/index.html +++ b/index.html @@ -1 +1,121 @@ + + + + + + + + Document + + + + +
+
+

+ TASTE THE
+ DIFFERENCE +

+

Local. Fresh & Delicious

+
+
+ +
+
+ +
+

About Fatuma Restaurant

+

+ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy text ever + since the 1500s, when an unknown printer took a galley of type and + scrambled it to make a type specimen book. It has survived not only five + centuries, but also the leap into electronic typesetting, remaining + essentially unchanged. It was popularised in the 1960s with the release + of Letraset sheets containing Lorem Ipsum passages, and more recently + with desktop publishing software like Aldus PageMaker including versions + of Lorem Ipsum. +

+
+ +
+ +
+ +
+

Contact Us

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

Fatuma Restaurant

+
+ About + Menu + Catering + Contact +
+
+ + + + diff --git a/styles.css b/styles.css index 945c1b5..8bb3684 100644 --- a/styles.css +++ b/styles.css @@ -1 +1,336 @@ /* Paste your css code here */ +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} +:root { + --head-bg: #454f6f; + --foot-bg: #e6834c; +} + +nav { + position: fixed; + z-index: 10; + left: 0; + right: 0; + top: 0; + font-family: "Montserrat", sans-serif; + padding: 0 5%; + height: 100px; + background-color: var(--head-bg); +} +nav .logo { + float: left; + width: 40%; + height: 100%; + display: flex; + align-items: center; + color: #fff; +} +.logo .title { + font-size: 1.5em; +} +nav .links { + float: right; + padding: 0; + margin: 0; + width: 60%; + height: 100%; + display: flex; + justify-content: space-around; + align-items: center; +} +nav .links li { + list-style: none; +} +nav .links a { + display: block; + padding: 1em; + font-size: 16px; + font-weight: bold; + color: #fff; + text-decoration: none; +} +#nav-toggle { + position: absolute; + top: -100px; +} +nav .icon-burger { + display: none; + position: absolute; + right: 5%; + top: 50%; + transform: translateY(-50%); +} +nav .icon-burger .line { + width: 30px; + height: 5px; + background-color: #fff; + margin: 5px; + border-radius: 3px; + transition: all 0.3s ease-in-out; +} +/* */ +main { + position: relative; + margin-top: 100px; + display: flex; + align-items: center; + justify-content: space-around; + max-width: 100%; + height: 80%; + background-color: var(--foot-bg); +} +main .left-side { + width: 40%; + display: flex; + padding: 10px; + color: #fff; + font-size: 1.5em; + text-align: left; + flex-direction: column; +} +main .left-side h1 { + font-size: 3em; + font-weight: bold; +} +main p { + margin-top: 15px; +} +main .right-side { + width: 40%; + margin: 20px 0; + display: flex; + flex-direction: column; +} +.right-side img { + width: 100%; + height: 100%; + object-fit: contain; + border-radius: 50%; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + -ms-border-radius: 50%; + -o-border-radius: 50%; +} +/* */ +.about-us-container { + background-color: #f2f2f2; + text-align: center; + padding: 30px; + border-radius: 20px; + width: 90%; + margin: 20px auto 0 auto; + -webkit-border-radius: 20px; + -moz-border-radius: 20px; + -ms-border-radius: 20px; + -o-border-radius: 20px; +} +.about-us-container h1 { + text-transform: uppercase; +} +.about-us-container h1, +p { + padding: 20px 0; +} +.about-us-container p { + font-size: 1.2em; +} +/* */ +.menu-container { + max-width: 1200px; + margin: 0 auto; +} + +.menu-items { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + list-style: none; + margin-top: 15px; +} + +.menu-item { + width: 30%; + background-color: #fff; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + margin-bottom: 10px; + text-align: left; +} + +.menu-item img { + max-width: 100%; + height: auto; + margin-bottom: 10px; +} +/* */ +/* Styles for the form container */ +.form-container { + width: 100%; + padding: 20px; + border-radius: 10px; + background-color: #f2f2f2; +} +form { + width: 80%; + margin: 0 auto; +} + +/* Styles for the form inputs */ +input[type="text"], +input[type="email"], +textarea { + width: 100%; + padding: 12px; + margin: 8px 0; + border: 1px solid #ccc; + border-radius: 4px; + resize: vertical; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; +} + +/* Styles for the submit button */ +input[type="submit"] { + width: 100%; + background-color: var(--foot-bg); + color: white; + padding: 12px 20px; + border: none; + border-radius: 4px; + cursor: pointer; +} + +/* Styles for the submit button on hover */ +input[type="submit"]:hover { + background-color: #f59c6c; +} + +/* Styles for the form label */ +label { + font-weight: bold; +} + +/* Styles for the form title */ +h1 { + text-align: center; +} +/* */ +.container1 { + width: 100%; + background-color: var(--head-bg); + display: flex; + justify-content: space-between; + align-items: center; + color: #fff; +} +.container1 .title2 { + width: 40%; + color: #fff; +} +.container1 .menu-list { + width: 40%; + padding: 15px; + margin-right: 10px; + cursor: pointer; +} +.container1 .menu-list .list { + font-size: 1.2em; +} + +/* */ + +footer { + background-color: var(--foot-bg); + color: #fff; + text-align: center; + padding: 20px; +} + +/* */ +@media screen and (max-width: 768px) { + nav .logo { + float: none; + width: auto; + justify-content: center; + } + nav .links { + float: none; + position: fixed; + z-index: 9; + left: 0; + right: 0; + top: 100px; + bottom: 100%; + width: auto; + height: auto; + flex-direction: column; + justify-content: space-evenly; + background-color: rgba(0, 0, 0, 0.8); + overflow: hidden; + box-sizing: border-box; + transition: all 0.5s ease-in-out; + } + nav .links a { + font-size: 20px; + } + nav :checked ~ .links { + bottom: 0; + } + nav .icon-burger { + display: block; + } + nav :checked ~ .icon-burger .line:nth-child(1) { + transform: translateY(10px) rotate(225deg); + } + nav :checked ~ .icon-burger .line:nth-child(3) { + transform: translateY(-10px) rotate(-225deg); + } + nav :checked ~ .icon-burger .line:nth-child(2) { + opacity: 0; + } + + main { + flex-direction: column; + } + main .left-side { + width: 100%; + text-align: center; + margin: 0; + padding: 0; + } + .menu-items { + flex-direction: column; + } + .menu-item { + width: 80%; + margin: 10px auto; + } + + input[type="text"], + input[type="email"], + input[type="submit"], + textarea { + width: 100%; + padding: 8px; + } + .container1 { + flex-direction: column; + } + .title2 { + text-align: center; + width: 100%; + margin: 0; + } + .menu-list { + text-align: center; + width: 100%; + margin: 0px; + padding: 0px; + } +}