+
+
+
+
+
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..d1ece6d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,51 @@
+
+
+
+
+
+ Portfólio
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Olá, sou o Yuri Alves
+
+
+
+
+
+
+
+
Sou um estudante dedicado de Análise e Desenvolvimento de Sistemas, apaixonado por programação e ávido por desafios estimulantes. Estou em busca de oportunidades que me permitam aplicar com entusiasmo meu conhecimento e criatividade na criação de soluções inovadoras. Minha abordagem é proativa, sempre buscando superar obstáculos. Estou profundamente comprometido com o meu crescimento profissional, disposto a enfrentar desafios e aprimorar minhas habilidades para manter a constante evolução e contribuir de forma significativa no campo da tecnologia.
+
+
+
+
+
\ No newline at end of file
diff --git a/projetos.html b/projetos.html
new file mode 100644
index 0000000..a8cdc67
--- /dev/null
+++ b/projetos.html
@@ -0,0 +1,78 @@
+
+
+
+
+
+ Projetos
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Projetos
+
+
+
+
Super Mario - Skins
+
+
+ Mais detalhes
+
Super mario em pixel art criado com tabelas de HTML e estilizado com CSS, e utilizando JavaScript ainda pode fazer alterações de cores clicando nos botões do projeto.
+
+
+
+
+
\ No newline at end of file
diff --git a/sobre.html b/sobre.html
new file mode 100644
index 0000000..2962e75
--- /dev/null
+++ b/sobre.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+ Sobre
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Sobre
+
+
Este portfólio foi desenvolvido para um trabalho prático de Fundamentos da Programação Web na Uninter. Para a criação deste projeto, foram empregadas as linguagens HTML e CSS, demonstrando a aplicação de conceitos essenciais no desenvolvimento web. Esta experiência não apenas me permitiu consolidar meu entendimento dessas tecnologias, mas também ampliar minha capacidade de criar interfaces web atrativas e funcionais. Este projeto é um testemunho do meu comprometimento em adquirir habilidades práticas e aplicar o conhecimento teórico adquirido no ambiente acadêmico.
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..d237874
--- /dev/null
+++ b/style.css
@@ -0,0 +1,211 @@
+/* Variáveis das cores */
+:root {
+ --cor-1: #ffffff;
+ --cor-2: #ffffff0e;
+ --cor-3: #00374d;
+ --cor-4: #ffffff77;
+ --cor-5: #0D0D0D;
+ --cor-6: #0abde6;
+ --cor-7: #ffffff31;
+}
+
+/* Fonte de letra baixada */
+@font-face {
+ font-family: 'picturama';
+ src: url('font/Picturama.otf') format('woff2');
+}
+
+/* Fonte de letra baixada */
+@font-face {
+ font-family: 'gobold';
+ src: url('font/Gobold.otf') format('woff2');
+}
+
+/* Fonte de letra baixada */
+@font-face {
+ font-family: 'Bebas';
+ src: url('font/Bebas.otf') format('woff2');
+}
+
+/* Corpo da página */
+body {
+ background: linear-gradient(to bottom, var(--cor-3), var(--cor-6));
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+}
+
+/* Barra de navegação */
+nav {
+ padding: 20px;
+ font-family: 'Bebas';
+ font-size: 18px;
+}
+
+/* Centraliza a barra de navegação */
+nav ul {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ text-align: center;
+}
+
+/* Coloca a barra de navegação no modo inline */
+nav ul li {
+ display: inline;
+ margin-right: 20px;
+}
+
+/* Estiliza a barra de navegação */
+nav ul li a {
+ text-decoration: none;
+ color: var(--cor-1);
+ font-weight: bold;
+}
+
+/* Modifica a estilização dos itens da barra de navegação ao quando o cursor fica em cima */
+nav ul li a:hover {
+ color: var(--cor-6);
+}
+
+/* Container da página inicial */
+#container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 10px 30px;
+}
+
+/* Conteúdo da página inicial */
+#ola-yuri {
+ background-color:#00000000;
+ width: 100em;
+ border-radius: 5px;
+ padding: 5px;
+ margin: 5px;
+ text-align: justify;
+ box-shadow: rgba(0, 0, 0, 0) 3px 3px 9px;
+}
+
+/* Estilização do meu nome de apresentação */
+#yuri-efeito{
+ font-family: 'picturama';
+ font-size: 60px;
+ color: var(--cor-6);
+ margin-left: 30px;
+ animation: sumir-e-aparecer 4s ease-in-out infinite;
+}
+
+/* Efeito de transição da apresentação do meu nome */
+@keyframes sumir-e-aparecer {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0; }
+}
+
+/* Conteúdo lateral do inicio */
+aside {
+ background-color: var(--cor-4);
+ float: right;
+ width: 40em;
+ border-radius: 5px;
+ padding: 0px 10px;
+ margin: 5px 5px;
+ text-align: justify;
+ box-shadow: rgb(255, 255, 255) 0px 0px 5px 1px;
+ text-align: center;
+}
+
+/* Estilização da minha biografia */
+#bio {
+ color: var(--cor-1);
+ padding: 10px 30px;
+ text-align: justify;
+}
+
+/* Icones de redes sociais centralizada */
+#redes-centro{
+ text-align: center;
+}
+
+/* Estilização das imagens das redes sociais ao passar o curso em cima*/
+.redes-img{
+ width: 2em;
+ padding: 10px;
+}
+
+/* Estilização das imagens das redes sociais ao passar o curso em cima*/
+.redes-img:hover{
+ width: 30px;
+}
+
+/* Alteração de cor e fonte do h1 e h2 da página inicial */
+#h1-white, #h2-white{
+ color: var(--cor-1);
+ font-family: 'gobold';
+}
+
+/* Estilização do h1 */
+h1 {
+ font-family: 'picturama';
+}
+
+/* Estilização da section */
+section {
+ background-color: var(--cor-1);
+ width: 100em;
+ border-radius: 5px;
+ padding: 0px 10px;
+ margin: 5px 5px;
+ text-align: justify;
+ box-shadow: rgba(0, 0, 0, 0.377) 3px 3px 9px;
+}
+
+/* GIF do Bart centralizada */
+#bart {
+ width: 5em;
+ display: block;
+ margin: auto;
+}
+
+/* Estilização das imagens de skills */
+.skills-img {
+ width: 2em;
+ margin: 8px;
+}
+
+/* Estilização das imagens de skills ao passar o cursor em cima*/
+.skills-img:hover {
+ width: 30px;
+}
+
+/* Centralização dos conteúdos dos projetos */
+.conteudo-proj {
+ text-align: center;
+}
+
+/* Estilização das imagens dos projetos */
+.imgprojetos {
+ width: 10em;
+ margin: 8px;
+ border-radius: 5px;
+}
+
+/* Estilização dos links em texto */
+a {
+ text-decoration: none;
+ font-weight: bolder;
+ color: var(--cor-3);
+}
+
+/* Estilização dos links em texto ao passar o cursor em cima*/
+a:hover {
+ color: var(--cor-6);
+}
+
+/* Rodapé das páginas*/
+footer {
+ background-color: var(--cor-2);
+ text-align: center;
+ font-weight: bolder;
+ font-size: 12px;
+ color: var(--cor-7);
+}
\ No newline at end of file
+
+ 
+
+ 
+ 
+ 
+ 
+ 
+ 
+