-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwhat's.html
135 lines (126 loc) · 4.47 KB
/
what's.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- framecss -->
<link rel="stylesheet" href="data/frame.1.1.5.css" type="text/css" media="all" />
<script src="data/jq.js" type="text/javascript" charset="utf-8"></script>
<script src="data/typed.js"></script>
<title>Framecss 1.1.4</title>
</head>
<body>
<div class="bg-fdcyan center-align white">
<br />
<h2>
Framecss are commonly used for..? :
</h2>
<div class="white-box">
|
<a href="#" id="cssf">CSS Framework</a> |
<a href="#" id="statistic">Statistic</a> |
<a href="#" id="animated">Animated</a> |
<a href="#" id="presentation">Presentation</a> |
</div>
</div>
<div class="row">
<div class="col-12 bg-dark white">
<br />
<h3 class="cssf bg-white black"> 🖥️ CSS Framework</h3>
<span id="element">
</span> <br /> <br />
<a href="docs.html">
<button class="button-red" type="submit">let's go 👈👉 </button>
</a> <hr />
<h3 class="bg-white black statistic"> 🧮 Statistic</h3>
<span id="element1">
</span> <br /> <br />
<a href="statistic-plot.html">
<button class="button" type="submit">let's go 👈👉 </button>
</a> <hr />
<h3 class="bg-white black animated"> 🤗 Animated & Presentation</h3>
<span id="element2">
</span> <br /> <br />
<a href="animate.html">
<button class="button-teal" type="submit">let's go 👈👉 </button>
</a> <hr />
</div>
<!--
<div class="col-8 bg-fcyan white">
col-8
</div> -->
</div>
<div class="bg-magenta white center-align pd8">
<p>
by Bnelsofc
</p>
</div>
<style type="text/css" media="all">
.white-box a, .white-box {
color: var(--white)!important;
border: none;
padding-bottom: 15px;
}
p {
padding-left: 8px;
padding-right: 4px;
}
.cssf {
animation: fadeInLeft;
animation-duration: 4s;
}
.statistic {
animation: flipInY;
animation-duration: 7s;
}
.animated {
animation: backInUp;
animation-duration: 9s;
}
[class*="button-"], .btn-success {
animation: swing;
animation-duration: 9s;
border-radius: 8px;
}
</style>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#cssf").mouseenter(function() {
alert("framecss can be used for web design and as a css Framework.");
});
});
$(document).ready(function() {
$("#statistic").mouseenter(function() {
alert("framecss can be used to process statistical data because it is linked to plotly.js, d3.js and chart.js");
});
});
$(document).ready(function() {
$("#animated").mouseenter(function() {
alert("framecss can be used for image and text animation because it is linked to animate.css");
});
});
$(document).ready(function() {
$("#presentation").mouseenter(function() {
alert("framecss can be used for Presentations because it is linked with animate.css and swiffyslider.js");
});
});
</script>
<script>
var typed = new Typed('#element', {
strings: ['framecss css framework, lets go build your design with framecss #web-design '],
typeSpeed: 30,
});
</script>
<script>
var typed1 = new Typed('#element1', {
strings: ['processing data using plotly.js, d3.js and chart.js '],
typeSpeed: 130,
});
var typed2 = new Typed('#element2', {
strings: ['Animate and present text and images easily with animated.css and swiffyslider.js '],
typeSpeed: 180,
});
</script>
</body>
</html>