diff --git a/src/img/unaboomer.png b/src/img/unaboomer.png new file mode 100644 index 0000000..493cdd8 Binary files /dev/null and b/src/img/unaboomer.png differ diff --git a/src/styles/main.css b/src/styles/main.css index 319e5d9..d057cc0 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -18,8 +18,8 @@ body { --orange: #fd7702; --yellow: #ffbb00; - --background: var(--white); - --accent: var(--black); + --background: var(--black); + --accent: var(--white); margin: 0; padding: 0; @@ -96,4 +96,8 @@ nav::before { .wrap { word-break: break-word; +} + +.hidden { + display: none; } \ No newline at end of file diff --git a/src/styles/sections.css b/src/styles/sections.css index 6634ccf..413059f 100644 --- a/src/styles/sections.css +++ b/src/styles/sections.css @@ -27,8 +27,21 @@ #heroText { padding-top: 20vh; font-size: 4em; - width: 80%; + width: 75%; text-align: center; - margin: 2em auto .5em auto; + margin: 0 auto; +} + +#heroImage { + max-width: 300px; + margin: 0 auto; + animation: fadeIn 4s ease-in; } - \ No newline at end of file + +@keyframes fadeIn { + 0% { opacity: 0 } + 25% { opacity: .05 } + 50% { opacity: .10 } + 75% { opacity: .5 } + 100% { opacity: 1 } +} \ No newline at end of file diff --git a/src/template/Sections.jsx b/src/template/Sections.jsx index 3d1dfe0..8868dcd 100644 --- a/src/template/Sections.jsx +++ b/src/template/Sections.jsx @@ -2,15 +2,19 @@ import React from 'react'; import Typewriter from 'react-ts-typewriter'; import { Panel } from "./Panel"; +import Boomer from '../img/unaboomer.png'; import '../styles/sections.css'; export class Section1 extends React.Component { constructor(props) { super(props); - this.state = {title: ''}; + this.state = {title: '', showImage: false}; setInterval(() => { - this.setState({title: 'The Web3 Revolution and it\'s consequences have been a disaster for the human race.'}); + this.setState({ + title: 'The Web3 Revolution and it\'s consequences have been a disaster for the human race.', + showImage: true + }); }, 1200); } @@ -20,6 +24,8 @@ export class Section1 extends React.Component {