Skip to content

Commit 7ca321b

Browse files
rubyhatrubyhat
committed
fix
1 parent 2976e85 commit 7ca321b

File tree

1 file changed

+272
-1
lines changed

1 file changed

+272
-1
lines changed

‎projects/Frontend/Bulma/index.html

Lines changed: 272 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,272 @@
1-
<!doctype html><html><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/><meta name="format-detection" content="telephone=no"/><title>Hello Bulma!</title><script defer="defer" src="/js/runtime.e446952b7daee5da42fb.js"></script><script defer="defer" src="/js/index.ac45094732a35f1b76ef.js"></script><link href="/css/index.91dec5327772cadd2fd3.css" rel="stylesheet"></head><body><nav class="navbar has-shadow is-white"><div class="navbar-brand"><a href="#" class="navbar-item"><img src="/images/Ruby_logo.svg" alt="brand"/> </a><a href="#" class="navbar-burger" data-js="burgerIcon"><span></span><span></span><span></span></a></div><div class="navbar-menu" data-js="navLinks"><div class="navbar-end"><a href="#" class="navbar-item">My Account</a> <a href="#" class="navbar-item">Shopping Cart (0)</a></div></div></nav><div class="section pt-4 pb-0"><nav class="breadcrumb has-bullet-separator"><ul class="container"><li><a class="has-text-danger" href="#">Ruby Store</a></li><li><a class="has-text-danger" href="#">Ruby House</a></li><li class="is-active"><a href="#">Ruby Hats</a></li></ul></nav></div><section class="section"><div class="container"><div class="columns is-vcentered is-multiline"><div class="column is-3-desktop is-6-tablet"><h1 class="is-size-1-desktop is-size-3-mobile title">Ruby Hats</h1><h2 class="is-size-4-desktop is-size-5-mobile subtitle">Pretty good hats</h2><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum iusto commodi a asperiores laudantium neque nisi dolores, nulla impedit laborum?</p></div><div class="column is-5-desktop is-6-tablet has-text-centered"><img src="/images/product.webp" alt="product" class="px-6"/></div><div class="column is-4-desktop is-12-tablet"><div class="is-size-4 mb-4">$9.99</div><p class="mb-4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam, harum!</p><form><div class="field"><div class="control mb-6"><div class="select"><select><option>Some option 1</option><option>Some option 2</option><option>Some option 3</option></select></div></div></div><button class="button is-danger">Add to Cart</button></form></div></div></div></section><section class="section"><div class="container"><div class="columns is-8 is-variable"><div class="column is-7-tablet"><div class="tabs is-boxed"><ul data-tabs="tabs"><li class="is-active"><a class="has-text-danger-dark" href="javascript:void(0)">Product Details</a></li><li><a class="has-text-danger-dark" href="javascript:void(0)">Delivery Information</a></li></ul></div><div class="px-2" data-tabs="content"><div data-tabs="content-1"><h3 class="is-size-5 title">Product Details</h3><p class="mb-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus facere magni qui corrupti eligendi alias praesentium fugit assumenda dignissimos consequatur dicta delectus, quis soluta perferendis fuga maxime facilis, ipsum numquam!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex alias deleniti assumenda nemo perspiciatis atque quod nulla consequatur repellat unde impedit ipsa ut eum maxime quas iste aperiam, eos debitis!</p></div><div data-tabs="content-2" class="is-hidden"><h3 class="is-size-5 title">Delivery Information</h3><p class="mb-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis odit esse ipsum. Temporibus delectus aspernatur autem cumque architecto doloribus quis?</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, repudiandae.</p></div></div></div><div class="column is-5-tablet"><div class="message is-danger mt-6"><div class="message-header"><p>How to use</p></div><div class="message-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem qui reiciendis possimus pariatur minima ipsam fugit autem, ratione quidem facilis natus, consequatur molestiae recusandae debitis neque hic. Quam, consequatur cum. <button data-js="modalButton" class="button is-danger mt-3">Show Modal</button></div></div></div></div></div></section><section class="section"><div class="container"><h3 class="title has-text-centered is-size-4">Related Products</h3><div class="columns mt-5 is-8 is-variable is-centered"><div class="column is-4-tablet is-3-desktop"><div class="card"><div class="card-image has-text-centered px-6"><img src="/images/product.webp" alt="product"/></div><div class="card-content"><p>$19.99</p><p class="title is-size-5">Lorem</p></div><div class="card-footer"><p class="card-footer-item"><a href="#" class="has-text-danger-dark">View</a></p></div></div></div><div class="column is-4-tablet is-3-desktop"><div class="card"><div class="card-image has-text-centered px-6"><img src="/images/product.webp" alt="product"/></div><div class="card-content"><p>$14.99</p><p class="title is-size-5">Lorem, ipsum.</p></div><div class="card-footer"><p class="card-footer-item"><a href="#" class="has-text-danger-dark">View</a></p></div></div></div><div class="column is-4-tablet is-3-desktop"><div class="card"><div class="card-image has-text-centered px-6"><img src="/images/product.webp" alt="product"/></div><div class="card-content"><p>$9.99</p><p class="title is-size-5">Lorem, ipsum dolor.</p></div><div class="card-footer"><p class="card-footer-item"><a href="#" class="has-text-danger-dark">View</a></p></div></div></div></div></div></section><div class="modal"><div class="modal-background"></div><div class="modal-content has-background-white py-5 px-5"><h3 class="title">Create Account</h3><p class="subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p><form><div class="field"><label class="label">Name</label><div class="control"><input class="input" placeholder="Name"/></div></div><div class="field"><label class="label">Email</label><div class="control"><input class="input" placeholder="Email"/></div></div><div class="field"><div class="control"><label class="checkbox"><input type="checkbox" class="checkbox"/> I agree to the <a href="#" class="has-text-danger">Terms.</a></label></div></div><div class="mt-3"><button class="button is-danger is-fullwidth">Create</button></div></form></div></div><footer class="footer py-5"><div class="content has-text-centered"><p>Copyright 2022 | <a class="has-text-danger-dark" href="https://rubyhat.github.io">Rubyhat</a></p></div></footer></body></html>
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta
7+
name="viewport"
8+
content="width=device-width,initial-scale=1,maximum-scale=1"
9+
/>
10+
<meta name="format-detection" content="telephone=no" />
11+
<title>Hello Bulma!</title>
12+
<script
13+
defer="defer"
14+
src="https://rubyhat.github.io/projects/Frontend/Bulma/js/runtime.e446952b7daee5da42fb.js"
15+
></script>
16+
<script
17+
defer="defer"
18+
src="https://rubyhat.github.io/projects/Frontend/Bulma/js/index.ac45094732a35f1b76ef.js"
19+
></script>
20+
<link
21+
href="https://rubyhat.github.io/projects/Frontend/Bulma/css/index.91dec5327772cadd2fd3.css"
22+
rel="stylesheet"
23+
/>
24+
</head>
25+
<body>
26+
<nav class="navbar has-shadow is-white">
27+
<div class="navbar-brand">
28+
<a href="#" class="navbar-item"
29+
><img
30+
src="https://rubyhat.github.io/projects/Frontend/Bulma/images/Ruby_logo.svg"
31+
alt="brand"
32+
/> </a
33+
><a href="#" class="navbar-burger" data-js="burgerIcon"
34+
><span></span><span></span><span></span
35+
></a>
36+
</div>
37+
<div class="navbar-menu" data-js="navLinks">
38+
<div class="navbar-end">
39+
<a href="#" class="navbar-item">My Account</a>
40+
<a href="#" class="navbar-item">Shopping Cart (0)</a>
41+
</div>
42+
</div>
43+
</nav>
44+
<div class="section pt-4 pb-0">
45+
<nav class="breadcrumb has-bullet-separator">
46+
<ul class="container">
47+
<li><a class="has-text-danger" href="#">Ruby Store</a></li>
48+
<li><a class="has-text-danger" href="#">Ruby House</a></li>
49+
<li class="is-active"><a href="#">Ruby Hats</a></li>
50+
</ul>
51+
</nav>
52+
</div>
53+
<section class="section">
54+
<div class="container">
55+
<div class="columns is-vcentered is-multiline">
56+
<div class="column is-3-desktop is-6-tablet">
57+
<h1 class="is-size-1-desktop is-size-3-mobile title">Ruby Hats</h1>
58+
<h2 class="is-size-4-desktop is-size-5-mobile subtitle">
59+
Pretty good hats
60+
</h2>
61+
<p>
62+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
63+
Voluptatum iusto commodi a asperiores laudantium neque nisi
64+
dolores, nulla impedit laborum?
65+
</p>
66+
</div>
67+
<div class="column is-5-desktop is-6-tablet has-text-centered">
68+
<img
69+
src="https://rubyhat.github.io/projects/Frontend/Bulma/images/product.webp"
70+
alt="product"
71+
class="px-6"
72+
/>
73+
</div>
74+
<div class="column is-4-desktop is-12-tablet">
75+
<div class="is-size-4 mb-4">$9.99</div>
76+
<p class="mb-4">
77+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam,
78+
harum!
79+
</p>
80+
<form>
81+
<div class="field">
82+
<div class="control mb-6">
83+
<div class="select">
84+
<select>
85+
<option>Some option 1</option>
86+
<option>Some option 2</option>
87+
<option>Some option 3</option>
88+
</select>
89+
</div>
90+
</div>
91+
</div>
92+
<button class="button is-danger">Add to Cart</button>
93+
</form>
94+
</div>
95+
</div>
96+
</div>
97+
</section>
98+
<section class="section">
99+
<div class="container">
100+
<div class="columns is-8 is-variable">
101+
<div class="column is-7-tablet">
102+
<div class="tabs is-boxed">
103+
<ul data-tabs="tabs">
104+
<li class="is-active">
105+
<a class="has-text-danger-dark" href="javascript:void(0)"
106+
>Product Details</a
107+
>
108+
</li>
109+
<li>
110+
<a class="has-text-danger-dark" href="javascript:void(0)"
111+
>Delivery Information</a
112+
>
113+
</li>
114+
</ul>
115+
</div>
116+
<div class="px-2" data-tabs="content">
117+
<div data-tabs="content-1">
118+
<h3 class="is-size-5 title">Product Details</h3>
119+
<p class="mb-3">
120+
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
121+
Minus facere magni qui corrupti eligendi alias praesentium
122+
fugit assumenda dignissimos consequatur dicta delectus, quis
123+
soluta perferendis fuga maxime facilis, ipsum numquam!
124+
</p>
125+
<p>
126+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex
127+
alias deleniti assumenda nemo perspiciatis atque quod nulla
128+
consequatur repellat unde impedit ipsa ut eum maxime quas iste
129+
aperiam, eos debitis!
130+
</p>
131+
</div>
132+
<div data-tabs="content-2" class="is-hidden">
133+
<h3 class="is-size-5 title">Delivery Information</h3>
134+
<p class="mb-3">
135+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
136+
Perspiciatis odit esse ipsum. Temporibus delectus aspernatur
137+
autem cumque architecto doloribus quis?
138+
</p>
139+
<p>
140+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
141+
Repellendus, repudiandae.
142+
</p>
143+
</div>
144+
</div>
145+
</div>
146+
<div class="column is-5-tablet">
147+
<div class="message is-danger mt-6">
148+
<div class="message-header"><p>How to use</p></div>
149+
<div class="message-body">
150+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
151+
Voluptatem qui reiciendis possimus pariatur minima ipsam fugit
152+
autem, ratione quidem facilis natus, consequatur molestiae
153+
recusandae debitis neque hic. Quam, consequatur cum.
154+
<button data-js="modalButton" class="button is-danger mt-3">
155+
Show Modal
156+
</button>
157+
</div>
158+
</div>
159+
</div>
160+
</div>
161+
</div>
162+
</section>
163+
<section class="section">
164+
<div class="container">
165+
<h3 class="title has-text-centered is-size-4">Related Products</h3>
166+
<div class="columns mt-5 is-8 is-variable is-centered">
167+
<div class="column is-4-tablet is-3-desktop">
168+
<div class="card">
169+
<div class="card-image has-text-centered px-6">
170+
<img
171+
src="https://rubyhat.github.io/projects/Frontend/Bulma/images/product.webp"
172+
alt="product"
173+
/>
174+
</div>
175+
<div class="card-content">
176+
<p>$19.99</p>
177+
<p class="title is-size-5">Lorem</p>
178+
</div>
179+
<div class="card-footer">
180+
<p class="card-footer-item">
181+
<a href="#" class="has-text-danger-dark">View</a>
182+
</p>
183+
</div>
184+
</div>
185+
</div>
186+
<div class="column is-4-tablet is-3-desktop">
187+
<div class="card">
188+
<div class="card-image has-text-centered px-6">
189+
<img
190+
src="https://rubyhat.github.io/projects/Frontend/Bulma/images/product.webp"
191+
alt="product"
192+
/>
193+
</div>
194+
<div class="card-content">
195+
<p>$14.99</p>
196+
<p class="title is-size-5">Lorem, ipsum.</p>
197+
</div>
198+
<div class="card-footer">
199+
<p class="card-footer-item">
200+
<a href="#" class="has-text-danger-dark">View</a>
201+
</p>
202+
</div>
203+
</div>
204+
</div>
205+
<div class="column is-4-tablet is-3-desktop">
206+
<div class="card">
207+
<div class="card-image has-text-centered px-6">
208+
<img
209+
src="https://rubyhat.github.io/projects/Frontend/Bulma/images/product.webp"
210+
alt="product"
211+
/>
212+
</div>
213+
<div class="card-content">
214+
<p>$9.99</p>
215+
<p class="title is-size-5">Lorem, ipsum dolor.</p>
216+
</div>
217+
<div class="card-footer">
218+
<p class="card-footer-item">
219+
<a href="#" class="has-text-danger-dark">View</a>
220+
</p>
221+
</div>
222+
</div>
223+
</div>
224+
</div>
225+
</div>
226+
</section>
227+
<div class="modal">
228+
<div class="modal-background"></div>
229+
<div class="modal-content has-background-white py-5 px-5">
230+
<h3 class="title">Create Account</h3>
231+
<p class="subtitle">
232+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
233+
</p>
234+
<form>
235+
<div class="field">
236+
<label class="label">Name</label>
237+
<div class="control">
238+
<input class="input" placeholder="Name" />
239+
</div>
240+
</div>
241+
<div class="field">
242+
<label class="label">Email</label>
243+
<div class="control">
244+
<input class="input" placeholder="Email" />
245+
</div>
246+
</div>
247+
<div class="field">
248+
<div class="control">
249+
<label class="checkbox"
250+
><input type="checkbox" class="checkbox" /> I agree to the
251+
<a href="#" class="has-text-danger">Terms.</a></label
252+
>
253+
</div>
254+
</div>
255+
<div class="mt-3">
256+
<button class="button is-danger is-fullwidth">Create</button>
257+
</div>
258+
</form>
259+
</div>
260+
</div>
261+
<footer class="footer py-5">
262+
<div class="content has-text-centered">
263+
<p>
264+
Copyright 2022 |
265+
<a class="has-text-danger-dark" href="https://rubyhat.github.io"
266+
>Rubyhat</a
267+
>
268+
</p>
269+
</div>
270+
</footer>
271+
</body>
272+
</html>

0 commit comments

Comments
 (0)