added diagonal background to PreliminaryRound Page footer

src/pages/preliminaryRound/PreliminaryRound.module.scss

@@ -4,7 +4,7 @@
     align-items: center;
     text-align: center;
     justify-content: space-around;
-    height: 44vh;
+    height: 44.5vh;
     width: 90%;
     margin: 0 auto;
     ion-icon {
@@ -36,6 +36,21 @@
     background-image: url("../../assets/icons/desktop-particles-2.svg");
     background-repeat: no-repeat;
     background-position: 25% 30%;
+    border-top-right-radius: 75%;
+
+
+    &::before {
+        position: absolute;
+        content:" ";
+        top: 50%;
+        right: 0;
+        left: 0;
+        bottom: 0;
+        background-color: #151515;
+        height: 30vh; 	
+        transform: skewY(5deg);
+        z-index: -1;
+    }
 
     .heading {
         color: #BCBCBC;

src/pages/preliminaryRound/PreliminaryRound.tsx

@@ -12,37 +12,35 @@ const PreliminaryRound: React.FC = () => {
         <IonPage>
             <StepHeader stepNumber={2} roundName="Preliminary Round" />
             <IonContent>
-                <div>
-                    <div className={styles.roundDescription}>
+                <div className={styles.roundDescription}>
 
-                        <IonIcon src={preliminaryRound}></IonIcon>
-                        <h4 className={styles.heading}>Let us check your knowledge.</h4>
-                        <p className={styles.description}>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                        </p>
-                    </div>
-                    <div className={styles.quizDescription}>
+                    <IonIcon src={preliminaryRound}></IonIcon>
+                    <h4 className={styles.heading}>Let us check your knowledge.</h4>
+                    <p className={styles.description}>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    </p>
+                </div>
+                <div className={styles.quizDescription}>
 
-                        <h4 className={styles.heading}>Quiz</h4>
-                        <div className={styles.description}>
-                            <div className={styles.textHolder}>
-                                <IonIcon src={questionIcon}></IonIcon>
-                                <div className={styles.text}>20 questions</div>
-                            </div>
-                            <div className={styles.textHolder}>
-                                <IonIcon src={timeIcon}></IonIcon>
-                                <div className={styles.text}>20 mins + 10 mins grace</div>
-                            </div>
-                            <div className={styles.textHolder}>
-                                <IonIcon src={checkIcon}></IonIcon>
-                                <div className={styles.text}>Note: 85% of results minimum</div>
-                            </div>
+                    <h4 className={styles.heading}>Quiz</h4>
+                    <div className={styles.description}>
+                        <div className={styles.textHolder}>
+                            <IonIcon src={questionIcon}></IonIcon>
+                            <div className={styles.text}>20 questions</div>
+                        </div>
+                        <div className={styles.textHolder}>
+                            <IonIcon src={timeIcon}></IonIcon>
+                            <div className={styles.text}>20 mins + 10 mins grace</div>
                         </div>
+                        <div className={styles.textHolder}>
+                            <IonIcon src={checkIcon}></IonIcon>
+                            <div className={styles.text}>Note: 85% of results minimum</div>
+                        </div>
+                    </div>
 
-                        <IonButton shape="round" expand='block'>Done!</IonButton>
+                    <IonButton shape="round" expand='block'>Done!</IonButton>
 
-                        <div className={styles.wish}>All the best!</div>
-                    </div>
+                    <div className={styles.wish}>All the best!</div>
                 </div>
             </IonContent>
         </IonPage>