diff --git a/recipe_website/index.html b/recipe_website/index.html new file mode 100644 index 0000000..268aa76 --- /dev/null +++ b/recipe_website/index.html @@ -0,0 +1,162 @@ + + + + + + + Cooking and Recipes + + + + + +
+
+
+ +
+
+ +
+ +
+
+
+
+
+
+
+
+
+

M Recipies made for everyone

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

Vegetarian

 +
+
+
+
+
+ +
+
+
+

Dinners

 +
+
+
+
+
+ +
+
+
+

Drink

 +
+
+
+
+
+ +
+
+
+

Desserts

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

Find a recipe

+
+ + +
+
+
+

Your Search Recipes:

+
+
+
+ +
+
+

Fries

+ Get Recipe +
+
+
+
+ +
+
+

Fries

+ Get Recipe +
+
+
+
+ +
+
+

Fries

+ Get Recipe +
+
+
+
+
+ +
+

Name:

+

Category name

+
+

Directions:

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+
+ +
+
+ Watch Video +
+
+
+
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/recipe_website/main.js b/recipe_website/main.js new file mode 100644 index 0000000..9efd15f --- /dev/null +++ b/recipe_website/main.js @@ -0,0 +1,5 @@ +const menu = document.querySelector('.menu'); +const showMenu = document.querySelector('.site'); +menu.addEventListener('click', function(){ + showMenu.classList.toggle('showmenu') +}) diff --git a/recipe_website/style.css b/recipe_website/style.css new file mode 100644 index 0000000..83066f7 --- /dev/null +++ b/recipe_website/style.css @@ -0,0 +1,387 @@ +@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600&family=Josefin+Sans:wght@100;200;300;400;500;600;700&family=WindSong:wght@400;500&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Josefin Sans', sans-serif; +} +a{ + text-decoration: none; + color: inherit; + -webkit-tap-highlight-color: transparent; +} +ul{ +list-style: none; +} +p{ + margin-bottom: 0 0 15px; +} +.container{ + position: relative; + max-width: 60%; + padding: 0 20px; + margin: 0 auto; +} +/*---------- nav ----------*/ +header{ + position: relative; + line-height: 30px; + background-color: white; + z-index: 10; + border-bottom: 1px solid lightgray; +} +.container, .navigation{ + display: flex; + align-items: center; + justify-content: space-between; +} +.brand img{ + margin-top: 10px; + width: 200px; +} +nav{ + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: #FFFAF4; + z-index: 5; + align-items: center; + display: none; +} +nav ul{ + display: flex; + flex-direction: column; + padding: 0; + margin: 0 auto; + max-width: 200px; +} +nav li a{ + position: relative; + display: inline-block; + line-height: 1.5; + overflow: hidden; + margin-top: 30px; + font-size: 14px; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 1px; + color: #5F264A; +} +nav li a:hover{ + color: #85586F; +} +.trigger button{ + position: relative; + background-color: transparent; + border: none; + outline: none; + font-size: 20px; + padding: 10px; + cursor: pointer; +} +.showmenu nav{ + display: flex; +} +.showmenu .menu{ + z-index: 10; + color: black; +} +.showmenu .menu i::before{ + content: 'x' +} +/*---------- home title----------*/ +.homepage-title{ + display: flex; + position: relative; + text-align: center; +} +.home-title{ + margin-top: 30px; +} +.title p{ + font-size: 22px; + font-weight: 800; + letter-spacing: 1px; + color: #5F264A; +} +.title span{ + font-size: 36px; + font-family: 'WindSong'; + font-weight: 300; + font-style: italic; + color: #C38154; +} +/*---------- home content----------*/ +.home-content .container{ + max-width: 60%; + display: block;; +} +.img-content{ + margin-top: 30px; + width: 100%; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-gap: 25px; +} +.img-content .image-item .image{ + width: 100%; + height: 350px; +} +.img-content .image-item .image img{ + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; +} +.img-content .image-item{ + position: relative; + z-index: 2; + overflow: hidden; +} +.img-content .image-item:before{ + content: ''; + position: absolute; + width: 100%; + height: 100%; + display: none; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.8); + z-index: 5; +} +.img-content .image-item:hover.image-item:before{ + display: block; +} +.img-content .image-item .overlay{ + position: absolute; + top: 110%; + left: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + z-index: 10; + transition: 1s; + cursor: pointer; +} +.img-content .image-item .overlay p{ + font-size: 18px; + letter-spacing: 1px; + text-transform: uppercase; + text-align: center; + color: #FFC26F; + padding: 8px 0; +} +.img-content .image-item:hover .overlay{ + top: 0; +} +/*---------- meal----------*/ +.meal-recipe .container{ + min-height: 60vh; +} +.meal-wrap{ + max-width: 100%; + margin: 0 auto; + background: white; + text-align: center; +} +.meal-search{ + margin: 30px 0; +} +.meal-search-box{ + margin: 20px; + display: flex; + align-items: stretch; +} +.search-control, .search-btn{ + width: 100%; +} +.search-control{ + padding: 0 20px; + font-size: 16px; + outline: 0; + border: 1px solid #5F264A; + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; +} +.search-control::placeholder{ + color: #85586F; +} +.search-btn{ + width: 80px; + height: 40px; + font-size: 20px; + background-color: #5F264A; + color: white; + border: none; + border-top-right-radius: 10px; + border-bottom-right-radius: 10px; +} +.search-btn:hover{ + background-color: #85586F; +} +.meal-result{ + margin-top: 30px; +} +#meal{ + margin: 20px 0; +} +.meal-item{ + margin: 20px 0; + border-radius: 20px; + overflow: hidden; + box-shadow: 0 4px 20px -12px rgba(0, 0, 0, 0.8); +} +.meal-img img{ + display: block; + width: 100%; +} +.meal-name{ + padding: 20px 10px; +} +.meal-name h3{ + font-size: 18px; + font-weight: 800; + letter-spacing: 1px; + text-transform: uppercase; +} +.recipe-btn{ + display: block; + width: 150px; + margin: 20px auto; + border-radius: 10px; + background: #FFC26F; + color: white; + font-size: 16px; + font-weight: 600; + padding: 10px 0; +}.recipe-btn:hover{ + background-color: #F9E0BB; + color: black; +} +.meal-detail{ + display: none; + padding: 30px 0; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #F9E0BB; + color: #884A39; + border-radius: 10px; + width: 80%; + height: 80%; + z-index: 20; + overflow-y: scroll; +} +.showRecipe{ + display: block; +} +.meal-content{ + margin: 30px; +} +.meal-content p:not(.recipe-cat){ + padding: 20px 0; +} +.recipe-button{ + position: absolute; + right: 30px; + font-size: 30px; + background: transparent; + color: #884A39; + border: none; + outline: none; + cursor: pointer; +} +.recipe-title{ + text-transform: uppercase; + font-size: 20px; + padding-bottom: 20px; +} +.recipe-cat{ + display: inline-block; + background: #FFC95F; + font-weight: 600; + color: white; + padding: 5px 12px; +} +.recipe-guide{ + padding: 20px 0; +} +.recipe-img img{ + display: block; + margin: 0 auto; + width: 200px; + height: 200px; + border-radius: 50%; +} +.recipe-link{ + margin: 30px 0; +} +.recipe-link a{ + font-size: 18px; + font-weight: 800; + text-decoration: underline; + transition: all 0.3s linear; +} +.recipe-link a:hover{ + opacity: 0.5; +} +.notFound{ + grid-template-columns: 1fr !important; + font-size: 18px; + width: 100%; + color: red; +} + + + + + + +@media screen and (min-width:1200px){ + #meal{ + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 30px; + } + .meal-item{ + margin: 0; + } +} +@media screen and (min-width:992px){ + nav{ + display: block; + position: relative; + background-color: transparent; + padding: 0; + } + nav ul{ + display: flex; + flex-wrap: wrap; + flex-direction: row; + max-width: 100%; + } + nav li{ + display: flex; + align-items: center; + } + nav li a{ + margin-right: 40px; + font-size: 14px; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 1px; + } + .trigger .menu{ + display: none; + } + .meal-detail{ + width: 700px; + } +}