├── image ├── 1.jpg └── 1.png ├── index.html └── style.css /image/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/banner/HEAD/image/1.jpg -------------------------------------------------------------------------------- /image/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/banner/HEAD/image/1.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 |
LUNDEV
12 |
13 | LOGIN 14 |
15 |
16 | 25 | 26 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@900&display=swap'); 2 | body{ 3 | margin: 0; 4 | background-color: #000; 5 | color: #eee; 6 | font-family: Poppins; 7 | } 8 | header{ 9 | border-bottom: 1px solid #eee2; 10 | height: 70px; 11 | display: flex; 12 | justify-content: space-between; 13 | align-items: center; 14 | padding: 0 100px; 15 | position: relative; 16 | z-index: 10; 17 | } 18 | .banner{ 19 | background-image: 20 | linear-gradient( 21 | to bottom, #0009, transparent, #0009 22 | ), 23 | url(image/1.jpg); 24 | width: 100%; 25 | height: 100vh; 26 | margin-top: -70px; 27 | background-repeat: no-repeat; 28 | background-position: center; 29 | background-size: cover; 30 | position: relative; 31 | } 32 | .banner::after{ 33 | position: absolute; 34 | content: ''; 35 | inset: 0 0 0 0; 36 | background-image: url(image/1.png); 37 | background-repeat: no-repeat; 38 | background-position: center; 39 | background-size: cover; 40 | } 41 | .banner .content{ 42 | position: absolute; 43 | inset: 0 0 0 0; 44 | display: flex; 45 | justify-content: center; 46 | align-items: center; 47 | flex-direction: column; 48 | font-family: 'Gabarito', cursive; 49 | font-size: 12px; 50 | text-transform: uppercase; 51 | } 52 | .banner .content div:nth-child(1){ 53 | font-size: 3em; 54 | } 55 | .banner .content div:nth-child(2){ 56 | font-size: 20em; 57 | color: #dae2db; 58 | } 59 | .banner .content div button{ 60 | border: 1px solid #eee7; 61 | background-color: transparent; 62 | color: #eee; 63 | padding: 10px 20px; 64 | letter-spacing: 5px; 65 | } 66 | @media screen and (max-width: 1200px) { 67 | .banner .content{ 68 | font-size: 9px; 69 | } 70 | } 71 | @media screen and (max-width: 992px) { 72 | .banner .content{ 73 | font-size: 7px; 74 | } 75 | } 76 | @media screen and (max-width: 678px) { 77 | .banner .content{ 78 | font-size: 4px; 79 | } 80 | } --------------------------------------------------------------------------------