Adding new functionality

README.md

@@ -6,7 +6,7 @@
 - [☕️ My coffee elections WebApp  ☕️](#️-my-coffee-elections-webapp--️)
     - [📗 Table of Contents](#-table-of-contents)
   - [☕️ My coffee elections WebApp ](#️-my-coffee-elections-webapp-)
-    - [📍 Deployed project(under construction):  https://my-coffee-elections-udmy.vercel.app/recipes](#-deployed-projectunder-construction--httpsmy-coffee-elections-udmyvercelapprecipes)
+    - [📍 Deployed project(under construction):  https://my-coffee-elections-4rc4.vercel.app/events](#-deployed-projectunder-construction--httpsmy-coffee-elections-4rc4vercelappevents)
 - [🛠 Built With ](#-built-with-)
   - [Tech Stack ](#tech-stack-)
   - [📕 Key Features ](#-key-features-)
@@ -24,8 +24,7 @@
 *My coffee elections webapp* repository is built using programming language named JavaScript but specifically in this case I used a framework named **React**. 
 I choose this framework since I want to put in practice a main principle named **separation of concerns**, therefore I created a folder named **components** where I placed each one of my components which are going to be used in my main file named App.js.<br/>
 
-
-#### 📍 Deployed project(under construction):<br/> <a name="built-with"> https://my-coffee-elections-udmy.vercel.app/recipes</a>
+#### 📍 Deployed project(under construction):<br/> <a name="built-with"> https://my-coffee-elections-4rc4.vercel.app/events</a>
 
 ## 🛠 Built With <a name="built-with"></a>
 

src/pages/About.jsx

@@ -9,26 +9,25 @@ function About() {
         className="aboutTop"
         style={{ backgroundImage: `url(${Shop})` }}
       ></div>
-      <div className="aboutBottom">
-        <h1 className="aboutTitle">About us</h1>
-        <p className="paragraphTitle">
-          {" "}
-          This virtual coffee shop was founded in 1997. It began with 3 friends
-          who met each other in Spain. and their own mixtures of coffee. Now, 33
-          years after Bella Coffee sells pure coffee to 123 countries. Its
-          unique mixtures and aromas made of this coffee a perfect choice. This
-          virtual coffee shop was founded in 1997. It began with 3 friends who
-          met each other in Spain. They loved how to cook, and invent their own
-          food preparations, and their own mixtures of coffee. Now, 33 years
-          after Bella Coffee sells pure coffee to 123 countries. Its unique
-          mixtures and aromas made of this coffee a perfect choice. This virtual
-          coffee shop was founded in 1997. It began with 3 friends who met each
-          other in Spain. They loved how to cook, and invent their own food
-          preparations, and their own mixtures of coffee. Now, 33 years after
-          Bella Coffee sells pure coffee to 123 countries. Its unique mixtures
-          and aromas made of this coffee a perfect choice.
-        </p>
-      </div>
+
+      <h1 className="aboutTitle">About us</h1>
+      <p className="paragraphTitle">
+        {" "}
+        This virtual coffee shop was founded in 1997. It began with 3 friends
+        who met each other in Spain. and their own mixtures of coffee. Now, 33
+        years after Bella Coffee sells pure coffee to 123 countries. Its unique
+        mixtures and aromas made of this coffee a perfect choice. This virtual
+        coffee shop was founded in 1997. It began with 3 friends who met each
+        other in Spain. They loved how to cook, and invent their own food
+        preparations, and their own mixtures of coffee. Now, 33 years after
+        Bella Coffee sells pure coffee to 123 countries. Its unique mixtures and
+        aromas made of this coffee a perfect choice. This virtual coffee shop
+        was founded in 1997. It began with 3 friends who met each other in
+        Spain. They loved how to cook, and invent their own food preparations,
+        and their own mixtures of coffee. Now, 33 years after Bella Coffee sells
+        pure coffee to 123 countries. Its unique mixtures and aromas made of
+        this coffee a perfect choice.
+      </p>
     </div>
   );
 }

src/pages/Recipes.jsx

@@ -36,8 +36,9 @@ function Recipes() {
       {randomRecipe && (
         <div className="randomRecipe">
           <h2 className="randomRecipeTitle">{randomRecipe.title}</h2>
-          <p className="randomRecipeCategory">{randomRecipe.cuisine}</p>
+          <p className="randomRecipeCategory">Origin:{randomRecipe.cuisine}</p>
           <span className="randomingredient">
+            Main Ingredient:
             {randomRecipe.mainIngredient}
           </span>
           <img

src/styles/About.css

@@ -1,3 +1,8 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
 .about {
     width: 100%;
     height: 90vh;
@@ -43,4 +48,24 @@ font-family: cursive;
 }
 .paragraphTitle {
     margin-top: 24px;
+}
+@media screen and (min-width: 375px) {
+    p.paragraphTitle {
+        text-align: justify;
+        margin-left: 5%;
+        margin-right: 5%;
+        margin-bottom: 20px;
+        font-size: 17px;
+    }
+    h1.aboutTitle {
+        margin-top: 10px;
+        font-size: 60px;
+        text-align: center;
+    }
+    .about {
+        width: 100%;
+        height: 125vh;
+        display: flex;
+        flex-direction: column;
+    }
 }

src/styles/Contact.css

@@ -1,3 +1,8 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
 .contact {
     width: 100%;
     height: 90vh;
@@ -78,4 +83,30 @@
     color: whitesmoke;
     font-size: 15px;
     cursor: pointer;
+  }
+  @media screen and (min-width: 375px) {
+
+    div.navbar div.rightSide {
+      height: 56%;
+      padding-right: 0px;
+    }
+    div.leftSide {
+      background-image: none;
+      display: none;
+    }
+    div.contact.rightSide h1 {
+      font-size: 30px;
+      margin-top: 30px;
+    }
+    form input {
+      height: 32px;
+    }
+    form textarea {
+      height: 19px;
+    }
+    div.contact {
+      height: 73vh;
+      margin-bottom: 40px;
+      margin-top: 30px;
+    }
   }

src/styles/Events.css

@@ -23,4 +23,11 @@ margin-bottom: 60px;
 .imageEvent img {
     border-radius: 30px;
     width: 300px;
+}
+@media screen and (min-width: 375px) {
+    h1.eventsTitle {
+        text-align: center;
+        font-size: 45px;
+        margin-top: 25px;
+    }
 }

src/styles/Footer.css

@@ -17,4 +17,11 @@
 }
 .footer p {
     color: white;
+}
+
+@media  screen and (min-width: 375px) {
+    .socialMedia svg {
+        margin: 15px;
+        font-size: 27px;
+    }
 }

src/styles/Home.css

@@ -52,6 +52,16 @@
     transition: 0.3s ease-in;
 }
 
+@media screen and (min-width: 375px) {
+    div.headerContainer h1.titleHome {
+        font-size: 29px;
+        margin-top: 40px;
+        margin-bottom: 27px;
+        height: 33px;
+    }
+}
+
+
 @media only screen and (max-width: 650px) {
     .home {
         justify-content: center;

src/styles/Menu.css

@@ -66,6 +66,19 @@
     font-size: 15px;
   }
 
+@media screen and (min-width: 375px) {
+  h1.menuTitle {
+    text-align: center;
+  }
+  div.menuItem {
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+  .menuList {
+    width: 90vw;
+  }
+}
+
   @media only screen and (max-width: 1300px) {
     .menuList {
       grid-template-columns: 1fr 1fr;

src/styles/Navbar.css

@@ -96,7 +96,11 @@ body{
       display: inherit;
     }
   }
-
+  @media screen and (min-width: 375px) {
+    button {
+      margin-top: 40px;
+    }
+  }
   @media only screen and (min-width: 600px) {
     .navbar .rightSide button {
       display: none;

src/styles/Recipes.css

@@ -41,4 +41,21 @@ text-align: center;
 span.randomingredient {
     display: flex;
     justify-content: center;
+}
+@media screen and (min-width: 375px) {
+    h1.recipeTitle {
+        text-align: center;
+    }
+    p {
+        text-align: center;
+        margin-left: 3%;
+        margin-right: 3%;
+    }
+    .randomRecipeImage {
+        margin-left: 5%;
+    }
+    .randomRecipeTitle {
+        font-size: 17px;
+        margin-left: 15px;
+    }
 }