Skip to content

Commit b1f65a0

Browse files
coding-dragoncoding-dragon
authored
Create index.html
1 parent 378ca57 commit b1f65a0

File tree

1 file changed

+148
-0
lines changed

1 file changed

+148
-0
lines changed

‎css/index.html

+148
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<title>Coding Dragons</title>
7+
8+
<!-- Bootstrap core CSS -->
9+
<link href="https://getbootstrap.com/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
10+
11+
<!-- Favicons -->
12+
<link rel="icon" href="https://coding-dragon.github.io/img/logo.png" sizes="32x32" type="image/png">
13+
<link rel="icon" href="https://coding-dragon.github.io/img/logo.png" sizes="16x16" type="image/png">
14+
<link rel="icon" href="https://coding-dragon.github.io/img/logo.png">
15+
16+
<!-- Custom styles for this template -->
17+
<link href="https://coding-dragon.github.io/custom.css" rel="stylesheet">
18+
19+
</head>
20+
21+
<body>
22+
<nav class="site-header sticky-top py-1">
23+
<div class="container d-flex flex-md-row justify-content-between align-items-center">
24+
<a href="https://coding-dragon.github.io/" aria-label="Product">
25+
<img src="https://coding-dragon.github.io/img/logo.png" width="60" height="60" alt="coding-dragon-logo">
26+
</a>
27+
<a class="d-md-inline-block header-link" href="https://www.codingdragons.com/account/your-courses">Login</a>
28+
</div>
29+
</nav>
30+
31+
<div class="position-relative overflow-hidden p-3 text-white header-box">
32+
<div class="col-md-6 p-lg-5 ml-md-5 my-3">
33+
<h1 class="display-4 font-weight-normal">CSS Text</h1>
34+
<p class="text-muted" style="font-size:1.2rem!important">Challenge yourself and become a CSS expert. Be creative, submit your result and check out what others have created.
35+
<br/><br/>Improve your front-end skills by challenging yourself with real projects.</p>
36+
</div>
37+
</div>
38+
39+
<div class="py-5">
40+
<div class="container">
41+
<div class="row">
42+
<div class="col-12 mb-3">
43+
<div id="myBtnContainer">
44+
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
45+
<button class="btn" onclick="filterSelection('text')"> text</button>
46+
</div>
47+
</div>
48+
<div class="col-md-4 filterDiv text ">
49+
<div class="card mb-4">
50+
<a href="https://coding-dragon.github.io/css/text/effect2" target="_blank">
51+
<img class="bd-placeholder-img card-img-top" src="https://coding-dragon.github.io/css/text/effect2/effect2.png" width="100%" height="200" />
52+
</a>
53+
<div class="card-body">
54+
<h3>CSS Text Effect 2</h3>
55+
<small class="text-muted">June 10, 2020</small>
56+
<div class="d-flex justify-content-between align-items-center mt-3">
57+
<div class="btn-group">
58+
<a class="btn btn-sm btn-code" href="https://github.com/coding-dragon/coding-dragon.github.io/tree/master/css/text/effect2" target="_blank">View Code</a>
59+
</div>
60+
</div>
61+
</div>
62+
</div>
63+
</div>
64+
65+
<div class="col-md-4 filterDiv todo">
66+
<div class="card mb-4">
67+
<a href="https://coding-dragon.github.io/css/text/effect1" target="_blank">
68+
<img class="bd-placeholder-img card-img-top" src="https://coding-dragon.github.io/css/text/effect1/effect1.png" width="100%" height="200" />
69+
</a>
70+
<div class="card-body">
71+
<h3>CSS Text Effect 1</h3>
72+
<small class="text-muted">June 7, 2020</small>
73+
<div class="d-flex justify-content-between align-items-center mt-3">
74+
<div class="btn-group">
75+
<a class="btn btn-sm btn-yt" href="https://www.youtube.com/watch?v=HerCR8bw_GE" target="_blank">Watch Tutorial</a>
76+
<a class="btn btn-sm btn-code" href="https://github.com/coding-dragon/coding-dragon.github.io/tree/master/css/text/effect1" target="_blank">View Code</a>
77+
</div>
78+
</div>
79+
</div>
80+
</div>
81+
</div>
82+
83+
</div>
84+
</div>
85+
</div>
86+
87+
<footer class="container py-3">
88+
<div>
89+
<p>
90+
<span>Made with </span>
91+
<svg preserveAspectRatio="xMidYMid meet" id="comp-k7nnri7ssvgcontent" data-bbox="20 29.647 159.999 144.707" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="20 29.647 159.999 144.707" data-type="color" role="img">
92+
<g>
93+
<path fill="#E91E63" d="M138.196 29.647c-17.427 0-32.309 10.857-38.277 26.173-5.969-15.315-20.85-26.173-38.277-26.173-22.687 0-45.544 18.737-41.078 50.951 5.135 37.04 79.355 93.756 79.355 93.756s72.587-54.849 79.355-93.756c5.191-29.84-18.391-50.951-41.078-50.951zm28.008 51.581c-3.034 16.571-23.573 38.628-23.573 38.628-4 4.172-6 1.634-2.732-3.268 3.268-4.901 13.161-20.397 15.087-30.925 2.349-12.837-.452-21.939-2.552-25.44-2.101-3.501-2.801-7.002-.233-8.869 2.567-1.867 6.068-.467 7.469 1.4 1.399 1.866 9.568 11.902 6.534 28.474z" data-color="1"></path>
94+
</g>
95+
</svg>
96+
<span> © codingdragons</span>
97+
</p>
98+
</div>
99+
</footer>
100+
101+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
102+
<script>window.jQuery || document.write('<script src="https://getbootstrap.com/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="https://getbootstrap.com/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script>
103+
<script>
104+
filterSelection("all")
105+
function filterSelection(c) {
106+
var x, i;
107+
x = document.getElementsByClassName("filterDiv");
108+
if (c == "all") c = "";
109+
for (i = 0; i < x.length; i++) {
110+
w3RemoveClass(x[i], "show");
111+
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
112+
}
113+
}
114+
115+
function w3AddClass(element, name) {
116+
var i, arr1, arr2;
117+
arr1 = element.className.split(" ");
118+
arr2 = name.split(" ");
119+
for (i = 0; i < arr2.length; i++) {
120+
if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
121+
}
122+
}
123+
124+
function w3RemoveClass(element, name) {
125+
var i, arr1, arr2;
126+
arr1 = element.className.split(" ");
127+
arr2 = name.split(" ");
128+
for (i = 0; i < arr2.length; i++) {
129+
while (arr1.indexOf(arr2[i]) > -1) {
130+
arr1.splice(arr1.indexOf(arr2[i]), 1);
131+
}
132+
}
133+
element.className = arr1.join(" ");
134+
}
135+
136+
// Add active class to the current button (highlight it)
137+
var btnContainer = document.getElementById("myBtnContainer");
138+
var btns = btnContainer.getElementsByClassName("btn");
139+
for (var i = 0; i < btns.length; i++) {
140+
btns[i].addEventListener("click", function(){
141+
var current = document.getElementsByClassName("active");
142+
current[0].className = current[0].className.replace(" active", "");
143+
this.className += " active";
144+
});
145+
}
146+
</script>
147+
</body>
148+
</html>

0 commit comments

Comments
 (0)