diff --git a/submissions/ayobamiJoshua/CSS/img 1.png b/submissions/ayobamiJoshua/CSS/img 1.png new file mode 100644 index 000000000..984254438 Binary files /dev/null and b/submissions/ayobamiJoshua/CSS/img 1.png differ diff --git a/submissions/ayobamiJoshua/CSS/img 2.png b/submissions/ayobamiJoshua/CSS/img 2.png new file mode 100644 index 000000000..d0db89cf9 Binary files /dev/null and b/submissions/ayobamiJoshua/CSS/img 2.png differ diff --git a/submissions/ayobamiJoshua/CSS/img 4.png b/submissions/ayobamiJoshua/CSS/img 4.png new file mode 100644 index 000000000..3f862e605 Binary files /dev/null and b/submissions/ayobamiJoshua/CSS/img 4.png differ diff --git a/submissions/ayobamiJoshua/CSS/img 5.png b/submissions/ayobamiJoshua/CSS/img 5.png new file mode 100644 index 000000000..d724ccffc Binary files /dev/null and b/submissions/ayobamiJoshua/CSS/img 5.png differ diff --git a/submissions/ayobamiJoshua/CSS/img3.png b/submissions/ayobamiJoshua/CSS/img3.png new file mode 100644 index 000000000..dfd380089 Binary files /dev/null and b/submissions/ayobamiJoshua/CSS/img3.png differ diff --git a/submissions/ayobamiJoshua/CSS/index.html b/submissions/ayobamiJoshua/CSS/index.html new file mode 100644 index 000000000..93427714e --- /dev/null +++ b/submissions/ayobamiJoshua/CSS/index.html @@ -0,0 +1,101 @@ + + + + + + + Food Dash + + +
+
+ + +
+ + +
+
+
+ +
+
+
+

Order Your Best
food anytime

+

Hey, Our delicious food is waiting for you,
+ We are always near to you with fresh item of food

+
+ +
+
+ +
+
+ +
+
+

Popular Dishes

+
+ +
+ +
+

Chicken & Chips

+
+
+

Grilled chicken served with potatoe chips.

+
+
+ #4,500 +
+
+ +
+ +
+

waffle

+
+
+

waffle served with honey

+
+
+ #4,500 +
+
+ +
+ +
+

Salad

+
+
+

Salad mash

+
+
+ #4,500 +
+
+ +
+ +
+

Chips

+
+
+

potatoe chips.

+
+
+ #5,000 +
+
+
+
+
+ + \ No newline at end of file diff --git a/submissions/ayobamiJoshua/CSS/style.css b/submissions/ayobamiJoshua/CSS/style.css new file mode 100644 index 000000000..3d34bf6dc --- /dev/null +++ b/submissions/ayobamiJoshua/CSS/style.css @@ -0,0 +1,271 @@ +*,::after,::before{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + margin: 0 100px; + background-color: bisque; +} + + + +.nav{ + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 30px 0; +} + +.nav .logo h1{ + font-weight: 600; + font-family: sans-serif; + color: black; +} + +.nav .logo b{ + color: #ff511c; +} + +.nav ul{ + display: flex; + list-style: none; +} + +.nav ul li{ + margin-right: 30px; +} + +.nav ul li a{ + text-decoration: none; + color: black; + font-family: sans-serif; + font-weight: 500; + font-size: 17px; +} + + + +.nav ul .active::after{ + content: ''; + width: 50%; + height: 3px; + background-color: #ff511c; + display: flex; + position: relative; + margin-left: 10px; + +} + + + +input{ + padding: 10px 20px; + cursor: pointer; + font-weight: 600; +} + +.signin{ + background: transparent; + border: none; +} + +.signup{ + background-color: #ff511c; + color: white; + outline: none; + border: none; + border-radius: 5px; +} + + + + +.content{ + display: grid; + grid-template-columns: 50% auto; + gap: 30px; + margin-top: 120px; + align-items: center; + justify-content: space-between; + width: 100%; + +} + + + + + +.content .content-left{ + display: block; + width: 100%; +} + +.content .content-left .info{ + max-width: 100%; + display: flex; + flex-direction: column; +} + +.content .content-left .info h2{ + font-size: 60px; + font-family: sans-serif; + margin-bottom: 30px; +} + +.content .content-left .info p{ + font-size: 20px; + line-height: 2pc; + margin-bottom: 30px; + font-family: sans-serif; +} + + + + +.content .content-left button{ + padding: 10px 23px; + background-color: #ff511c; + color: white; + border-radius: 5px; + border: none; + cursor: pointer; +} + + + + + +.content .content-right{ + display: block; + width: 150px; +} + +.content .content-right img{ + width: 200px; + height: auto; + position: relative; + user-select: none; + animation: rotate 10s linear infinite; +} + + + + + +@keyframes rotate { + 0%{ + transform: rotate(0deg); + } + 100%{ + transform: rotate(360deg); + } +} + + + + + +.category{ + width: 100%; + display: flex; + margin-bottom: 50px; + justify-content: center; +} + +.category .list-items{ + width: 90%; + position: relative; + margin-top: 80px; +} + + +.category .list-items h3{ + font-size: 20px; + font-weight: 600; + font-family: sans-serif; + margin-bottom: 70px; +} + +.category .list-items .card-list{ + display: grid; + grid-template-columns:repeat(4, 1fr); +} + +.category .card-list .card{ + width: 200px; + height: auto; + display: block; + padding: 10px; + border-radius: 10px; + position: relative; + background: white; + outline: 2px solid #faad96; +} + +.category .card-list .card img{ + width: 60px; + height: auto; + bottom: 110px; + left: 70px; + object-fit: cover; + object-position: center; + background-repeat: no-repeat; + position: absolute; + box-shadow:0 20px 20px #faad96; + border-radius: 50%; + +} + +.category .card-list .card .food-tittle{ + padding: 40px 0 10px; +} + + +.category .card-list .card .food-tittle h1{ + text-align: center; + font-weight: bold; + font-size: 16px; + font-family: sans-serif; +} + + +.category .card .desc-food p{ + font-size: 13px; + text-align: center; + font-weight: 500; + margin-bottom: 20px; + font-family: sans-serif; +} + +.category .card .price{ + display: flex; + align-items: center; + justify-content: space-between; +} + + +@media screen and (min-width: 600px) { + div{ + padding: 25px 35px; + } + div li { + display: inline; + padding: 8px; + float: right; + } + } + + + +::-webkit-scrollbar{ + width: 10px; +} + +::-webkit-scrollbar-thumb{ + border-radius: 20px; + background-color: #ff511c; +} +