├── bg.jpg ├── index.html └── style.css /bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eminbasbayan/youtube-website/HEAD/bg.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | New Website 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 29 |
30 | 31 | 32 | 33 |
34 |

Making bitcoin more than an investment.

35 |

Bitcoin is the best money. It should defenitely be used like it. We always build and fund free, open-source 36 | projects aimed at making bitcoin the planet’s preferred currency.

37 | 41 |
42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: 'Poppins', sans-serif; 11 | background-image: url("bg.jpg"); 12 | background-size: cover; 13 | } 14 | 15 | 16 | 17 | .container { 18 | width: 80%; 19 | margin: auto; 20 | } 21 | 22 | /*! header start */ 23 | 24 | header { 25 | height: 100px; 26 | border-bottom: 2px solid rgba(255, 255, 255, 0.06); 27 | } 28 | 29 | header nav { 30 | display: flex; 31 | justify-content: space-between; 32 | align-items: center; 33 | height: 100%; 34 | } 35 | 36 | header nav .logo a { 37 | color: white; 38 | text-decoration: none; 39 | font-weight: 700; 40 | font-size: 20px; 41 | } 42 | 43 | nav ul { 44 | list-style: none; 45 | display: flex; 46 | column-gap: 30px; 47 | } 48 | 49 | nav ul li a { 50 | color: white; 51 | text-decoration: none; 52 | transition: color .25s ease; 53 | } 54 | 55 | nav ul li a:hover { 56 | color: #0ba2c0; 57 | } 58 | 59 | nav .menu { 60 | display: flex; 61 | align-items: center; 62 | column-gap: 48px; 63 | } 64 | 65 | nav .menu .menu-button { 66 | color: #0ba2c0; 67 | text-decoration: none; 68 | background-color: rgba(255, 255, 255, 0.08); 69 | padding: 12px 24px; 70 | border-radius: 56px; 71 | transition: all .25s ease; 72 | } 73 | 74 | nav .menu .menu-button:hover { 75 | background-color: #0ba2c0; 76 | color: white; 77 | } 78 | 79 | /*! header end */ 80 | 81 | /*! section start */ 82 | .content { 83 | color: white; 84 | height: calc(100vh - 100px); 85 | padding-top: 150px; 86 | } 87 | 88 | .content h1 { 89 | font-size: 60px; 90 | text-align: center; 91 | } 92 | 93 | .content p { 94 | font-size: 24px; 95 | text-align: center; 96 | margin-top: 32px; 97 | } 98 | 99 | .content .links { 100 | display: flex; 101 | justify-content: center; 102 | margin-top: 48px; 103 | column-gap: 16px; 104 | } 105 | 106 | .content .links a { 107 | background-color: white; 108 | padding: 20px; 109 | width: 280px; 110 | color: black; 111 | text-align: center; 112 | font-size: 18px; 113 | text-decoration: none; 114 | border-radius: 56px; 115 | transition: all .25s ease-in; 116 | } 117 | 118 | .content .links a:hover { 119 | background-color: #0ba2c0; 120 | color: white; 121 | } 122 | 123 | /*! section end */ 124 | 125 | /*! responsive start */ 126 | @media(max-width:576px) { 127 | .container { 128 | width: 100%; 129 | padding-left: 12px; 130 | padding-right: 12px; 131 | } 132 | 133 | .menu ul { 134 | column-gap: 20px; 135 | } 136 | 137 | .menu .menu-button { 138 | display: none; 139 | } 140 | 141 | .content { 142 | padding-top: 50px; 143 | } 144 | 145 | .content h1 { 146 | font-size: 36px; 147 | } 148 | 149 | .content p { 150 | font-size: 16px; 151 | } 152 | 153 | .content .links { 154 | flex-direction: column; 155 | align-items: center; 156 | row-gap: 1rem; 157 | } 158 | 159 | .content .links a { 160 | padding: 14px; 161 | width: 90%; 162 | } 163 | } 164 | 165 | /*! responsive end */ --------------------------------------------------------------------------------