diff --git a/Assets/css/style.css b/Assets/css/style.css index d07c0a6..fc6a443 100644 --- a/Assets/css/style.css +++ b/Assets/css/style.css @@ -1,91 +1,510 @@ -*{ - margin: 0; - padding: 0; - box-sizing: border-box; -} -html{ - scroll-behavior:smooth; -} -body{ - background-color:white; - padding-top:55px; -} -button{ - background-color: white; - border: none; - border-radius: 3px; - cursor: pointer; -} -header{ - position: fixed; - display: flex; - top: 0; - left: 0; - right: 0; - height: 55px; -} -section, footer{ - padding: 20px; -} -p{ - font-family: Lato, Helvetica, Arial, sans-serif; - color: black !important; -} -img{ - width: 100%; - height: auto; - max-width: 100%; +@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700&display=swap"); + +:root { + --text: #170f1f; + --background: #e8e0f0; + --primary-button: #7d52a7; + --secondary-button: #ded3e9; + --accent: #8a62b2; } +* { + box-sizing: border-box; + font-family: "Outfit", sans-serif; + text-decoration: none; + list-style: none; + margin: 0; + padding: 0; -.headerLinks{ -display: flex; -align-items: center; + color: var(--text); } -.headerLinks a{ -color: white; -text-decoration: none; -margin: 0 0 0 20px; + +html { + scroll-behavior: smooth !important; } -.content{ - display: flex; - align-items: center; + +body { + width: 100%; + height: 100%; + background-color: var(--background); } -.fotoPerfil{ - width: 100%; - height: auto; - border-radius: 50%; - max-width: 100%; + +.tcenter { + text-align: center; } -.corPrimaria{ - background-color: lightgreen; + +.ttext1 { + font-size: 3rem; } -.corSecundaria{ - background-color: lightblue; + +.bborder { + border-bottom: solid 2px var(--accent); } -.titulosBrancos{ - text-decoration: underline; - text-underline-position: below; - text-transform: uppercase; - color: white; - padding-bottom: 20px; - font-weight: 700; + +.sbox { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); + width: 95%; + border-radius: 12px; + padding: 1rem; } -.titulosVerdes{ - text-decoration: underline; - text-underline-position: below; - text-transform: uppercase; - color: lightgreen; - padding-bottom: 20px; - font-weight: 700; + +.button { + background-color: var(--primary-button); + color: var(--secondary-button); + font-size: 18px; + font-weight: 800; + font-style: normal; + text-decoration: none; + padding: 10px 10px; + border: 0px solid #000; + border-radius: 10px; + display: inline-block; + transition: background-color 0.3s ease, transform 0.3s ease; } -.textosBrancos{ - color:white !important; +.button:hover { + transform: scale(1.05); } -.icones{ - padding-left: 5px; +.button:active { + transform: scale(0.95); +} + +.select { + border: solid 2px var(--primary-button); + border-radius: 12px; + color: var(--text); + background-color: var(--secondary-button); + padding: 4px; + outline: none; +} + +.img { + display: block; + height: 100%; +} + +.img1 { + display: block; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + height: auto; + width: 100%; + border-radius: 12px; +} + +/* ---------- header ---------- */ +header { + position: fixed; + width: 100%; + top: 0; +} + +.header { + display: flex; + width: 100%; + padding: 10px; + background-color: var(--secondary-button); + border-radius: 0 0 12px 12px; + justify-content: space-between; +} + +.logo { + display: flex; + align-items: center; + color: var(--color-Accent); + gap: 0.5rem; +} + +.Menu_options { + display: flex; + align-items: center; + width: 100%; + justify-content: space-between; +} + +.Menu_options ul { + display: flex; + gap: 2rem; + justify-content: center; + align-items: center; +} + +.Menu_options ul a { + font-weight: 500; +} + +.Menu_options ul li:hover { + transform: scale(1.05); +} +.Menu_options ul li:active { + transform: scale(0.95); +} + +/* ---------- Section 1 ---------- */ + +section { + padding: 2rem 0 2rem 0; +} + +.section_1 { + display: flex; + margin-top: 50px; + align-items: center; + justify-content: center; +} + +.conteudo_1 { + display: flex; + height: auto; + gap: 2rem; + width: 90%; + align-items: center; + justify-content: center; +} + +.conteudo_1 h1 { + font-size: 2rem; +} + +.text_home { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.accent { + color: var(--accent); +} + +.social_icons { + display: flex; + align-items: center; + gap: 1rem; +} + +.conteudo_1 i { + display: flex; + font-size: 2rem; + background-color: var(--accent); + color: var(--secondary-button); + border-radius: 50%; + height: 50px; + width: 50px; + justify-content: center; + align-items: center; + transition: transform ease 0.2s; +} + +.conteudo_1 i:hover { + transform: scale(1.05); +} + +.conteudo_1 i:active { + transform: scale(0.95); +} + +.img_inicio { + border-radius: 50%; + max-width: 50%; + border: solid 5px var(--accent); +} + +/* ---------- Section 2 ---------- */ + +.section_2 { + display: flex; + align-items: center; + justify-content: center; + height: 80vh; + border-radius: 12px; + background-color: var(--secondary-button); +} + +.section_2 h2 { + font-size: 3rem; +} + +.conteudo_2 { + display: flex; + flex-direction: column; + gap: 1rem; + align-items: center; + width: 50%; +} + +/* ---------- Section 3 ---------- */ + +.section_3 { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 3rem; +} + +.section_3 h2 { + font-size: 3rem; +} + +.conteudo_3 { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; + align-items: center; + justify-items: center; + width: 50%; + font-weight: 600; +} + +.conteudo_3 i { + display: flex; + font-size: 3rem; + background-color: var(--accent); + color: var(--secondary-button); + border-radius: 50%; + height: 100px; + width: 100px; + justify-content: center; + align-items: center; + transition: transform ease 0.2s; +} + +.skill_icon { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; +} + +/* ---------- Section 4 ---------- */ + +.section_4 { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + gap: 2rem; + margin: auto; + background-color: var(--secondary-button); + border-radius: 12px; +} + +.section_4 h1 { + font-size: 3rem; +} + +.conteudo_4 { + display: grid; + grid-template-columns: repeat(3, 1fr); + justify-items: center; + gap: 1rem; + width: 90%; +} + +.slot { + background-color: var(--background); + display: flex; + flex-direction: column; + height: auto; + padding: 2rem; + border-radius: 12px; + margin: 20px 0 20px 0; + gap: 1rem; +} + +.tech { + display: flex; + flex-wrap: wrap; + gap: 5px; +} + +.tech span { + background-color: var(--primary-button); + color: var(--secondary-button); + border-radius: 28px; + padding: 5px; + font-size: 12px; +} + +/* ---------- Section 5 ---------- */ + +.section_5 { + display: flex; + align-items: center; + justify-content: center; + width: 100%; +} + +.section_5 h1 { + font-size: 3rem; +} + +.conteudo_5 { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + gap: 2rem; + font-weight: 600; +} + +.contatos_icons { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + gap: 2rem; +} + +.contatos_icons1 { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + width: 300px; +} + +.contatos_icons1 i { + display: flex; + font-size: 3rem; + background-color: var(--accent); + color: var(--secondary-button); + border-radius: 50%; + height: 100px; + width: 100px; + justify-content: center; + align-items: center; + transition: transform ease 0.2s; +} + +.contatos_icons1 i:hover { + transform: scale(1.05); +} + +.contatos_icons1 i:active { + transform: scale(0.95); +} + +/* ---------- footer ---------- */ + +footer { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + padding: 1rem; + border-radius: 12px 12px 0 0; + background-color: var(--secondary-button); +} + +/* ---------- responsive ---------- */ + +#menu_bar_button i { + color: var(--secondary-button); +} + +.menu_bar_nav { + display: flex; + flex-direction: column; + position: absolute; + width: 100%; + height: auto; + background-color: var(--secondary-button); + border-radius: 0 0 12px 12px; + padding: 2rem; +} + +.Menu_bar { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 1rem; +} + +.Menu_bar ul { + align-items: center; + justify-content: center; +} + +.Menu_bar li { + width: 100%; + text-align: center; +} + +.Menu_bar a { + width: 100%; +} + +#menu_bar_button { + display: none; +} + +@media screen and (min-width: 901px) { + #menu_bar_nav, + #menu_bar_button { + display: none; + } +} +@media screen and (max-width: 900px) { + .menu_bar_nav, + .Menu_options ul { + display: none; + } + + #menu_bar_button { + display: flex; + } + + .conteudo_1 { + flex-direction: column; + text-align: center; + align-items: center; + justify-content: center; + } + + .social_icons { + justify-content: center; + } + + .section_2 { + display: flex; + flex-direction: column; + height: auto; + } + + .conteudo_2 { + width: 80%; + } + + .img_inicio { + width: 80%; + height: auto; + } + + .section_3 { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + .conteudo_3 { + grid-template-columns: repeat(2, 1fr); + width: 90%; + } + + .conteudo_4 { + grid-template-columns: 1fr; + } + + .contatos_icons { + flex-direction: column; + } + .contatos_icons1 { + width: 90%; + } } -.titulosCentro{ - text-align: center; -} \ No newline at end of file diff --git a/Assets/js/Animation.js b/Assets/js/Animation.js index 8b13789..4f5a771 100644 --- a/Assets/js/Animation.js +++ b/Assets/js/Animation.js @@ -1 +1,11 @@ - +function toggleDiv() { + var div = document.getElementById("menu_bar_nav"); + var header = document.getElementById("header_css"); + if (div.style.display === "flex") { + div.style.display = "none"; + header.style.borderRadius = "0 0 12px 12px" + } else { + div.style.display = "flex"; + header.style.borderRadius = "0 0 0 0" + } +} \ No newline at end of file diff --git a/index.html b/index.html index 2776fb7..b3d2125 100644 --- a/index.html +++ b/index.html @@ -1,133 +1,184 @@ - - - - - - Christian do Nascimento Falcao - - - - -
-
- Início - Sobre mim - Projetos - Habilidades -
-
-
-
-
-
-

Oi, eu sou

-

Christian do Nascimento Falcao

-

Web Developer.

-
- - - - - - -
-
-
- -
-
-
-
-
-

Sobre mim

-

- Meu nome e Christian do nascimento falcão - iniciante em desenvolvimento web e apaixonado por - 2015 quando iniciei os estudos pela minha faculdade - de automacao industrial, embora a area de atução do - curso seja mais relacionado a manutenção, eu me vi me - identificando cada vez mais pela programação. -
- Desde então venho praticando e me desafiando criando - varios projetos diversificados para testar meus - conhecimentos, como games e algumas aplicações Web. -

-
-
-
-
-

Projetos

-
-
-
- -

algo

-
    -
  • css
    • -
  • html
    • -
  • javaScript
    • -
-
-
- -

algo

-
    -
  • css
    • -
  • html
    • -
  • javaScript
    • -
-
-
-
-
-
-

Habilidades

-
-
-
- - - - - - -
-
-

- /* Selecione a habilidade desejada para atualizar - uma descricao detalhada */ -

-
-
-
-
-
-

Contato

-
-
- -

christian.nascimento.falcao@gmail.com

- -

+55-11-999935492

-
-
-
- - - \ No newline at end of file + + + + + + Christian do Nascimento Falcao + + + + + + + +
+
+
+
+
+

Oi, eu sou

+

Christian do Nascimento Falcao

+

Web Developer.

+
+ +
+ +
+
+ +
+
+

Sobre mim

+

+ Meu nome e Christian do nascimento falcão iniciante em desenvolvimento web e apaixonado por 2015 quando iniciei os estudos pela minha faculdade de automacao industrial, embora a area de + atução do curso seja mais relacionado a manutenção, eu me vi me identificando cada vez mais pela programação. +

+

Desde então venho praticando e me desafiando criando varios projetos diversificados para testar meus conhecimentos, como games e algumas aplicações Web.

+
+
+ +
+

Habilidades

+
+
+ +

html5

+
+
+ +

css3

+
+
+ +

javaScript

+
+
+ +

sass

+
+
+ +

bootstrap

+
+
+ +

wordpress

+
+
+
+ +
+

Projetos

+ +
+
+ +

projeto

+

DashBoard

+

sobre

+
+

Technologies:

+ HTML + CSS + JavaScript +
+
+ Demo + Source +
+
+ +
+ +

projeto

+

DashBoard

+

sobre

+
+

Technologies:

+ HTML + CSS + JavaScript +
+
+ Demo + Source +
+
+ +
+ +

projeto

+

DashBoard

+

sobre

+
+

Technologies:

+ HTML + CSS + JavaScript +
+
+ Demo + Source +
+
+
+
+ +
+
+

Contato

+
+
+ +

christian.nascimento.falcao@gmail.com

+
+
+ +

+55-11-999935492

+
+
+
+
+
+ + + + +