Skip to content

Commit 1065793

Browse files
DannyDevSeDannyDevSe
committed
kinda finish navbar and header
1 parent 816861f commit 1065793

1 file changed

Lines changed: 95 additions & 87 deletions

File tree

‎index.html‎

Lines changed: 95 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,34 @@
7070
</span>
7171
<strong>Discord</strong>
7272
</a>
73+
<a
74+
class="button is-danger has-text-white"
75+
href="https://www.youtube.com/@FourGamesAB"
76+
target="_blank"
77+
>
78+
<span class="icon">
79+
<img
80+
src="src/assets/youtube-brands-solid-full.svg"
81+
alt="YouTube"
82+
style="filter: brightness(0) invert(1)"
83+
/>
84+
</span>
85+
<strong>YouTube</strong>
86+
</a>
87+
<a
88+
class="button is-dark has-text-white"
89+
href="https://store.steampowered.com/publisher/fourgamesab"
90+
target="_blank"
91+
>
92+
<span class="icon">
93+
<img
94+
src="src/assets/steam-brands-solid-full.svg"
95+
alt="Steam"
96+
style="filter: brightness(0) invert(1)"
97+
/>
98+
</span>
99+
<strong>Steam</strong>
100+
</a>
73101
</div>
74102
</div>
75103
</div>
@@ -86,37 +114,34 @@
86114
style="width: 100%; height: 100%; object-fit: cover"
87115
/>
88116
</picture>
117+
<div class="fixed-grid has-5-cols">
118+
<div class="grid">
119+
<div class="cell is-hidden-mobile"></div>
120+
<div class="cell py-6 is-col-span-12 is-col-span-3-tablet"><br /><br /></div>
89121

90-
<div class="columns is-gapless hero-body" style="padding: 0; display: flex; align-items: stretch">
91-
<div class="column is-one-fifth is-hidden-mobile">
92-
<div class="button is-danger" style="height: 100%; border-radius: 0; display: flex">Left</div>
93-
</div>
122+
<!-- <div class="box cell py-6 is-col-span-12 is-col-span-3-tablet"></div> -->
94123

95-
<div class="column is-three-fifth">
96-
<div
97-
class="button"
98-
style="
99-
height: 100%;
100-
width: 100%;
101-
border-radius: 0;
102-
display: flex;
103-
flex-direction: column;
104-
align-items: flex-start; /* Pushes content to the left */
105-
text-align: left;
106-
background-color: transparent; /* Removes the color */
107-
border: none; /* Removes the button border */
108-
box-shadow: none; /* Removes the hover shadow */
109-
padding: 2rem 1rem; /* Adjusts the inner space */
110-
cursor: default; /* Stops it from looking like a clickable button */
111-
"
112-
>
113-
<h1 class="title has-text-white">Support us</h1>
114-
<p class="subtitle has-text-white">
124+
<div class="cell py-6 is-hidden-mobile"></div>
125+
<div class="cell is-hidden-mobile"></div>
126+
127+
<div class="cell is-col-span-12 is-col-span-3-tablet">
128+
<h1 class="title has-text-white has-text-centered-mobile">Support us</h1>
129+
</div>
130+
131+
<div class="cell is-hidden-mobile"></div>
132+
<div class="cell is-hidden-mobile"></div>
133+
134+
<div class="cell is-col-span-12 is-col-span-3-tablet">
135+
<p class="subtitle has-text-white has-text-centered-mobile">
115136
The best way to support our work
116137
<br />
117138
is by becoming a YouTube Supporter.
118139
</p>
119-
<div class="buttons">
140+
</div>
141+
<div class="cell is-hidden-mobile"></div>
142+
<div class="cell is-hidden-mobile"></div>
143+
<div class="cell is-col-span-12 is-col-span-3-tablet has-text-centered-mobile">
144+
<div class="has-text-left-tablet">
120145
<a
121146
class="button is-danger has-text-white"
122147
href="https://www.youtube.com/@FourGamesAB/join"
@@ -133,82 +158,65 @@ <h1 class="title has-text-white">Support us</h1>
133158
</a>
134159
</div>
135160
</div>
136-
</div>
137-
<div class="column is-one-fifth is-hidden-mobile">
138-
<div class="button is-danger" style="height: 100%; border-radius: 0; display: flex">Left</div>
161+
<div class="cell is-hidden-mobile"></div>
139162
</div>
140163
</div>
141164
</section>
142165
</header>
143166

