12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 |
- import React from "react";
- import styled from "styled-components";
- import {Container} from 'react-bootstrap'
- import TextScramble,{ScrambleTexts} from "@twistezo/react-text-scramble/lib/TextScramble";
- import lab from '../img/place_lab.png'
- const scrambleTexts: ScrambleTexts = [
- 'Anomalies',
- 'Anomalies everywhere',
- 'Freedom cannot be stopped',
- 'He looked a normal buddy'
- ]
- const Styled = styled.div`
- .jumbo {
- background: url(${lab}) no-repeat fixed bottom;
- background-size: cover;
- color: #FFFFFF;
- height: 400px;
- position: relative;
- z-index: -2;
- }
-
- .overlay{
- background-color: #fffff;
- opacity: 0.4;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: -1;
- }
-
- .text{
- padding-top: 10rem;
- text-align: center;
- align-content: center;
- z-index: 3;
- }
-
- `;
- export default function AboutPlace() {
- return(
- <Styled>
- <Container fluid className="jumbo">
- <div className="overlay"></div>
- <Container className="text">
- <h1>About Zone</h1>
- <TextScramble
- texts={scrambleTexts}
-
- />
- </Container>
- </Container>
- </Styled>
- );
- }
|