-
Notifications
You must be signed in to change notification settings - Fork 533
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1 from alura-challenges/aula01
Todos os arquivos da Aula 01
- Loading branch information
Showing
8 changed files
with
296 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,53 @@ | ||
import styled from 'styled-components' | ||
import db from '../db.json'; | ||
import Widget from '../src/components/Widget' | ||
import QuizLogo from '../src/components/QuizLogo' | ||
import QuizBackground from '../src/components/QuizBackground' | ||
import Footer from '../src/components/Footer' | ||
import GitHubCorner from '../src/components/GitHubCorner' | ||
|
||
const Title = styled.h1` | ||
font-size: 50px; | ||
color: ${({ theme }) => theme.colors.primary}; | ||
` | ||
// const BackgroundImage = styled.div` | ||
// background-image: url(${db.bg}); | ||
// flex: 1; | ||
// background-size: cover; | ||
// background-position: center; | ||
// `; | ||
|
||
export const QuizContainer = styled.div` | ||
width: 100%; | ||
max-width: 350px; | ||
padding-top: 45px; | ||
margin: auto 10%; | ||
@media screen and (max-width: 500px) { | ||
margin: auto; | ||
padding: 15px; | ||
} | ||
`; | ||
|
||
export default function Home() { | ||
return <Title>My page</Title> | ||
return ( | ||
<QuizBackground backgroundImage={db.bg}> | ||
<QuizContainer> | ||
<QuizLogo /> | ||
<Widget> | ||
<Widget.Header> | ||
<h1>{db.title}</h1> | ||
</Widget.Header> | ||
<Widget.Content> | ||
<p>{db.description}</p> | ||
</Widget.Content> | ||
</Widget> | ||
|
||
<Widget> | ||
<Widget.Content> | ||
<h1>Quizes da Galera</h1> | ||
|
||
<p>lorem ipsum dolor sit amet...</p> | ||
</Widget.Content> | ||
</Widget> | ||
<Footer /> | ||
</QuizContainer> | ||
<GitHubCorner projectUrl="https://github.com/omariosouto" /> | ||
</QuizBackground> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
import styled from 'styled-components' | ||
|
||
// src/components/Footer/index.js | ||
const FooterWrapper = styled.footer` | ||
background-color: #00000070; | ||
padding: 20px; | ||
display: flex; | ||
align-items: center; | ||
border-radius: 4px; | ||
img { | ||
width: 58px; | ||
margin-right: 23px; | ||
} | ||
a { | ||
color: white; | ||
text-decoration: none; | ||
transition: .3s; | ||
&:hover, | ||
&:focus { | ||
opacity: .5; | ||
} | ||
span { | ||
text-decoration: underline; | ||
} | ||
} | ||
`; | ||
|
||
export default function Footer(props) { | ||
return ( | ||
// eslint-disable-next-line react/jsx-props-no-spreading | ||
<FooterWrapper {...props}> | ||
<a href="https://www.alura.com.br/"> | ||
<img src="https://www.alura.com.br/assets/img/alura-logo-white.1570550707.svg" alt="Logo Alura" /> | ||
</a> | ||
<p> | ||
Orgulhosamente criado durante | ||
{' '} | ||
a | ||
{' '} | ||
<a href="https://www.alura.com.br/"> | ||
<span>Imersão React da Alura</span> | ||
</a> | ||
</p> | ||
</FooterWrapper> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
// src/components/GitHubCorner/index.js | ||
import React from 'react'; | ||
import styled from 'styled-components'; | ||
|
||
const Wrapper = styled.div` | ||
position: absolute; | ||
top: 0; | ||
border: 0; | ||
right: 0; | ||
z-index: 20; | ||
`; | ||
|
||
const SVGWrapper = styled.svg` | ||
fill: ${({ theme }) => theme.colors.secondary}; | ||
color: ${({ theme }) => theme.colors.contrastText}; | ||
cursor: pointer; | ||
&:hover .octo-arm{ | ||
animation:octocat-wave 560ms ease-in-out | ||
} | ||
@keyframes octocat-wave{ | ||
0%,100%{transform:rotate(0)} | ||
20%,60%{transform:rotate(-25deg)} | ||
40%,80%{transform:rotate(10deg)} | ||
} | ||
@media (max-width:500px){ | ||
&:hover .octo-arm{ | ||
animation:none | ||
} | ||
& .octo-arm{ | ||
animation:octocat-wave 560ms ease-in-out | ||
} | ||
} | ||
`; | ||
|
||
// eslint-disable-next-line react/prop-types | ||
export default function GitHubCorner({ projectUrl }) { | ||
return ( | ||
<Wrapper> | ||
<a href={projectUrl} target="_blank" rel="noreferrer"> | ||
<SVGWrapper className="githubCorner" width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"> | ||
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" /> | ||
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style={{ transformOrigin: '130px 106px' }} className="octo-arm" /> | ||
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" className="octo-body" /> | ||
</SVGWrapper> | ||
</a> | ||
</Wrapper> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
// src/components/QuizBackground/index.js | ||
import styled from 'styled-components'; | ||
|
||
const QuizBackground = styled.div` | ||
width: 100%; | ||
background-size: cover; | ||
background-position: center; | ||
background-image: url(${({ backgroundImage }) => backgroundImage}); | ||
background-color: ${({ theme }) => theme.colors.mainBg}; | ||
flex: 1; | ||
@media screen and (max-width: 500px) { | ||
background-image: none; | ||
&:after { | ||
content: ""; | ||
background-size: cover; | ||
background-position: center; | ||
background-image: | ||
linear-gradient(transparent, ${({ theme }) => theme.colors.mainBg}), | ||
url(${({ backgroundImage }) => backgroundImage}); | ||
display: block; | ||
width: 100%; | ||
height: 210px; | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
right: 0; | ||
z-index: 1; | ||
} | ||
*:first-child { | ||
position: relative; | ||
z-index: 10; | ||
} | ||
} | ||
`; | ||
|
||
export default QuizBackground; |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
import styled from 'styled-components' | ||
|
||
const Widget = styled.div` | ||
margin-top: 24px; | ||
margin-bottom: 24px; | ||
border: 1px solid ${({ theme }) => theme.colors.primary}; | ||
background-color: ${({ theme }) => { | ||
return theme.colors.mainBg; | ||
}}; | ||
border-radius: 4px; | ||
overflow: hidden; | ||
h1, h2, h3 { | ||
font-size: 16px; | ||
font-weight: 700; | ||
line-height: 1; | ||
margin-bottom: 0; | ||
} | ||
p { | ||
font-size: 14px; | ||
font-weight: 400; | ||
line-height: 1; | ||
} | ||
`; | ||
|
||
Widget.Header = styled.header` | ||
display: flex; | ||
justify-content: flex-start; | ||
align-items: center; | ||
padding: 18px 32px; | ||
background-color: ${({ theme }) => theme.colors.primary}; | ||
* { | ||
margin: 0; | ||
} | ||
`; | ||
|
||
Widget.Content = styled.div` | ||
padding: 24px 32px 32px 32px; | ||
& > *:first-child { | ||
margin-top: 0; | ||
} | ||
& > *:last-child { | ||
margin-bottom: 0; | ||
} | ||
ul { | ||
list-style: none; | ||
padding: 0; | ||
} | ||
`; | ||
|
||
export default Widget; |
e7f792d
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs: