├── Como-Criar-um-SITE-Com-HTML-e-CSS-na-prática.png ├── README.md ├── background.jpg ├── index.html └── style.css /Como-Criar-um-SITE-Com-HTML-e-CSS-na-prática.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusmanuel/site-simples-com-html-e-css-/31ab5f202df9b5b01cc3fa33d73f37ea133560f0/Como-Criar-um-SITE-Com-HTML-e-CSS-na-prática.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # site-simples-com-html-e-css 2 | 3 | Olá pra você que escolheu esse repositório! Nessa repositório você vai enconntrar um site bem simples feito com as tecnolgias html, css esse site(website) usando html e css foi feito apenas para praticar os estudos sobre programação front-end. Espero que gostes e também aproveita e vai dar uma passeada✌ lá no canal. 4 | 5 | ## [🛠Assistir](https://www.youtube.com/watch?v=3R7QtNcwE3c) 6 | ## [⚠Me Ajude](https://www.youtube.com/channel/UCxKIsX5OXyyNWVmomuDc-LA?sub_confirmation=1) 7 | # Preview 8 | ![Como-Criar-um-SITE-Com-HTML-e-CSS-na-prática](/Como-Criar-um-SITE-Com-HTML-e-CSS-na-prática.png) 9 | -------------------------------------------------------------------------------- /background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusmanuel/site-simples-com-html-e-css-/31ab5f202df9b5b01cc3fa33d73f37ea133560f0/background.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Site simples com html e css 9 | 10 | 11 | 26 | 36 | 37 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap'); 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: 'Poppins', sans-serif; 7 | } 8 | nav{ 9 | background-color: #18929D; 10 | padding: 10px 60px; 11 | display: flex; 12 | justify-content: space-between; 13 | align-items: center; 14 | } 15 | nav .logo a{ 16 | text-decoration: none; 17 | color: #fff; 18 | font-size: 35px; 19 | font-weight: 600; 20 | } 21 | nav ul{ 22 | display: flex; 23 | align-items: center; 24 | list-style: none; 25 | padding: 10px; 26 | } 27 | nav li{ 28 | margin-left: 7px; 29 | } 30 | nav li a{ 31 | text-decoration: none; 32 | color: #fff; 33 | font-size: 18px; 34 | font-weight: 500; 35 | padding: 8px 15px; 36 | border-radius: 5px; 37 | transition: 0.3s; 38 | } 39 | nav li a:hover{ 40 | background-color: white; 41 | color: black; 42 | } 43 | .banner{ 44 | height: 100vh; 45 | background: linear-gradient( rgba(0,0,0,0.281), rgba(0,0,0,0.308)),url('background.jpg'); 46 | background-size: cover; 47 | background-position: center; 48 | background-repeat: no-repeat; 49 | display: flex; 50 | align-items: center; 51 | justify-content: center; 52 | text-align: center; 53 | } 54 | .texto .titulo{ 55 | color: #fff; 56 | font-size: 60px; 57 | font-weight: 600; 58 | } 59 | .texto .sub_titulo{ 60 | color: #fff; 61 | font-size: 58px; 62 | font-weight: 600; 63 | } 64 | .texto .botoes{ 65 | margin-top: 30px; 66 | } 67 | .texto .botoes button{ 68 | height: 55px; 69 | width: 170px; 70 | border-radius: 5px; 71 | border: 0; 72 | margin: 0 10px; 73 | font-size: 20px; 74 | font-weight: 500; 75 | padding: 0 10px; 76 | cursor: pointer; 77 | outline: none; 78 | transition: 0.3s; 79 | } 80 | .texto .botoes button.n-overlay{ 81 | color: white; 82 | background: none; 83 | border: 2px solid white; 84 | } 85 | .texto .botoes button.n-overlay:hover{ 86 | color: black; 87 | background-color: white; 88 | } 89 | .texto .botoes button.overlay{ 90 | background: white; 91 | color: black; 92 | animation: vibrar 0.5s ease-in-out infinite both; 93 | } 94 | @keyframes vibrar { 95 | 0%{ 96 | transform: scale(1); 97 | } 98 | 50%{ 99 | transform: scale(1.1); 100 | } 101 | 100%{ 102 | transform: scale(1); 103 | } 104 | } --------------------------------------------------------------------------------