-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnewdesain.html
126 lines (115 loc) · 5.7 KB
/
newdesain.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* import Framecss Framework */
@import url("data/frame.min.css");
/* css kamu */
.mymenu li {
padding: 8px;
margin-bottom: 7px;
}
.mymenu li:hover {
background-color: var(--sb-primary)!important;
}
.footer a {
color: var(--sb-success);
}
</style>
</head>
<body class="helvetica">
<div class="dusty-grass">
<div class="header bg-fungu text-center padding-15">
<hr />
<h1 class="font-bold putih">Framecss Framework CSS Indonesia</h1>
<p class="font-italic capitalize kuning">
versi 1.1.5
</p>
</div>
<div class="row">
<div class="col-3 col-s-3 mymenu white fira">
<ul class="margin-0 padding-0 list-style-none">
<li onclick="func1()" class="bg-danger border-radius-8">CSS Grid System</li>
<li onclick="func2()" class="bg-danger border-radius-8">Komponen UI</li>
<li onclick="func3()" class="bg-danger border-radius-8">Variabel CSS</li>
<li onclick="func4()" class="bg-danger border-radius-8">Utilities</li>
<li onclick="func5x()" class="bg-danger border-radius-8">
<a href="#" target="_blank" class="putih">Dokumentasi</a>
</li>
</ul>
</div>
<div class="col-6 col-s-9">
<div class="bg-light padding-15 border-radius-12 text-white">
<h1 class="monospace hijau">Framecss Framework</h1>
<p class="times ungu">
Framecss adalah sebuah framework front-end yang diciptakan untuk memudahkan pengembangan tampilan web dengan menggunakan CSS. Dengan menggunakan Framecss, pengembang web dapat mempercepat proses pengembangan tampilan web dengan memanfaatkan komponen siap pakai dan kustomisasi yang mudah.
</p>
</div>
</div>
<div class="col-3 col-s-12">
<div class="mymenu white verdana">
<ul class="margin-0 padding-0 list-style-none">
<li onclick="myfunc1()" class="bg-primary border-radius-8">Struktur yang responsif</li>
<li onclick="myfunc2()" class="bg-primary border-radius-8">Kumpulan komponen</li>
<li onclick="myfunc3()" class="bg-primary border-radius-8">Kustomisasi</li>
<li onclick="myfunc4()" class="bg-primary border-radius-8">Ringan dan cepat</li>
<li onclick="myfunc5()" class="bg-primary border-radius-8">Dukungan lintas browser</li>
</ul>
</div>
</div>
</div>
<div class="footer bg-dark text-center font-size-14">
<p class="kelly">
| <a href="#">GitHub</a> |
<a href="#">NPM</a> |
<a href="#">GitLab</a> |
</p>
</div>
<script type="text/javascript" charset="utf-8">
function myfunc1() {
alert("Framework ini dirancang untuk membuat tata letak yang responsif, sehingga halaman web bisa terlihat baik di berbagai perangkat, mulai dari desktop hingga perangkat mobile.");
}
function myfunc2() {
alert("Framecss menyediakan kumpulan komponen siap pakai seperti tombol, formulir, kartu, dan lainnya, yang dapat mempercepat proses pengembangan.");
}
function myfunc3() {
alert("Pengguna dapat dengan mudah menyesuaikan tampilan menggunakan variabel CSS yang disediakan oleh framework ini.");
}
function myfunc4() {
alert("Framecss berfokus pada kinerja yang cepat dan memiliki ukuran yang ringan, sehingga memungkinkan halaman web untuk memuat dengan cepat.");
}
function myfunc5() {
alert("Framework ini telah diuji secara menyeluruh untuk memastikan kompatibilitasnya dengan berbagai browser populer.");
}
function func1() {
alert("Framecss menyediakan grid system yang memungkinkan pengembang untuk membuat tata letak halaman web secara responsif. Dengan menggunakan grid system ini, pengembang dapat dengan mudah menentukan tata letak kolom dan baris untuk menempatkan konten secara fleksibel.");
}
function func2() {
alert("Framework ini menyediakan beragam komponen UI siap pakai seperti tombol, formulir, kartu, navigasi, dan masih banyak lagi. Komponen-komponen ini dirancang untuk memudahkan pengembangan tampilan web dengan memanfaatkan elemen-elemen yang umum digunakan dalam desain web modern.");
}
function func3() {
alert("Framecss memanfaatkan variabel CSS untuk memudahkan kustomisasi tampilan. Dengan menggunakan variabel CSS, pengembang dapat dengan mudah mengubah warna, ukuran, jarak, dan berbagai properti lainnya secara konsisten di seluruh tampilan web.");
}
function func4() {
alert("Framework ini juga menyediakan beragam utilitas CSS yang dapat digunakan untuk menangani berbagai tugas umum, seperti penataan teks, penanganan warna, dan lain sebagainya. Utilitas ini memudahkan pengembang dalam menulis kode CSS yang efisien.");
}
function func5() {
alert("Framecss dilengkapi dengan dokumentasi yang lengkap dan jelas, yang menjelaskan penggunaan, kustomisasi, dan berbagai fitur lainnya dari framework ini.");
}
</script>
<button onclick="btnTopFunction()" id="btnTop" title="Go to top" class="">^</button>
<!-- modifikasi-->
<style type="text/css" media="all">
/*
#btnTop {
background-color: var(--fred);
}
#btnTop:hover {
background-color: var(--fbiruu);
}*/
</style>
<script src="data/frame.js" defer="true"></script>
</div>
</body>
</html