diff --git a/Images/1170300.jpg b/Images/1170300.jpg new file mode 100644 index 0000000..d4b5f5a Binary files /dev/null and b/Images/1170300.jpg differ diff --git a/Images/276970.jpg b/Images/276970.jpg new file mode 100644 index 0000000..de41a22 Binary files /dev/null and b/Images/276970.jpg differ diff --git a/Images/676526.jpg b/Images/676526.jpg new file mode 100644 index 0000000..aa1a590 Binary files /dev/null and b/Images/676526.jpg differ diff --git a/Images/Background.jpg b/Images/Background.jpg new file mode 100644 index 0000000..0f5c0cd Binary files /dev/null and b/Images/Background.jpg differ diff --git a/Images/Cauliflower Buffalo Wings.jpeg b/Images/Cauliflower Buffalo Wings.jpeg new file mode 100644 index 0000000..8a5a3da Binary files /dev/null and b/Images/Cauliflower Buffalo Wings.jpeg differ diff --git a/Images/Macaroni with meatballs.JPG b/Images/Macaroni with meatballs.JPG new file mode 100644 index 0000000..75a1cea Binary files /dev/null and b/Images/Macaroni with meatballs.JPG differ diff --git a/Images/Macaroni with meatballs1.JPG b/Images/Macaroni with meatballs1.JPG new file mode 100644 index 0000000..616ffc5 Binary files /dev/null and b/Images/Macaroni with meatballs1.JPG differ diff --git a/Images/Polpette alla Macarrones.jpeg b/Images/Polpette alla Macarrones.jpeg new file mode 100644 index 0000000..b6e0e8a Binary files /dev/null and b/Images/Polpette alla Macarrones.jpeg differ diff --git a/Images/S1.png b/Images/S1.png new file mode 100644 index 0000000..bf72786 Binary files /dev/null and b/Images/S1.png differ diff --git a/Images/Steak-logo.png b/Images/Steak-logo.png new file mode 100644 index 0000000..ae1d902 Binary files /dev/null and b/Images/Steak-logo.png differ diff --git a/Images/Steak.jpg b/Images/Steak.jpg new file mode 100644 index 0000000..9b62be7 Binary files /dev/null and b/Images/Steak.jpg differ diff --git a/Images/T-Bone Steak.jpeg b/Images/T-Bone Steak.jpeg new file mode 100644 index 0000000..7f458fc Binary files /dev/null and b/Images/T-Bone Steak.jpeg differ diff --git a/Images/Tres leche.jpg b/Images/Tres leche.jpg new file mode 100644 index 0000000..88e6be5 Binary files /dev/null and b/Images/Tres leche.jpg differ diff --git a/Images/Wings-logo.JPG b/Images/Wings-logo.JPG new file mode 100644 index 0000000..025c68e Binary files /dev/null and b/Images/Wings-logo.JPG differ diff --git a/Images/background2.jpg b/Images/background2.jpg new file mode 100644 index 0000000..f9ab1f8 Binary files /dev/null and b/Images/background2.jpg differ diff --git a/Images/dinner.jpeg b/Images/dinner.jpeg new file mode 100644 index 0000000..3d14c55 Binary files /dev/null and b/Images/dinner.jpeg differ diff --git a/Images/dinner2.jpeg b/Images/dinner2.jpeg new file mode 100644 index 0000000..a0a9bd0 Binary files /dev/null and b/Images/dinner2.jpeg differ diff --git a/Images/haku smoked shoyu spaghetti.jpeg b/Images/haku smoked shoyu spaghetti.jpeg new file mode 100644 index 0000000..91411ff Binary files /dev/null and b/Images/haku smoked shoyu spaghetti.jpeg differ diff --git a/Images/milkshake.jpg b/Images/milkshake.jpg new file mode 100644 index 0000000..d9459ae Binary files /dev/null and b/Images/milkshake.jpg differ diff --git a/Images/order now.jpg b/Images/order now.jpg new file mode 100644 index 0000000..07e1156 Binary files /dev/null and b/Images/order now.jpg differ diff --git a/Images/schinitzel.jpg b/Images/schinitzel.jpg new file mode 100644 index 0000000..de551b5 Binary files /dev/null and b/Images/schinitzel.jpg differ diff --git a/Images/spaghetti-logo.jpg b/Images/spaghetti-logo.jpg new file mode 100644 index 0000000..cd83efb Binary files /dev/null and b/Images/spaghetti-logo.jpg differ diff --git a/Images/spaghetti-logo2.jpg b/Images/spaghetti-logo2.jpg new file mode 100644 index 0000000..343251f Binary files /dev/null and b/Images/spaghetti-logo2.jpg differ diff --git a/Images/thumbbig-468969.webp b/Images/thumbbig-468969.webp new file mode 100644 index 0000000..5b4da2b Binary files /dev/null and b/Images/thumbbig-468969.webp differ diff --git a/README.md b/README.md deleted file mode 100644 index 2c18113..0000000 --- a/README.md +++ /dev/null @@ -1,23 +0,0 @@ -# HTML/CSS Project - -## Setup - -First step is to fork this repo into your own Github account - -## Homework - -Create a new webpage on a subject that you're interested in. - -It should include the following elements: - -- The `.html` page and a linked `.css` file applies a consistent color scheme to links and text on your page. -- A page header with a title and description for the site. -- An articles section with three articles, each including a title, summary and a link. -- A page footer containing info about you or the site. -- Use this website [Lorem Ipsum](http://www.lipsum.com/) to generate random blocks of contents to fill your website. -- **Commit often (with good meaningful commit messages), and Push to Github regularly.** -- Use the sketch below to guide you towards the layout and content you are trying to achieve. _Please note that this is just a sketch - you can choose the colours, fonts and images that you want to use in the page._ - - - - diff --git a/blog-sketch.png b/blog-sketch.png deleted file mode 100644 index d1e1999..0000000 Binary files a/blog-sketch.png and /dev/null differ diff --git a/css/style.css b/css/style.css index e69de29..886c0e6 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,490 @@ +*{ + margin: 0; padding: 0; + font-family: 'Poppins', sans-serif; + box-sizing: border-box; + outline: none; border: none; + transition: all .2s linear; +} +html{ + overflow-x: hidden; + scroll-behavior: smooth; + scroll-padding-top: 6rem; +} +body{ + background: #f7f7f7; +} +header{ + position: fixed; + top: 0; left: 0; right: 0; + z-index: 1000; + width: 100%; + height: 83px; + padding: 1.25rem 5.5rem; + box-sizing: border-box; + background: rgba(0,0, 0, 0.6); + border-bottom: 1px solid #fff; +} +header .logo{ + padding: .5 2rem; + height: 0.5rem; + float: left; + font-size: 1.5rem; + font-weight: bold; + text-transform: uppercase; + color: #fff; + text-align: center; + margin-top: -0.8rem; + } + +header ul{ + list-style: none; + float: right; + margin: 0; + padding: 0; + display: flex; + margin-top: -0.5rem; + } +header ul li a{ + line-height: 4rem; + color: #fff; + padding: 12px 30px; + text-decoration: none; + font-size: 1rem; + font-weight: bold; + text-transform: uppercase; +} +header .navbar a:hover{ + background: rgba(114, 3, 3, 0.7); + border-radius: 6px; +} + +.background-image{ + overflow: hidden; + /* background-image:url(./images/Background.jpg); */ + background-size: cover; + background-repeat: no-repeat; + background-position: right; + width: 100%; + height: 670px; + } +.background-image { + overflow: hidden; +} + +/* Sliding background image effect */ + +@keyframes slider { + 0% { left: 0; } + 30% { left: 0; } + 33% { left: -100%; } + 63% { left: -100%; } + 66% { left: -200%; } + 95% { left: -200%; } + /* 100% { left: -300%; } */ +} +.background-image figure { + width:300%; + position: relative; + animation: 9s slider infinite; +} + +.background-image figure:hover { + animation-play-state: paused; /* enable for pause on hover */ +} +.background-image figure img { + width: 33.333333333% ; + height: 100%; + float: left; +} + +/* The text box on the home page */ + +.text-box{ + width: 100%; + color: white; + position: absolute; + top: 20%; + left: 10%; +} +.text-box h3{ + font-size: 1.5rem; + text-align: center; + line-height: 2rem; + margin-top: .1rem; +} +.text-box p{ + margin-left: 1rem; margin-top: 1rem; margin-right: 1rem; + font-size: 1rem; + color: white; + text-align: justify; +} +.text-box{ + position:absolute; + width: 30rem; + height: 11rem; + background: rgba(0,0,0,0.5);; + border: 1px solid rgb(0,0,0,0.5); + border-top-left-radius: 20px; + border-bottom-right-radius: 20px; +} + +/* Tastes section */ + +.Tastes{ + padding:2rem 9%; + +} +.heading{ + text-align: center; + font-size: 3.5rem; + padding: 1rem; + color: #666; +} +.heading span{ + color: red; +} + +.Tastes .box-container{ + display: flex ; + flex-wrap: wrap; + gap: 1.5rem; +} +.Tastes .box-container .box{ + flex:1 1 20rem; + /* width: 20rem; + height: 16.8rem; */ + position: relative; + overflow: hidden; + box-shadow: 0 0.5rem 1rem rgba(0,0, 0, 0.1); + border: 0.2rem solid rgb(0,0,0,0.3); + cursor: pointer; + border-radius: .5rem; + /* box-sizing: content-box; */ +} +.Tastes .box-container .box .image{ + height: 100%; + width: 100%; + object-fit: cover; + position: absolute; + top: -100%; left: 0; +} +.Tastes .box-container .box .content{ + text-align: center; + background: #fff; + padding: 2rem; + +} +.Tastes .box-container .box .content .image{ + /*margin: 1.5rem 0;*/ + margin-top: 1.5rem; + height: 2rem; +} +.Tastes .box-container .box .content h3{ + font-size: 1.5rem; + color: #333; +} +.Tastes .box-container .box .content p{ + font-size:.9rem; + color: #666; + padding: 1rem 0; +} +.Tastes .box-container .box:hover .image{ + top: 0; +} +.Tastes .box-container .box:hover .content{ + transform: translateY(100%); +} + +/* Popular section */ + +#Popular{ + padding: 2rem 0%; +} +.Popular .box-container2{ + display: flex; + flex-wrap: wrap; + gap:1.5rem; +} +.Popular .box-container2 .box2{ + flex: 1 1 20rem; + position: relative; + background-color: #fff; + box-shadow: 0 0.5rem 1rem rgba(0,0, 0, 0.1); + border: 0.2rem solid rgba(0,0, 0, 0.3); + border-radius: .5rem; + text-align: center; +} +.Popular .box-container2 .box2 img{ + border-radius: .1rem; + height: 15rem; + width: 100%; + /*image-resolution: 300px 300px;*/ + object-fit: cover; +} +.Popular .box-container2 .box2 .price{ + position: absolute; + top: 1rem; left: 2rem; + background-color: red; + color: #fff; + font-size: rem; + padding:0 .5rem 0 1rem; + border-radius: .2rem; + display: inline-block; height: 38px; + border-left: 1px solid red; + /* This makes room for the triangle */ + margin-left: 19px; + color: white; + line-height: 38px; + /* padding: 0 10px 0 10px; */ + } + /* for the triangle */ + .Popular .box-container2 .box2 .price:before { + content: ""; + position: absolute; + display: block; + left: -19px; + width: 0; + height: 0; + border-top: 19px solid transparent; + border-bottom: 19px solid transparent; + border-right: 19px solid red; + } + /* for the circle*/ + .Popular .box-container2 .box2 .price:after { + content: ""; + background-color: white; + border-radius: 50%; + width: 4px; + height: 4px; + display: block; + position: absolute; + left: -9px; + top: 17px; + } + +.Popular .box-container2 .box2 h3{ + color: #333; + font-size: 1.7rem; + margin-top: -0.3rem; +} +.Popular .box-container2 .box2 .stars i{ + color: gold; + font-size: 1.7rem; + padding-top:1rem .1rem; +} + +.btn{ + display: inline-block; + padding: .1rem .8rem; + border: .2rem solid red; + color: red; + cursor: pointer; + font-size: 1.3rem; + border-radius: .5rem; + text-decoration: none; + position: relative; + overflow: hidden; + z-index: 0; + margin-top: 0; +} +.btn::before{ + content: ''; + position: absolute; + top: 0; right: 0; + width: 0%; + height: 100%; + background: red; + transition: .3s linear; + z-index: -1; +} +.btn:hover::before{ + width: 100%; + left: 0; +} +.btn:hover{ + color: #fff; +} +.Menu { + padding:1rem 0%; + +} +.heading{ + text-align: center; + font-size: 3.5rem; + padding: 1rem; + color: #666; +} +.heading span{ + color: red; +} +.Menu .box-container3{ + display: flex ; + flex-wrap: wrap; + gap: .5rem; + +} +.Menu .box-container3 .box3{ + flex:1 1 20rem; + width: 20rem; + height: 20rem; + box-shadow: 0 0.5rem 1rem rgba(0,0, 0, 0.1); + border: 0.2rem solid rgb(0,0,0,0.3); + cursor: pointer; + border-radius: .5rem; + position: relative; + overflow: hidden; + /* box-sizing: content-box; */ +} +.Menu .box-container3 .box3 .image3{ + height: 100%; + width: 100%; + object-fit: cover; +} +.Menu .box-container3 .box3 .content3{ + position: absolute; + top:-100%; left:0; + height: 100%; + width: 100%; + background:rgba(255,255,255,.9); + padding:2rem; + padding-top: 2rem; + text-align: center; +} + +.Menu .box-container3 .box3 .content3 h3{ + font-size: 1.5rem; + color: #333; +} +.Menu .box-container3 .box3 .content3 p{ + font-size: 1rem; + color: #666; + padding: 1rem 0; +} +.Menu .box-container3 .box3:hover .image3{ + top: 0; +} +.Menu .box-container3 .box3:hover .content3{ + transform: translateY(100%); +} +.order{ + padding: 1rem 0%; +} +.order .row{ + padding:.1rem; + box-shadow: 0 0.5rem 1rem rgba(0,0, 0, 0.1); + border: 0.2rem solid rgb(0,0,0,0.3); + background:#fff; + display: flex; + flex-wrap: wrap; + gap:1.5rem; + border-radius: .5rem; +} + +.order .row .image{ + flex:.1 1 30rem; + width: 30rem; +} + +.order .row .image img{ + height: 100%; + width:100%; + object-fit: cover; + border-radius: .5rem; +} + +.order .row form{ + flex:.1 .1 30rem; + padding:1rem; +} + +.order .row form .inputBox{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} + +.order .row form .inputBox input, .order .row form textarea{ + padding:1rem; + margin:1rem 0; + font-size: 1.2rem; + color:#333; + text-transform: none; + border:.1rem solid rgba(0,0,0,.3); + border-radius: .5rem; + width:49%; +} + +.order .row form textarea{ + width:100%; + resize: none; + height:15rem; +} + +.order .row form .btn{ + background:none; +} + +.order .row form .btn:hover{ + background:red; +} + +/* The footer */ + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + background: #fcfcfc; + font-family: sans-serif; +} +footer{ + position: relative; + margin-bottom: -3rem; + left: -7.8rem; + right: 0; + background: #111; + height: auto; + width: 100vw; + color: #fff; +} +.footer-bottom{ + background: #000; + width: 100vw; + padding: 1.2rem; + padding-bottom: 5rem; + text-align: center; +} +.footer-bottom p{ + float: left; + font-size: 14px; + word-spacing: 2px; + text-transform: capitalize; +} +.footer-bottom p a{ + color:#44bae8; + font-size: 16px; + text-decoration: none; +} +.footer-bottom span{ + opacity: 1; +} +.footer-social{ + float: right; + +} +.footer-social ul{ + display: flex; +} +.footer-social ul li{ +padding-right: 10px; +display: block; +} +.footer-social ul li a{ + color: #cfd2d6; + text-decoration: none; +} +.footer-social ul li a:hover{ + color: #27bcda; +} diff --git a/index.html b/index.html index 3db679e..314623a 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,289 @@ - + - - My Blog - - - + + + + + + + Supreme Steakhouse + + + + - - + + +
+ + +
+ +
+
+ + + +
+
+ +
+

