-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #13 from alokthakur490/main
track_section_added
- Loading branch information
Showing
8 changed files
with
241 additions
and
35 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import React from "react"; | ||
| import styles from "../styles/track.module.css"; | ||
| const Track = (props) => { | ||
| return( | ||
| <> | ||
| {/* <div className={`${styles.container} ${styles.heading}`}>HACKTHON TRACKS</div> */} | ||
|
|
||
| <div className={styles.container}> | ||
| <div className={styles.heading}>HACKTHON TRACKS<br/><br/></div> | ||
| <div className={styles.bottom}> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none"> | ||
| <rect width="64" height="64" fill="white"/> | ||
| </svg> | ||
| </div> | ||
| <div className = {styles.left_card}> | ||
| <div | ||
| className={styles.left_card_img} | ||
|
|
||
| > | ||
|
|
||
| </div> | ||
| <div className={styles.box}> | ||
|
|
||
| <pr>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</pr> | ||
|
|
||
|
|
||
|
|
||
| </div> | ||
|
|
||
|
|
||
| </div> | ||
| <div className = {styles.center_card}> | ||
| <div className={styles.center_card_img} | ||
|
|
||
| ></div> | ||
| <div className={styles.box}> | ||
| <pr>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</pr> | ||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
| <div className = {styles.right_card}> | ||
| <div | ||
| className={styles.right_card_img} | ||
|
|
||
| ></div> | ||
| <div className={styles.box}> | ||
| <pr>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</pr> | ||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
|
|
||
| </div> | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| </> | ||
| ) | ||
|
|
||
| } | ||
|
|
||
| export default Track; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
| .container{ | ||
| display: flex; | ||
| padding: 80px 0px 120px 0px; | ||
| justify-content: center; | ||
| align-items: center; | ||
| align-content: center; | ||
| gap: 48px 87px; | ||
| align-self: stretch; | ||
| flex-wrap: wrap; | ||
| background: var(--Black, #1F1F1F); | ||
| text-align: center; | ||
| position: relative; | ||
|
|
||
| } | ||
|
|
||
| .card_container { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| gap: 70px; | ||
| align-self: stretch; | ||
| flex-wrap: wrap; | ||
| } | ||
|
|
||
| .bottom{ | ||
| width: 64px; | ||
| height: 64px; | ||
| flex-shrink: 0; | ||
| position: absolute; | ||
| left: 64px; | ||
| bottom: 0px; | ||
| top : 750px; | ||
| } | ||
|
|
||
| .heading{ | ||
| padding-top: 25px; | ||
| display: flex; | ||
| width: 100%; | ||
| height: 50px; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| flex-shrink: 0; | ||
| color: var(--white, #FFF); | ||
|
|
||
| /* Minecrafter Regular/7xl */ | ||
| font-family: Minecrafter; | ||
| font-size: 70px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: 100%; /* 72px */ | ||
| flex-wrap: wrap; | ||
|
|
||
|
|
||
| } | ||
|
|
||
| .left_card{ | ||
| border-radius: 4.5px; | ||
| background: var(--white, #FFF); | ||
| box-shadow: 0px 3.6px 3.6px 0px rgba(0, 0, 0, 0.25); | ||
| width: 334.8px; | ||
| height: 475.2px; | ||
| flex-shrink: 0; | ||
| text-align: center; | ||
|
|
||
|
|
||
|
|
||
| } | ||
|
|
||
| .center_card{ | ||
| width: 351px; | ||
| height: 507.6px; | ||
| flex-shrink: 0; | ||
| border-radius: 4.5px; | ||
| border: 3.6px solid var(--green, #00F26D); | ||
| background: var(--white, #FFF); | ||
| box-shadow: 0px 3.6px 9px 0px rgba(0, 0, 0, 0.25); | ||
| text-align: center; | ||
| } | ||
|
|
||
| .right_card{ | ||
| width: 334.8px; | ||
| height: 475.2px; | ||
| flex-shrink: 0; | ||
| border-radius: 4.5px; | ||
| background: var(--white, #FFF); | ||
| box-shadow: 0px 3.6px 3.6px 0px rgba(0, 0, 0, 0.25); | ||
| text-align: center; | ||
| } | ||
|
|
||
| .box{ | ||
| width: 291.6px; | ||
| height: 140.4px; | ||
| flex-shrink: 0; | ||
| border-radius: 9px; | ||
| background: var(--Black, #1F1F1F); | ||
| box-shadow: 0px 3.6px 3.6px 0px rgba(0, 0, 0, 0.25) inset; | ||
| display: inline-block; | ||
| color: #FFF; | ||
|
|
||
|
|
||
| } | ||
|
|
||
| .left_card_img{ | ||
| width: 237.6px; | ||
| height: 313.2px; | ||
| flex-shrink: 0; | ||
| background: url("../../public/images/left1.png") lightgray 50% / cover no-repeat; | ||
| display: inline-block; | ||
|
|
||
|
|
||
|
|
||
|
|
||
| } | ||
|
|
||
| .center_card_img{ | ||
| background: url(../../public/images/center2.png), lightgray 0px 0px / 100% 100% no-repeat; | ||
| width: 241.2px; | ||
| height: 307.8px; | ||
| flex-shrink: 0; | ||
| display: inline-block; | ||
|
|
||
| } | ||
|
|
||
| .right_card_img{ | ||
| width: 241.2px; | ||
| height: 307.8px; | ||
| flex-shrink: 0; | ||
| background: url(../../public/images/right3.png), lightgray 0px 0px / 100% 100% no-repeat; | ||
| display: inline-block; | ||
| } | ||
|
|
||
|
|
||
|
|
||
| @media only screen and (max-width: 1250px) { | ||
| .bottom{ | ||
| display: none; | ||
| } | ||
| } |