Position fronpage items

j285he-front-page
Jared He 2 months ago
parent 8710faaa63
commit e8ce17fd82
  1. 2
      components/Timeline.tsx
  2. 45
      pages/frontpage.module.css
  3. 5
      pages/index.tsx

@ -32,7 +32,7 @@ export function Timeline({
lineWidth = 5,
outerCircleWidth = 30,
innerCircleWidth = 15,
timeWidth = 300,
timeWidth = 1000,
textWidth = 500,
gap = 50,
className,

@ -4,12 +4,47 @@
align-items: center;
}
.title {
position: relative;
width: 1300px;
height: 900px;
border: 1px solid orange;
}
.titleImage {
position: absolute;
top: 20px;
}
.bubble {
position: absolute;
bottom: 10px;
left: 200px;
background-color: var(--pink);
opacity: 50%;
border-radius: 50px;
}
.decoratorSolid {
position: absolute;
top: 40px;
right: 40px;
background-color: var(--primary-accent-light);
width: 250px;
height: 180px;
opacity: 50%;
border-radius: 50px;
}
.decoratorDots {
position: absolute;
right: 10px;
background-color: var(--link);
width: 180px;
height: 280px;
}
.main > * {
margin-top: 65px;
margin-bottom: 65px;
}
.left {
align-self: flex-start;
margin-left: 100px;
}

@ -20,6 +20,7 @@ export default function Home() {
alt="A picture of the University of Waterloo campus"
width={720}
height={480}
className={styles.titleImage}
/>
<div className={styles.bubble}>
<h1>Computer Science 2022</h1>
@ -58,8 +59,8 @@ export default function Home() {
you see!
</p>
</CenterWrapper>
<Sections data={sectionsData} className={styles.left} />
<Timeline data={mockTimelineData} className={styles.left} />
<Sections data={sectionsData} />
<Timeline data={mockTimelineData} />
<p>
Click <Link href="/playground">here</Link> to visit the playground
<br />

Loading…
Cancel
Save