Get The best or Nothing at all!

+

+ Austere experience, where richness is lived through the purity of ingredients, + the combination of extraordinary flavors, a pinch of passion in every dish, and the story of their origin. + A genuine fine-dining experience awaits! ... +

+ +
+ + +
+

Tasty Tastes

+
+
+ T-Bone Steak +
+ Steak logo +

T-Bone Steak

+

T-bone Steak seared to caramelized perfection on the outside and juicy succulent and tender in the middle.

+
+
+
+ Steak +
+ Steak logo +

Steak

+

Steak seared to caramelized perfection on the outside and juicy in the middle.

+
+
+
+ Macaroni with meatballs +
+ Macaroni with meatballs logo +

Polpette alla Macarrones

+

Mac and cheese with axiomatic meatball, where Italian and American kitchens meets.

+
+
+
+ Cauliflower Buffalo Wings +
+ Cauliflower Buffalo Wings logo +

Cauliflower Buffalo Wings

+

Cauliflower buffalo wings are a little spicy, immensely flavourful and incredibly delicious. Crispy on the outside, tender in the middle.

+
+
+
+ Cauliflower Buffalo Wings +
+ spaghetti-logo2 +

Haku Smoked Shoyu Spaghetti

+

Spaghetti tossed with butter, soy sauce, and mushrooms is a classic Japanese pasta recipe.

+
+
+
+ Polpette alla Macarrones +
+ Polpette alla Macarrones +

Polpette alla Macarrones

+

Macaroni and cheese with the axiomatic meatball for a comforting and ever-present classic.

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

order now

+ +
+ +
+ +
+ +
+ +
+ + +
+ +
+ + +
+ + + + Submit ✉ + +
+
+ +
+ + + +