Add files via upload

Alhadydy · Dec 10, 2023 · e4120c8 · e4120c8
commit e4120c8
Show file tree

Hide file tree

Showing 2 changed files with 127 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html> 
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>project_1</title>
+  <link href="stylesheet.css" rel="stylesheet" type="text/css" />
+</head>
+  <body>
+    <h1>menu</h1>
+    <div class="parent">
+      <div class="col-lg-4 col-md-6 col-sm-11">
+        <span id="beeff">beef</span>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium at rem voluptas porro culpa laborum architecto ab omnis est optio error, a libero expedita quo nihil minima? Voluptatibus, cupiditate numquam.
+        </p>
+      </div>
+      <div class="col-lg-4 col-md-6 col-sm-11">
+        <span id="chickenn">chicken</span>
+        <p>
+          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam iusto quidem beatae quam, culpa saepe ex architecto porro, placeat perspiciatis vero temporibus nostrum dicta. Porro odio consectetur at sit et.
+        </p>
+      </div>
+      <div class="sushi col-lg-4 col-md-12 col-sm-11">
+        <span id="sushii">sushi</span>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium vitae omnis aspernatur nisi eligendi expedita! A commodi fugit soluta reiciendis deserunt corporis esse, cum, iste nemo, dolorum veniam ea porro!
+        </p>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/stylesheet.css b/stylesheet.css
@@ -0,0 +1,95 @@
+*{
+    box-sizing: border-box;
+}        
+body  {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    vertical-align: baseline;
+    font-family:cursive;
+    line-height: 1.6;
+}
+p{
+    margin: 0;
+    padding: 50px 10px 10px 10px;
+    font-size: 100%;
+}
+h1{
+    text-align: center;
+}
+.parent{
+    display:flex;
+    flex-wrap: wrap;
+    justify-content:space-evenly;
+    width: 100%;
+}
+.parent > div{
+    padding: 0;
+    border: 3px solid black;
+    background: rgb(202, 202, 187);
+}
+#beeff,
+#chickenn,
+#sushii{
+    border-left: 3px solid black;
+    border-bottom:3px solid black;
+    float: right;
+    padding:0 10px;
+    background-color: rgb(0, 247, 255);
+    font-size: 175% ;
+}
+
+/* desktop-view */
+@media (min-width: 992px) {
+    .col-lg-1{width: 8.33%;}
+    .col-lg-2{width: 16.66%;}
+    .col-lg-3{width: 25%;}
+    .col-lg-4{width: calc(33.33% - 10px);}
+    .col-lg-5{width: 41.66%;}
+    .col-lg-6{width: 50%;}
+    .col-lg-7{width: 58.33%;}
+    .col-lg-8{width: 66.66%;}
+    .col-lg-9{width: 74.99%;}
+    .col-lg-10{width: 83.33%;}
+    .col-lg-11{width: 91.66%;}
+    .col-lg-12{width: 100%;}
+}
+
+/* tablet-view  */
+@media (min-width: 768px)and (max-width: 991px) {
+    .col-md-1{width: 8.33%;}
+    .col-md-2{width: 16.66%;}
+    .col-md-3{width: 25%;}
+    .col-md-4{width: 33.33%;}
+    .col-md-5{width: 41.66%;}
+    .col-md-6{width: calc(50% - 10px);}
+    .col-md-7{width: 58.33%;}
+    .col-md-8{width: 66.66%;}
+    .col-md-9{width: 74.99%;}
+    .col-md-10{width: 83.33%;}
+    .col-md-11{width: 91.66%;}
+    .col-md-12{
+        margin: 7px;
+        width: 100%;
+    }
+   }
+
+/* /* mobile-view */
+
+@media (max-width: 767px){
+    .col-sm-1{width: 8.33%;}
+    .col-sm-2{width: 16.66%;}
+    .col-sm-3{width: 25%;}
+    .col-sm-4{width: 33.33%;}
+    .col-sm-5{width: 41.66%;}
+    .col-sm-6{width: 50%;}
+    .col-sm-7{width: 58.33%;}
+    .col-sm-8{width: 66.66%;}
+    .col-sm-9{width: 74.99%;}
+    .col-sm-10{width: 83.33%;}
+    .col-sm-11{
+        margin: 10px;
+        width: 91.66%;
+    }
+    .col-sm-12{width: 100%;}
+}