-
-
-
-
-
-
+
);
}
diff --git a/src/components/About.js b/src/components/About.js
deleted file mode 100644
index 779fc1c..0000000
--- a/src/components/About.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { IconBoxCard } from './IconBoxCard';
-import { Wrapper } from './Wrapper';
-import CardBlock from './CardBlock';
-
-import image1 from '../images/quality.png';
-import image2 from '../images/professionalism.png';
-import image3 from '../images/delegate.png';
-
-const aboutCards =
- <>
-
-
-
-
-
-
-const About = () => {
- return (
-
-
-
- )
-}
-
-export default About;
\ No newline at end of file
diff --git a/src/components/CardBlock.js b/src/components/CardBlock.js
deleted file mode 100644
index 8e20b64..0000000
--- a/src/components/CardBlock.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import styled from 'styled-components';
-
-const Container = styled.div`
- width: 100%;
- max-width: 1280px;
- padding: 0;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-content: center;
- background-color: #fff;
-
- &.dark {
- background-color: #1A1B22;
- color: #fff;
- }
-
- &.neutral & {
- background-color: #e5e5e5;
- color: #000;
- }
-`;
-
-const Title = styled.h2`
- font-family: 'SuisseInti-Book', 'Helvetica', sans-serif;
- font-style: normal;
- font-weight: normal;
- font-size: 48px;
- line-height: 56px;
- /* color: #FFFFFF; */
- margin: 0 auto;
- text-align: center;
- margin: 0;
- width: 100%;
-
- @media screen and (max-width: 600px) {
- font-size: 34px;
- line-height: 40px;
- text-align: left;
- }
-
- @media screen and (max-width: 400px) {
- width: 288px;
- font-size: 32px;
- line-height: 37px;
- }
-`;
-
-const Intro = styled.p`
- max-width: 840px;
- font-family: 'SuisseInti-Book', 'Helvetica', sans-serif;
- font-style: normal;
- font-weight: normal;
- font-size: 30px;
- line-height: 40px;
- text-align: center;
- /* color: #DDDDDD; */
- margin: 40px auto 80px auto;
-
- @media screen and (max-width: 600px) {
- font-size: 20px;
- line-height: 30px;
- text-align: left;
- }
-`;
-
-const CardWrapper = styled.div`
- width: 100%;
- display: inline-flex;
- flex-wrap: wrap;
- row-gap: 77px;
- justify-content: center;
- align-content: center;
- margin: 0;
-
- @media screen and (max-width: 400px) {
- flex-direction: column;
- }
-`;
-
-const CardBlock = ({ title, intro, cards, color }) => {
- return (
-
- {title}
- {intro}
-
- {cards}
-
-
- )
-}
-
-export default CardBlock;
diff --git a/src/components/Header.js b/src/components/Header.js
deleted file mode 100644
index 914727d..0000000
--- a/src/components/Header.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import styled from 'styled-components';
-import { Wrapper } from './Wrapper';
-import HeaderImg from '../images/header.png';
-
-const HeaderContainer = styled.div`
- position: relative;
- height: 530px;
- width: 100%;
- max-width: 1280px;
- display: flex;
- align-items: center;
-
- @media (min-width: 780px) and (max-width: 1320px) {
- align-items: flex-start;
- }
-
- @media screen and (max-width: 779px) {
- justify-content: center;
- height: auto;
- }
-`;
-
-const TextContainer = styled.div`
- width: 650px;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
-
- @media screen and (max-width: 779px) {
- width: auto;
- align-items: center;
- }
-`
-
-const Title = styled.h1`
- margin: 0;
- font-size: 48px;
- line-height: 56px;
-
- @media screen and (max-width: 779px) {
- max-width: 430px;
- font-size: 34px;
- line-height: 39px;
- }
-`;
-
-const TitleContrast = styled.span`
- color: #FF9900;
-`;
-
-const Image = styled.img`
- max-width: 542px;
- max-height: 530px;
- position: absolute;
- bottom: 0;
- right: 0;
-
- @media (min-width: 1124px) and (max-width: 1260px) {
- width: 440px;
- }
-
- @media (min-width: 780px) and (max-width: 1123px) {
- max-width: 366px;
- max-height: 358px;
- }
-
- @media screen and (max-width: 779px) {
- position: relative;
- max-width: 366px;
- margin-top: 30px;
- }
-`;
-
-const HeaderButton = styled.button`
- margin-top: 60px;
- width: fit-content;
- padding: 20px 60px;
- border-radius: 40px;
- border: none;
- background-color: #ff9900;
- color: white;
- font-size: 24px;
- line-height: 32px;
- transition: all .2s ease-in-out;
- cursor: pointer;
- overflow: visible;
- &:hover {
- transform: scale(1.05);
- }
-
- @media screen and (max-width: 779px) {
- margin-top: 30px;
- }
-`;
-
-const Header = () => {
- return (
-
-
-
- Your task. Done by data and web development students. <TitleContrast>For free!</TitleContrast>
-
- Delegate a task
-
-
-
- )
-}
-
-export default Header;
diff --git a/src/components/IconBoxCard.js b/src/components/IconBoxCard.js
deleted file mode 100644
index 09c74b2..0000000
--- a/src/components/IconBoxCard.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import styled from "styled-components";
-import { GlobalCard } from './global-components/global-card/globalCard';
-
-export const IconBoxCard = styled(GlobalCard).attrs({ className: "iconBoxCard" })`
- border: none;
- border-radius: 0;
- max-width: 400px;
- height: 100%;
- background: transparent;
-
- &:nth-child(2) {
- margin: 0 40px;
- }
-
- @media screen and (max-width: 400px) {
- width: 300px;
- margin: 0 auto;
- &:nth-child(2) {
- margin-left: auto;
- margin-right: auto;
- margin-top: 32px;
- margin-bottom: 32px;
- }
- }
-`;
diff --git a/src/components/Useful/Useful.js b/src/components/Useful/Useful.js
deleted file mode 100644
index 193206a..0000000
--- a/src/components/Useful/Useful.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { IconBoxCard } from '../IconBoxCard';
-import { Wrapper } from '../Wrapper';
-import CardBlock from '../CardBlock';
-
-import image1 from '../../images/resource-saving.png';
-import image2 from '../../images/publicize.png';
-import image3 from '../../images/pr-boost.png';
-
-const usefulCards =
- <>
-
-
-
-
-
-
-const Useful = () => {
- return (
-
-
-
- )
-}
-
-export default Useful;
diff --git a/src/components/Useful/Useful.styles.js b/src/components/Useful/Useful.styles.js
deleted file mode 100644
index 35f0a45..0000000
--- a/src/components/Useful/Useful.styles.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import styled from "styled-components";
-import { GlobalCard } from '../global-components/global-card/globalCard';
-
-
-export const Container = styled.div`
- width: 100%;
- max-width: 1280px;
- padding: 0 0 20px 0;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-content: center;
-
- @media screen and (max-width: 600px) {
- padding: 0;
- }
-`;
-
-
-export const IconBoxTitle = styled.h2`
- font-family: 'SuisseInti-Book', 'Helvetica', sans-serif;
- font-style: normal;
- font-weight: normal;
- font-size: 48px;
- line-height: 56px;
- color: #FFFFFF;
- margin: 0 auto;
- text-align: center;
- margin: 0;
- width: 100%;
-
- @media screen and (max-width: 600px) {
- font-size: 34px;
- line-height: 40px;
- text-align: left;
- }
-
- @media screen and (max-width: 400px) {
- width: 288px;
- font-size: 32px;
- line-height: 37px;
- }
-
-
-`;
-
-export const IconBoxIntro = styled.p`
- max-width: 840px;
- font-family: 'SuisseInti-Book', 'Helvetica', sans-serif;
- font-style: normal;
- font-weight: normal;
- font-size: 30px;
- line-height: 40px;
- text-align: center;
- color: #DDDDDD;
- margin: 40px auto 80px auto;
-
- @media screen and (max-width: 600px) {
- font-size: 20px;
- line-height: 30px;
- text-align: left;
- }
-`;
-
-
-export const CardWrapper = styled.div.attrs({ className: "cards" })`
- width: 100%;
- display: inline-flex;
- flex-wrap: wrap;
- row-gap: 77px;
- justify-content: center;
- align-content: center;
- margin: 0;
-
- @media screen and (max-width: 400px) {
- flex-direction: column;
- }
-`;
-
-export const IconBoxCard = styled(GlobalCard).attrs({ className: "iconBoxCard" })`
- border: none;
- border-radius: 0;
- max-width: 400px;
- height: 100%;
- background: transparent;
-
- &:nth-child(2) {
- margin: 0 40px;
- }
-
- @media screen and (max-width: 400px) {
- width: 300px;
- margin: 0 auto;
- &:nth-child(2) {
- margin-left: auto;
- margin-right: auto;
- margin-top: 32px;
- margin-bottom: 32px;
- }
- }
-`;
-
-
diff --git a/src/components/Wrapper.js b/src/components/Wrapper.js
deleted file mode 100644
index df4632a..0000000
--- a/src/components/Wrapper.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import styled, { css } from 'styled-components';
-
-export const Wrapper = styled.section`
- width: 100%;
- background-color: #fff;
- color: #000;
- padding: 100px 80px;
- margin: 0 auto;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- box-sizing: border-box;
- ${({ dark }) =>
- dark &&
- css`
- background-color: #1A1B22;
- color: #fff;
- `}
- ${({ neutral }) =>
- neutral &&
- css`
- background-color: #e5e5e5;
- color: #000;
- `}
-
- @media (min-width: 601px) and (max-width: 1024px) {
- padding: 100px 40px;
- }
-
- @media screen and (max-width: 600px) {
- padding: 60px 16px;
- }
-`;
diff --git a/src/components/bubble/bubble.js b/src/components/bubble/bubble.js
deleted file mode 100644
index fcbad38..0000000
--- a/src/components/bubble/bubble.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Wrapper } from '../Wrapper';
-import { Container, BubbleTitle, ChatWrapper, LeftTextWrapper, IconWrapper, IconImage, OrangeCard, RightTextWrapper, WhiteCard, DelegateTaskButtonWrapper, DelegateButton } from './bubble.styles';
-
-import chatIcon from '../../images/ChatIcon.png';
-
-const Bubble = () => {
-
- const conversation = [
- {
- chatLeft: true,
- chatText: "Practicum by Yandex is a kind of boot camp. Our goal is to help ambitious and passionate people to master it and find their first job. At the same time, the level of our training allows graduates to carry out high-quality real projects of companies under the review of experienced mentors."
- },
- {
- chatLeft: false,
- chatText: "Who will solve the problems? How much does it cost?"
- },
- {
- chatLeft: true,
- chatText: "It is a win-win situation: we take real tasks from real companies and give them to graduates of Data Science and Data Analytics courses. The results of these tasks will be repeatedly checked by curators and returned to the customer as ordered for free."
- },
- {
- chatLeft: false,
- chatText: "Why is it free?"
- },
- {
- chatLeft: true,
- chatText: "Because Practicum has students who are eager to gain real life experience, find them interesting and useful, and are ready to take on your tasks"
- },
- {
- chatLeft: false,
- chatText: "Wow! I'm ready to start!"
- }
- ]
-
- return (
-
-
- What is Practicum by Yandex?
-
- {conversation.map((element, i) => {
- return (
- element.chatLeft ?
-
-
-
-
-
-
- :
-
-
-
-
- )
- })}
-
-
-
-
- Delegate a task
-
-
-
-
- )
-}
-
-export default Bubble;
\ No newline at end of file
diff --git a/src/components/bubble/bubble.styles.js b/src/components/bubble/bubble.styles.js
deleted file mode 100644
index 18dfafd..0000000
--- a/src/components/bubble/bubble.styles.js
+++ /dev/null
@@ -1,153 +0,0 @@
-import styled from 'styled-components';
-import { GlobalCard } from '../global-components/global-card/globalCard';
-import { GlobalButton } from '../global-components/global-components';
-
-export const Container = styled.div`
- width: 100%;
- max-width: 1280px;
- padding: 0;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-content: center;
- box-sizing: border-box;
-
- @media screen and (max-width: 320px) {
- padding: 60px 0;
- }
-`;
-
-export const BubbleTitle = styled.h2`
- margin: 0 auto 80px auto;
- font-family: 'SuisseInti-Book', 'Helvetica', sans-serif;
- font-style: normal;
- font-weight: normal;
- font-size: 48px;
- line-height: 56px;
- color: #000000;
- overflow: hidden;
- align-self: center;
- display: inline-block;
-
- @media screen and (max-width: 700px) {
- font-size: 40px;
- line-height: 46px;
- margin: 0 auto 40px auto;
- }
-
- @media screen and (max-width: 600px) {
- font-size: 34px;
- line-height: 40px;
- }
-
- @media screen and (max-width: 560px) {
- width: 288px;
- font-size: 32px;
- line-height: 37px;
- margin: 0 auto 32px auto;
- text-align: center;
- width: 100%;
- }
-
-`;
-
-export const ChatWrapper = styled.div`
- max-width: 100%;
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- @media screen and (max-width: 1024px) {
- padding: 0 40px;
- }
-
- @media screen and (max-width: 320px) {
- padding: 0 16px;
- }
-
-`;
-
-export const LeftTextWrapper = styled.div`
- position: relative;
- display: flex;
- justify-content: flex-start;
- align-content: center;
- overflow: visible;
- align-self: flex-start;
- margin-bottom: 40px;
-`;
-
-export const IconWrapper = styled.div`
- width: 48px;
- display: flex;
- justify-content: center;
- align-content: center;
- position: relative;
- overflow: visible;
-
- @media screen and (max-width: 700px) {
- display: none;
- }
-`;
-
-export const IconImage = styled.img`
- position: absolute;
- bottom: -25px;
-`;
-
-export const OrangeCard = styled(GlobalCard).attrs({className: 'OrangeCard'})`
- margin-left: 40px;
- border-bottom-left-radius: 0;
- background-color: #FF9900;
- max-width: 840px;
-
- @media screen and (max-width: 1024px) {
- margin-left: 20px;
- }
- @media screen and (max-width: 720px) {
- margin-left: 0;
- }
-
- @media screen and (max-width: 320px) {
-
- }
-
- @media screen and (max-width: 700px) {
- margin-left: 0;
- }
-`;
-
-export const RightTextWrapper = styled.div`
- position: relative;
- display: flex;
- justify-content: flex-end;
- align-content: center;
- overflow: visible;
- align-self: flex-end;
- margin-bottom: 40px;
- width: auto;
-`;
-
-export const WhiteCard = styled(GlobalCard).attrs({className: 'WhiteCard'})`
- max-width: 554px;
- border-bottom-right-radius: 0;
- background-color: #fff;
- color: #000;
-
- @media screen and (max-width: 320px) {
- margin-left: 0;
- }
-`;
-
-export const DelegateTaskButtonWrapper = styled.div`
- width: 100%;
- margin-top: 60px;
- display: flex;
- justify-content: center;
- align-content: center;
-`;
-
-export const DelegateButton = styled(GlobalButton)`
- width: 293px;
-`;
\ No newline at end of file
diff --git a/src/components/global-components/global-card/globalCard.js b/src/components/global-components/global-card/globalCard.js
deleted file mode 100644
index 5466d47..0000000
--- a/src/components/global-components/global-card/globalCard.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import { Card, ProjectCover, ProjectWrapper, ProjectTitle, ProjectIntro, ProjectDate, ProjectLink, ClientWrapper, HeaderWrapper, ClientPic, ClientName, ClientPos, ClientRev, ClientPicWrapper, ClientInfoWrapper, StudentsWrapper, StudentsPicsWrapper, StudentsPics, StudentsInfoWrapper, StudentsTitle, StudentsNames, StudentsRev, ReviewLink, IconBoxWrapper, ImageWrapper, IconBoxImage, IconBoxTitle, IconBoxText, RequestsImageWrapper, RequestsWrapper, RequestsImage, RequestsHash, RequestsTitle, ChatText, HeaderStudentWrapper } from './globalCard.styles';
-
-
-export const GlobalCard = ({
- className,
- children,
- coverPic,
- projectTitle,
- projectIntro,
- projectDate,
- href,
- clientName,
- clientPic,
- clientPos,
- clientRev,
- studentsTeam,
- studentName1,
- studentsReview,
- studentPic,
- reviewLink,
- iconBoxImage,
- iconBoxTitle,
- iconBoxText,
- requestsImage,
- requestsHash,
- requestsTitle,
- chatText
-}) => {
- return (
-
- {children}
-
- {coverPic && }
-
- {projectTitle &&
-
- {projectTitle}
- {projectIntro}
- {projectDate}
- Visit wbesite →
-
- }
-
- {clientName &&
-
-
-
-
-
-
- {clientName}
- {clientPos}
-
-
- {clientRev}
- Read full review
-
- }
-
- {studentsTeam &&
-
-
-
-
-
-
-
-
- {studentsTeam}
- {studentName1},{''} {studentName1}, {''}{studentName1}
-
-
- {studentsReview}
-
- }
-
- {iconBoxImage &&
-
-
-
-
- {iconBoxTitle}
- {iconBoxText}
-
- }
-
- {requestsImage &&
-
- {requestsHash}
- {requestsTitle}
-
-
-
-
-
-
-
- }
-
- {chatText &&
- {chatText}
- }
-
-
-
-
- )
-}
\ No newline at end of file
diff --git a/src/components/global-components/global-card/globalCard.styles.js b/src/components/global-components/global-card/globalCard.styles.js
deleted file mode 100644
index 4dbde75..0000000
--- a/src/components/global-components/global-card/globalCard.styles.js
+++ /dev/null
@@ -1,553 +0,0 @@
-import styled from "styled-components";
-
-
-export const Card = styled.div`
- position: relative;
- justify-content: center;
- align-content: center;
- display: flex;
- border-radius: 14px;
- margin: 0;
-`;
-// PROJECT COVER CARD
-export const ProjectCover = styled.img`
- object-fit: fill;
- object-position: center center;
- border-radius: 14px;
-
- @media screen and (max-width: 960px) {
-
- }
-
- @media screen and (max-width: 400px) {
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- height: 250px;
- }
-`;
-// PROJECT INFO
-
-export const ProjectWrapper = styled.div`
- width: 565px;
- margin: 32px 33px 32px auto;
- display: flex;
- flex-direction: column;
- position: relative;
- overflow: hidden;
-
- @media screen and (max-width: 1280px) {
- margin: 20px 20px 20px auto;
- padding-left: 20px;
- width: 442px;
- }
-
- @media screen and (max-width: 960px) {
- margin: 20px;
- align-self: center;
- width: 100%;
- }
-
- @media screen and (max-width: 400px) {
- padding-left: 0;
- width: 276px;
- height: 237px;
- margin: 20px 12px;
- }
-`;
-
-export const ProjectTitle = styled.h2`
- font-family: 'SuisseInti-Book';
- font-style: normal;
- font-weight: normal;
- font-size: 48px;
- line-height: 56px;
- color: #000000;
- width: 565px;
- margin: 0 33px 20px auto;
- overflow: visible;
-
- @media screen and (max-width: 1280px) {
- width: 442px;
- font-size: 48px;
- line-height: 56px;
- }
-
- @media screen and (max-width: 400px) {
- width: 276px;
- height: 37px;
- margin-bottom: 12px;
- font-size: 32px;
- line-height: 37px;
-
- }
-`;
-
-export const ProjectIntro = styled.p`
- font-family: 'SuisseInti-Book';
- font-style: normal;
- font-weight: normal;
- font-size: 20px;
- line-height: 30px;
- color: #616161;
- margin: 0 auto 160px auto;
- overflow: visible;
-
- @media screen and (max-width: 1280px) {
- font-size: 20px;
- line-height: 30px;
- margin: 0 auto 140px auto;
- }
-
- @media screen and (max-width: 400px) {
- width: 276px;
- height: 60px;
- font-size: 16px;
- line-height: 20px;
- margin: 0 0 112px 0;
-
- }
-`;
-
-export const ProjectDate = styled.p`
- font-family: 'SuisseInti-Book';
- margin: 0;
- font-style: normal;
- font-weight: normal;
- font-size: 14px;
- line-height: 20px;
- color: #616161;
- margin: 0;
-
- @media screen and (max-width: 400px) {
- position: absolute;
- bottom: 0;
- left: 0;
-
- }
-`;
-
-export const ProjectLink = styled.a`
- font-family: 'SuisseInti-Book';
- font-style: normal;
- font-weight: normal;
- font-size: 14px;
- line-height: 20px;
- text-align: right;
- color: #FF9900;
- position: absolute;
- bottom: 0;
- right: 0;
- &:hover {
- cursor: pointer;
- }
-`;
-
-// PROJECT CLIENT REVIEW
-export const ClientWrapper = styled.div`
- width: 565px;
- margin: 32px;
- position: relative;
-
- @media screen and (max-width: 1280px) {
- margin: 20px;
- width: 442px;
- }
- @media screen and (max-width: 960px) {
- margin: 20px;
- width: 100%;
- }
-
- @media screen and (max-width: 400px) {
- margin: 12px;
- font-size: 24px;
- line-height: 28px;
-
- }
-`;
-
-export const HeaderWrapper = styled.div`
- display: flex;
- margin-bottom: 32px;
- height: 60px;
-
- @media screen and (max-width: 1280px) {
- margin-bottom: 20px;
- }
-
-`;
-
-export const ClientPicWrapper = styled.div`
- display: flex;
- justify-content: center;
- align-content: center;
- width: 60px;
- height: 60px;
-
-`;
-
-export const ClientPic = styled.img``;
-
-export const ClientInfoWrapper = styled.div`
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-content: flex-start;
- margin: 0 0 0 24px;
-
- @media screen and (max-width: 400px) {
- margin: 0 0 0 12px;
-
- }
-`;
-
-export const ClientName = styled.h2`
- font-family: 'SuisseInti-Book';
- font-style: normal;
- font-weight: normal;
- font-size: 30px;
- line-height: 35px;
- color: #000000;
- margin: 0;
- overflow: hidden;
-
- @media screen and (max-width: 400px) {
- font-size: 24px;
- line-height: 28px;
-
- }
-
-`;
-
-export const ClientPos = styled.h3`
- font-family: 'SuisseInti-Book';
- font-style: normal;
- font-weight: normal;
- font-size: 16px;
- line-height: 19px;
- color: #616161;
- margin: 8px 0 0 0 ;
- overflow: hidden;
-`;
-
-export const ClientRev = styled.p`
- font-family: 'SuisseInti-Book';
- font-style: normal;
- font-weight: normal;
- font-size: 20px;
- line-height: 30px;
- color: #616161;
- overflow: hidden;
- margin: 0;
-
- @media screen and (max-width: 400px) {
- font-size: 16px;
- line-height: 20px;
-
- }
-
-
-`;
-
-// STUDENTS SECTION
-
-export const StudentsWrapper = styled.div`
- width: 565px;
- margin: 32px 33px;
- position: relative;
-
- @media screen and (max-width: 1280px) {
- margin: 20px;
- width: 442px;
- }
-
- @media screen and (max-width: 960px) {
- width: 100%;
- }
-
- @media screen and (max-width: 400px) {
- width: 100%;
- }
-`;
-
-export const HeaderStudentWrapper = styled.div`
- display: flex;
- margin-bottom: 32px;
- height: 60px;
-
- @media screen and (max-width: 1280px) {
- margin-bottom: 20px;
- }
-
- @media screen and (max-width: 400px) {
- flex-direction: column;
- height: 90px;
-
- }
-
-`;
-
-export const StudentsPicsWrapper = styled.div`
- height: 60px;
- width: 180px;
- position: relative;
- margin-right: 20px;
-
- @media screen and (max-width: 400px) {
- margin-bottom: 16px;
- height: 30px;
- width: 90px;
- }
-`;
-
-export const StudentsPics = styled.img`
- height: 60px;
- width: 60px;
- position: relative;
-
- &:nth-child(1) {
- transform: translateX(0);
- z-index: 200;
- }
- &:nth-child(2) {
- transform: translateX(-20px);
- z-index: 1;
- }
- &:nth-child(3) {
- position: absolute;
- transform: translateX(-40px)
- }
-
- @media screen and (max-width: 400px) {
- height: 30px;
- width: 30px;
- &:nth-child(1) {
- transform: translateX(0);
- z-index: 200;
- }
- &:nth-child(2) {
- transform: translateX(-10px);
- z-index: 100;
- }
- &:nth-child(3) {
- transform: translateX(-20px);
- z-index: 0;
- }
-}
-
-`;
-
-export const StudentsInfoWrapper = styled.div`
- display: flex;
- flex-direction: column;
- justify-content: baseline;
- align-content: flex-start;
- margin: auto 0 0 0;
- @media screen and (max-width: 400px) {
- margin: 0;
- }
-`;
-
-export const StudentsTitle = styled.h2`
- margin: 0;
- font-family: 'SuisseInti-Book';
- font-style: normal;
- font-weight: normal;
- font-size: 30px;
- line-height: 35px;
- color: #000000;
- align-self: center;
- overflow: hidden;
-
- @media screen and (max-width: 400px) {
- font-size: 24px;
- line-height: 28px;
- @media screen and (max-width: 400px) {
- align-self: flex-start;
- }
- }
-`;
-
-export const StudentsNames = styled.p`
- margin: 0;
- font-family: 'SuisseInti-Book';
- font-style: normal;
- font-weight: normal;
- font-size: 16px;
- line-height: 19px;
- color: #616161;
- overflow: hidden;
-
-
-`;
-export const StudentsRev = styled.p`
- font-family: 'SuisseInti-Book';
- font-style: normal;
- font-weight: normal;
- font-size: 20px;
- line-height: 30px;
- color: #616161;
- margin: 0;
-
- @media screen and (max-width: 400px) {
- font-size: 16px;
- line-height: 20px;
- }
-`;
-
-export const ReviewLink = styled.a`
- font-family: 'SuisseInti-Book';
- font-style: normal;
- font-weight: normal;
- font-size: 14px;
- line-height: 20px;
- text-align: right;
- color: #FF9900;
- position: absolute;
- bottom: 0;
- left: 0;
-`;
-
-
-// ICONBOX SECTION
-
-export const IconBoxWrapper = styled.div`
- display: flex;
- flex-direction: column;
- align-content: center;
- justify-content: center;
-`;
-
-export const ImageWrapper = styled.div`
- width: 400px;
- height: 202px;
- display: flex;
- align-content: center;
- justify-content: center;
- margin: 0 auto;
-
- @media screen and (max-width: 400px) {
- width: 300px;
- height: 156px;
- }
-`;
-
-export const IconBoxImage = styled.img`
-
-`;
-
-export const IconBoxTitle = styled.h2`
- width: 400px;
- font-family: 'SuisseInti-Book';
- font-style: normal;
- font-weight: normal;
- font-size: 32px;
- line-height: 37px;
- text-align: center;
- color: #FF9900;
- overflow: hidden;
-
- @media screen and (max-width: 400px) {
- width: 288px;
- font-size: 32px;
- line-height: 37px;
- margin: 0 auto;
- }
-`;
-
-export const IconBoxText = styled.p`
- width: 400px;
- font-family: 'SuisseInti-Book';
- font-style: normal;
- font-weight: normal;
- font-size: 20px;
- line-height: 30px;
- text-align: center;
- color: #DDDDDD;
-
- @media screen and (max-width: 400px) {
- width: 288px;
- font-size: 20px;
- line-height: 30px;
- margin: 24px auto 0 auto;
- }
-`;
-
-// REQUESTS SECTION
-
-export const RequestsWrapper = styled.div`
- display: flex;
- flex-direction: column;
- align-content: center;
- justify-content: center;
-`;
-
-export const RequestsHash = styled.p`
- overflow: hidden;
- font-family: 'SuisseInti-Book';
- font-style: normal;
- font-weight: normal;
- font-size: 16px;
- line-height: 20px;
- text-align: center;
- color: #FF9900;
- margin: 30px 0 10px 0;
-
- @media screen and (max-width: 400px) {
- font-size: 16px;
- line-height: 20px;
- }
-`;
-
-export const RequestsTitle = styled.h2`
- font-family: 'SuisseInti-Book';
- font-style: normal;
- font-weight: normal;
- font-size: 30px;
- line-height: 40px;
- text-align: center;
- color: #000000;
- margin: 0 0 20px 0;
-
- @media screen and (max-width: 400px) {
- font-size: 24px;
- line-height: 30px;
- }
-`;
-
-export const RequestsImageWrapper = styled.div`
- width: 400px;
- height: 281px;
- display: flex;
- align-content: center;
- justify-content: center;
- margin: 0 auto;
- @media screen and (max-width: 400px) {
- width: 300px;
- height: 156px;
- }
-`;
-
-export const RequestsImage = styled.img`
-
-`;
-
-// CHAT CARDS
-
-export const ChatText = styled.p`
- font-family: 'SuisseInti-Book';
- font-style: normal;
- font-weight: normal;
- font-size: 20px;
- line-height: 30px;
- /* or 150% */
- margin: 30px;
-
- @media screen and (max-width: 420px) {
- font-size: 16px;
- line-height: 20px;
- }
-
- @media screen and (max-width: 420px) {
- margin: 14px;
- }
-`;
\ No newline at end of file
diff --git a/src/components/global-components/global-components.js b/src/components/global-components/global-components.js
deleted file mode 100644
index cd1e5cd..0000000
--- a/src/components/global-components/global-components.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import styled from 'styled-components';
-
-export const GlobalButton = styled.button`
- all: unset;
- position: relative;
- display: grid;
- place-items: center;
- cursor: pointer;
- transition: all 0.3s;
- text-align: center;
- border: 2px solid #FF9900;
- border-radius: 40px;
-
- background: ${props => props.orange ? "#FF9900" : "#FFFFFF"};
- color: ${props => props.orange ? "#FFFFFF" : "#FF9900"};
-
- margin: ${props => props.marginb ? "0 20px" : "0"};
-
- height: ${props => props.header ? "60px" : "70px"};
- font-size: ${props => props.header ? "16px" : "24px"};
- line-height: ${props => props.header ? "20px" : "28px"}28px;
-
- font-family: 'SuisseInti-Book';
- font-style: normal;
- font-weight: 400;
-
-`;
-
diff --git a/src/components/index.js b/src/components/index.js
deleted file mode 100644
index 3d0051c..0000000
--- a/src/components/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./global-components";
-export { default as GlobalCard } from "./global-card/globalCard";
\ No newline at end of file
diff --git a/src/components/projects/projects.js b/src/components/projects/projects.js
deleted file mode 100644
index 855bf5a..0000000
--- a/src/components/projects/projects.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import React from 'react';
-import { Container, CoverCard, ProjectCard, BottomCards, ClientCard, StudentsCard, ProjectsLinkWrapper, ProjectCardWrapper, ProjectsBottomLinksWrapper, ProjectButton, ProjectsIntroWrapper, TextWrapper, ImageIntroWrapper, ProjectIntroTitle, ProjectIntroText, ImageProjectIntro, ProjectButtonBottom } from './projects.style';
-import { Wrapper } from '../Wrapper';
-
-import BounceLoader from "react-spinners/ClipLoader";
-import { client } from '../../helper/client';
-
-import imageIntro from '../../images/projects-intro.png';
-
-const Projects = () => {
- const [isLoaded, setIsLoaded] = React.useState(false);
- const [contentfulId, setContentfulId] = React.useState('');
- const [projectData, setProjectData] = React.useState({});
-
- const contentfullData = (id) => {
- client(id)
- .then(res => {
- setProjectData(res.items);
- })
- }
-
- const handleId = (projectId) => {
- const thisIsId = projectId;
- setContentfulId(thisIsId);
- contentfullData(thisIsId);
- }
-
- React.useEffect(() => {
- contentfullData(contentfulId)
- }, []);
-
- const projectContent = projectData;
- console.log(projectContent)
- setTimeout(() => {
- setIsLoaded(true)
- }, 2000);
-
- return (
-
-
-
-
- Delegate tasks to those who enjoy them
- Check out the projects our students have done for companies in the USA and beyond
-
-
-
-
-
-
-
- handleId('projects')} projects >Web development
- handleId('dataAnalysisProjects')} projects >Data analysis
- Data science
-
-
- {isLoaded
- ?
-
- projectContent.map((element, i) => {
- console.log(element.fields.student1.fields.file.url)
- return (
-
-
-
-
-
-
-
-
-
-
-
- )
- })
-
-
- :
-
-
- }
-
-
- More projects...
- Delegate a task
-
-
-
-
- )
-}
-
-
-export default Projects;
\ No newline at end of file
diff --git a/src/components/projects/projects.style.js b/src/components/projects/projects.style.js
deleted file mode 100644
index 52e9ab0..0000000
--- a/src/components/projects/projects.style.js
+++ /dev/null
@@ -1,317 +0,0 @@
-import styled from "styled-components";
-import { GlobalCard } from '../global-components/global-card/globalCard';
-import { GlobalButton } from '../global-components/global-components';
-
-export const Container = styled.div`
- width: 100%;
- max-width: 1280px;
- padding: 0;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-content: center;
-`;
-
-export const ProjectsIntroWrapper = styled.div`
- max-width: 1280px;
- display: flex;
- justify-content: space-between;
- align-content: center;
- margin: 0 auto 60px auto;
-
- @media screen and (max-width: 960px) {
- flex-direction: column-reverse;
- }
-
- @media screen and (max-width: 400px) {
- width: 320px;
- margin: 0 auto 40px auto;
- }
-`;
-
-export const TextWrapper = styled.div`
- max-width: 620px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-content: center;
-
- @media screen and (max-width: 960px) {
- margin: 0 auto;
- }
-
- @media screen and (max-width: 400px) {
- width: 280px;
- }
-`;
-
-export const ProjectIntroTitle = styled.h2`
- width: 100%;
- font-family: 'SuisseInti-Book', 'Helvetica', sans-serif;
- font-style: normal;
- font-weight: normal;
- font-size: 48px;
- line-height: 56px;
- color: #000000;
- margin: 0;
-
- @media screen and (max-width: 600px) {
- font-size: 34px;
- line-height: 40px;
- }
-
- @media screen and (max-width: 400px) {
- width: 280px;
- font-size: 32px;
- line-height: 37px;
- }
-`;
-
-export const ProjectIntroText = styled.p`
- font-family: 'SuisseInti-Book', 'Helvetica', sans-serif;
- font-style: normal;
- font-weight: normal;
- font-size: 24px;
- line-height: 32px;
- color: #616161;
- margin: 40px 0 0 0;
-
- @media screen and (max-width: 600px) {
- font-size: 20px;
- line-height: 30px;
- }
-`;
-
-export const ImageIntroWrapper = styled.div`
- display: flex;
- justify-content: flex-end;
-
- @media screen and (max-width: 960px) {
- justify-content: center;
- }
-
- @media screen and (max-width: 320px) {
- width: 320px;
- }
-`;
-
-export const ImageProjectIntro = styled.img`
- max-width: 520px;
- display: flex;
- justify-content: flex-end;
-
- @media screen and (max-width: 1280px) {
- max-width: 452px;
- }
-
- @media screen and (max-width: 400px) {
- max-width: 320px;
- }
-
-`;
-
-
-export const ProjectsLinkWrapper = styled.div`
- width: 100%;
- display: flex;
- justify-content: center;
- align-content: center;
- margin: 0 0 80px 0;
- position: relative;
- max-width: 1280px;
- align-self: center;
-
- @media screen and (max-width: 960px) {
- flex-direction: column;
- margin: 0 0 40px 0;
- }
-`;
-
-export const ProjectButton = styled(GlobalButton)`
- align-self: center;
- width: 400px;
- &:nth-child(2) {
- margin: 0 40px;
- }
-
- @media screen and (max-width: 1280px) {
- width: 288px;
- }
-
- @media screen and (max-width: 960px) {
- width: 400px;
- margin: 20px 0;
- &:nth-child(2) {
- margin: 0;
- }
- }
-
- @media screen and (max-width: 400px) {
- max-width: 288px;
- }
-
-`;
-
-// PROJECT CARDS
-
-export const ProjectCardWrapper = styled.div.attrs({ className: "projectWrapper" })`
- margin: 0 0 80px 0;
- width: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-content: center;
- @media screen and (max-width: 1280px) {
- margin: 0 0 60px 0;
- }
-
- @media screen and (max-width: 960px) {
- margin: 0 auto 80px auto;
- }
-
- @media screen and (max-width: 400px) {
- margin: 0 auto 60px auto;
- }
-`;
-
-export const ProjectCard = styled(GlobalCard).attrs({ className: "projectCard" })`
- display: flex;
- justify-content: space-between;
- align-self: center;
- background-color: #FFFFFF;
- width: 1280px;
- height: 378px;
- position: relative;
- margin: 0 0 20px 0;
-
- @media screen and (max-width: 1280px) {
- width: 945px;
- height: 365px;
- }
-
- @media screen and (max-width: 960px) {
- flex-direction: column;
- height: 730px;
- width: 630px;
- margin-bottom: 40px;
- }
-
- @media screen and (max-width: 400px) {
- width: 300px;
- height: 498px;
- }
-`;
-
-export const CoverCard = styled(GlobalCard).attrs({ className: "coverCard" })`
- width: 630px;
- height: 378px;
- z-index: 1000;
- position: relative;
- background-color: transparent;
- overflow: hidden;
-
- @media screen and (max-width: 1280px) {
- width: 462px;
- height: 365px;
- }
-
- @media screen and (max-width: 960px) {
- width: 630px;
- }
-
- @media screen and (max-width: 400px) {
- width: 300px;
- height: 250px;
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- }
-`;
-
-export const BottomCards = styled.div`
- display: grid;
- grid-template-columns: 1fr 1fr;
- grid-template-rows: 1fr;
- grid-gap: 20px;
- align-self: center;
- background-color: transparent;
-
- @media screen and (max-width: 960px) {
- grid-template-columns: 1fr;
- grid-template-rows: 1fr 1fr;
- }
-`;
-
-export const ClientCard = styled(GlobalCard).attrs({ className: "clientCard" })`
- background-color: #FFFFFF;
- width: 630px;
- height: 378px;
-
- @media screen and (max-width: 1280px) {
- width: 462px;
- height: 442px;
- }
-
- @media screen and (max-width: 960px) {
- width: 630px;
- }
-
- @media screen and (max-width: 400px) {
- width: 300px;
- font-size: 32px;
- line-height: 37px;
- height: 383px;
- margin: 0 auto;
- }
-
-
-`;
-
-export const StudentsCard = styled(GlobalCard).attrs({ className: "studentsCard" })`
- background-color: #FFFFFF;
- width: 630px;
- height: 378px;
-
- @media screen and (max-width: 1280px) {
- width: 462px;
- height: 442px;
- }
-
- @media screen and (max-width: 960px) {
- width: 630px;
- }
-
- @media screen and (max-width: 400px) {
- width: 300px;
- height: 383px;
- font-size: 32px;
- line-height: 37px;
- margin: 0 auto;
- }
-`;
-
-export const ProjectsBottomLinksWrapper = styled.div`
- display: flex;
- justify-content: center;
- align-content: center;
- margin: 0 auto 80px auto;
- position: relative;
- width: 100%;
-
- @media screen and (max-width: 400px) {
- flex-direction: column;
- }
-`;
-
-export const ProjectButtonBottom = styled(GlobalButton).attrs({ className: "projectButtonBottom" })`
- width: 293px;
-
- @media screen and (max-width: 400px) {
- margin: 10px auto;
-
-
- }
-`;
-
-
-// TEST
-
diff --git a/src/components/requests/requests.js b/src/components/requests/requests.js
deleted file mode 100644
index 94d2fea..0000000
--- a/src/components/requests/requests.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Container, CardWrapper, RequestsCard, RequestsTitle, RequestsIntro } from './requests.styles';
-import { Wrapper } from '../Wrapper';
-
-import image1 from '../../images/web-dev.png';
-import image2 from '../../images/data-analysis.png';
-import image3 from '../../images/data-science.png';
-
-const Requests= () => {
-
- return (
-
-
-
- What requests can we help with?
- We carry out important, non-urgent tasks, with results that you can use in your work.
-
-
-
-
-
-
-
-
-
-
-
-
- )
-}
-
-export default Requests;
\ No newline at end of file
diff --git a/src/components/requests/requests.styles.js b/src/components/requests/requests.styles.js
deleted file mode 100644
index 91566f8..0000000
--- a/src/components/requests/requests.styles.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import styled from "styled-components";
-import { GlobalCard } from '../global-components/global-card/globalCard';
-
-export const Container = styled.div`
- width: 100%;
- max-width: 1280px;
- padding: 0;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-content: center;
- box-sizing: border-box;
-
- @media screen and (max-width: 400px) {
-
- }
-`;
-
-
-export const RequestsTitle = styled.h2`
- font-family: 'SuisseInti-Book', 'Helvetica', sans-serif;
- font-style: normal;
- font-weight: normal;
- font-size: 48px;
- line-height: 56px;
- color: #000000;
- margin: 0 auto;
- text-align: center;
- margin: 0;
- width: 100%;
-
- @media screen and (max-width: 600px) {
- font-size: 34px;
- line-height: 40px;
- text-align: left;
- }
-
- @media screen and (max-width: 400px) {
- width: 288px;
- font-size: 32px;
- line-height: 37px;
- }
-
-`;
-
-export const RequestsIntro = styled.p`
- max-width: 751px;
- font-family: 'SuisseInti-Book', 'Helvetica', sans-serif;
- font-style: normal;
- font-weight: normal;
- font-size: 30px;
- line-height: 40px;
- text-align: center;
- color: #616161;
- text-align: center;
- margin: 40px auto 70px auto;
-
- @media screen and (max-width: 600px) {
- font-size: 20px;
- line-height: 30px;
- text-align: left;
- }
-
- @media screen and (max-width: 400px) {
- width: 288px;
- font-size: 20px;
- line-height: 30px;
- margin: 32px auto 32px auto;
- }
-`;
-
-export const CardWrapper = styled.div`
- overflow: visible;
- display: flex;
- width: 100%;
- height: 100%;
- display: inline-flex;
- flex-wrap: wrap;
- row-gap: 40px;
- justify-content: center;
- align-content: center;
-
- @media screen and (max-width: 400px) {
- flex-direction: column;
- }
-`;
-
-export const RequestsCard = styled(GlobalCard).attrs({className: "RequestsCard"})`
- box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
- border-radius: 10px;
- max-width: 400px;
- height: 400px;
- background: transparent;
-
- &:nth-child(2) {
- margin-left: 40px;
- margin-right: 40px;
- }
-
- @media screen and (max-width: 400px) {
- width: 300px;
- height: 300px;
- margin: 0 auto;
- &:nth-child(2) {
- margin-left: auto;
- margin-right: auto;
- margin-top: 32px;
- margin-bottom: 32px;
- }
-
-
- }
-
-`;
-
-
diff --git a/src/helper/client.js b/src/helper/client.js
deleted file mode 100644
index 10fb07a..0000000
--- a/src/helper/client.js
+++ /dev/null
@@ -1,15 +0,0 @@
-const contentful = require('contentful');
-
-
-
-export const client = (id) => {
- const client = contentful.createClient({
- space: 'xxypyrafqty8',
- accessToken: 'sJ7oHmvPDsMDVe4jCw3-lvtY69MRUnZAiH8RgD5TJXk'
- })
-
- const res = client.getEntries({ content_type: id === '' ? 'projects' : id})
- .then(data => {return data})
-
- return res;
-}
\ No newline at end of file
diff --git a/src/images/1.svg b/src/images/1.svg
deleted file mode 100644
index b2c8776..0000000
--- a/src/images/1.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/images/2.svg b/src/images/2.svg
deleted file mode 100644
index a4dc423..0000000
--- a/src/images/2.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/images/3.svg b/src/images/3.svg
deleted file mode 100644
index f43d58a..0000000
--- a/src/images/3.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/images/ChatIcon.png b/src/images/ChatIcon.png
deleted file mode 100644
index 36e4941..0000000
Binary files a/src/images/ChatIcon.png and /dev/null differ
diff --git a/src/images/projects-intro.png b/src/images/webdev-header.png
similarity index 100%
rename from src/images/projects-intro.png
rename to src/images/webdev-header.png
diff --git a/src/index.css b/src/index.css
index ddc0aa6..ec2585e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,21 +1,13 @@
-* {
- /* overflow-x: hidden; */
- width: 100%;
-}
-
body {
margin: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
- "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
diff --git a/src/logo.svg b/src/logo.svg
new file mode 100644
index 0000000..9dfc1c0
--- /dev/null
+++ b/src/logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/vendor/fonts/SuisseIntl-Book.otf b/src/vendor/fonts/SuisseIntl-Book.otf
deleted file mode 100644
index 282a9ca..0000000
Binary files a/src/vendor/fonts/SuisseIntl-Book.otf and /dev/null differ
diff --git a/src/vendor/fonts/fonts.css b/src/vendor/fonts/fonts.css
deleted file mode 100644
index c033f33..0000000
--- a/src/vendor/fonts/fonts.css
+++ /dev/null
@@ -1,7 +0,0 @@
-@font-face {
- font-family: 'SuisseInti-Book';
- font-style: normal;
- font-weight: 400;
- src: url(./SuisseIntl-Book.otf);
- font-display: swap;
-}
\ No newline at end of file
diff --git a/src/vendor/normalize.css b/src/vendor/normalize.css
deleted file mode 100644
index 688a8ad..0000000
--- a/src/vendor/normalize.css
+++ /dev/null
@@ -1,351 +0,0 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-
-/* Document
- ========================================================================== */
-
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
-
- html {
- line-height: 1.15; /* 1 */
- -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/* Sections
- ========================================================================== */
-
-/**
- * Remove the margin in all browsers.
- */
-
-body {
- margin: 0;
-}
-
-/**
- * Render the `main` element consistently in IE.
- */
-
-main {
- display: block;
-}
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
- font-size: 2em;
- margin: 0.67em 0;
-}
-
-/* Grouping content
- ========================================================================== */
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-hr {
- box-sizing: content-box; /* 1 */
- height: 0; /* 1 */
- overflow: visible; /* 2 */
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-pre {
- font-family: monospace, monospace; /* 1 */
- font-size: 1em; /* 2 */
-}
-
-/* Text-level semantics
- ========================================================================== */
-
-/**
- * Remove the gray background on active links in IE 10.
- */
-
-a {
- background-color: transparent;
-}
-
-/**
- * 1. Remove the bottom border in Chrome 57-
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-abbr[title] {
- border-bottom: none; /* 1 */
- text-decoration: underline; /* 2 */
- text-decoration: underline dotted; /* 2 */
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-b,
-strong {
- font-weight: bolder;
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-code,
-kbd,
-samp {
- font-family: monospace, monospace; /* 1 */
- font-size: 1em; /* 2 */
-}
-
-/**
- * Add the correct font size in all browsers.
- */
-
-small {
- font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-sub,
-sup {
- font-size: 75%;
- line-height: 0;
- position: relative;
- vertical-align: baseline;
-}
-
-sub {
- bottom: -0.25em;
-}
-
-sup {
- top: -0.5em;
-}
-
-/* Embedded content
- ========================================================================== */
-
-/**
- * Remove the border on images inside links in IE 10.
- */
-
-img {
- border-style: none;
-}
-
-/* Forms
- ========================================================================== */
-
-/**
- * 1. Change the font styles in all browsers.
- * 2. Remove the margin in Firefox and Safari.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
- font-family: inherit; /* 1 */
- font-size: 100%; /* 1 */
- line-height: 1.15; /* 1 */
- margin: 0; /* 2 */
-}
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input {
- /* 1 */
- overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-button,
-select {
- /* 1 */
- text-transform: none;
-}
-
-/**
- * Correct the inability to style clickable types in iOS and Safari.
- */
-
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
- -webkit-appearance: button;
-}
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type='button']::-moz-focus-inner,
-[type='reset']::-moz-focus-inner,
-[type='submit']::-moz-focus-inner {
- border-style: none;
- padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type='button']:-moz-focusring,
-[type='reset']:-moz-focusring,
-[type='submit']:-moz-focusring {
- outline: 1px dotted ButtonText;
-}
-
-/**
- * Correct the padding in Firefox.
- */
-
-fieldset {
- padding: 0.35em 0.75em 0.625em;
-}
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- * `fieldset` elements in all browsers.
- */
-
-legend {
- box-sizing: border-box; /* 1 */
- color: inherit; /* 2 */
- display: table; /* 1 */
- max-width: 100%; /* 1 */
- padding: 0; /* 3 */
- white-space: normal; /* 1 */
-}
-
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-progress {
- vertical-align: baseline;
-}
-
-/**
- * Remove the default vertical scrollbar in IE 10+.
- */
-
-textarea {
- overflow: auto;
-}
-
-/**
- * 1. Add the correct box sizing in IE 10.
- * 2. Remove the padding in IE 10.
- */
-
-[type='checkbox'],
-[type='radio'] {
- box-sizing: border-box; /* 1 */
- padding: 0; /* 2 */
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-[type='number']::-webkit-inner-spin-button,
-[type='number']::-webkit-outer-spin-button {
- height: auto;
-}
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type='search'] {
- -webkit-appearance: textfield; /* 1 */
- outline-offset: -2px; /* 2 */
-}
-
-/**
- * Remove the inner padding in Chrome and Safari on macOS.
- */
-
-[type='search']::-webkit-search-decoration {
- -webkit-appearance: none;
-}
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-
-::-webkit-file-upload-button {
- -webkit-appearance: button; /* 1 */
- font: inherit; /* 2 */
-}
-
-/* Interactive
- ========================================================================== */
-
-/*
- * Add the correct display in Edge, IE 10+, and Firefox.
- */
-
-details {
- display: block;
-}
-
-/*
- * Add the correct display in all browsers.
- */
-
-summary {
- display: list-item;
-}
-
-/* Misc
- ========================================================================== */
-
-/**
- * Add the correct display in IE 10+.
- */
-
-template {
- display: none;
-}
-
-/**
- * Add the correct display in IE 10.
- */
-
-[hidden] {
- display: none;
-}
+