diff --git a/carine-oliveira/exercicio-de-casa/img/banner.jpeg b/carine-oliveira/exercicio-de-casa/img/banner.jpeg new file mode 100644 index 0000000..4c1eb58 Binary files /dev/null and b/carine-oliveira/exercicio-de-casa/img/banner.jpeg differ diff --git a/carine-oliveira/exercicio-de-casa/img/carine-eu.jpeg b/carine-oliveira/exercicio-de-casa/img/carine-eu.jpeg new file mode 100644 index 0000000..ae422d2 Binary files /dev/null and b/carine-oliveira/exercicio-de-casa/img/carine-eu.jpeg differ diff --git a/carine-oliveira/exercicio-de-casa/img/facebook (1).png b/carine-oliveira/exercicio-de-casa/img/facebook (1).png new file mode 100644 index 0000000..2e758b3 Binary files /dev/null and b/carine-oliveira/exercicio-de-casa/img/facebook (1).png differ diff --git a/carine-oliveira/exercicio-de-casa/img/github (1).png b/carine-oliveira/exercicio-de-casa/img/github (1).png new file mode 100644 index 0000000..2b71fbc Binary files /dev/null and b/carine-oliveira/exercicio-de-casa/img/github (1).png differ diff --git a/carine-oliveira/exercicio-de-casa/img/in (1).png b/carine-oliveira/exercicio-de-casa/img/in (1).png new file mode 100644 index 0000000..07430b8 Binary files /dev/null and b/carine-oliveira/exercicio-de-casa/img/in (1).png differ diff --git a/carine-oliveira/exercicio-de-casa/img/menina-globo.png b/carine-oliveira/exercicio-de-casa/img/menina-globo.png new file mode 100644 index 0000000..7aca7ee Binary files /dev/null and b/carine-oliveira/exercicio-de-casa/img/menina-globo.png differ diff --git a/carine-oliveira/exercicio-de-casa/img/twitter (1).png b/carine-oliveira/exercicio-de-casa/img/twitter (1).png new file mode 100644 index 0000000..94704f4 Binary files /dev/null and b/carine-oliveira/exercicio-de-casa/img/twitter (1).png differ diff --git a/carine-oliveira/exercicio-de-casa/index.html b/carine-oliveira/exercicio-de-casa/index.html new file mode 100644 index 0000000..056a6f8 --- /dev/null +++ b/carine-oliveira/exercicio-de-casa/index.html @@ -0,0 +1,175 @@ + + + + + + + + Super Aluna {Reprograma} + + + + + + + +
+ + + + + +
+
+
+ +

Um pouco sobre o meu mundo

+
+
+

Nascida na Bahia e atualmente morando em São Paulo, tenhoa 21 anos, sou do signo de peixes. Filha de uma baiana arretada com um maranhense, e irmã caçula de três irmãos ( duas mulheres e um homem).

+

Sempre fui uma menina apaixonada por conhecimento e pessoas. Nova na tecnologia me encantei por desenvolvimento web, atualmente estudando Front-end na {Reprograma} turma 13.

+

Tenho muita curiosidade na vida, por isso gosto de tudo um pouco, sempre estou aprendendo algo novo. Logo abaixo mostrarei um pouco dos meus interesses.

+
+ Carine +
+
+ +
+

Deixa eu te contar um pouco sobre a minha trajetória nessa vida...

+
+

Conclui meu ensino médio em 2018 e desde então venho tentando me descobrir, e parece que finalmente me encontrei na tecnologia. Acredito que devo agradecer os algoritmos do Youtube que me recomendaram um video da desenvolvedrora Rafaella + Ballerini, no qual ela ensina a criar um formulário apenas com HTML e CSS e foi a partir desse ponto que me interessei pelo o mundo dos códigos, especificamente na área de desenvolvimento web.

+

Busquei saber mais e acabei conhecendo a Reprograma, me escrevi e consegui entrar na turma "On 13 Todas Em Tech de 2021". Estou encarando mais uma aventura, encantada por tantas possibilidades e caminhos dentro da área de tecnologia, não + canso de aprender mais sobre esse universo.

+ +
+ +
+
+

Veja alguns dos meus interesses

+
+
+

Amo viajar e tenho uma listinha de países que pretendo conhecer:

+
    +
  • Nova Zelândia
  • +
  • Espanha
  • +
  • Canadá
  • +
  • República Tcheca
  • +
  • Noruega
  • +
+
+
+

Músicas favoritas do momento:

+
    +
  • New Light - John Mayer
  • +
  • Zé Canjica - Jorge Ben Jor
  • +
  • Misery Business - Paramore
  • +
  • Oi - Lagum
  • +
  • Purity - Asap Rocky
  • +
+ +
+
+

Livros preferidos:

+
    +
  • O Alquimista
  • +
  • O Estraordinário
  • +
  • A Cabana
  • +
  • É assim que Acaba
  • +
  • A culpa é das estrelas
  • +
