Novo Site
This commit is contained in:
+501
-82
@@ -1,91 +1,510 @@
|
|||||||
*{
|
@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;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
|
||||||
|
color: var(--text);
|
||||||
}
|
}
|
||||||
html{
|
|
||||||
scroll-behavior:smooth;
|
html {
|
||||||
|
scroll-behavior: smooth !important;
|
||||||
}
|
}
|
||||||
body{
|
|
||||||
background-color:white;
|
body {
|
||||||
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%;
|
width: 100%;
|
||||||
height: auto;
|
height: 100%;
|
||||||
max-width: 100%;
|
background-color: var(--background);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tcenter {
|
||||||
|
|
||||||
.headerLinks{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.headerLinks a{
|
|
||||||
color: white;
|
|
||||||
text-decoration: none;
|
|
||||||
margin: 0 0 0 20px;
|
|
||||||
}
|
|
||||||
.content{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.fotoPerfil{
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
border-radius: 50%;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
.corPrimaria{
|
|
||||||
background-color: lightgreen;
|
|
||||||
}
|
|
||||||
.corSecundaria{
|
|
||||||
background-color: lightblue;
|
|
||||||
}
|
|
||||||
.titulosBrancos{
|
|
||||||
text-decoration: underline;
|
|
||||||
text-underline-position: below;
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: white;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
.titulosVerdes{
|
|
||||||
text-decoration: underline;
|
|
||||||
text-underline-position: below;
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: lightgreen;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
.textosBrancos{
|
|
||||||
color:white !important;
|
|
||||||
}
|
|
||||||
.icones{
|
|
||||||
padding-left: 5px;
|
|
||||||
}
|
|
||||||
.titulosCentro{
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ttext1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bborder {
|
||||||
|
border-bottom: solid 2px var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sbox {
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
|
||||||
|
width: 95%;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.button:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
.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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
+11
-1
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
+144
-93
@@ -1,133 +1,184 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="device-width, initial-scale=1.0, maximum-scale=1.0">
|
<meta name="viewport" content="device-width, initial-scale=1.0, maximum-scale=1.0" />
|
||||||
<meta name="description" content="Meu primeiro portifolio">
|
<meta name="description" content="Meu primeiro portifolio" />
|
||||||
<meta http-equiv="X-UA-compatible" content="ie=edge">
|
<meta http-equiv="X-UA-compatible" content="ie=edge" />
|
||||||
<title>Christian do Nascimento Falcao</title>
|
<title>Christian do Nascimento Falcao</title>
|
||||||
<script src="https://kit.fontawesome.com/6ffe26f1f6.js" crossorigin="anonymous"></script>
|
<script src="https://kit.fontawesome.com/6ffe26f1f6.js" crossorigin="anonymous"></script>
|
||||||
<link rel="stylesheet" href="Assets/css/style.css">
|
<link rel="stylesheet" href="Assets/css/style.css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header class="corSecundaria">
|
<header id="header">
|
||||||
<div class="headerLinks">
|
<div class="header" id="header_css">
|
||||||
<a href="#inicio">Início</a>
|
<nav class="Menu_options">
|
||||||
<a href="#sobre-mim">Sobre mim</a>
|
<div class="logo">
|
||||||
<a href="#projetos">Projetos</a>
|
<i class="fa-solid fa-code"></i>
|
||||||
<a href="#habilidades">Habilidades</a>
|
<h2 class="stext">Christian</h2>
|
||||||
</div>
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#home">Home</a></li>
|
||||||
|
<li><a href="#about_me">About Me</a></li>
|
||||||
|
<li><a href="#skills">Skills</a></li>
|
||||||
|
<li><a href="#projects">Projects</a></li>
|
||||||
|
<li><a href="#contact" class="button bcontact">Contact Me</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<button class="button" id="menu_bar_button" onclick="toggleDiv()"><i class="fa-solid fa-bars"></i></button>
|
||||||
|
</div>
|
||||||
|
<nav class="menu_bar_nav" id="menu_bar_nav">
|
||||||
|
<ul class="Menu_bar">
|
||||||
|
<li><a onclick="toggleDiv()" class="button" href="#home">Home</a></li>
|
||||||
|
<li><a onclick="toggleDiv()" class="button" href="#about_me">About Me</a></li>
|
||||||
|
<li><a onclick="toggleDiv()" class="button" href="#skills">Skills</a></li>
|
||||||
|
<li><a onclick="toggleDiv()" class="button" href="#projects">Projects</a></li>
|
||||||
|
<li><a onclick="toggleDiv()" class="button" href="#contact">Contact Me</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<section class="corPrimaria " id="inicio">
|
<section class="section_1" id="home">
|
||||||
<div class="content">
|
<div class="conteudo_1">
|
||||||
|
<div class="text_home">
|
||||||
<div>
|
<div>
|
||||||
<p class="textosBrancos">Oi, eu sou</p>
|
<p>Oi, eu sou</p>
|
||||||
<h1 class="titulosBrancos">Christian do Nascimento Falcao</h1>
|
<h1>Christian do Nascimento Falcao</h1>
|
||||||
<p class="textosBrancos">Web Developer.</p>
|
<p>Web Developer.</p>
|
||||||
<div>
|
</div>
|
||||||
<a href="https://github.com/RatixForever" >
|
<div class="social_icons">
|
||||||
<i class="fab fa-github icons"></i>
|
<a href="https://github.com/christiandonf">
|
||||||
|
<i class="fab fa-github icons" title="GitHub"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://www.linkedin.com/in/christiandonascimentofalcao" >
|
<a href="https://www.linkedin.com/in/christiandonascimentofalcao">
|
||||||
<i class="fab fa-linkedin icons"></i>
|
<i class="fab fa-linkedin icons" title="LinkedIn"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<img src="./Assets/img/Perfil.jpg" alt="" class="img_inicio img" />
|
||||||
<img src="Assets/img/Perfil.jpg" class="fotoPerfil">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section id="sobre-mim">
|
|
||||||
<div>
|
<section class="section_2" id="about_me">
|
||||||
<h2 class="titulosVerdes titulosCentro">Sobre mim</h1>
|
<div class="conteudo_2">
|
||||||
|
<h2>Sobre mim</h2>
|
||||||
<p>
|
<p>
|
||||||
Meu nome e Christian do nascimento falcão
|
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
|
||||||
iniciante em desenvolvimento web e apaixonado por
|
atução do curso seja mais relacionado a manutenção, eu me vi me identificando cada vez mais pela programação.
|
||||||
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.
|
|
||||||
<br>
|
|
||||||
Desde então venho praticando e me desafiando criando
|
|
||||||
varios projetos diversificados para testar meus
|
|
||||||
conhecimentos, como games e algumas aplicações Web.
|
|
||||||
</p>
|
</p>
|
||||||
|
<p>Desde então venho praticando e me desafiando criando varios projetos diversificados para testar meus conhecimentos, como games e algumas aplicações Web.</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="corPrimaria" id="projetos">
|
|
||||||
<div>
|
<section class="section_3" id="skills">
|
||||||
<h2 class="titulosBrancos titulosCentro">Projetos</h2>
|
<h2>Habilidades</h2>
|
||||||
|
<div class="conteudo_3">
|
||||||
|
<div class="skill_icon">
|
||||||
|
<i class="fa-brands fa-html5" title="html5"></i>
|
||||||
|
<p>html5</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="skill_icon">
|
||||||
<div>
|
<i class="fa-brands fa-css3-alt" title="css3"></i>
|
||||||
<img src="Assets/img/embreve.png">
|
<p>css3</p>
|
||||||
<p>algo</p>
|
|
||||||
<ul>
|
|
||||||
<li>css</li>
|
|
||||||
<li>html</li>
|
|
||||||
<li>javaScript</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="skill_icon">
|
||||||
<img src="Assets/img/embreve.png">
|
<i class="fa-brands fa-js" title="javaScript"></i>
|
||||||
<p>algo</p>
|
<p>javaScript</p>
|
||||||
<ul>
|
</div>
|
||||||
<li>css</li>
|
<div class="skill_icon">
|
||||||
<li>html</li>
|
<i class="fa-brands fa-sass" title="sass"></i>
|
||||||
<li>javaScript</li>
|
<p>sass</p>
|
||||||
</ul>
|
</div>
|
||||||
|
<div class="skill_icon">
|
||||||
|
<i class="fa-brands fa-bootstrap" title="bootstrap"></i>
|
||||||
|
<p>bootstrap</p>
|
||||||
|
</div>
|
||||||
|
<div class="skill_icon">
|
||||||
|
<i class="fa-brands fa-wordpress" title="wordpress"></i>
|
||||||
|
<p>wordpress</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section id="habilidades">
|
|
||||||
<div>
|
<section class="section_4" id="projects">
|
||||||
<h2 class="titulosVerdes titulosCentro">Habilidades</h2>
|
<h1 class="titulosBrancos titulosCentro">Projetos</h1>
|
||||||
|
|
||||||
|
<div class="conteudo_4">
|
||||||
|
<div class="slot">
|
||||||
|
<img src="./Assets/img/embreve.png" alt="" class="img1" />
|
||||||
|
<h2>projeto</h2>
|
||||||
|
<h3>DashBoard</h3>
|
||||||
|
<p>sobre</p>
|
||||||
|
<div class="tech">
|
||||||
|
<h3>Technologies:</h3>
|
||||||
|
<span>HTML</span>
|
||||||
|
<span>CSS</span>
|
||||||
|
<span>JavaScript</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="slotbuttons">
|
||||||
<div>
|
<a href="" target="_blank" class="button">Demo</a>
|
||||||
<button>
|
<a href="" target="_blank" class="button">Source</a>
|
||||||
<img src="Assets/img/html5.png">
|
</div>
|
||||||
</button>
|
</div>
|
||||||
<button>
|
|
||||||
<img src="Assets/img/css3.png">
|
<div class="slot">
|
||||||
</button>
|
<img src="./Assets/img/embreve.png" alt="" class="img1" />
|
||||||
<button>
|
<h2>projeto</h2>
|
||||||
<img src="Assets/img/javascript.png">
|
<h3>DashBoard</h3>
|
||||||
</button>
|
<p>sobre</p>
|
||||||
<button>
|
<div class="tech">
|
||||||
<img src="Assets/img/sass.png">
|
<h3>Technologies:</h3>
|
||||||
</button>
|
<span>HTML</span>
|
||||||
<button>
|
<span>CSS</span>
|
||||||
<img src="Assets/img/bootstrap.png">
|
<span>JavaScript</span>
|
||||||
</button>
|
</div>
|
||||||
<button>
|
<div class="slotbuttons">
|
||||||
<img src="Assets/img/wordpress.png">
|
<a href="" target="_blank" class="button">Demo</a>
|
||||||
</button>
|
<a href="" target="_blank" class="button">Source</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slot">
|
||||||
|
<img src="./Assets/img/embreve.png" alt="" class="img1" />
|
||||||
|
<h2>projeto</h2>
|
||||||
|
<h3>DashBoard</h3>
|
||||||
|
<p>sobre</p>
|
||||||
|
<div class="tech">
|
||||||
|
<h3>Technologies:</h3>
|
||||||
|
<span>HTML</span>
|
||||||
|
<span>CSS</span>
|
||||||
|
<span>JavaScript</span>
|
||||||
|
</div>
|
||||||
|
<div class="slotbuttons">
|
||||||
|
<a href="" target="_blank" class="button">Demo</a>
|
||||||
|
<a href="" target="_blank" class="button">Source</a>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<p class="descricaoHabilidade">
|
|
||||||
/* Selecione a habilidade desejada para atualizar
|
|
||||||
uma descricao detalhada */
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="corPrimaria">
|
|
||||||
<div>
|
<section class="section_5" id="contact">
|
||||||
<h2 class="titulosBrancos titulosCentro">Contato</h2>
|
<div class="conteudo_5">
|
||||||
</div>
|
<h1 class="titulosBrancos titulosCentro">Contato</h1>
|
||||||
<div>
|
<div class="contatos_icons">
|
||||||
<i class="fa-regular fa-envelope"></i>
|
<div class="contatos_icons1">
|
||||||
|
<a href="mailto:christian.nascimento.falcao@gmail.com"><i class="fa-regular fa-envelope"></i></a>
|
||||||
<p class="textosBrancos">christian.nascimento.falcao@gmail.com</p>
|
<p class="textosBrancos">christian.nascimento.falcao@gmail.com</p>
|
||||||
<i class="fa-brands fa-whatsapp"></i>
|
</div>
|
||||||
|
<div class="contatos_icons1">
|
||||||
|
<a href="https://api.whatsapp.com/send?phone=5511999935492"><i class="fa-brands fa-whatsapp"></i></a>
|
||||||
<p class="textosBrancos">+55-11-999935492</p>
|
<p class="textosBrancos">+55-11-999935492</p>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
<footer class="corSecundaria">
|
|
||||||
|
<footer>
|
||||||
<p>Copyright 2022 Christian do Nascimento Falcao</p>
|
<p>Copyright 2022 Christian do Nascimento Falcao</p>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
|
<script src="./Assets/js/Animation.js"></script>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user