diff --git a/flexbog/README.md b/flexbog/README.md new file mode 100644 index 0000000..3340af6 --- /dev/null +++ b/flexbog/README.md @@ -0,0 +1,13 @@ +## FlexBlog +O Flexblog foi o projeto final do curso de CSS Flexbox. + +### Aprendizados +Obtive o conhecimento e a pratica do flexbox, utilizando diversas formas de alinhar os itens com o flexbox, além de torna-lo responsivo utilizando poucos media queries, pois o flexbox já adapta o layout automaticamente ao utilizar o flex-wrap. + +### Stack utilizada +***Front-end:*** HTML e CSS + +### Demonstração +[FlexBlog](https://flexblog-jet.vercel.app) +
+ diff --git a/flexbog/css/styles.css b/flexbog/css/styles.css new file mode 100644 index 0000000..6df7cd1 --- /dev/null +++ b/flexbog/css/styles.css @@ -0,0 +1,395 @@ +body, +h1, +h2, +p, +ul, +li, +a { + margin: 0; + padding: 0; +} + +body { + font-family: 'Nunito', Arial, Helvetica, sans-serif; + color: #222222; +} + +ul { + list-style: none; +} + +a { + text-decoration: none; +} + +img { + display: block; + max-width: 100%; +} + +* { + box-sizing: border-box; +} + +/*Superinfo*/ +.superinfo-bg { + background: #122ab2; + color: white; +} + +.superinfo { + max-width: 960px; + margin: 0 auto; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + padding-top: 10px; +} + +.superinfo p, +.superinfo a { + margin: 0 10px 10px 10px; +} + +.superinfo a { + color: white; +} + +/*Menu*/ +.menu-bg { + background: #2c70ff; +} + +.menu { + max-width: 960px; + margin: 0 auto; + padding: 15px 0; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; +} + +.menu a { + color: white; +} + +.menu-logo a { + font-size: 2.25em; + font-weight: bold; + margin: 0 10px; +} + +.menu-nav ul { + display: flex; + flex-wrap: wrap; +} + +.menu-nav li { + font-size: 1.125em; + display: block; + padding: 10px; +} + +.menu-nav a:hover { + color: #122ab2; +} +/*Introdução*/ +.introducao { + font-size: 3em; + line-height: 1; + max-width: 960px; + margin: 0 auto; + padding: 60px 10px; +} + +/*Sobre*/ +.sobre { + border-top: 2px solid #2c70ff; + border-bottom: 2px solid #2c70ff; + max-width: 960px; + margin: 0 auto; + padding: 60px 0; + display: flex; + flex-wrap: wrap; +} + +.sobre-info { + flex: 2 1 300px; + margin: 0 10px; +} + +.sobre-info h1 { + font-size: 3em; + margin-bottom: 0.5em; +} + +.sobre-info p { + font-size: 1.25em; + line-height: 1.4; + margin-bottom: 1em; + color: #7c7c7c; +} + +.sobre-img { + flex: 1 1 160px; + margin: 0 10px; +} + +/*Produtos*/ +.produtos { + max-width: 960px; + margin: 60px auto; +} + +.produtos h1 { + font-size: 3em; + margin: 0 10px 60px 10px; +} + +.produtos-container { + display: flex; + flex-wrap: wrap; + align-items: flex-end; +} + +.produtos-item { + flex: 1 1 175px; + margin: 10px; +} + +.produtos-item h2 { + font-size: 3em; + color: #a4a4a4; + background: #f7f7f7; + padding: 60px 20px; +} + +.purple { + border-top: 8px solid #ae81ff; +} + +.pink { + border-top: 8px solid #f9265e; +} + +.blue { + border-top: 8px solid #66d9eb; +} + +/*Preço*/ +.preco { + background: #f7f7f7; + padding: 60px; + display: flex; + flex-wrap: wrap; + align-items: flex-end; +} + +.preco-item { + flex: 1 1 260px; + border: 4px solid white; + padding: 20px; + margin: 10px; +} + +.preco-item h2 { + font-size: 3em; + color: #a4a4a4; + text-align: center; + margin-top: 20px; +} + +.preco-item span { + max-width: 300px; + margin: 20px auto; + display: block; + font-size: 3em; + text-align: center; + font-weight: bold; + padding: 10px 0 5px 0; + border-top: 4px solid white; + border-bottom: 4px solid white; +} + +.preco-item sup { + font-size: 1.5rem; +} + +.preco-item ul { + max-width: 300px; + margin: 20px auto; + font-size: 1.25em; + font-style: italic; + color: #7c7c7c; +} + +.preco-item li { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 15px; +} + +.preco-item li::after { + content: ''; + display: block; + width: 6px; + height: 6px; + background: #2c70ff; + border-radius: 50%; +} + +.preco-item a { + max-width: 300px; + display: block; + margin: 20px auto; + border: 4px solid; + color: #222222; + text-transform: uppercase; + font-weight: bold; + font-size: 2.25em; + padding: 15px 0; + text-align: center; +} + +@media (max-width: 800px) { + .preco { + padding-left: 10px; + padding-right: 10px; + } + .preco .preco-item:nth-child(3) { + order: -2; + } + .preco .preco-item:nth-child(2) { + order: -1; + } +} + +/*Qualidade*/ +.qualidade { + max-width: 960px; + margin: 60px auto; + display: flex; + flex-wrap: wrap; +} + +.qualidade-item { + flex: 1 1 300px; + margin: 20px 10px; +} + +.qualidade-item h2 { + font-size: 2.25em; + color: #a4a4a4; + margin-bottom: 20px; +} + +.qualidade-item h2::before { + content: ''; + display: inline-block; + width: 8px; + height: 30px; + margin-right: 10px; + background: blue; +} + +.qualidade-item:nth-of-type(3n + 1) h2::before { + background: #ae81ff; +} + +.qualidade-item:nth-of-type(3n + 2) h2::before { + background: #f9265e; +} + +.qualidade-item:nth-of-type(3n + 3) h2::before { + background: #66d9eb; +} + +.qualidade-item p { + font-size: 1.25em; + line-height: 1.4; + color: #7c7c7c; +} + +/* Newsletter */ +.newsletter { + background: #f7f7f7; + padding: 60px calc((100% - 960px) / 2); + display: flex; + flex-wrap: wrap; +} + +.newsletter-info { + flex: 1 1 240px; + margin: 0 10px; +} + +.newsletter-info h1 { + font-size: 3em; + color: #a4a4a4; +} + +.newsletter-info p { + font-size: 1.25em; + font-style: italic; + max-width: 230px; + color: #7c7c7c; + margin-bottom: 10px; +} + +.newsletter-form { + flex: 2 1 260px; + margin: 0 10px; + align-self: center; + display: flex; + flex-wrap: wrap; +} + +.newsletter-form input { + flex: 3 1 260px; + font-size: 1.25em; + color: #7c7c7c; + font-style: italic; + font-family: "Nunito", Helvetica, Arial, sans-serif; + border: 4px solid #2c70ff; + background: transparent; + padding: 15px 10px; + margin: 0px; + border-radius: 0px; +} + +.newsletter-form button { + flex: 1 1 260px; + font-family: "Nunito", Helvetica, Arial, sans-serif; + font-size: 2.25em; + font-weight: bold; + text-transform: uppercase; + background: #2c70ff; + color: white; + margin: 0px; + cursor: pointer; + border: 0px; + padding: 15px 10px; +} + +@media (max-width: 600px){ + .newsletter-form button { + font-size: 1.5em; + } +} + +/* Footer */ +.footer { + display: flex; + background: #2c70ff; + height: 200px; + align-items: center; +} + +.footer p{ + flex: 1; + text-align: center; + font-size: 2.25em; + color: #122ab2; +} \ No newline at end of file diff --git a/flexbog/img/produtos1.jpg b/flexbog/img/produtos1.jpg new file mode 100644 index 0000000..db37254 Binary files /dev/null and b/flexbog/img/produtos1.jpg differ diff --git a/flexbog/img/produtos2.jpg b/flexbog/img/produtos2.jpg new file mode 100644 index 0000000..e896e22 Binary files /dev/null and b/flexbog/img/produtos2.jpg differ diff --git a/flexbog/img/produtos3.jpg b/flexbog/img/produtos3.jpg new file mode 100644 index 0000000..ce8305d Binary files /dev/null and b/flexbog/img/produtos3.jpg differ diff --git a/flexbog/img/sobre1.jpg b/flexbog/img/sobre1.jpg new file mode 100644 index 0000000..91d17e5 Binary files /dev/null and b/flexbog/img/sobre1.jpg differ diff --git a/flexbog/img/sobre2.jpg b/flexbog/img/sobre2.jpg new file mode 100644 index 0000000..faabc8d Binary files /dev/null and b/flexbog/img/sobre2.jpg differ diff --git a/flexbog/index.html b/flexbog/index.html new file mode 100644 index 0000000..e54abc8 --- /dev/null +++ b/flexbog/index.html @@ -0,0 +1,155 @@ + + + + + + + FlexBlog + + + + + + + +
+
+

Seg / Sex - 08:00 às 18:00

+ +55 21 99999-99999 +

Av. Ali Perto, 330, Botafogo - RJ

+
+
+ +
+
+ + +
+
+ +

Novos valores e
Propriedade de CSS

+ +
+
+

Sobre

+

O que temos que ter sempre em mente é que a determinação clara de objetivos afeta positivamente a correta previsão das condições inegavelmente apropriados objetivos.

+

O que temos que ter sempre em mente é que a determinação clara de objetivos afeta positivamente a correta previsão das condições inegavelmente apropriados objetivos.

+
+
+ Sobre 1 +
+
+ Sobre 2 +
+
+ +
+

Produtos

+
+
+

Purple

+ Produtos 1 +
+
+

Pink

+ Produtos 2 +
+
+

Blue

+ Produtos 3 +
+
+
+ +
+
+

Cobre

+ R$19 + + Comprar +
+
+

Prata

+ R$39 + + Comprar +
+
+

Ouro

+ R$79 + + Comprar +
+
+ +
+
+

Inteligente

+

O que temos que ter sempre em mente é que a determinação clara de objetivos afeta positivamente a correta previsão

+
+
+

Compacto

+

O que temos que ter sempre em mente é que a determinação clara de objetivos afeta positivamente a correta previsão das condições inegavelmente

+
+
+

Econômico

+

O que temos que ter sempre em mente é que a determinação clara de objetivos afeta positivamente a correta previsão

+
+
+

Transparente

+

O que temos que ter sempre em mente é que a determinação clara de objetivos afeta positivamente a correta previsão

+
+
+

Opaco

+

O que temos que ter sempre em mente é que a determinação clara de objetivos afeta positivamente a correta previsão das condições inegavelmente

+
+
+

Sustentável

+

O que temos que ter sempre em mente é que a determinação clara de objetivos afeta positivamente a correta previsão

+
+
+ +
+
+

Newsletter

+

assine e fique por dentro das novidades

+
+
+ + +
+
+ + + + + \ No newline at end of file