+ +
+ + + +
+ +
+ +
+

Fale conosco

+
+
+ + + + + + + + + + + + + + + + + +
+
+ Como podemos entrar em contato com você? +
+ + + +
+
+
+ +
+
+ +
+
+ +
+ +
+ + + + + + \ No newline at end of file diff --git a/carine-oliveira/exercicio-de-casa/style.css b/carine-oliveira/exercicio-de-casa/style.css new file mode 100644 index 0000000..be6afd8 --- /dev/null +++ b/carine-oliveira/exercicio-de-casa/style.css @@ -0,0 +1,297 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-size: 16px; + font-family: 'Nunito Sans', sans-serif; +} + +.cabecalho { + width: 100%; + height: 80vh; + background: rgba(161, 152, 145, 0.253) url(./img/banner.jpeg) no-repeat; + background-size: cover; +} + +.menu { + width: 100%; + background-color: darkgray; + display: flex; + justify-content: space-between; + height: 60px; + align-items: center; + padding: 0 20px; + position: fixed; +} + +.banner { + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.menu__logo { + color: #ffffff; + text-decoration: none; + font-size: 30px; +} + +.menu-navegacao { + display: flex; + list-style: none; + font-size: 10rem; +} + +.menu-navegacao__link { + color: #ffffff; + text-decoration: none; + font-size: 20px; + padding: 10px; + transition: 0.5s all; + border-radius: 10px; +} + +.menu-navegacao__link { + background-color: rgba(192, 192, 192, 0.034); +} + +.banner__titulo { + color: white; + font-size: 30px; + margin-bottom: 15px; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + align-items: center; +} + +.banner__subtitulo { + color: #ffffff; + font-size: 20px; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +main { + width: 90%; + background-color: rgb(243, 239, 239); + margin: 3% 5%; + border-radius: 10px; + box-shadow: 10px 10px 10px 5px #502f4c46; +} + +.container-trajetoria { + background-color: darkgray; +} + +.card-introducao, +.container-trajetoria, +.card-gostos { + padding: 10%; +} + +.card-introducao__titulo { + color: #502f4c; + font-size: 30px; + margin-bottom: 40px; + margin-top: 5px; + margin-bottom: 3px; +} + +.container-texto { + display: flex; + align-items: center; +} + +.container-texto__paragrafos { + width: 60%; + margin-right: 10%; +} + +.container-texto__paragrafos p, +.container-trajetoria__paragrafo p { + color: rgb(41, 39, 39); + font-size: 17px; + margin-bottom: 17px; + text-align: justify; +} + +.container-texto__imagem { + width: 30%; +} + +.container-trajetoria__titulo { + font-size: 25px; + margin-bottom: 30px; + color: #502f4c; +} + +.card-gostos__titulo { + font-size: 25px; + color: #502f4c; + margin-bottom: 30px; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +.container-listas { + display: flex; + justify-content: space-between; +} + +.lista { + width: 30%; + background-color: darkgray; + border-radius: 10px; + padding: 16px; + transition: 0.5s; + box-shadow: 5px 5px 9px silver; +} + +.lista:hover { + transform: scale(1.1); +} + +.lista h3 { + color: #ffffff; + font-size: 17px; + text-align: center; + margin-bottom: 20px; +} + +.lista__item li { + color: #ffffff; + margin-bottom: 10px; + list-style: none; +} + +.lista__item li::before { + content: "❤"; + margin-right: 10px; +} + +footer { + text-align: center; + padding: 50px; + background-color: silver; +} + +.display-inline div { + display: inline; + background-color: blue; + width: 100px; + height: 100px; +} + +.display-block div { + display: block; + width: 100px; + background-color: brown; + margin-bottom: 20px; + height: 100px; +} + +.display-inline-block div { + display: inline-block; + width: 100px; + background-color: rgb(17, 85, 102); + margin-bottom: 20px; + height: 100px; +} + +.campo-form { + display: flex; + flex-direction: column; +} + +form { + width: 70%; + border: 2px solid #7c4e77; + padding: 20px; + border-radius: 10px; + margin-bottom: 30px; +} + +label, +input { + margin-bottom: 10px; +} + +fieldset { + border: 2px solid rgba(192, 192, 192, 0.171); + margin-top: 10px; + margin-bottom: 10px; +} + +.form-botao { + display: flex; + justify-content: center; +} + +.form-botao input { + border: 2px solid #ffffff; + background-color: #502f4c; + color: #ffffff; + border-radius: 10px; + padding: 10px; +} + +.card-fale-conosco { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 30px; +} + +.card-fale-conosco h2 { + font-size: 25px; + color: #502f4c; + ; + margin-bottom: 20px; +} + +.menu-navegaçao__item, +.menu-navegacao__sobre, +.menu-navegacao__serviços { + margin-right: 10px; + font-size: 10%; +} + +.caixa-links { + height: 3%; + width: 5%; + display: flex; + display: contents; + padding: 50px; + margin: 5px; +} + +.icon { + padding: 5px; + width: 50px; + padding-top: 20px; +} + +.icon-face { + height: 40px; +} + +.container-listas { + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} + +.lista { + width: 90%; + background-color: darkgrey; + border-radius: 10px; + padding: 16px; + transition: 0.5s all; + box-shadow: 5px 5px 9px #ccc; + margin-bottom: 4vh; +} + +@media (min-width: 480px) { + .container-texto__paragrafos { + background-color: rgb(212, 196, 196); + } +} \ No newline at end of file diff --git a/exemplos/exemplo-media-queries.css b/exemplos/exemplo-media-queries.css index 812268c..c8f40fb 100644 --- a/exemplos/exemplo-media-queries.css +++ b/exemplos/exemplo-media-queries.css @@ -1,21 +1,23 @@ -body { - padding: 15px; - background:#eee; +body { + padding: 15px; + background: #eee; font-family: Arial, Helvetica, sans-serif; } - + .caixa { - border: solid 1px #666; + border: solid 1px #666; padding: 5px 10px; margin: 40px; } - + .area-visivel span { color: #666; display: none; } - + + /* max-width */ + @media (max-width: 600px) { .um { background: rgb(255, 153, 184); @@ -24,8 +26,10 @@ body { display: inline-block; } } - + + /* min-width */ + @media (min-width: 900px) { .dois { background: #F90; @@ -34,8 +38,10 @@ body { display: inline-block; } } - + + /* min-width & max-width */ + @media (min-width: 600px) and (max-width: 900px) { .tres { background: rgb(121, 174, 228); @@ -45,9 +51,11 @@ body { } } + /* max width telas pequenas */ -@media (max-width: 480px) { + +@media (min-width: 480px) { .iphone { background: rgb(209, 165, 209); } -} +} \ No newline at end of file diff --git a/exercicio-extra/mundo-gelado/index.html b/exercicio-extra/mundo-gelado/index.html index e7fe2c0..6645a0a 100644 --- a/exercicio-extra/mundo-gelado/index.html +++ b/exercicio-extra/mundo-gelado/index.html @@ -1,6 +1,7 @@ - + + @@ -9,100 +10,102 @@ Agência Mundo Gelado - - + + +
- +
- + -
-

A agência Mundo gelado

-

Nosso diferencial é te levar para conhecer as mais lindas e geladas paisagens
no nosso planeta, com conforto e segurança.
- Nossos pacotes são completos e oferecem uma experiência inesquecível para você.
Veja abaixo nossos destinos disponíveis, e se tiver alguma dúvida ou sugestão,
- entre em contato com a gente.

-
+
+

A agência Mundo gelado

+

Nosso diferencial é te levar para conhecer as mais lindas e geladas paisagens
no nosso planeta, com conforto e segurança.
Nossos pacotes são completos e oferecem uma experiência inesquecível para você.
Veja abaixo nossos destinos + disponíveis, e se tiver alguma dúvida ou sugestão,
entre em contato com a gente.

+
-
-
+
+
-
- Foto Siberia - -
-

Sibéria

-

O clima varia entre o clima polar e o clima continental. Na Sibéria situa-se o local habitado mais frio do mundo, a aldeia de Oymyakon.

-
-
+
+ Foto Siberia + +
+

Sibéria

+

O clima varia entre o clima polar e o clima continental. Na Sibéria situa-se o local habitado mais frio do mundo, a aldeia de Oymyakon.

+
+
-
-
-
- Foto groenlandia -
-
-

Groenlândia

-

A Groenlândia é a maior ilha do mundo e tem mais de 44 000 km de linha de costa. A população é escassa, confinada a pequenos povoados na costa. A ilha tem a segunda maior reserva de gelo do mundo, apenas ultrapassada pela Antártida.

-
-
+
+
+
+ Foto groenlandia +
+
+

Groenlândia

+

A Groenlândia é a maior ilha do mundo e tem mais de 44 000 km de linha de costa. A população é escassa, confinada a pequenos povoados na costa. A ilha tem a segunda maior reserva de gelo do mundo, apenas ultrapassada pela Antártida.

+
+
-
-
-

Antártida

-

É o continente mais frio, mais seco, com a maior média de altitude e de maior índice de ventos fortes do planeta.[1] A temperatura mais baixa da Terra (-89,2 °C) foi registrada na Antártica, sendo a temperatura média na costa, durante o verão, de -10 °C; no interior do continente, é de -40 °C.

-
-
- Foto antartida -
+
+
+

Antártida

+

É o continente mais frio, mais seco, com a maior média de altitude e de maior índice de ventos fortes do planeta.[1] A temperatura mais baixa da Terra (-89,2 °C) foi registrada na Antártica, sendo a temperatura média na costa, + durante o verão, de -10 °C; no interior do continente, é de -40 °C.

+
+
+ Foto antartida +
+
+
-
-
-
+
- +
- - + + + \ No newline at end of file