web is done

Technigo · Mar 19, 2023 · 2e28e42 · 2e28e42
1 parent 8048110
commit 2e28e42
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 6 deletions.
diff --git a/code/src/components/Dates.js b/code/src/components/Dates.js
@@ -7,7 +7,7 @@ const Dates = ({ monthType, onMonthTypeChange, onClickNext }) => {
   return (
     <section className="content-container">
       <h1 className="header-copy">
-        Which year would you like to book?
+        When do you wish to travel?
       </h1>
       <div className="month-container">
         {monthTypes.map((type) => (

diff --git a/code/src/components/Summary.js b/code/src/components/Summary.js
@@ -5,14 +5,24 @@ const Summary = ({ name, monthType, place, range, onClickNext }) => {
   return (
     <section className="content-container">
       <div className="summary-container">
-        <p className="header-paragraph">
+        <h1 className="header-copy">
+        Houston, we had a problem.
+        </h1>
+        <h2 className="header-copy2">
+        But after 30h of practising React it got solved!
+        </h2>
+        <p className="summary-paragraph">
             Thank you {name}!
             You will travel in <span className="color2">{monthType}</span>, you will experience <span className="color3">{place}</span> and you will meet {range} aliens 👽.
         </p>
       </div>
       <div className="button-container">
         <ButtonNext button="Start again" onClickNext={onClickNext} />
       </div>
+      <div>
+        <p className="footer-paragraph">Made By Maja Zimnoch | Image by <a href="https://www.freepik.com/free-photo/male-astronaut-exploring-night-during-space-mission-unknown-planet_21872923.htm" rel="noreferrer" target="_blank">Freepik</a> | Video by <a href="https://mixkit.co/free-stock-video/beautiful-glowing-nebula-in-space-31565/" rel="noreferrer" target="_blank">Mixkit</a>
+        </p>
+      </div>
     </section>
 
   );

diff --git a/code/src/components/Zipper.js b/code/src/components/Zipper.js
@@ -5,7 +5,7 @@ const Zipper = ({ range, onRangeChange, onClickNext }) => {
   return (
     <section className="content-container">
       <h1 className="header-copy">
-        How many alients would you like to meet?
+        How many aliens would you like to meet?
       </h1>
       <div className="zipper-container">
         <input type="range" min="1" max="5" value={range} onChange={onRangeChange} />

diff --git a/code/src/index.css b/code/src/index.css
@@ -37,11 +37,33 @@ code {
   font-size: 3rem;
 }
 
+.header-copy2 {
+  font-family: 'Rubik Iso', cursive;
+  font-size: 2rem;
+  color:rgb(58, 16, 248);
+}
+
 .header-paragraph {
   font-family: "Lucida Console", "Courier New", monospace;
   letter-spacing: 2px;
   text-align: center;
   font-size: 1rem;
+  padding: 0 30px;
+}
+
+.summary-paragraph {
+  font-family: "Lucida Console", "Courier New", monospace;
+  letter-spacing: 2px;
+  text-align: center;
+  font-size: 2rem;
+}
+
+.footer-paragraph {
+  padding-top: 40px;
+  font-family: "Lucida Console", "Courier New", monospace;
+  letter-spacing: 2px;
+  text-align: center;
+  font-size: 1rem;
 }
 
 .question-wrapper {
@@ -85,7 +107,7 @@ code {
   object-fit: cover;
   max-width: 50%;
   padding-bottom: 40px;
-  -webkit-filter: brightness(80%);
+  -webkit-filter: brightness(60%);
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
@@ -104,7 +126,7 @@ code {
 .button-start {
   font-family: 'Rubik Iso', cursive;
   padding: 10px 20px;
-  margin-top: 20px;
+  margin-top: 50px;
   font-size: 2rem;
   background-color: transparent;
   border: solid 2px rgb(255, 255, 255);
@@ -122,7 +144,28 @@ code {
   transition: 1s ease;
 }
 
-
+.content-container {
+  display: flex;
+  flex-direction: column; 
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding-top: 30px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+ a {
+  color: rgb(58, 16, 248);
+  text-decoration: none;
+ }
+ a:link{
+  color: rgb(58, 16, 248);
+ }
+ a:hover{
+  color: rgb(116, 10, 158);
+ }
 
 @media (min-width: 667px) and (max-width: 1024px) {