diff --git a/LittleLemonLogo.jpg b/LittleLemonLogo.jpg new file mode 100644 index 0000000..be4bc49 Binary files /dev/null and b/LittleLemonLogo.jpg differ diff --git a/burger.jpg b/burger.jpg new file mode 100644 index 0000000..c4d916a Binary files /dev/null and b/burger.jpg differ diff --git a/cake.jpg b/cake.jpg new file mode 100644 index 0000000..23a1708 Binary files /dev/null and b/cake.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..f75ad05 --- /dev/null +++ b/index.html @@ -0,0 +1,82 @@ + + + + + + + + + Little Lemon + + +
+ + logo + + +
+
+
+
+

Little Lemon

+

Los Angeles

+
+

A new way to eat your food!

+

Welcome To Our Restaurent!

+
+
+ +
+
+
+ pasta +
+
+
+

30% discount

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla ipsum, voluptatum tempore temporibus amet aut vero. Perspiciatis ad minima recusandae?

+
+
+
+

New Menu

+ cake +

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo perspiciatis nostrum sequi impedit fuga alias?

+ see our new menu +
+
+

Book A Table

+ cake +

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo perspiciatis nostrum sequi impedit fuga alias?

+ Book your table now +
+
+

Opening Hours

+ cake +

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo perspiciatis nostrum sequi impedit fuga alias?

+
    +
  • Monday-Friday: 9AM - 9PM
    • +
  • Saturday: 7AM - 11PM
    • +
  • Sunday: 2PM - 11PM
    • +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/momo.jpg b/momo.jpg new file mode 100644 index 0000000..a5d5d96 Binary files /dev/null and b/momo.jpg differ diff --git a/pasta.jpg b/pasta.jpg new file mode 100644 index 0000000..ef1fc74 Binary files /dev/null and b/pasta.jpg differ diff --git a/salad.jpg b/salad.jpg new file mode 100644 index 0000000..9d3fb91 Binary files /dev/null and b/salad.jpg differ diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..68dcc94 --- /dev/null +++ b/styles.css @@ -0,0 +1,184 @@ +body{ + grid-template-columns: repeat(2); + margin: 0%; + padding: 0%; + grid-template-areas: "header header" "main main" "footer footer"; +} + +header{ + grid-area: header; + display: flex; + justify-content: space-between; +} + +nav{ + padding: 10px; + display: flex; + gap:15px; + align-items: center; +} +.navMenu{ + background-color: rgb(15,80,50); + border: 1px solid; + color: white; + font: bold; + padding: 0.7vw; + font-weight: 100; + border-radius: 8px; +} + +.navMenu:hover{ + background-color: rgb(214, 214, 158); + color: rgb(15,80,50); + cursor: pointer; +} +#img:hover{ + cursor: pointer; +} + +.main{ + grid-area: main; +} +.attract{ + display: grid; + grid-template-columns: repeat(3); + grid-template-rows: auto; + grid-template-areas: "left left right"; + background-color: rgb(15,80,50); + color: white; + height: 20em; + border: 1px solid; +} +.content{ + margin-left: 5vmin; + grid-area: left; + padding: 2vmin; + width: 100%; +} +.content-image{ + margin-right: 2vmin; + margin-top: 5vmin; + grid-area: right; + padding-top: 2vmin; +} + +#content-image1{ + border-radius: 10%; +} + +.content > h1{ + color:yellow +} + +.content span{ + text-align: left; +} + +#reservation{ + background-color: rgb(208, 208, 43); + border: none; + color: black; + padding: 2vmin; + margin-top: 3vmin; + border-radius:13cqmin; + border-bottom: 2px solid; + border-right: 2px solid; + font-weight: 200; + font-size: 1.2em; +} + +#reservation:hover{ + transition: all .2s ease-in-out; + transform: scale(1.05); + cursor: pointer; +} + +.discount{ + padding-left: 2vmin; + padding-top: 0.7vmin; + color: rgb(213, 234, 241); + background-image: url('pasta.jpg'); + margin-top: 15vh; + grid-area: main; + margin-left: 25vmin; + margin-right: 25vmin; + padding-bottom: 5vmin; + border-radius: 10px; + height: 15vmin; + +} +.discount>p{ + color: rgb(232, 232, 132); +} + +.discount:hover{ + transition: all .2s ease-in-out; + transform: scale(1.03); + cursor: pointer; +} + +.cardView{ + margin-top: 5vmin; + display: flex; + gap: 5vmin; + justify-content: center; +} + +.card{ + width: 50vmin; + text-align: left; + box-shadow: 0 5px 6px 0 rgb(124, 89, 89); + background-color: antiquewhite; +} + +.card:hover{ + transition: all .2s ease-in-out; + transform: scale(1.05); + cursor: pointer; +} +.card > h3, .card > p, .card > a, .card li{ + margin-left: 5px; + font-size: 2.5vmin; +} + +.card > a:hover{ + color: #d6249f; +} + +.footer{ + display: flex; + grid-area: footer; + height: 30mvin; + gap: 2.5vmin; + padding-top: 3vmin; + padding-left: 5vmin; + padding-bottom: 2vmin; +} +hr{ + margin-top: 15px; + height: 3px; + background-color: black; +} +#insta,#twitter-x,#facebook{ + font-size: 4vmin; + font-weight: 100; + color: rgb(25, 44, 62); + border-radius: 50%; + border: solid rgb(222, 92, 92) 1px; + padding: 1vmin; + +} + +#insta:hover{ + background: #d6249f; + background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); + color:white; +} +#twitter-x:hover{ + background-color: black; + color: white; +} +#facebook:hover{ + background-color: white; + color: #3b5998; +}