• Este é um repositório com os conteúdos de Programação Web,
ministradas pelo professor Karan Luciano, utilizando a IDE VSCode e as linguagens de
HTML, CSS e JavaScript, além de frameworks e bibliotecas como ferramentas de aprendizado.
Karan Luciano - Analista de T.I. | Desenvolvedor Full-Stack
IFRO Campus Ji-Paraná • Atuando desde 2024
Linguagens & Tecnologias: VSCode • DevOps • Java • JavaScript • React.js • E outros...
Contato: Karan Luciano (LinkedIn)
Esta disciplina introduz a primeira parte do desenvolvimento web, com foco em HTML e CSS básicos, seguido por uma imersão em JavaScript, APIs e o uso de React para a criação de aplicações web dinâmicas. O curso terá uma abordagem prática, com desenvolvimento de projetos que evoluem ao longo das aulas.
- Desenvolver sites estáticos e aplicativos web dinâmicos, utilizando JavaScript e React, com foco em funcionalidades modernas e consumo de APIs.
- 📝 Especificar documentos utilizando HTML;
- 🎨 Estilizar documentos utilizando regras de CSS;
- 🖥️ Implementar interatividade com JavaScript;
- 🔗 Consumir APIs utilizando JavaScript;
- 🚀 Desenvolver interfaces dinâmicas com React.
- Desenvolvimento web
- Aplicações cliente/servidor
- HTML e CSS básicos
- JavaScript para interatividade
- APIs e integração com back-end
- React (biblioteca front-end)
- Link da "organização" oficial da disciplina:
- Link do repositório com as informações da disciplina:
Note
Retirado da aula de "CodigoAula01"
Nesta aula foram aprendidos:
- Início da disciplina utilizando a IDE VSCode e as linguagens HTML, CSS e JavaScript
- Criação de uma página-web "Sobre mim"
- Como linkar o JavaScript ao HTML
- Mensagem de alerta utilizando JavaScript
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minha NÃO Primeira Página-web | Aula 01 de Programação Web</title>
<link rel="stylesheet" href="src/css/reset.css">
<link rel="stylesheet" href="src/css/fonts.css">
<link rel="stylesheet" href="src/css/style.css">
<link rel="stylesheet" href="src/css/pseudoElementStyles.css">
<link rel="stylesheet" href="src/css/responsive.css">
<link rel="shortcut icon" href="src/images/webProgrammingIcon.ico" type="image/x-icon" />
</head>
<body>
<!-- Cabeçalho da página -->
<header class="main-title">
<div class="parallax-container">
<img src="src/images/webProgrammingImage.png" alt="WebProgrammingImage">
<h1>Bem-vindo(a) ao<br><span class="main-title-highlight">DESENVOLVIMENTO WEB</span></h1>
<hr>
<p>Esta <strong>NÃO É</strong> minha primeira pagina-web <span class="main-title-emote">(ò_óˇ)</span></p>
</div>
</header>
<!-- Seção "Sobre mim" da página -->
<section class="about-me">
<h2>SOBRE<br><span class="about-me-highlight">MIM</span></h2>
<p>
Oiii, bom dia, boa tarde, boa noite! Me chamo Julio Cezar (a.k.a Juletopi). Atualmente, tenho 21 anos e sou um desenvolvedor Full-Stack apaixonado por tecnologia e um estudante de Analise e Desenvolvimento de Sistemas no IFRO Campus Ji-Parana.
<br><br>
No meu tempo livre, voce provavelmente vai me encontrar estudando, ouvindo rock satanico, assistindo anime, jogando na Steam ou lendo The Witcher/mangas.
<br><br>
Meus animes favoritos sao: 3º Genshiken Nidaime, 2º Hunter x Hunter e 1º Made in Abyss.
<br><br>
Curto musica lo-fi, rock e eletronica, e minha musica favorita e "Daft Punk - Get Lucky".
<br><br>
Sou um gamer casual hoje-em-dia. Amo jogar Minecraft, Stardew Valley, The Witcher 3, Dying Light, e o meu favorito: Sunset Overdrive.
</p>
<img src="src/images/JulioCezarImage.png" alt="JulioCezarPicture">
</section>
<!-- Seção "Meus interesses" da página -->
<section class="my-interests">
<h2>MEUS<br><span class="my-interests-highlight1">INTERE</span><br><span class="my-interests-highlight2">SSES</span></h2>
<ul class="interests-list">
<li>🖥️💻 Programacao back-end e front-end</li>
<li>🎨🖌️ UX/UI Design e Web Design</li>
<li>🎮 Videogames</li>
<li>📚 Aprender</li>
<li>🚲 Ciclismo</li>
<li>🎧 Musica</li>
<li>🍜 Anime</li>
<li>🎲 RPG</li>
</ul>
<img src="src/images/bikeImage.png" alt="JulioCezarBikePicture">
</section>
<!-- Seção extra "Imagens" -->
<section class="extra-images">
<img id="image1" src="src/images/NFS2015GameImage.png" alt="NeedForSpeedGamePicture">
<img id="image2" src="src/images/MinecraftGameImage.png" alt="MinecraftGamePicture">
<img id="image3" src="src/images/TheDivision2GameImage.png" alt="TheDivison2GamePicture">
</section>
<div class="arrow-container">
<span class="arrow"></span>
</div>
<!-- Botão abaixo da seção "Meus interesses" da página -->
<div class="button-container">
<a href="https://github.com/juletopi" target="_blank">
<button id="github-button-id" class="github-button">
Visite o meu Github
<svg id="github-button-icon" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="31" height="31" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(4,4)"><path d="M32,6c-14.359,0 -26,11.641 -26,26c0,12.277 8.512,22.56 19.955,25.286c-0.592,-0.141 -1.179,-0.299 -1.755,-0.479v-5.957c0,0 -0.975,0.325 -2.275,0.325c-3.637,0 -5.148,-3.245 -5.525,-4.875c-0.229,-0.993 -0.827,-1.934 -1.469,-2.509c-0.767,-0.684 -1.126,-0.686 -1.131,-0.92c-0.01,-0.491 0.658,-0.471 0.975,-0.471c1.625,0 2.857,1.729 3.429,2.623c1.417,2.207 2.938,2.577 3.721,2.577c0.975,0 1.817,-0.146 2.397,-0.426c0.268,-1.888 1.108,-3.57 2.478,-4.774c-6.097,-1.219 -10.4,-4.716 -10.4,-10.4c0,-2.928 1.175,-5.619 3.133,-7.792c-0.2,-0.567 -0.533,-1.714 -0.533,-3.583c0,-1.235 0.086,-2.751 0.65,-4.225c0,0 3.708,0.026 7.205,3.338c1.614,-0.47 3.341,-0.738 5.145,-0.738c1.804,0 3.531,0.268 5.145,0.738c3.497,-3.312 7.205,-3.338 7.205,-3.338c0.567,1.474 0.65,2.99 0.65,4.225c0,2.015 -0.268,3.19 -0.432,3.697c1.898,2.153 3.032,4.802 3.032,7.678c0,5.684 -4.303,9.181 -10.4,10.4c1.628,1.43 2.6,3.513 2.6,5.85v8.557c-0.576,0.181 -1.162,0.338 -1.755,0.479c11.443,-2.726 19.955,-13.009 19.955,-25.286c0,-14.359 -11.641,-26 -26,-26zM33.813,57.93c-0.599,0.042 -1.203,0.07 -1.813,0.07c0.61,0 1.213,-0.029 1.813,-0.07zM37.786,57.346c-1.164,0.265 -2.357,0.451 -3.575,0.554c1.218,-0.103 2.411,-0.29 3.575,-0.554zM32,58c-0.61,0 -1.214,-0.028 -1.813,-0.07c0.6,0.041 1.203,0.07 1.813,0.07zM29.788,57.9c-1.217,-0.103 -2.411,-0.289 -3.574,-0.554c1.164,0.264 2.357,0.451 3.574,0.554z"></path></g></g></svg>
</button>
</a>
</div>
<!-- Rodapé da página -->
<footer class="footer">
<p>© <span id="current-year"></span> Aula 01 de Programacao Web ┃ Feito com ♥️ por Juletopi.</p>
<p id="my-links">Me encontre aqui:</p>
<div class="personal-social-icons">
<a id="facebook-icon" href="https://www.facebook.com/profile.php?id=100006955867774" target="_blank" title="Facebook">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="28" height="28" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M25,3c-12.15,0 -22,9.85 -22,22c0,11.03 8.125,20.137 18.712,21.728v-15.897h-5.443v-5.783h5.443v-3.848c0,-6.371 3.104,-9.168 8.399,-9.168c2.536,0 3.877,0.188 4.512,0.274v5.048h-3.612c-2.248,0 -3.033,2.131 -3.033,4.533v3.161h6.588l-0.894,5.783h-5.694v15.944c10.738,-1.457 19.022,-10.638 19.022,-21.775c0,-12.15 -9.85,-22 -22,-22z"></path></g></g></svg>
</a>
<a id="instagram-icon" href="https://www.instagram.com/juletopi/" target="_blank" title="Instagram">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="28" height="28" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(4,4)"><path d="M21.58008,7c-8.039,0 -14.58008,6.54494 -14.58008,14.58594v20.83203c0,8.04 6.54494,14.58203 14.58594,14.58203h20.83203c8.04,0 14.58203,-6.54494 14.58203,-14.58594v-20.83398c0,-8.039 -6.54494,-14.58008 -14.58594,-14.58008zM47,15c1.104,0 2,0.896 2,2c0,1.104 -0.896,2 -2,2c-1.104,0 -2,-0.896 -2,-2c0,-1.104 0.896,-2 2,-2zM32,19c7.17,0 13,5.83 13,13c0,7.17 -5.831,13 -13,13c-7.17,0 -13,-5.831 -13,-13c0,-7.169 5.83,-13 13,-13zM32,23c-4.971,0 -9,4.029 -9,9c0,4.971 4.029,9 9,9c4.971,0 9,-4.029 9,-9c0,-4.971 -4.029,-9 -9,-9z"></path></g></g></svg>
</a>
<a id="linkedin-icon" href="https://www.linkedin.com/in/julio-cezar-pereira-camargo/" target="_blank" title="LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="27" height="27" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M41,4h-32c-2.76,0 -5,2.24 -5,5v32c0,2.76 2.24,5 5,5h32c2.76,0 5,-2.24 5,-5v-32c0,-2.76 -2.24,-5 -5,-5zM17,20v19h-6v-19zM11,14.47c0,-1.4 1.2,-2.47 3,-2.47c1.8,0 2.93,1.07 3,2.47c0,1.4 -1.12,2.53 -3,2.53c-1.8,0 -3,-1.13 -3,-2.53zM39,39h-6c0,0 0,-9.26 0,-10c0,-2 -1,-4 -3.5,-4.04h-0.08c-2.42,0 -3.42,2.06 -3.42,4.04c0,0.91 0,10 0,10h-6v-19h6v2.56c0,0 1.93,-2.56 5.81,-2.56c3.97,0 7.19,2.73 7.19,8.26z"></path></g></g></svg>
</a>
<a id="github-icon" href="https://github.com/juletopi" target="_blank" title="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="28" height="28" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(4,4)"><path d="M32,6c-14.359,0 -26,11.641 -26,26c0,12.277 8.512,22.56 19.955,25.286c-0.592,-0.141 -1.179,-0.299 -1.755,-0.479v-5.957c0,0 -0.975,0.325 -2.275,0.325c-3.637,0 -5.148,-3.245 -5.525,-4.875c-0.229,-0.993 -0.827,-1.934 -1.469,-2.509c-0.767,-0.684 -1.126,-0.686 -1.131,-0.92c-0.01,-0.491 0.658,-0.471 0.975,-0.471c1.625,0 2.857,1.729 3.429,2.623c1.417,2.207 2.938,2.577 3.721,2.577c0.975,0 1.817,-0.146 2.397,-0.426c0.268,-1.888 1.108,-3.57 2.478,-4.774c-6.097,-1.219 -10.4,-4.716 -10.4,-10.4c0,-2.928 1.175,-5.619 3.133,-7.792c-0.2,-0.567 -0.533,-1.714 -0.533,-3.583c0,-1.235 0.086,-2.751 0.65,-4.225c0,0 3.708,0.026 7.205,3.338c1.614,-0.47 3.341,-0.738 5.145,-0.738c1.804,0 3.531,0.268 5.145,0.738c3.497,-3.312 7.205,-3.338 7.205,-3.338c0.567,1.474 0.65,2.99 0.65,4.225c0,2.015 -0.268,3.19 -0.432,3.697c1.898,2.153 3.032,4.802 3.032,7.678c0,5.684 -4.303,9.181 -10.4,10.4c1.628,1.43 2.6,3.513 2.6,5.85v8.557c-0.576,0.181 -1.162,0.338 -1.755,0.479c11.443,-2.726 19.955,-13.009 19.955,-25.286c0,-14.359 -11.641,-26 -26,-26zM33.813,57.93c-0.599,0.042 -1.203,0.07 -1.813,0.07c0.61,0 1.213,-0.029 1.813,-0.07zM37.786,57.346c-1.164,0.265 -2.357,0.451 -3.575,0.554c1.218,-0.103 2.411,-0.29 3.575,-0.554zM32,58c-0.61,0 -1.214,-0.028 -1.813,-0.07c0.6,0.041 1.203,0.07 1.813,0.07zM29.788,57.9c-1.217,-0.103 -2.411,-0.289 -3.574,-0.554c1.164,0.264 2.357,0.451 3.574,0.554z"></path></g></g></svg>
</a>
<a id="whatsapp-icon" href="http://api.whatsapp.com/send?phone=5569993606894" target="_blank" title="Whatsapp">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="26" height="26" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M25,2c-12.682,0 -23,10.318 -23,23c0,3.96 1.023,7.854 2.963,11.29l-2.926,10.44c-0.096,0.343 -0.003,0.711 0.245,0.966c0.191,0.197 0.451,0.304 0.718,0.304c0.08,0 0.161,-0.01 0.24,-0.029l10.896,-2.699c3.327,1.786 7.074,2.728 10.864,2.728c12.682,0 23,-10.318 23,-23c0,-12.682 -10.318,-23 -23,-23zM36.57,33.116c-0.492,1.362 -2.852,2.605 -3.986,2.772c-1.018,0.149 -2.306,0.213 -3.72,-0.231c-0.857,-0.27 -1.957,-0.628 -3.366,-1.229c-5.923,-2.526 -9.791,-8.415 -10.087,-8.804c-0.295,-0.389 -2.411,-3.161 -2.411,-6.03c0,-2.869 1.525,-4.28 2.067,-4.864c0.542,-0.584 1.181,-0.73 1.575,-0.73c0.394,0 0.787,0.005 1.132,0.021c0.363,0.018 0.85,-0.137 1.329,1.001c0.492,1.168 1.673,4.037 1.819,4.33c0.148,0.292 0.246,0.633 0.05,1.022c-0.196,0.389 -0.294,0.632 -0.59,0.973c-0.296,0.341 -0.62,0.76 -0.886,1.022c-0.296,0.291 -0.603,0.606 -0.259,1.19c0.344,0.584 1.529,2.493 3.285,4.039c2.255,1.986 4.158,2.602 4.748,2.894c0.59,0.292 0.935,0.243 1.279,-0.146c0.344,-0.39 1.476,-1.703 1.869,-2.286c0.393,-0.583 0.787,-0.487 1.329,-0.292c0.542,0.194 3.445,1.604 4.035,1.896c0.59,0.292 0.984,0.438 1.132,0.681c0.148,0.242 0.148,1.41 -0.344,2.771z"></path></g></g></svg>
</a>
</div>
<p id="repository-link">Esta página-web é de código aberto. Clique <a href="https://github.com/juletopi/Programacao_Web" target="_blank">aqui</a> para acessar o repositório com o código-fonte.</p>
</footer>
<!-- Link do script do JavaScript -->
<script src="src/js/script.js"></script>
</body>
</html>/* Reset básico para todos os elementos */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Remove a decoração padrão dos links */
a {
text-decoration: none;
}
/* Adiciona um scroll suave */
html {
scroll-behavior: smooth;
} /* Definição da fonte DisposableDroidBB-Regular */
@font-face {
font-family: "DisposableDroidBB-Regular";
src: url("../fonts/DisposableDroidBB-Regular.ttf") format("woff2"),
url("../fonts/DisposableDroidBB-Regular.ttf") format("woff");
}
/* Definição da fonte DisposableDroidBB-Bold */
@font-face {
font-family: "DisposableDroidBB-Bold";
src: url("../fonts/DisposableDroidBB-Bold.ttf") format("woff2"),
url("../fonts/DisposableDroidBB-Bold.ttf") format("woff");
}
/* Definição da fonte DisposableDroidBB-Italic */
@font-face {
font-family: "DisposableDroidBB-Italic";
src: url("../fonts/DisposableDroidBB-Italic.ttf") format("woff2"),
url("../fonts/DisposableDroidBB-Italic.ttf") format("woff");
}/* Estilização básica do corpo do documento */
body {
font-family: DisposableDroidBB-Regular;
color: #dbc0ff;
background-color: #191625;
}
/* Estilização do container do efeito parallax na imagem de fundo */
.parallax-container {
background-image: url('../images/espiralBackgroundImage.png');
height: 100vh;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
}
/* Usando ::before para adicionar uma camada de fundo dinâmica do efeito parallax na imagem de fundo */
.parallax-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: inherit;
background-size: inherit;
background-position: inherit;
background-repeat: inherit;
transform: translateY(-50%);
z-index: -1;
}
/* Estilização da imagem no título principal da página */
.main-title img {
width: 100%;
height: auto;
max-width: 200px;
display: block;
margin: 0 auto;
padding-top: 100px;
}
/* Estilização do título principal da página */
.main-title h1 {
font-family: "DisposableDroidBB-Bold";
font-size: 80px;
color: #dbc0ff;
padding-top: 40px;
padding-bottom: 20px;
text-align: center;
line-height: 0.7;
letter-spacing: -3px;
}
/* Estilização da parte "highlight" no título principal da página */
.main-title h1 .main-title-highlight {
background: linear-gradient(45deg, #de96ff, #32335e, #5ca8f5);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Estilização da linha horizontal no título principal da página */
.main-title hr {
border: none;
width: 60%;
height: 4px;
margin: 0 auto;
background-image: linear-gradient(to right, transparent, #3f375fd3, transparent);
}
/* Estilização do parágrafo no título principal da página */
.main-title p {
font-size: 32px;
margin-top: 26px;
padding-bottom: 160px;
text-align: center;
letter-spacing: -2px;
}
/* Estilização específica do emotico no título principal da página */
.main-title strong {
font-family: Verdana;
font-size: 22px;
}
/* Estilização específica da parte em negrito do parágrafo no título principal da página */
.main-title-emote {
font-family: Verdana;
font-size: 22px;
}
/* Estilização do container da seção "Sobre mim" da página */
.about-me {
background: linear-gradient(to bottom, rgba(50, 51, 94, 0.6), rgba(50, 51, 94, 1)), #32335e;
color: #dbc0ff;
padding: 60px;
display: flex;
align-items: center;
}
/* Estilização do título na seção "Sobre mim" da página */
.about-me h2 {
color: #dbc0ff;
padding-right: 40px;
font-size: 120px;
flex: 0;
text-align: left;
line-height: 0.5;
letter-spacing: -4px;
}
/* Estilização da parte "highlight" no título da seção "Sobre mim" da página */
.about-me h2 .about-me-highlight {
color: #3786d6;
}
/* Estilização dos parágrafos na seção "Sobre mim" da página */
.about-me p {
font-size: 24px;
flex: 1;
text-align: left;
padding-top: 30px;
padding-bottom: 30px;
}
/* Estilização da imagem na seção "Sobre mim" da página */
.about-me img {
width: 100%;
height: auto;
max-width: 300px;
margin-left: 40px;
color: #212b47;
border: 10px solid #3786d6;
border-radius: 5px;
transition: transform 0.3s ease-in-out;
}
/* Estilização da expansão ao passar o mouse sobre a imagem na seção extra "Sobre mim" da página */
.about-me img:hover {
transform: scale(1.3);
}
/* Estilização do container da seção "Meus interesses" da página */
.my-interests {
background-color: #3786d6;
color: #181d2c;
padding: 60px;
display: flex;
flex-direction: row-reverse;
text-align: right;
align-items: center;
}
/* Estilização do título na seção "Meus interesses" da página */
.my-interests h2 {
color: #181d2c;
padding-left: 40px;
padding-right: 40px;
font-size: 120px;
text-align: right;
line-height: 0.5;
letter-spacing: -4px;
}
/* Estilização da parte "highlight 1" no título da seção "Meus interesses" da página */
.my-interests h2 .my-interests-highlight1 {
color: #5730e2;
}
/* Estilização da parte "highlight 2" no título da seção "Meus interesses" da página */
.my-interests h2 .my-interests-highlight2 {
color: #5a1791;
}
/* Estilização da imagem na seção "Meus interesses" da página */
.my-interests img {
width: 100%;
height: auto;
max-width: 300px;
margin-top: 40px;
margin-right: 60px;
color: #212b47;
border: 10px solid #212b47;
border-radius: 5px;
transition: transform 0.3s ease-in-out;
}
/* Estilização da expansão ao passar o mouse sobre os a imagens na seção extra "Sobre mim" da página */
.my-interests img:hover {
transform: scale(1.3);
}
/* Estilização da lista e dos parágrafos na seção "Meus interesses" da página */
.my-interests li {
font-size: 24px;
text-align: right;
}
/* Removendo o estilo de lista padrão */
.interests-list {
list-style-type: none;
padding-left: 0;
}
/* Removendo a margem e posicionando a lista */
.interests-list li {
position: relative;
padding-right: 20px;
text-align: right;
}
/* Adicionando o marcador do lado direito dos itens da lista */
.interests-list li::before {
content: '•';
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
color: #181d2c;
font-size: 26px;
}
/* Estilização do container da seção extra "Imagens" da página */
.extra-images {
background-color: #3786d6;
padding: 20px;
padding-bottom: 80px;
display: flex;
justify-content: center;
gap: 30px;
}
/* Estilização geral das imagens na seção extra "Imagens" da página */
#image1, #image2, #image3 {
width: 100%;
height: auto;
color: #212b47;
transition: transform 0.3s ease-in-out;
}
/* Estilização da expansão ao passar o mouse sobre os as imagens na seção extra "Imagens" da página */
#image1:hover, #image2:hover, #image3:hover {
transform: scale(1.3);
}
/* Estilização específica da imagem 1 na seção extra "Imagens" da página */
#image1 {
max-width: 370px;
border: 6px solid #2245a5;
border-radius: 5px;
}
/* Estilização específica da imagem 2 na seção extra "Imagens" da página */
#image2 {
max-width: 220px;
border: 6px solid #208a37;
border-radius: 5px;
}
/* Estilização específica da imagem 3 na seção extra "Imagens" da página */
#image3 {
max-width: 370px;
border: 6px solid #d37811;
border-radius: 5px;
}
/* Estilização do container da seta animada */
.arrow-container {
background-color: #5ea2e6; /* Cor de fundo desejada */
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
padding-top: 40px;
}
/* Estilização da seta animada */
.arrow {
width: 0;
height: 0;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-top: 23px solid #181d2c;
position: relative;
animation: arrowAnimation 0.5s infinite alternate;
}
/* Animação da seta */
@keyframes arrowAnimation {
from {
top: 0;
}
to {
top: 10px;
}
}
/* Estilização do container do botão "Github" */
.button-container {
background-color: #5ea2e6;
display: flex;
justify-content: center;
padding-bottom: 50px;
padding-top: 40px;
}
/* Estilização do botão "Github" */
.github-button {
font-family: "DisposableDroidBB-Bold";
display: flex;
align-items: center;
background-color: transparent;
color: #181d2c;
border: 4px solid #212b47;
border-radius: 5px;
padding: 10px 20px;
font-size: 28px;
font-weight: bold;
text-align: center;
letter-spacing: 3px;
cursor: pointer;
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
/* Estilização da cor do ícone SVG dentro do botão "Github" */
.github-button #github-button-icon path {
fill: #1a2238;
}
/* Estilização específica do ícone SVG dentro do botão "Github" */
.github-button #github-button-icon {
margin-left: 8px;
}
/* Estilização do botão "Github" ao passar o mouse */
.github-button:hover {
background-color: #212b47;
color: #ffffff;
border-color: #212b47;
}
/* Estilização do ícone SVG dentro do botão "Github" ao passar o mouse */
.github-button:hover #github-button-icon path {
fill: #ffffff;
transition: fill 0.3s ease-in-out;
}
/* Estilização do rodapé */
.footer {
background-color: #0e0e0e;
color: #c5c5c5;
}
/* Estilização do texto do rodapé */
.footer p {
padding-bottom: 10px;
padding-top: 30px;
text-align: center;
font-size: 16px;
}
/* Estilização do texto predescente aos links pessoais do autor do site no rodapé */
#my-links {
margin-top: -25px;
}
/* Estilização dos ícones sociais pessoais do autor do site */
.personal-social-icons {
margin-top: 8px;
padding-bottom: 25px;
display: flex;
justify-content: center;
gap: 30px;
}
/* Estilização do preenchimento dos ícones sociais do autor do site */
.personal-social-icons a svg path {
fill: #9e9e9e;
transition: fill 0.3s ease-in-out;
}
/* Estilização geral inicial dos ícones sociais do autor do site */
.personal-social-icons a svg {
transition: transform 0.3s ease-in-out;
}
/* Estilização específica do ícone "Facebook" ao passar o mouse */
#facebook-icon:hover svg path {
fill: #3b5998;
}
/* Estilização específica do ícone "Instagram" ao passar o mouse */
#instagram-icon:hover svg path {
fill: #e1306c;
}
/* Estilização específica do ícone "LinkedIn" ao passar o mouse */
#linkedin-icon:hover svg path {
fill: #0077b5;
}
/* Estilização específica do ícone "GitHub" ao passar o mouse */
#github-icon:hover svg path {
fill: #333333;
}
/* Estilização específica do ícone "Whatsapp" ao passar o mouse */
#whatsapp-icon:hover svg path {
fill: #25d366;
}
/* Estilização da expansão ao passar o mouse sobre os ícones do autor do site */
.personal-social-icons a:hover svg {
transform: scale(1.2);
}
/* Estilização do texto no final do site no rodapé */
#repository-link {
color: #7a7a7a;
background-color: #030303;
font-family: Verdana;
font-size: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
/* Estilização do link texto no final do site no rodapé */
#repository-link a {
color: #8848ff;
}
/* Estilização do link texto no final do site no rodapé ao passar o mouse */
#repository-link:hover a {
color: #69afe9;
}/* Estilização da barra de rolagem */
::-webkit-scrollbar {
background-color: #191625;
width: 10px;
height: 8px;
}
/* Estilização do indicador da barra de rolagem */
::-webkit-scrollbar-thumb {
background-color: #6343d877;
border-radius: 8px;
}
/* Estilização da seleção de texto */
::selection {
background-color: #6447ce9d;
color: #dbc0ff;
}/* Tablets */
@media screen and (min-width: 768px) and (max-width: 1024px) {
.main-title img {
max-width: 175px;
}
.main-title h1 {
font-size: 60px;
}
.main-title hr {
width: 75%;
height: 3px;
margin-top: -6px;
}
.main-title p {
font-size: 28px;
margin-top: 16px;
}
.main-title strong {
font-size: 18px;
}
.main-title-emote {
font-size: 18px;
}
.about-me {
display: flex;
flex-direction: column;
text-align: center;
}
.about-me h2 {
font-size: 85px;
text-align: center;
padding: 0;
order: -1;
}
.about-me img {
max-width: 220px;
margin-left: 0;
margin-top: 40px;
border: 6px solid #3786d6;
order: 0;
transition: none;
}
.about-me img:hover {
transform: none;
}
.about-me p {
font-size: 23px;
padding-top: 40px;
margin-bottom: -30px;
order: 1;
}
.my-interests {
flex-direction: column;
text-align: center;
}
.my-interests h2 {
font-size: 85px;
text-align: center;
padding: 0;
order: -1;
}
.my-interests img {
max-width: 220px;
margin: 0;
margin-top: 40px;
border: 6px solid #212b47;
transition: none;
order: 0;
}
.my-interests img:hover {
transform: none;
}
.interests-list {
list-style-type: disc ;
margin-top: 30px;
margin-bottom: -30px;
padding: 0;
padding-left: 15px;
order: 1;
}
.interests-list li {
position: relative;
padding: 0;
text-align: left;
font-size: 22px;
}
.interests-list li::before {
display: none;
}
.extra-images {
flex-direction: row;
align-items: center;
gap: 10px;
margin-bottom: -20px;
}
#image1, #image2, #image3 {
transition: none;
max-width: 280px;
}
#image2 {
max-width: 162px;
}
#image1:hover, #image2:hover, #image3:hover {
transform: none;
}
.arrow-container {
padding-top: 25px;
}
.arrow {
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 15px solid #181d2c;
}
.button-container {
padding-bottom: 50px;
padding-top: 30px;
}
.github-button {
font-size: 25px;
}
.button-container #github-button-id #github-button-icon {
max-width: 24px;
}
.footer p {
font-size: 15px;
padding-top: 20px;
}
#my-links {
padding-top: 10px;
padding-bottom: 5px;
margin-top: -8px;
}
.personal-social-icons svg {
max-width: 26px;
}
#repository-link {
margin-top: -10px;
font-size: 9px;
}
}
/* Smartphones */
@media screen and (max-width: 767px) {
.main-title img {
max-width: 140px;
}
.main-title h1 {
font-size: 50px;
}
.main-title hr {
width: 80%;
height: 3px;
margin-top: -6px;
}
.main-title p {
font-size: 25px;
margin-top: 16px;
}
.main-title strong {
font-size: 14px;
}
.main-title-emote {
font-size: 16px;
}
.about-me {
flex-direction: column;
text-align: center;
}
.about-me h2 {
font-size: 76px;
text-align: center;
padding: 0;
order: -1;
}
.about-me img {
max-width: 220px;
margin-left: 0;
margin-top: 40px;
border: 6px solid #3786d6;
order: 0;
transition: none;
}
.about-me img:hover {
transform: none;
}
.about-me p {
font-size: 22px;
padding-top: 40px;
margin-bottom: -30px;
order: 1;
}
.my-interests {
flex-direction: column;
text-align: center;
}
.my-interests h2 {
font-size: 76px;
text-align: center;
padding: 0;
order: -1;
}
.my-interests img {
max-width: 220px;
margin: 0;
margin-top: 40px;
border: 6px solid #212b47;
transition: none;
order: 0;
}
.my-interests img:hover {
transform: none;
}
.interests-list {
list-style-type: disc ;
margin-top: 30px;
margin-bottom: -30px;
padding: 0;
padding-left: 15px;
order: 1;
}
.interests-list li {
position: relative;
padding: 0;
text-align: left;
font-size: 22px;
}
.interests-list li::before {
display: none;
}
.extra-images {
flex-direction: column;
align-items: center;
gap: 16px;
margin-bottom: -20px;
}
#image1, #image2, #image3 {
transition: none;
max-width: 320px;
}
#image1:hover, #image2:hover, #image3:hover {
transform: none;
}
.arrow-container {
padding-top: 25px;
}
.arrow {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 13px solid #181d2c;
}
.button-container {
padding-bottom: 50px;
padding-top: 30px;
}
.github-button {
font-size: 22px;
}
.button-container #github-button-id #github-button-icon {
max-width: 24px;
}
.footer p {
font-size: 14px;
padding-top: 16px;
}
#my-links {
padding-top: 10px;
padding-bottom: 5px;
margin-top: -8px;
}
.personal-social-icons svg {
max-width: 22px;
}
#repository-link {
margin-top: -20px;
font-size: 9px;
}
}window.addEventListener('scroll', function() {
const parallaxContainer = document.querySelector('.parallax-container');
let scrollPosition = window.scrollY;
parallaxContainer.style.backgroundPositionY = scrollPosition * 0.5 + 'px';
});
// Span com atualização automática do ano para o rodapé
document.getElementById('current-year').textContent = new Date().getFullYear();
// Event listener para o clique do usuário no botão do "Github"
document.getElementById('github-button-id').addEventListener('click', function() {
// Impede o comportamento padrão do link
event.preventDefault();
// Exibindo mensagem de alerta e verificando a escolha do usuário
if (confirm('⚠️⚠️⚠️✋😲 Calma aí meu consagrado, você será redirecionado para outra página.\r\n\n Deseja continuar meeesmo?🤔🤔🤔')) {
// Se o usuário clicar em "OK", redireciona para o link do GitHub...
window.location.href = 'https://github.com/juletopi';
}
// ...se clicar em "Cancelar", nada acontece e o usuário permanece na página
});
Note
Retirado da aula de "CodigoAula02"
Link do repositório do projeto original: static-website by Prof-Karan-Luciano
Nesta aula foram aprendidos:
- Utilização da biblioteca do jQuery para interações com o DOM e manipulação de eventos.
- Criação de uma página-web com as seguintes funcionalidades:
- Trocar o texto do título entre "Título Inicial" e "Título Alterado".
- Alterar as cores principais da página entre os modos escuro e claro.
- Modificar o texto do título com um valor inserido pelo usuário no campo de texto.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manipulação de Texto e Cor com jQuery | Aula 02 de Programação Web</title>
<link rel="stylesheet" href="src/css/reset.css">
<link rel="stylesheet" href="src/css/lightMode.css">
<link rel="stylesheet" href="src/css/style.css">
<link rel="stylesheet" href="src/css/pseudoElementStyles.css">
<link rel="stylesheet" href="src/css/responsive.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="shortcut icon" href="src/images/ProgramacaoWebAula02Icon.ico" type="image/x-icon" />
</head>
<body>
<!-- Cabeçalho da página da página -->
<header class="header">
<img src="src/images/ProgramacaoWebAula02Image.png" alt="ProgramacaoWebAula02Image">
<h1 id="titulo">Título Inicial</h1>
</header>
<!-- Container-pai principal que contém as duas seções lado-a-lado -->
<div class="main-content">
<!-- Seção de informações do projeto -->
<aside class="project-info">
<h2>Projeto de Manipulação de Texto e Cor com jQuery</h2>
<p>Este é um projeto simples de manipulação de texto e cor usando HTML, CSS, JavaScript e jQuery.</p>
<h3>Funcionalidades</h3>
<ul>
<li>Trocar o texto do título entre "Título Inicial" e "Título Alterado".</li>
<li>Alterar as cores principais da página entre os modos escuro e claro.</li>
<li>Modificar o texto do título com um valor inserido pelo usuário no campo de texto.</li>
</ul>
</aside>
<!-- Container com o conteúdo principal da página -->
<div class="container">
<button id="botao-trocar-texto">Trocar Texto</button>
<button id="botao-trocar-cor">Trocar Cor de Fundo</button>
<input type="text" id="input-novo-texto" placeholder="Novo texto...">
<button id="botao-alterar-texto">Alterar Texto do Título</button>
</div>
</div>
<!-- Rodapé da página -->
<footer class="footer">
<p>© <span id="current-year"></span> Aula 02 de Programação Web ┃ Feito com ♥️ por Juletopi.</p>
<p id="my-links">Me encontre aqui:</p>
<div class="personal-social-icons">
<a id="facebook-icon" href="https://www.facebook.com/profile.php?id=100006955867774" target="_blank" title="Facebook">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="28" height="28" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M25,3c-12.15,0 -22,9.85 -22,22c0,11.03 8.125,20.137 18.712,21.728v-15.897h-5.443v-5.783h5.443v-3.848c0,-6.371 3.104,-9.168 8.399,-9.168c2.536,0 3.877,0.188 4.512,0.274v5.048h-3.612c-2.248,0 -3.033,2.131 -3.033,4.533v3.161h6.588l-0.894,5.783h-5.694v15.944c10.738,-1.457 19.022,-10.638 19.022,-21.775c0,-12.15 -9.85,-22 -22,-22z"></path></g></g></svg>
</a>
<a id="instagram-icon" href="https://www.instagram.com/juletopi/" target="_blank" title="Instagram">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="28" height="28" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(4,4)"><path d="M21.58008,7c-8.039,0 -14.58008,6.54494 -14.58008,14.58594v20.83203c0,8.04 6.54494,14.58203 14.58594,14.58203h20.83203c8.04,0 14.58203,-6.54494 14.58203,-14.58594v-20.83398c0,-8.039 -6.54494,-14.58008 -14.58594,-14.58008zM47,15c1.104,0 2,0.896 2,2c0,1.104 -0.896,2 -2,2c-1.104,0 -2,-0.896 -2,-2c0,-1.104 0.896,-2 2,-2zM32,19c7.17,0 13,5.83 13,13c0,7.17 -5.831,13 -13,13c-7.17,0 -13,-5.831 -13,-13c0,-7.169 5.83,-13 13,-13zM32,23c-4.971,0 -9,4.029 -9,9c0,4.971 4.029,9 9,9c4.971,0 9,-4.029 9,-9c0,-4.971 -4.029,-9 -9,-9z"></path></g></g></svg>
</a>
<a id="linkedin-icon" href="https://www.linkedin.com/in/julio-cezar-pereira-camargo/" target="_blank" title="LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="27" height="27" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M41,4h-32c-2.76,0 -5,2.24 -5,5v32c0,2.76 2.24,5 5,5h32c2.76,0 5,-2.24 5,-5v-32c0,-2.76 -2.24,-5 -5,-5zM17,20v19h-6v-19zM11,14.47c0,-1.4 1.2,-2.47 3,-2.47c1.8,0 2.93,1.07 3,2.47c0,1.4 -1.12,2.53 -3,2.53c-1.8,0 -3,-1.13 -3,-2.53zM39,39h-6c0,0 0,-9.26 0,-10c0,-2 -1,-4 -3.5,-4.04h-0.08c-2.42,0 -3.42,2.06 -3.42,4.04c0,0.91 0,10 0,10h-6v-19h6v2.56c0,0 1.93,-2.56 5.81,-2.56c3.97,0 7.19,2.73 7.19,8.26z"></path></g></g></svg>
</a>
<a id="github-icon" href="https://github.com/juletopi" target="_blank" title="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(4,4)"><path d="M32,6c-14.359,0 -26,11.641 -26,26c0,12.277 8.512,22.56 19.955,25.286c-0.592,-0.141 -1.179,-0.299 -1.755,-0.479v-5.957c0,0 -0.975,0.325 -2.275,0.325c-3.637,0 -5.148,-3.245 -5.525,-4.875c-0.229,-0.993 -0.827,-1.934 -1.469,-2.509c-0.767,-0.684 -1.126,-0.686 -1.131,-0.92c-0.01,-0.491 0.658,-0.471 0.975,-0.471c1.625,0 2.857,1.729 3.429,2.623c1.417,2.207 2.938,2.577 3.721,2.577c0.975,0 1.817,-0.146 2.397,-0.426c0.268,-1.888 1.108,-3.57 2.478,-4.774c-6.097,-1.219 -10.4,-4.716 -10.4,-10.4c0,-2.928 1.175,-5.619 3.133,-7.792c-0.2,-0.567 -0.533,-1.714 -0.533,-3.583c0,-1.235 0.086,-2.751 0.65,-4.225c0,0 3.708,0.026 7.205,3.338c1.614,-0.47 3.341,-0.738 5.145,-0.738c1.804,0 3.531,0.268 5.145,0.738c3.497,-3.312 7.205,-3.338 7.205,-3.338c0.567,1.474 0.65,2.99 0.65,4.225c0,2.015 -0.268,3.19 -0.432,3.697c1.898,2.153 3.032,4.802 3.032,7.678c0,5.684 -4.303,9.181 -10.4,10.4c1.628,1.43 2.6,3.513 2.6,5.85v8.557c-0.576,0.181 -1.162,0.338 -1.755,0.479c11.443,-2.726 19.955,-13.009 19.955,-25.286c0,-14.359 -11.641,-26 -26,-26zM33.813,57.93c-0.599,0.042 -1.203,0.07 -1.813,0.07c0.61,0 1.213,-0.029 1.813,-0.07zM37.786,57.346c-1.164,0.265 -2.357,0.451 -3.575,0.554c1.218,-0.103 2.411,-0.29 3.575,-0.554zM32,58c-0.61,0 -1.214,-0.028 -1.813,-0.07c0.6,0.041 1.203,0.07 1.813,0.07zM29.788,57.9c-1.217,-0.103 -2.411,-0.289 -3.574,-0.554c1.164,0.264 2.357,0.451 3.574,0.554z"></path></g></g></svg>
</a>
<a id="whatsapp-icon" href="http://api.whatsapp.com/send?phone=5569993606894" target="_blank" title="Whatsapp">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="26" height="26" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M25,2c-12.682,0 -23,10.318 -23,23c0,3.96 1.023,7.854 2.963,11.29l-2.926,10.44c-0.096,0.343 -0.003,0.711 0.245,0.966c0.191,0.197 0.451,0.304 0.718,0.304c0.08,0 0.161,-0.01 0.24,-0.029l10.896,-2.699c3.327,1.786 7.074,2.728 10.864,2.728c12.682,0 23,-10.318 23,-23c0,-12.682 -10.318,-23 -23,-23zM36.57,33.116c-0.492,1.362 -2.852,2.605 -3.986,2.772c-1.018,0.149 -2.306,0.213 -3.72,-0.231c-0.857,-0.27 -1.957,-0.628 -3.366,-1.229c-5.923,-2.526 -9.791,-8.415 -10.087,-8.804c-0.295,-0.389 -2.411,-3.161 -2.411,-6.03c0,-2.869 1.525,-4.28 2.067,-4.864c0.542,-0.584 1.181,-0.73 1.575,-0.73c0.394,0 0.787,0.005 1.132,0.021c0.363,0.018 0.85,-0.137 1.329,1.001c0.492,1.168 1.673,4.037 1.819,4.33c0.148,0.292 0.246,0.633 0.05,1.022c-0.196,0.389 -0.294,0.632 -0.59,0.973c-0.296,0.341 -0.62,0.76 -0.886,1.022c-0.296,0.291 -0.603,0.606 -0.259,1.19c0.344,0.584 1.529,2.493 3.285,4.039c2.255,1.986 4.158,2.602 4.748,2.894c0.59,0.292 0.935,0.243 1.279,-0.146c0.344,-0.39 1.476,-1.703 1.869,-2.286c0.393,-0.583 0.787,-0.487 1.329,-0.292c0.542,0.194 3.445,1.604 4.035,1.896c0.59,0.292 0.984,0.438 1.132,0.681c0.148,0.242 0.148,1.41 -0.344,2.771z"></path></g></g></svg>
</a>
</div>
<p id="repository-link">Esta página-web é de código aberto. Clique <a href="https://github.com/juletopi/Programacao_Web" target="_blank">aqui</a> para acessar o repositório com o código-fonte.</p>
</footer>
<!-- Link do script do JavaScript com as funções -->
<script src="src/js/functions.js"></script>
</body>
</html>/* Reset básico para todos os elementos */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Remove a decoração padrão dos links */
a {
text-decoration: none;
}
/* Adiciona um scroll suave */
html {
scroll-behavior: smooth;
}/* Arquivo o qual fica a estilização CSS da página */
/* Estilização básica do corpo do documento */
body {
font-family: Verdana;
color: #dbc0ff;
background-color: #191625;
}
/* Estilização do cabeçalho da página */
.header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
/* Estilização da imagem no cabeçalho da página */
.header img {
width: 100%;
height: auto;
max-width: 190px;
margin-top: 80px;
}
/* Estilização do título no cabeçalho da página */
.header h1 {
font-size: 45px;
color: #dbc0ff;
margin: 20px 0;
margin-bottom: -20px;
text-align: center;
letter-spacing: -3px;
}
/* Estilização do contêiner-pai principal da página */
.main-content {
display: flex;
justify-content: space-between;
padding: 40px;
}
/* Estilização da seção de informações do projeto da página */
.project-info {
flex: 2;
background-color: #2a2d4d;
color: #dbc0ff;
padding: 30px;
padding-right: 80px;
margin: 40px auto;
margin-right: 40px;
border-radius: 10px;
max-width: 600px;
text-align: left;
}
/* Estilização dos títulos na seção de informações do projeto da página */
.project-info h2 {
font-size: 26px;
margin-bottom: 10px;
}
/* Estilização do subtítulo na seção de informações do projeto da página */
.project-info h3 {
font-size: 20px;
margin-top: 20px;
margin-bottom: 10px;
}
/* Estilização da lista na seção de informações do projeto da página */
.project-info ul {
list-style-type: disc;
padding-left: 20px;
}
/* Estilização do container principal da página */
.container {
flex: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 80px;
padding-bottom: 80px;
border: 5px solid #dbc0ff;
border-radius: 10px;
background-color: transparent;
}
/* Estilização dos botões */
.container button {
margin: 10px;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
border: none;
background-color: #214772;
color: #ffffff;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
/* Estilização específica do botão 'botao-trocar-texto' da página */
#botao-trocar-texto {
padding: 12px 62px;
}
/* Estilização específica do botão 'botao-trocar-cor' da página */
#botao-trocar-cor {
padding: 12px 30px;
}
/* Estilização específica do botão 'botao-alterar-texto' da página */
#botao-alterar-texto {
border: 3px solid #214772;
color: #dbc0ff;
border-radius: 5px;
padding: 10px 22px;
background-color: transparent;
}
/* Estilização específica dos botões 'botao-trocar-texto' e 'botao-trocar-cor' da página ao passar o mouse por cima */
#botao-trocar-texto:hover,
#botao-trocar-cor:hover {
background-color: #dbc0ff;
color: #0e0e0e;
}
/* Estilização específica do botão 'botao-alterar-texto' da página ao passar o mouse por cima */
#botao-alterar-texto:hover {
background-color: #214772;
border: 3px solid #214772;
border-radius: 5px;
}
/* Estilização do input */
.container input {
padding: 10px;
font-size: 16px;
margin: 10px;
border: 3px solid #dbc0ff;
border-radius: 5px;
text-align: center;
color: #ffffff;
background-color: #00000000;
}
/* Estilização do rodapé */
.footer {
background-color: #0e0e0e;
color: #c5c5c5;
}
/* Estilização do texto do rodapé */
.footer p {
padding-bottom: 10px;
padding-top: 30px;
text-align: center;
font-size: 14px;
}
/* Estilização do texto predescente aos links pessoais do autor do site no rodapé */
#my-links {
margin-top: -25px;
}
/* Estilização dos ícones sociais pessoais do autor do site */
.personal-social-icons {
margin-top: 8px;
padding-bottom: 25px;
display: flex;
justify-content: center;
gap: 30px;
}
/* Estilização do preenchimento dos ícones sociais do autor do site */
.personal-social-icons a svg path {
fill: #9e9e9e;
transition: fill 0.3s ease-in-out;
}
/* Estilização geral inicial dos ícones sociais do autor do site */
.personal-social-icons a svg {
transition: transform 0.3s ease-in-out;
}
/* Estilização específica do ícone "Facebook" ao passar o mouse */
#facebook-icon:hover svg path {
fill: #3b5998;
}
/* Estilização específica do ícone "Instagram" ao passar o mouse */
#instagram-icon:hover svg path {
fill: #e1306c;
}
/* Estilização específica do ícone "LinkedIn" ao passar o mouse */
#linkedin-icon:hover svg path {
fill: #0077b5;
}
/* Estilização específica do ícone "GitHub" ao passar o mouse */
#github-icon:hover svg path {
fill: #333333;
}
/* Estilização específica do ícone "Whatsapp" ao passar o mouse */
#whatsapp-icon:hover svg path {
fill: #25d366;
}
/* Estilização da expansão ao passar o mouse sobre os ícones do autor do site */
.personal-social-icons a:hover svg {
transform: scale(1.2);
}
/* Estilização do texto no final do site no rodapé */
#repository-link {
color: #7a7a7a;
background-color: #030303;
font-family: Verdana;
font-size: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
/* Estilização do link texto no final do site no rodapé */
#repository-link a {
color: #8848ff;
}
/* Estilização do link texto no final do site no rodapé ao passar o mouse */
#repository-link:hover a {
color: #69afe9;
}/* Arquivo o qual fica o modo 'Light Mode' da página */
.light-mode {
background-color: #e2e3f0;
color: #080e16;
}
.light-mode .header h1 {
color: #080e16;
}
.light-mode .project-info {
background-color: #a5aeff;
color: #214772;
}
.light-mode .container {
border: 5px solid #080e16;
}
.light-mode .container button {
background-color: #214772;
color: #e2e3f0;
}
.light-mode #botao-alterar-texto {
color: #080e16;
}
.light-mode .container input {
border: 3px solid #080e16;
color: #080e16;
}
.light-mode #botao-trocar-texto:hover,
.light-mode #botao-trocar-cor:hover {
background-color: #a5aeff;
color: #214772;
}
.light-mode #botao-alterar-texto:hover {
background-color: #214772;
border: 3px solid #214772;
color: #e2e3f0;
border-radius: 5px;
}
.light-mode::-webkit-scrollbar {
background-color: #c5c5c5;
width: 10px;
height: 8px;
}
.light-mode::-webkit-scrollbar-thumb {
background-color: #214772;
border-radius: 8px;
}
.light-mode::selection {
background-color: #193556b0;
color: #c0c6ff;
}/* Estilização da barra de rolagem */
::-webkit-scrollbar {
background-color: #13111d;
width: 10px;
height: 8px;
}
/* Estilização do indicador da barra de rolagem */
::-webkit-scrollbar-thumb {
background-color: #193556;
border-radius: 8px;
}
/* Estilização da seleção de texto */
::selection {
background-color: #dee1fab6;
color: #193556;
}/* Tablets */
@media screen and (min-width: 768px) and (max-width: 1024px) {
.header img {
max-width: 160px;
}
.header h1 {
font-size: 38px;
}
.project-info {
padding-right: 40px;
}
.project-info h2 {
font-size: 22px;
}
.project-info h3 {
font-size: 19px;
}
.footer p {
font-size: 13px;
padding-top: 16px;
}
#my-links {
padding-top: 10px;
padding-bottom: 5px;
margin-top: -8px;
}
.personal-social-icons svg {
max-width: 26px;
}
#repository-link {
margin-top: -20px;
font-size: 9px;
}
}
/* Smartphones */
@media screen and (max-width: 767px) {
.header img {
max-width: 140px;
}
.header h1 {
font-size: 35px;
margin-bottom: -50px;
}
.main-content {
flex-direction: column;
align-items: center;
}
.project-info {
order: 2;
width: 90%;
margin: 20px 0;
padding-right: 40px;
}
.project-info h2 {
font-size: 19px;
}
.project-info h3 {
font-size: 17px;
}
.container {
order: 1;
width: 90%;
margin: 20px 0;
}
.footer p {
font-size: 11px;
padding-top: 16px;
}
#my-links {
padding-top: 10px;
padding-bottom: 5px;
margin-top: -8px;
}
.personal-social-icons svg {
max-width: 22px;
}
#repository-link {
margin-top: -20px;
font-size: 9px;
}
}// Arquivo o qual fica o JavaScript da página
/*
let textoOriginal = document.getElementById('titulo').textContent;
document.getElementById('botao-trocar-texto').addEventListener('click' , function() {
document.getElementById('titulo').textContent = 'Texto trocado'
let titulo = document.getElementById('titulo');
if (titulo.textContent === 'Texto trocado'){
titulo.textContent = textoOriginal;
} else {
textoOriginal = titulo.textContent;
titulo.textContent = 'Texto trocado'
}
});
*/
// Span com atualização automática do ano para o rodapé
document.getElementById('current-year').textContent = new Date().getFullYear();
// Função para mudar o título principal da página
$(document).ready(function(){
$('#botao-trocar-texto').on('click', function(){
let titulo = document.getElementById('titulo'); // <-- Obtém o elemento do título pelo ID 'titulo'
if (titulo.textContent === 'Texto trocado'){
titulo.textContent = textoOriginal;
} else {
textoOriginal = titulo.textContent;
titulo.textContent = 'Texto trocado';
}
})
let corAtual = true; // <-- Variável para armazenar o estado atual da cor
// Função para mudar a cor do fundo da página
$('#botao-trocar-cor').on('click', function() {
if (corAtual) {
$('body').addClass('light-mode'); // <-- Adiciona a classe de light mode
} else {
$('body').removeClass('light-mode'); // <-- Remove a classe de light mode
}
corAtual = !corAtual; // <-- Alterna o valor da variável
})
// Função para mudar o título principal da página via input
$('#botao-alterar-texto').on('click', function() {
let novoTexto = $('#input-novo-texto').val(); // <-- Pega o valor do campo de input
if (novoTexto) {
$('#titulo').text(novoTexto);
} else {
alert('Por favor, insira um texto válido!'); // <-- Alerta se o campo estiver vazio
}
})
});
|
Feito com 💜 por Juletopi.