Aprenda fazendo! Este repositório oferece dicas de projetos práticos para você aplicar seus conhecimentos em HTML, CSS e JavaScript e criar seus próprios projetos.
O que você vai encontrar aqui:
- Projetos para todos os níveis: Do iniciante ao avançado, com desafios para todos os gostos.
- Diversidade de temas: Crie páginas pessoais, portfólios, jogos simples, aplicações web e muito mais.
Sem mais delongas, se divirta explorando nossas ideias.
Projeto 1
Copyright -GitHub: CodMark
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu toggle button</title>
<link rel="stylesheet" href="styles.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="block">
<div class="cta">
<div class="toggle-btn type1"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.block {
height: 60px;
width: 60px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(134deg, #ff006a, #ff8d00);
box-shadow: 6px 13px 20px #ff2d008a;
transition: all 1s ease;
}
.block .cta {
height: 50px;
width: 50px;
cursor: pointer;
}
.toggle-btn {
width: 38px;
height: 4px;
background: #fff;
position: relative;
top: 50%;
left: 0;
margin: auto;
transition: all 0.3s ease-in-out;
border-radius: 6px;
}
.toggle-btn::before {
content: "";
height: 4px;
width: 25px;
box-shadow: 0 -10px 0 0 #fff;
position: absolute;
top: 0;
left: 0;
transition: all 0.3s ease-in-out;
border-radius: 6px;
}
.toggle-btn::after {
content: "";
height: 4px;
width: 19px;
box-shadow: 0 10px 0 0 #fff;
position: absolute;
top: 0;
left: 0;
transition: all 0.3s ease-in-out;
border-radius: 6px;
}
.active .toggle-btn {
background: transparent;
transition: all 0.2s ease-in-out;
}
.active .toggle-btn::before, .toggle-btn::after {
top: 0;
transition: all 0.3s ease-in-out;
}
.active .type1::before {
left: 8px;
transform: translateY(6px) rotate(-45deg);
width: 36px;
}
.active .type1::after {
left: 8px;
transform: translateY(-8px) rotate(45deg);
width: 36px;
}
Javascript
$(document).ready(function () {
$(document).on('click', '.cta', function () {
$(this).toggleClass('active')
})
});
Projeto 2
Copyright -GitHub: blackcodding
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
<title>Toggle Theme</title>
</head>
<body>
<h2 class="title">Light Mood On</h2>
<button class="theme-toggle-button">
<!--SWAPPER ICON-->
<svg class="icon" style="width: 40px; height:40px" viewBox="0 0 24 24">
<path fill="currentColor" d="M7.5,2C5.71,3.15 4.5,5.18 4.5,7.5C4.5,9.82 5.71,11.85 7.53,13C4.46,13 2,10.54 2,7.5A5.5,5.5 0 0,1 7.5,2M19.07,3.5L20.5,4.93L4.93,20.5L3.5,19.07L19.07,3.5M12.89,5.93L11.41,5L9.97,6L10.39,4.3L9,3.24L10.75,3.12L11.33,1.47L12,3.1L13.73,3.13L12.38,4.26L12.89,5.93M9.59,9.54L8.43,8.81L7.31,9.59L7.65,8.27L6.56,7.44L7.92,7.35L8.37,6.06L8.88,7.33L10.24,7.36L9.19,8.23L9.59,9.54M19,13.5A5.5,5.5 0 0,1 13.5,19C12.28,19 11.15,18.6 10.24,17.93L17.93,10.24C18.6,11.15 19,12.28 19,13.5M14.6,20.08L17.37,18.93L17.13,22.28L14.6,20.08M18.93,17.38L20.08,14.61L22.28,17.15L18.93,17.38M20.08,12.42L18.94,9.64L22.28,9.88L20.08,12.42M9.63,18.93L12.4,20.08L9.87,22.27L9.63,18.93Z">
</svg>
Swap Themes
</button>
<div class="sun-moon-container">
<!--SUN-->
<svg class="sun" style="width: 45px; height:45px" viewBox="0 0 24 24">
<path d="M3.55,18.54L4.96,19.95L6.76,18.16L5.34,16.74M11,22.45C11.32,22.45 13,22.45 13,22.45V19.5H11M12,5.5A6,6 0 0,0 6,11.5A6,6 0 0,0 12,17.5A6,6 0 0,0 18,11.5C18,8.18 15.31,5.5 12,5.5M20,12.5H23V10.5H20M17.24,18.16L19.04,19.95L20.45,18.54L18.66,16.74M20.45,4.46L19.04,3.05L17.24,4.84L18.66,6.26M13,0.55H11V3.5H13M4,10.5H1V12.5H4M6.76,4.84L4.96,3.05L3.55,4.46L5.34,6.26L6.76,4.84Z">
</svg>
<!--MOON-->
<svg class="moon" style="width: 40px; height:40px" viewBox="0 0 24 24">
<path d="M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z">
</svg>
</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=KoHo:wght@700&family=Roboto&display=swap');
body {
--accent-color: #fd0404;
/* --background-color: linear-gradient( #ffffff, #bfe689);*/
--background-color: linear-gradient(#fff, #f8a1d1);
--text-color: black;
--button-text-color: #f7f1f4;
--transition-deplay: 1s;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
background-image: var(--background-color);
color: var(--text-color);
transition: var(--transition-deplay);
}
body.dark {
--accent-color: #f0e11a;
/*--background-color: linear-gradient(to bottom right, #000000, #060930);*/
--background-color: linear-gradient(#272844, #000000);
--text-color: white;
--button-text-color: #060930;
}
.title {
margin: 0;
margin-bottom: 2.5rem;
font-size: 2rem;
font-family: 'KoHo', sans-serif;
font-weight: bolder;
}
.theme-toggle-button {
background-color: var(--accent-color);
font-size: 1.2rem;
font-weight: bold;
font-family: 'Roboto', sans-serif;
color: var(--button-text-color);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
padding: .5rem 1rem;
border-radius: .3rem;
border: none;
box-shadow: 3px 7px 17px #4e4d4d;
transition: var(--transition-deplay);
transform: scale(1);
}
.theme-toggle-button:hover, .theme-toggle-button:focus {
transform: scale(1.1);
}
.dark .theme-toggle-button {
box-shadow: 2px 3px 12px #bbbaba;
}
.theme-toggle-button .icon {
margin-right: .5rem;
}
.sun-moon-container {
--rotation: 0;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
pointer-events: none;
height: 200vmin;
transform: rotate(calc(var(--rotation) * 1deg));
transition: transform var(--transition-deplay);
}
.sun, .moon {
position: absolute;
transition: opacity, fill, var(--transition-deplay);
fill: var(--accent-color)
}
.sun {
top: 5%;
opacity: 1;
}
.dark .sun {
opacity: 0;
}
.moon {
bottom: 5%;
opacity: 0;
transform: rotate(180deg);
}
.dark .moon {
opacity: 1;
}
JavaScript
const sunMoonContainer = document.querySelector('.sun-moon-container')
const bodyClass = document.querySelector('body')
document.querySelector('.theme-toggle-button').addEventListener('click', () => {
document.body.classList.toggle('dark')
const currentRotation = parseInt(getComputedStyle(sunMoonContainer).getPropertyValue('--rotation'))
sunMoonContainer.style.setProperty('--rotation', currentRotation + 180)
if (bodyClass.classList.contains('dark')){
document.querySelector('.title').innerHTML = 'Dark Mood On 🌜'
}
else {
document.querySelector('.title').innerHTML = '🌞 Light Mood On'
}
})