144167
<main>
145-
<div class="columns is-gapless">
146-
<div class="column is-one-fifth is-hidden-mobile">
147-
<div class="button is-danger" style="height: 100%; border-radius: 0; display: flex">Left</div>
168+
<div class="fixed-grid has-5-cols py-6">
169+
<div class="grid">
170+
<div class="box cell">Cell 1</div>
171+
<div class="box cell is-col-span-3 is-row-span-3">Cell 2</div>
172+
<div class="box cell">Cell 3</div>
173+
<div class="box cell">Cell 4</div>
174+
<div class="box cell">Cell 5</div>
175+
<div class="box cell">Cell 6 test</div>
176+
<div class="box cell">Cell 7</div>
177+
<div class="box cell">Cell 8</div>
178+
<div class="box cell is-col-span-3 is-row-span-3">Cell 9</div>
179+
<div class="box cell">Cell 10</div>
180+
<div class="box cell">Cell 11</div>
181+
<div class="box cell">Cell 12</div>
182+
<div class="box cell">Cell 13</div>
183+
<div class="box cell">Cell 14</div>
184+
<div class="box cell">Cell 15</div>
185+
<div class="box cell is-col-span-3 is-row-span-3">Cell 16</div>
186+
<div class="box cell">Cell 17</div>
187+
<div class="box cell">Cell 18</div>
188+
<div class="box cell">Cell 19</div>
189+
<div class="box cell">Cell 20</div>
190+
<div class="box cell">Cell 21</div>
148191
</div>
192+
</div>
193+
</main>
149194

150-
<div class="column is-three-fifth">
151-
<div class="button is-info" style="height: 100%; border-radius: 0; display: flex">
152-
<div class="columns is-multiline">
153-
<div id="our-games" class="column is-full">
154-
<div class="notification is-primary">First Vertical Block</div>
155-
</div>
156-
157-
<div id="our-videos" class="column is-full">
158-
<div class="notification is-link">Second Vertical Block</div>
159-
</div>
160-
161-
<div id="contact-us" class="column is-full">
162-
<div class="notification is-info">
163-
<div class="box">
164-
<h1 class="title is-4">Contact us</h1>
165-
166-
<form action="https://formspree.io/f/mbdplgvl" method="POST">
167-
<div class="field">
168-
<label class="label">Email</label>
169-
<div class="control">
170-
<input
171-
class="input"
172-
type="email"
173-
name="email"
174-
placeholder="example@gmail.com"
175-
required
176-
/>
177-
</div>
178-
</div>
195+
<div class="box">
196+
<h1 class="title is-4">Contact us</h1>
179197

180-
<div class="field">
181-
<label class="label">Message</label>
182-
<div class="control">
183-
<textarea
184-
class="textarea"
185-
name="message"
186-
placeholder="Your message"
187-
required
188-
></textarea>
189-
</div>
190-
</div>
198+
<form action="https://formspree.io/f/mbdplgvl" method="POST">
199+
<div class="field">
200+
<label class="label">Email</label>
201+
<div class="control">
202+
<input class="input" type="email" name="email" placeholder="example@gmail.com" required />
203+
</div>
204+
</div>
191205

192-
<div class="field">
193-
<div class="control">
194-
<button class="button is-dark is-fullwidth" type="submit">
195-
Submit
196-
</button>
197-
</div>
198-
</div>
199-
</form>
200-
</div>
201-
</div>
202-
</div>
203-
</div>
206+
<div class="field">
207+
<label class="label">Message</label>
208+
<div class="control">
209+
<textarea class="textarea" name="message" placeholder="Your message" required></textarea>
204210
</div>
205211
</div>
206212

207-
<div class="column is-one-fifth is-hidden-mobile">
208-
<div class="button is-danger" style="height: 100%; border-radius: 0; display: flex">Left</div>
213+
<div class="field">
214+
<div class="control">
215+
<button class="button is-dark is-fullwidth" type="submit">Submit</button>
216+
</div>
209217
</div>
210-
</div>
211-
</main>
218+
</form>
219+
</div>
212220

213221
<footer class="footer">
214222
<div class="content has-text-centered">

0 commit comments

Comments
 (0)