├── 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 |
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 */
--------------------------------------------------------------------------------