diff --git a/src/App.js b/src/App.js index 811e624..5358859 100644 --- a/src/App.js +++ b/src/App.js @@ -1,16 +1,44 @@ import React from 'react'; import Hero from "./components/Hero/Hero"; import Footer from "./components/Footer/Footer" - +import FollowAlong from "./components/Follow-along/Follow-along"; +import Footer from "./components/Footer/Footer"; +import ByobIcons from "./components/byob-icons/ByobIcons"; var textos = [ "Texto 1", "Texto 2" ]; +var empresa = { + nome: "Eurotech Mottors, LCC", + endereco: "555 Water Tower Court", + cidade: "Holland, MI 49242" +} + +var vendedor = { + nome: "Jake Montgomery" +} + +var veiculo = { + nome: "2010 Mini Cooper", + modelo: "S", + milhas: 31.209, + VIN: "000193HHAAO1I345" +} + +var pedido = { + numero: 188801934, + codigo: 3110556 +} + export default () => (
); \ No newline at end of file diff --git a/src/components/Button/button.css b/src/components/Button/button.css new file mode 100644 index 0000000..9a29cbd --- /dev/null +++ b/src/components/Button/button.css @@ -0,0 +1,50 @@ +@import url('https://fonts.googleapis.com/css?family=Rubik'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, body, App, #root { + width: 100%; + height: 100%; +} + +.buttons { + display: flex; + justify-content:center; +} + + +/*__Botão sólido verde__*/ +.primary-button { + margin: 0.5em; + padding: 0.8em 2em; + border-radius: 40px; + border-style: solid; + font-family: 'Rubik', sans-serif; + font-size: 12px; + font-weight: 500; + text-decoration: none; + border-color: #61d988; + background-color: #61d988; + color: #fff; +} + +/*__Botão sólido cinza__*/ + +.secundary-button { + margin: 0.5em; + padding: 0.8em 2em; + border-radius: 40px; + border-style: solid; + font-family: 'Rubik', sans-serif; + font-size: 12px; + font-weight: 500; + text-decoration: none; + border-color: #d0d1d5; + background-color: #d0d1d5; + color: #fff; +} + diff --git a/src/components/Button/button.js b/src/components/Button/button.js new file mode 100644 index 0000000..50df545 --- /dev/null +++ b/src/components/Button/button.js @@ -0,0 +1,9 @@ +import React from "react"; +import "./button.css" + +export default (props) => ( +
+ {props.primary} + {props.secundary} +
+); diff --git a/src/components/Description/Description.css b/src/components/Description/Description.css new file mode 100644 index 0000000..a5fcb83 --- /dev/null +++ b/src/components/Description/Description.css @@ -0,0 +1,14 @@ +* { + margin: 0; + padding: 0; +} + +.description { + padding: 15px; + flex: 1; + text-align: center; +} + +.description__title, .description__paragraph { + padding: 10px; +} \ No newline at end of file diff --git a/src/components/Description/Description.js b/src/components/Description/Description.js new file mode 100644 index 0000000..bb5d9d3 --- /dev/null +++ b/src/components/Description/Description.js @@ -0,0 +1,9 @@ +import React from "react"; +import "./Description.css" + +export default (props) => ( +
+

{props.title}

+

{props.paragraph}

+
+); \ No newline at end of file diff --git a/src/components/Follow-along/Follow-along.css b/src/components/Follow-along/Follow-along.css new file mode 100644 index 0000000..e789d0f --- /dev/null +++ b/src/components/Follow-along/Follow-along.css @@ -0,0 +1,34 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +.follow-along { + background-color: #61D988; + color: #ffffff; + text-align: center; + padding: 6%; +} + +.follow-along__description { + padding: 0 25%; + line-height: 140%; +} + +.follow-along__link { + font-weight: bold; + text-decoration: none; + font-family: 'Archivo Black', sans-serif; + color: #ffffff; +} + +@media screen and (min-width: 768px) { + .follow-along { + padding: 5%; + } + + .follow-along__description { + padding: 0 5%; + } +} diff --git a/src/components/Follow-along/Follow-along.js b/src/components/Follow-along/Follow-along.js new file mode 100644 index 0000000..a6cb894 --- /dev/null +++ b/src/components/Follow-along/Follow-along.js @@ -0,0 +1,9 @@ +import React from 'react'; +import Link from '../Link/Link'; +import './Follow-along.css'; + +export default (props) => ( +
+

{props.description}

+
+ ); \ No newline at end of file diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css index 32d59da..ba197e3 100644 --- a/src/components/Footer/Footer.css +++ b/src/components/Footer/Footer.css @@ -1,3 +1,29 @@ .rodape { background: blue; + +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +.footer { + width: 100%; + background-color: #2D333F; + color: #ccc; + text-align: center; + padding: 5% 0; +} + +@media screen and (min-width: 768px) { + .footer { + text-align: left; + padding: 3% 5%; + } +} + +@media screen and (min-width: 992px) { + .footer { + padding: 2% 5%; + } } \ No newline at end of file diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js index 4a83a2c..39776aa 100644 --- a/src/components/Footer/Footer.js +++ b/src/components/Footer/Footer.js @@ -1,8 +1,9 @@ -import React from "react"; -import "./Footer.css"; +import React from 'react'; +import './Footer.css'; export default (props) => ( -