-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
87 lines (83 loc) · 3.28 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tabs UI</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div>
<!-- Tab items -->
<div class="tabs">
<div class="tab-item active">
<i class="tab-icon fas fa-code"></i>
React
</div>
<div class="tab-item">
<i class="tab-icon fas fa-cog"></i>
Angular
</div>
<div class="tab-item">
<i class="tab-icon fas fa-plus-circle"></i>
Ember
</div>
<div class="tab-item">
<i class="tab-icon fas fa-pen-nib"></i>
Vue.JS
</div>
<div class="line"></div>
</div>
<!-- Tab content -->
<div class="tab-content">
<div class="tab-pane active">
<h2>React</h2>
<p>
React makes it painless to create interactive UIs.
Design simple views for each state in your application,
and React will efficiently update and render just the
right components when your data changes.
</p>
</div>
<div class="tab-pane">
<h2>Angular</h2>
<p>
Angular is an application design framework and
development platform for creating efficient and
sophisticated single-page apps.
</p>
</div>
<div class="tab-pane">
<h2>Ember</h2>
<p>
Ember.js is a productive, battle-tested JavaScript
framework for building modern web applications. It
includes everything you need to build rich UIs that work
on any device.
</p>
</div>
<div class="tab-pane">
<h2>Vue.js</h2>
<p>
Vue (pronounced /vjuː/, like view) is a progressive
framework for building user interfaces. Unlike other
monolithic frameworks, Vue is designed from the ground
up to be incrementally adoptable.
</p>
</div>
</div>
</div>
<script src="./main.js"></script>
</body>
</html>