-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
292 lines (279 loc) · 19 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/b72be65822.js" crossorigin="anonymous"></script>
<!-- Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<!-- FAVICON -->
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<link rel="icon" href="img/favicon.png" type="image/x-icon">
<!-- CSS Customs -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/_responsive.css">
<!-- ScrollReveal -->
<script src="https://unpkg.com/scrollreveal"></script>
<title>Skeleton CSS</title>
</head>
<body>
<!-- PRODUCTION LINK -->
<!-- https://rawcdn.githack.com/Edward-Alarco/skeleton_css/master/css/general-styles.css?token=ANLIZ2STSVMESRRCZIAG7US7XGXCG -->
<!-- DEVELOPMENT LINK -->
<!-- https://raw.githack.com/Edward-Alarco/skeleton_css/master/css/general-styles.css?token=ANLIZ2STSVMESRRCZIAG7US7XGXCG -->
<section class="main">
<h2 class="animate__animated animate__backInDown">Skeleton.CSS</h2>
<div class="animate__animated animate__backInRight">
<i class="fas fa-bone"></i>
<i class="fas fa-bone"></i>
<i class="fas fa-bone"></i>
<i class="fas fa-bone"></i>
<i class="fas fa-bone"></i>
</div>
<p class="animate__animated animate__fadeIn animate__delay-1s animate__faster">- Mini library of custom predesigned sections, fully responsive! -</p>
<div class="corner animate__fadeIn animate__animated animate__delay-1s">
<a target="_blank" href="https://github.com/Edward-Alarco/skeleton_css">
<i class="fab fa-github-alt"></i>
</a>
</div>
<div class="button animate__fadeIn animate__animated animate__delay-1s">
<div class="bg">
<a href="#layouts" class="scroll-suave">
<i class="fas fa-chevron-down"></i>
</a>
</div>
</div>
<div class="modal-info animate__fadeIn animate__animated animate__delay-1s">
<a href="#" id="btnmodal">
<i class="fas fa-info-circle"></i>
</a>
</div>
</section>
<section class="documentation">
<div class="barra-top animate__animated animate__fadeIn animate__delay-2s">
<div class="content">
<h2>documentation</h2>
</div>
</div>
<div class="content-doc">
<div class="left animacion1">
<p>After copying the respective CDN | LINK to bring the minilibrary with the styles, choose between any of the layouts seen. Among all these, a large part uses the Flex organization system and other sections do require Grid.</p>
<span class="css">
<input type="text" value='<link rel="stylesheet" href="https://rawcdn.githack.com/Edward-Alarco/skeleton_css/master/css/general-styles.css?token=ANLIZ2STSVMESRRCZIAG7US7XGXCG">'>
<button onclick="copyLink();">
<i class="far fa-copy"></i>
</button>
</span>
<p>Copy the HTML code of the layout that was chosen, and paste it in its respective code. It is not necessary to encapsulate it in a <span class="tag"><div></span>, since each code is already packaged in a <span class="tag"><section></span> tag.
<p>It is 100% advisable not to change or remove the classes already given in the codes. If you want to make any change, it can be done from its respective CSS. In the event of a conflict between classes or styles, their styles may be interposed with the CSS: <span class="tag">!important</span> attribute.</p>
</div>
<div class="right animacion2">
<div class="card">
<code><pre>
<<span style="color: #e2777a;">section</span> class="<span style="color: #7ec699">fiveteen</span>">
<<span style="color: #e2777a;">div</span> class="<span style="color: #7ec699">container</span>">
<<span style="color: #e2777a;">div</span>>1</<span style="color: #e2777a;">div</span>>
<<span style="color: #e2777a;">div</span>>2</<span style="color: #e2777a;">div</span>>
<<span style="color: #e2777a;">div</span>>3</<span style="color: #e2777a;">div</span>>
<<span style="color: #e2777a;">div</span>>4</<span style="color: #e2777a;">div</span>>
<<span style="color: #e2777a;">div</span>>5</<span style="color: #e2777a;">div</span>>
<<span style="color: #e2777a;">div</span>>6</<span style="color: #e2777a;">div</span>>
</<span style="color: #e2777a;">div</span>>
</<span style="color: #e2777a;">section</span>></pre></code>
</div>
</div>
</div>
<div class="content-doc2">
<div class="left2">
<div>
<svg viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg" style="cursor: pointer;">
<g id="img_example">
<rect width="200" height="200" fill="#ecf0f1"/>
<g id="1">
<rect id="Rectangle 25" x="20" y="20" width="50" height="50" rx="2" fill="black"/>
<path id="1_2" d="M42.76 39.2V37.54H46.52V52H44.68V39.2H42.76Z" fill="white"/>
</g>
<g id="2">
<rect id="Rectangle 26" x="75" y="20" width="105" height="50" rx="2" fill="black"/>
<path id="2_2" d="M122.52 50.54C124.213 49.18 125.54 48.0667 126.5 47.2C127.46 46.32 128.267 45.4067 128.92 44.46C129.587 43.5 129.92 42.56 129.92 41.64C129.92 40.7733 129.707 40.0933 129.28 39.6C128.867 39.0933 128.193 38.84 127.26 38.84C126.353 38.84 125.647 39.1267 125.14 39.7C124.647 40.26 124.38 41.0133 124.34 41.96H122.58C122.633 40.4667 123.087 39.3133 123.94 38.5C124.793 37.6867 125.893 37.28 127.24 37.28C128.613 37.28 129.7 37.66 130.5 38.42C131.313 39.18 131.72 40.2267 131.72 41.56C131.72 42.6667 131.387 43.7467 130.72 44.8C130.067 45.84 129.32 46.76 128.48 47.56C127.64 48.3467 126.567 49.2667 125.26 50.32H132.14V51.84H122.52V50.54Z" fill="white"/>
</g>
<g id="6">
<rect id="Rectangle 17" x="75" y="130" width="105" height="50" rx="2" fill="black"/>
<path id="6_2" d="M130.8 150.98C130.507 149.5 129.593 148.76 128.06 148.76C126.873 148.76 125.987 149.22 125.4 150.14C124.813 151.047 124.527 152.547 124.54 154.64C124.847 153.947 125.353 153.407 126.06 153.02C126.78 152.62 127.58 152.42 128.46 152.42C129.833 152.42 130.927 152.847 131.74 153.7C132.567 154.553 132.98 155.733 132.98 157.24C132.98 158.147 132.8 158.96 132.44 159.68C132.093 160.4 131.56 160.973 130.84 161.4C130.133 161.827 129.273 162.04 128.26 162.04C126.887 162.04 125.813 161.733 125.04 161.12C124.267 160.507 123.727 159.66 123.42 158.58C123.113 157.5 122.96 156.167 122.96 154.58C122.96 149.687 124.667 147.24 128.08 147.24C129.387 147.24 130.413 147.593 131.16 148.3C131.907 149.007 132.347 149.9 132.48 150.98H130.8ZM128.08 153.96C127.507 153.96 126.967 154.08 126.46 154.32C125.953 154.547 125.54 154.9 125.22 155.38C124.913 155.847 124.76 156.42 124.76 157.1C124.76 158.113 125.053 158.94 125.64 159.58C126.227 160.207 127.067 160.52 128.16 160.52C129.093 160.52 129.833 160.233 130.38 159.66C130.94 159.073 131.22 158.287 131.22 157.3C131.22 156.26 130.953 155.447 130.42 154.86C129.887 154.26 129.107 153.96 128.08 153.96Z" fill="white"/>
</g>
<g id="3">
<rect id="Rectangle 24" x="20" y="75" width="105" height="50" rx="2" fill="black"/>
<path id="3_2" d="M67.7 96.18C67.7933 94.9533 68.2667 93.9933 69.12 93.3C69.9733 92.6067 71.08 92.26 72.44 92.26C73.3467 92.26 74.1267 92.4267 74.78 92.76C75.4467 93.08 75.9467 93.52 76.28 94.08C76.6267 94.64 76.8 95.2733 76.8 95.98C76.8 96.8067 76.56 97.52 76.08 98.12C75.6133 98.72 75 99.1067 74.24 99.28V99.38C75.1067 99.5933 75.7933 100.013 76.3 100.64C76.8067 101.267 77.06 102.087 77.06 103.1C77.06 103.86 76.8867 104.547 76.54 105.16C76.1933 105.76 75.6733 106.233 74.98 106.58C74.2867 106.927 73.4533 107.1 72.48 107.1C71.0667 107.1 69.9067 106.733 69 106C68.0933 105.253 67.5867 104.2 67.48 102.84H69.24C69.3333 103.64 69.66 104.293 70.22 104.8C70.78 105.307 71.5267 105.56 72.46 105.56C73.3933 105.56 74.1 105.32 74.58 104.84C75.0733 104.347 75.32 103.713 75.32 102.94C75.32 101.94 74.9867 101.22 74.32 100.78C73.6533 100.34 72.6467 100.12 71.3 100.12H70.84V98.6H71.32C72.5467 98.5867 73.4733 98.3867 74.1 98C74.7267 97.6 75.04 96.9867 75.04 96.16C75.04 95.4533 74.8067 94.8867 74.34 94.46C73.8867 94.0333 73.2333 93.82 72.38 93.82C71.5533 93.82 70.8867 94.0333 70.38 94.46C69.8733 94.8867 69.5733 95.46 69.48 96.18H67.7Z" fill="white"/>
</g>
<g id="4">
<rect id="Rectangle 22" x="130" y="75" width="50" height="50" rx="2" fill="black"/>
<path id="4_2" d="M149.8 103.78V102.4L156.82 92.68H159V102.2H161V103.78H159V107H157.2V103.78H149.8ZM157.28 94.58L151.9 102.2H157.28V94.58Z" fill="white"/>
</g>
<g id="5">
<rect id="Rectangle 19" x="20" y="130" width="50" height="50" rx="2" fill="black"/>
<path id="5_2" d="M49.46 149.12H42.44V153.68C42.7467 153.253 43.2 152.907 43.8 152.64C44.4 152.36 45.0467 152.22 45.74 152.22C46.8467 152.22 47.7467 152.453 48.44 152.92C49.1333 153.373 49.6267 153.967 49.92 154.7C50.2267 155.42 50.38 156.187 50.38 157C50.38 157.96 50.2 158.82 49.84 159.58C49.48 160.34 48.9267 160.94 48.18 161.38C47.4467 161.82 46.5333 162.04 45.44 162.04C44.04 162.04 42.9067 161.68 42.04 160.96C41.1733 160.24 40.6467 159.28 40.46 158.08H42.24C42.4133 158.84 42.78 159.433 43.34 159.86C43.9 160.287 44.6067 160.5 45.46 160.5C46.5133 160.5 47.3067 160.187 47.84 159.56C48.3733 158.92 48.64 158.08 48.64 157.04C48.64 156 48.3733 155.2 47.84 154.64C47.3067 154.067 46.52 153.78 45.48 153.78C44.7733 153.78 44.1533 153.953 43.62 154.3C43.1 154.633 42.72 155.093 42.48 155.68H40.76V147.52H49.46V149.12Z" fill="white"/>
</g>
</g>
</svg>
</div>
</div>
<div class="right2">
<div class="content-texto">
<p>Each section is divided by divs, these are listed to distinguish the order and positioning of each one of them. Delete the number and enter the respective text.</p>
<h5>How can I position the divs?</h5>
<p>I use both positioning systems, Flex and Grid, both respecting their margins and paddings, the width of the container and while it varies in different devices.</p>
<p>In addition to that, I used the responsive measures given by Bootstrap as a reference for other devices:</p>
<span>@media (min-width: 768px) { ... }</span>
<span>@media (min-width: 576px) { ... }</span>
</div>
</div>
</div>
</section>
<section class="installation" id="installation">
<div class="cerrar">
<a href="#" id="btncerrar">
<i class="fas fa-times"></i>
</a>
</div>
<div class="container">
<h2>Installation</h2>
<div class="script">
<!-- <code>
<link rel="stylesheet" href="https://rawcdn.githack.com/Edward-Alarco/skeleton_css/master/css/general-styles.css?token=ANLIZ2VJ6KE2UX3SKDGMLD27W4IV4">
</code> -->
<input id="link" type="text" value='<link rel="stylesheet" href="https://rawcdn.githack.com/Edward-Alarco/skeleton_css/master/css/general-styles.css?token=ANLIZ2STSVMESRRCZIAG7US7XGXCG">'>
<button onclick="copyLink();">
<i class="far fa-copy"></i>
</button>
</div>
<div class="card">
<div class="left">
<h3>Instructions</h3>
<ul>
<li>
<i class="fas fa-chevron-right"></i>
<span style="color: red;">Important!</span> Copy the CDN / Link for the styles.
</li>
<li>
<i class="fas fa-chevron-right"></i>
Choose the layout that best suits your project.
</li>
<li>
<i class="fas fa-chevron-right"></i>
Copy the HTML code they give you.
</li>
<li>
<i class="fas fa-chevron-right"></i>
Paste it into your project.
</li>
</ul>
</div>
<div class="rigth">
<h3>Features</h3>
<p><span style="color: #3498db;">WE DO NOT WORK WITH BOOTSTRAP!</span> But we use the same class names to keep our knowledge sequenced, you don't need to learn new class names.</p>
<p>The library has pre-customized styles, and fully responsive. Ready just to enter your website information</p>
</div>
</div>
</div>
</section>
<section class="layouts">
<div class="filters">
<div class="botones-filtros animacion3">
<h2>Layouts</h2>
<button class="button active" id="all">All</button>
<button class="button" id="flex">Flex</button>
<button class="button" id="grid">Grid</button>
</div>
</div>
<div class="container">
<div class="muestra-de-layouts animacion4" id="layouts">
<img src="img/Group 1.svg" alt="" class="img-layout all flex">
<img src="img/Group 2.svg" alt="" class="img-layout all flex">
<img src="img/Group 3.svg" alt="" class="img-layout all flex">
<img src="img/Group 4.svg" alt="" class="img-layout all flex">
<img src="img/Group 5.svg" alt="" class="img-layout all flex">
<img src="img/Group 6.svg" alt="" class="img-layout all flex">
<img src="img/Group 7.svg" alt="" class="img-layout all flex">
<img src="img/Group 8.svg" alt="" class="img-layout all flex">
<img src="img/Group 9.svg" alt="" class="img-layout all flex">
<img src="img/Group 10.svg" alt="" class="img-layout all flex">
<img src="img/Group 11.svg" alt="" class="img-layout all grid">
<img src="img/Group 12.svg" alt="" class="img-layout all grid">
<img src="img/Group 13.svg" alt="" class="img-layout all grid">
<img src="img/Group 14.svg" alt="" class="img-layout all grid">
<img src="img/Group 15.svg" alt="" class="img-layout all grid">
<img src="img/Group 16.svg" alt="" class="img-layout all grid">
<img src="img/Group 17.svg" alt="" class="img-layout all grid">
</div>
</div>
</section>
<footer class="animacion5">
<div class="barra-top">
<div class="contenedor">
<p>Contact with me</p>
<div>
<a href="https://github.com/Edward-Alarco" target="_blank"><i class="fab fa-github"></i></a>
<a href="https://www.facebook.com/edward.david.alarco" target="_blank"><i class="fab fa-facebook-square"></i></a>
<a href="https://www.instagram.com/edward_alarco/" target="_blank"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<div class="contenido-footer">
<div class="container">
<div class="firstcolumn">
<h4>Skeleton.css</h4>
<p>Skeleton CSS - [ Pre-customized & Responsive Structures 🧩 ] Toolkit for copy and paste a piece of HTML code for your website.</p>
</div>
<div class="secondcolumn">
<h4>Other projects</h4>
<ul>
<li>👆 <a target="_blank" href="https://edward-alarco.github.io/scrollbar-custom.css/">Scrollbar Custom CSS</a></li>
<li>💧 <a target="_blank" href="https://edward-alarco.github.io/splash.colors/">Splash - Colors</a></li>
<li>🍴 <a target="_blank" href="https://github.com/Edward-Alarco/skeleton_css">Fork on GH</a></li>
</ul>
</div>
<div class="thirdcolumn">
<h4>Any contribution?</h4>
<p><i class="fas fa-envelope"></i> edwarddac.56@gmail.com</p>
</div>
</div>
</div>
<div class="barra-bottom">
<p>2020 © All rights reserved - Edward A. - Skeleton.css</p>
</div>
</footer>
<script>
const button = document.getElementById('btnmodal');
button.addEventListener('click',function(e){
e.preventDefault();
document.getElementById('installation').style.opacity = '1';
document.getElementById('installation').style.left = '0';
});
const buttoncerrar = document.getElementById('btncerrar');
buttoncerrar.addEventListener('click',function(e){
e.preventDefault();
document.getElementById('installation').style.opacity = '0';
document.getElementById('installation').style.left = '-100%';
});
function copyLink(){
var link = document.getElementById('link');
link.select();
link.setSelectionRange(0,9999);
document.execCommand('copy');
}
ScrollReveal().reveal('.animacion1', { delay: 1950 });
ScrollReveal().reveal('.animacion2', { delay: 1950 });
ScrollReveal().reveal('.left2', { delay: 300, easing: 'ease-in-out' });
ScrollReveal().reveal('.right2', { delay: 300, easing: 'ease-in-out' });
ScrollReveal().reveal('.animacion3', { delay: 300, easing: 'ease-in-out' });
ScrollReveal().reveal('.animacion4', { delay: 300, easing: 'ease-in-out' });
ScrollReveal().reveal('.animacion5', { delay: 200, easing: 'ease-in' });
</script>
<script src="js/modal.js"></script>
<script src="js/scroll.js"></script>
<script src="js/codigos4Modal.js"></script>
<script src="js/filters.js"></script>
<script src="js/hover_svg.js"></script>
</body>
</html>