diff --git a/src/App.js b/src/App.js index 5ce551f..45d716e 100644 --- a/src/App.js +++ b/src/App.js @@ -39,4 +39,4 @@ function App() { ); } -export default App; +export default App; \ No newline at end of file diff --git a/src/components/About/AboutUs.css b/src/components/About/AboutUs.css index 1f86ad5..f981bbd 100644 --- a/src/components/About/AboutUs.css +++ b/src/components/About/AboutUs.css @@ -3,7 +3,7 @@ width:90vw; margin:auto; align-items: center; - background-image: linear-gradient(148.79deg, rgba(12, 143, 146, 0.5) 7.08%, rgba(47, 11, 88, 0.4) 84.13%); + background-image: linear-gradient(148.79deg, rgba(4, 34, 64, 0.5) 7.08%, rgba(43, 12, 78, 0.4) 84.13%); border-radius: 25px; box-shadow: 5px 5px 25px 25px rgba(0, 0, 0, 0.1); margin-top: 80px; diff --git a/src/components/HeroLandingPage/Header.css b/src/components/HeroLandingPage/Header.css index 0ccd5e4..d244d50 100644 --- a/src/components/HeroLandingPage/Header.css +++ b/src/components/HeroLandingPage/Header.css @@ -163,7 +163,7 @@ li { /* z-index: -1; */ height: 140px; background-color: black; - opacity: 0.9; + /* opacity: 0.9; */ /* align-items: center; */ position: fixed; width: 100%; @@ -216,10 +216,10 @@ li { } .w-nav-menu { background: black; - opacity: 0.9; + /* opacity: 0.9; */ display: block; position: absolute; - top: 100px; + top: 110px; left: 0; display: flex; flex-direction: column; diff --git a/src/components/Timeline/ScheduleCard.js b/src/components/Timeline/ScheduleCard.js new file mode 100644 index 0000000..0049c0c --- /dev/null +++ b/src/components/Timeline/ScheduleCard.js @@ -0,0 +1,25 @@ +import React from "react"; +import "./Timeline.css"; +function ScheduleCard(props) { + return ( +
+
+
+ {props.time} + {props.date} +
+
+
+ {" "} +
+ {props.title} + +
+
+
+
+
+ ); +} + +export default ScheduleCard; \ No newline at end of file diff --git a/src/components/Timeline/ScheduleData.js b/src/components/Timeline/ScheduleData.js new file mode 100644 index 0000000..bb94303 --- /dev/null +++ b/src/components/Timeline/ScheduleData.js @@ -0,0 +1,100 @@ +const Day1 = [ + { + id: 1, + time: '9:00', + date: '18 Sept', + title: 'Lorem', + }, + { + id: 2, + time: '10:00', + date: '18 Sept', + title: 'Lorem', + }, + { + id: 3, + time: '12:00', + date: '18 Sept', + title: 'Lorem', + }, + { + id: 4, + time: '15:00', + date: '18 Sept', + title: 'Lorem', + }, + { + id: 5, + time: '16:30', + date: '18 Sept', + title: 'Lorem', + }, + { + id: 6, + time: '18:00', + date: '18 Sept', + title: 'Lorem', + }, + { + id: 7, + time: '20:00', + date: '18 Sept', + title: 'Lorem', + }, + { + id: 8, + time: '22:00', + date: '18 Sept', + title: 'Lorem', + }, + // { + // id: 9, + // time: '22:30', + // date: '18 Sept', + // title: 'Workshop by Koren Grinshpoon, CEO of EchoAR', + // }, + ]; + + const Day2 = [ + { + id: 10, + time: '17:00', + date: '19 Sept', + title: 'Lorem', + }, + { + id: 11, + time: '17:30', + date: '19 Sept', + title: 'Lorem', + }, + { + id: 12, + time: '19:00', + date: '19 Sept', + title: 'Lorem', + }, + { + id: 13, + time: '19:30', + date: '19 Sept', + title: 'Lorem', + }, + { + id: 14, + time: '20:30', + date: '19 Sept', + title: 'Lorem', + }, + ]; + + const Day3 = [ + { + id: 15, + time: '19:00', + date: '22 Sept', + title: 'Lorem', + }, + ]; + + export { Day1, Day2, Day3 }; \ No newline at end of file diff --git a/src/components/Timeline/Timeline.css b/src/components/Timeline/Timeline.css new file mode 100644 index 0000000..19459fc --- /dev/null +++ b/src/components/Timeline/Timeline.css @@ -0,0 +1,125 @@ +.contents { + padding: 0.5rem 0.5rem; + } + .cont{ + width:90vw; + margin:auto; + } + .content-section { + flex-direction: column; + padding: 0.2px 0; + } + .container-schedule { + display: block; + width: 100%; + + margin: 0 auto; + } + .daily-schedule { + margin-bottom: 1rem; + margin: 0.5rem; + + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + } + .single-event { + display: flex; + flex-direction: row; + margin-top: 0.6rem; + border-radius: 5px; + } + .date-time { + background-color: rgb(7, 82, 139); + opacity: 0.95; + display: flex; + /* flex-wrap: wrap; */ + flex-direction: column; + + padding: 1rem 1rem 1rem 1rem; + text-align:left; + white-space: nowrap; + color: #fff; + width:120px; + } + .date { + margin: 0; + padding-left: 0; + border: 1px; + font-size: 100%; + font: inherit; + vertical-align: baseline; + color: #fff; + } + + .time { + padding-left: 0; + font-size: 1.2rem; + font-weight: 700; + } + .Hackathon { + /* font-size: 100%; */ + font: inherit; + /* vertical-align: baseline; */ + border-left: 5px solid #06bb88; + } + .description { + padding-left: 1rem; + /* background-color: #52358a; */ + background-color:rgb(60, 5, 123); + /* opacity: 0.9; */ + flex:2; + color: #fff; + display: flex; + justify-content: space-between; + /* margin-left: 1rem; */ + text-align: left; + overflow: hidden; + } + + .title { + font-size: 1.1rem; + letter-spacing: 0.1rem; + font-weight: 699; + } + + .name { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + } + + .speaker { + display: flex; + align-items: center; + } + + .details { + display: flex; + flex-direction: column; + justify-content: center; + line-height: 1.5rem; + } + + @media (max-width: 767px) { + .daily-schedule { + padding: 0; + margin: 0; + } + .content-section .contents .single-event .date-time { + padding: 0.6rem; + width:85px; + } + .Hackathon { + border-left: 2px solid #12ca2b; + } + .description { + padding-left: 0.8rem; + } + + } \ No newline at end of file diff --git a/src/components/Timeline/Timeline.js b/src/components/Timeline/Timeline.js index 6709122..b1f3c00 100644 --- a/src/components/Timeline/Timeline.js +++ b/src/components/Timeline/Timeline.js @@ -1,15 +1,82 @@ import React from 'react' +import styled from 'styled-components'; +// import Raisebox from './raisebox'; +import './Timeline.css'; +import { Day1, Day2, Day3 } from './ScheduleData'; +import ScheduleCard from './ScheduleCard'; +const ScheduleContainer = styled.div` + height: 100%; + width: 100%; + align-items: center; + justify-content: center; + display: flex; +`; +const Scheduleh1 = styled.h1` + font-weight: 900; + color: #fff; + font-size: 6rem; + line-height: 0.8em; + letter-spacing: -0.07em; + @media screen and (max-width: 576px) { + font-size: 3.2rem; + } +`; +function card1(Day1) { + return ( + + ); +} +function card2(Day2) { + return ( + + ); +} + +function card3(Day3) { + return ( + + ); +} const Timeline = () => { return (
-
+
-
Timeline
-
Updating soon...
-
-
- ) -} + + + TIMELINE + {' '} + +
+
+
+
+ {Day1.map(card1)} + {Day2.map(card2)} + {Day3.map(card3)} +
+
+
+
+ + + )} + export default Timeline diff --git a/src/components/Timeline/raisebox.js b/src/components/Timeline/raisebox.js new file mode 100644 index 0000000..e3c43ae --- /dev/null +++ b/src/components/Timeline/raisebox.js @@ -0,0 +1,12 @@ +import styled from "styled-components"; + +export const Raisebox = styled.div` + min-height: 70vh; + width: 90vw; + margin: 10vh auto; + background: #18191a; + box-shadow: 2vw 2vw 2vw 1vw rgba(0, 0, 0, 0.6); + border-radius: 10px; +`; + +export default Raisebox; \ No newline at end of file diff --git a/src/components/Track/Track.js b/src/components/Track/Track.js index 4734205..a5b444b 100644 --- a/src/components/Track/Track.js +++ b/src/components/Track/Track.js @@ -3,14 +3,179 @@ import React from 'react' const Track = () => { return (
- -
-
Tracks
-
Updating soon...
- - +
+
+
+

OUR TEAM

+

Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't heard of them.

+
+
+
+ {/* team */} +
+

Holden Caulfield

+

UI Developer

+

DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.

+ {/* + + + + + + + + + + + + + + + + */} +
+
+
+
+
+ {/* team */} +
+

Alper Kamu

+

Designer

+

DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.

+ {/* + + + + + + + + + + + + + + + + */} +
+
+
+
+
+ {/* team */} +
+

Atticus Finch

+

UI Developer

+

DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.

+ {/* + + + + + + + + + + + + + + + + */} +
+
+
+
+
+ {/* team */} +
+

Henry Letham

+

Designer

+

DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.

+ {/* + + + + + + + + + + + + + + + + */} +
+
+
+
+
+ {/* team */} +
+

Moran Draxtery

+

Designer

+

DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.

+ {/* + + + + + + + + + + + + + + + + */} +
+
+
+
+
+ {/* team */} +
+

Jake Loid

+

Designer

+

DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.

+ {/* + + + + + + + + + + + + + + + + */} +
+
+
+
+
+
) } diff --git a/src/index.css b/src/index.css index c0935a6..bbf98e6 100644 --- a/src/index.css +++ b/src/index.css @@ -16,6 +16,9 @@ body { /* section{ height:100vh; } */ +*{ + box-sizing: border-box; +} code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; diff --git a/src/index.js b/src/index.js index d563c0f..f4676ef 100644 --- a/src/index.js +++ b/src/index.js @@ -3,7 +3,12 @@ import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; - +export const DeviceSize = { + mobile: 768, + tablet: 992, + laptop: 1324, + desktop: 2024, +}; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(