Update background and mobile view

src/index.css

@@ -81,7 +81,6 @@ li {
   background-image: url('./images/poster_blank.png');
   background-size: cover;
   position: relative;
-  padding: 1rem;
   z-index: 1;
 }
 
@@ -90,7 +89,7 @@ li {
 }
 
 .homeChallenge {
-  background-color: rgba(0, 0, 0, 0.75);
+  background-color: #000000bf;
   padding: 3rem 2rem;
   width: 400px;
   color: white;
@@ -107,7 +106,6 @@ li {
 }
 
 .timeline {
-  padding: 2rem;
   position: relative;
 }
 
@@ -118,7 +116,7 @@ li {
   height: 200px;
   position: absolute;
   left: 0;
-  bottom: -20px;
+  bottom: 0;
 }
 
 .prizes {
@@ -134,24 +132,33 @@ li {
   align-items: center;
 }
 
-@media screen and (min-width: 1650px) {
-  .homeBody {
-    background-repeat: no-repeat;
-    width: 100%;
+/* Mobile display */
+@media screen and (max-width: 600px) {
+  .coverPage {
+    height: 82vh;
+    background-position: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .coverPage::after {
     height: 100%;
-    max-width: 100%;
   }
-}
 
-@media screen and (max-width: 1650px) {
-  .homeBody {
+  .creationLogo {
+    width: 130vw;
+  }
+
+  .homeContent {
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
     background-repeat: no-repeat;
-    width: 100vw;
+    position: relative;
+    padding: 0;
   }
-}
 
-/* Mobile display */
-@media screen and (max-width: 600px) {
   .challenge {
     padding: 2rem;
   }
@@ -189,10 +196,29 @@ li {
 
 .mainBody {
   padding: 30px;
-  background-color: #323232;
-  background-image: url(./images/background_pattern.png);
+  background-image: url(./images/wallpaper.png);
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  width: 100%;
   min-height: 100vh;
-  background-size: contain;
+  background-size: cover;
+}
+
+.mainBody::before {
+  content: '';
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  background-attachment: fixed;
+  position: fixed;
+  opacity: 0.7;
+  top: 0;
+  left: 0;
+}
+
+.mainContent {
+  position: relative;
+  z-index: 1;
 }
 
 .mainTitle {
@@ -203,6 +229,8 @@ li {
   font-family: 'Raider Crusader';
   font-size: 56px;
   text-align: center;
+  position: relative;
+  z-index: 2;
 }
 
 .secondaryTitle {
@@ -336,6 +364,27 @@ li {
   float: right;
   margin: 2vw;
   font-family: Nova Flat;
+  text-decoration: none;
+  position: relative;
+  z-index: 2;
+  text-shadow: 0 0 15px black, 0 0 15px black, 0 0 15px black, 0 0 15px black;
+}
+
+.challengeFindMore::before {
+  content: url(./images/magic-circle.png);
+  position: absolute;
+  top: -100px;
+  left: 0;
+  transform: scale(0.3);
+  width: 0;
+  height: 0;
+  mix-blend-mode: saturation;
+  opacity: 0;
+  transition: opacity 750ms ease-in-out;
+}
+
+.challengeFindMore:hover::before {
+  opacity: 0.75;
 }
 
 .notFoundContent {

src/pages/Challenges.jsx

@@ -1,69 +1,109 @@
-import React from 'react'
-import { Link } from 'react-router-dom'
-import challenge from '../data/challenge.json'
-import line1 from '../images/Challenge Statement Groups of line 1.png'
-import line2 from '../images/Challenge Statement Groups of line 2.png'
-import line3 from '../images/Challenge Statement Groups of line 3.png'
-import line4 from '../images/Challenge Statement Groups of line 4.png'
-import num1 from '../images/Challenge Statement Number 1.png'
-import num2 from '../images/Challenge Statement Number 2.png'
-import num3 from '../images/Challenge Statement Number 3.png'
-import num4 from '../images/Challenge Statement Number 4.png'
+import React from 'react';
+import { Link } from 'react-router-dom';
+import challenge from '../data/challenge.json';
+import line1 from '../images/Challenge Statement Groups of line 1.png';
+import line2 from '../images/Challenge Statement Groups of line 2.png';
+import line3 from '../images/Challenge Statement Groups of line 3.png';
+import line4 from '../images/Challenge Statement Groups of line 4.png';
+import num1 from '../images/Challenge Statement Number 1.png';
+import num2 from '../images/Challenge Statement Number 2.png';
+import num3 from '../images/Challenge Statement Number 3.png';
+import num4 from '../images/Challenge Statement Number 4.png';
 export default class Challenge extends React.Component {
-    state = {
-        lines:[line1,line2,line3,line4],
-        nums:[num1,num2,num3,num4],
-        color:['#3ED6CD','#FB8500','#E270FF','#4DAAFF'],
-        path:['/challengesdetail','/challengesdetail2','/challengesdetail3','/challengesdetail4']
-    }
+  state = {
+    lines: [line1, line2, line3, line4],
+    nums: [num1, num2, num3, num4],
+    color: ['#3ED6CD', '#FB8500', '#E270FF', '#4DAAFF'],
+    path: [
+      '/challengesdetail',
+      '/challengesdetail2',
+      '/challengesdetail3',
+      '/challengesdetail4',
+    ],
+  };
 
-    scrollToTop() {
-        window.scrollTo(0,0);
-    }
+  scrollToTop() {
+    window.scrollTo(0, 0);
+  }
 
-    render() {
-        return (
-            <div className='mainBody challenge' style={{overflow:'hidden'}}>
-                <h1 className='mainTitle challengeTitle' style={{ textShadow: "0px 0px 16px #00C2FF" }}>Challenge Statements</h1>
+  render() {
+    return (
+      <div className='mainBody challenge' style={{ overflow: 'hidden' }}>
+        <h1
+          className='mainTitle challengeTitle'
+          style={{ textShadow: '0px 0px 16px #00C2FF' }}
+        >
+          Challenge Statements
+        </h1>
+        <div className='mainContent'>
+          {challenge.map((section, index) => (
+            <div>
+              <div>
+                <img
+                  src={this.state.lines[index]}
+                  style={{ width: '100vw', marginLeft: '-30px' }}
+                  alt='line'
+                />
+              </div>
+              <div className='challengeContent'>
                 <div>
-                    {
-                        challenge.map((section,index) => (
-                            <div>
-                                <div><img src={this.state.lines[index]} style={{width:'100vw',marginLeft:'-30px'}} alt='line'/></div>
-                                <div className='challengeContent' style={{ lineHeight:"2vw" }}>
-                                    <div><img className={index%2===0 ? 'challengeNumPicRight' : 'challengeNumPicLeft'} src={this.state.nums[index]} alt='number'/></div>
-                                    <div className={index%2===0 ? 'challengeContentRight' : 'challengeContentLeft'}>
-                                        <h1 className='secondaryTitle challengeSecondaryTitle' style={{color:this.state.color[index], lineHeight:"35px"}}>{section.title}</h1>
-                                        {
-                                            section.content.map((description) =>
-                                                <div>    
-                                                    <span>{description}</span>
-                                                    <br/>
-                                                    <br/>
-                                                </div>
-                                            )
-                                        }
-                                        <h3 className='challengeTertiaryTitle' style={{lineHeight: '34px', textDecoration: 'underline',fontFamily:'Nova Flat',margin:'0px'}}>{section.company}</h3>
-                                        {
-                                            section.background.map((description) => 
-                                                <div>
-                                                    <span>{description}</span>
-                                                    <br/>
-                                                    <br/>
-                                                </div>
-                                            )
-                                        }
-                                    </div>
-                                    <h2 className='challengeTertiaryTitle'>
-                                        <Link className='challengeFindMore' to={this.state.path[index]} onClick={this.scrollToTop} style={{color:this.state.color[index]}}>Find Out More {'>>'}</Link>
-                                    </h2>
-                                </div>
-                            </div>
-                        )
-                        )
+                  <img
+                    className={
+                      index % 2 === 0
+                        ? 'challengeNumPicRight'
+                        : 'challengeNumPicLeft'
                     }
+                    src={this.state.nums[index]}
+                    alt='number'
+                  />
                 </div>
+                <div
+                  className={
+                    index % 2 === 0
+                      ? 'challengeContentRight'
+                      : 'challengeContentLeft'
+                  }
+                >
+                  <h1
+                    className='secondaryTitle challengeSecondaryTitle'
+                    style={{
+                      color: this.state.color[index],
+                    }}
+                  >
+                    {section.title}
+                  </h1>
+                  {section.content.map((description) => (
+                    <p> {description}</p>
+                  ))}
+                  <h3
+                    className='challengeTertiaryTitle'
+                    style={{
+                      margin: '2rem 0 1rem 0',
+                      fontFamily: 'Poppins',
+                      fontWeight: '600',
+                    }}
+                  >
+                    {section.company}
+                  </h3>
+                  {section.background.map((description) => (
+                    <p>{description}</p>
+                  ))}
+                </div>
+                <h2 className='challengeTertiaryTitle'>
+                  <Link
+                    className='challengeFindMore'
+                    to={this.state.path[index]}
+                    onClick={this.scrollToTop}
+                    style={{ color: this.state.color[index] }}
+                  >
+                    Find Out More {'>>'}
+                  </Link>
+                </h2>
+              </div>
             </div>
-        )
-    }
-}
+          ))}
+        </div>
+      </div>
+    );
+  }
+}

src/pages/Contact.jsx

@@ -56,6 +56,7 @@ function Contact() {
       </h1>
 <br/>
       <form
+        className="mainContent"
         onSubmit={Validate}
 
         style={{

src/pages/Faq.jsx

@@ -1,27 +1,32 @@
-import faqs from "../data/faq.json";
+import faqs from '../data/faq.json';
 
 function Faq() {
   return (
-    <div className="mainBody">
-      <h1
-        className="mainTitle"
-        style={{ textShadow: '0px 0px 16px #ED8F03' }}
-      >
+    <div className='mainBody'>
+      <h1 className='mainTitle' style={{ textShadow: '0px 0px 16px #ED8F03' }}>
         Frequently Asked Questions
       </h1>
       <br />
-      <div style={{ paddingLeft: '15vw', paddingRight: '15vw' }}>
+      <ol className='mainContent' style={{ padding: '0 15vw' }}>
         {faqs.map((faq, index) => (
           <div key={index} style={{ marginBottom: '80px' }}>
-            <h2 className="secondaryTitle" style={{ letterSpacing: '1px' }}>
-              {index + 1}. {faq.question}
-            </h2>
-            <span style={{ color: 'white', lineHeight: '30px', whiteSpace:"pre-line" }}>
-              {faq.answer}
-            </span>
+            <li className='secondaryTitle' style={{ fontWeight: '800' }}>
+              <h2 className='secondaryTitle'>{faq.question}</h2>
+              <p
+                style={{
+                  color: 'white',
+                  lineHeight: '30px',
+                  whiteSpace: 'pre-line',
+                  fontSize: '1rem',
+                  fontWeight: 'normal',
+                }}
+              >
+                {faq.answer}
+              </p>
+            </li>
           </div>
         ))}
-      </div>
+      </ol>
     </div>
   );
 }

src/pages/NotFound.jsx

@@ -6,7 +6,7 @@ export default class NotFound extends React.Component{
     render() {
         return (
             <div className='mainBody' style={{height:'100vh',color:'#fff'}}>
-                <div className='notFoundContent'>
+                <div className='mainContent notFoundContent'>
                     <div>
                         <div><img className='notFoundPic' src={sadface} alt='sad face'/></div>
                         <div className='notFoundTitle'>404 Page not found</div>

src/pages/Rules.jsx

@@ -10,7 +10,7 @@ function Rules() {
         Rules and Regulations
       </h1>
       <br />
-      <div style={{ paddingLeft: "15vw", paddingRight: "15vw" }}>
+      <div className="mainContent" style={{padding: "0 15vw"}}>
         {rules.map((rule, i) =>
           rule.sectionTitle === "Selection Process" ? (
             <div key={i}>