-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
226 lines (226 loc) · 11 KB
/
index.html
File metadata and controls
226 lines (226 loc) · 11 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Cambay" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="body-disable">
</div>
<div class="modal-form">
<div class="close" onclick="modalHide(this)">
x
</div>
<form action="#" method="post">
<div>
Enter your email:
</div>
<label for="mail"></label>
<input type="email" name="mail" id="mail">
<input type="submit" value="submit" onclick="modalHide(this)">
</form>
</div>
<header>
<div class="main-container">
<div class="header-logo">
FRONTEND MEMO
</div>
<nav>
<ul class="main-menu" data-toggle="hidden" id="main-menu">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#bootstrap-section">BOOTSTRAP</a></li>
<li><a href="#git-section">GIT</a></li>
<li><a href="#" onclick="modalShow()">SUBSCRIBE</a></li>
</ul>
<div class="main-menu-button">
<a href="#" class="icon-menu" onclick="mainMenuToggle()">
</a>
</div>
</nav>
</div>
</header>
<main>
<section class="bootstrap-section" id="bootstrap-section">
<div class="main-container">
<h2>BOOTSTRAP</h2>
<div class="content-wrapper">
<div class="about">
<h3>What is Bootstrap?</h3>
<p>
Bootstrap is a free and open-source front-end web framework for designing websites and web
applications.
It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and
other
interface components, as well as optional JavaScript extensions. Unlike many web frameworks, it
concerns
itself with front-end development only.
Bootstrap is the second most-starred project on GitHub, with more than 105,000 stars and 47,000
forks.
</p>
<div class="button-wrapper">
<a href="http://getbootstrap.com/" class="btn btn-primary" target="_blank">READ MORE</a>
</div>
</div>
<div class="tabs-container" data-active="0">
<ul class="tabs">
<li class="active" data-index="0">Navbar</li>
<li data-index="1">Grid system</li>
<li data-index="2">Dropdowns</li>
<li data-index="3">Buttons</li>
</ul>
<ul class="content">
<li class="active">
<div>
Navbars are responsive meta components that serve as navigation headers for your
application or
site. They begin collapsed (and are toggleable) in mobile views and become horizontal as
the
available viewport width increases.
</div>
<div class="popup-wrapper">
<div class="popup-viewport">
<div class="popup">
<img src="images/bootstrap-navbar.png" alt="bootstrap navbar example">
</div>
</div>
<div class="popup-placeholder">
<img src="images/bootstrap-navbar.png" alt="bootstrap navbar example">
</div>
</div>
</li>
<li>
<div>
Bootstrap includes a responsive, mobile first fluid grid system that appropriately
scales up to
12 columns as the device or viewport size increases. It includes predefined classes for
easy
layout options, as well as powerful mixins for generating more semantic layouts.
</div>
<div class="popup-wrapper">
<div class="popup-viewport">
<div class="popup">
<img src="images/bootstrap-grid-system.png" alt="bootstrap grid system">
</div>
</div>
<div class="popup-placeholder">
<img src="images/bootstrap-grid-system.png" alt="bootstrap grid system">
</div>
</div>
</li>
<li>
<div>
Toggleable, contextual menu for displaying lists of links. Made interactive with the
dropdown
JavaScript plugin.
</div>
<div class="popup-wrapper">
<div class="popup-viewport">
<div class="popup">
<img src="images/bootstrap-dropdown.png" alt="bootstrap dropdown">
</div>
</div>
<div class="popup-placeholder">
<img src="images/bootstrap-dropdown.png" alt="bootstrap dropdown">
</div>
</div>
</li>
<li>
<div>
Use the button classes on an <a&rt, <button&rt, or <input&rt element.
</div>
<div class="popup-wrapper">
<div class="popup-viewport">
<div class="popup">
<img src="images/bootstrap-buttons.png" alt="bootstrap buttons">
</div>
</div>
<div class="popup-placeholder">
<img src="images/bootstrap-buttons.png" alt="bootstrap buttons">
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="git-section" id="git-section">
<div class="main-container">
<h2>GIT</h2>
<div class="content-wrapper">
<div class="accordion-container" data-active="0">
<div class="accordion-item active">
<div class="item-title">
Project initialization
</div>
<div class="item-description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet at dignissimos
dolorum, et expedita illo minima nam nemo odit quae quasi quidem reiciendis, repellendus
saepe sapiente ullam ut. Alias!
</div>
</div>
<div class="accordion-item">
<div class="item-title">
Files staging
</div>
<div class="item-description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet at dignissimos
dolorum, et expedita illo minima nam nemo odit quae quasi quidem reiciendis, repellendus
saepe sapiente ullam ut. Alias!
</div>
</div>
<div class="accordion-item">
<div class="item-title">
Commiting
</div>
<div class="item-description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet at dignissimos
dolorum, et expedita illo minima nam nemo odit quae quasi quidem reiciendis, repellendus
saepe sapiente ullam ut. Alias!
</div>
</div>
<div class="accordion-item">
<div class="item-title">
Pushing
</div>
<div class="item-description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet at dignissimos
dolorum, et expedita illo minima nam nemo odit quae quasi quidem reiciendis, repellendus
saepe sapiente ullam ut. Alias!
</div>
</div>
</div>
<div class="about">
<h3>Git Basics</h3>
<p>
So, what is Git in a nutshell? This is an important section to absorb, because if you understand
what Git is and the fundamentals of how it works, then using Git effectively will probably be
much easier for you. As you learn Git, try to clear your mind of the things you may know about
other VCSs, such as Subversion and Perforce; doing so will help you avoid subtle confusion when
using the tool. Git stores and thinks about information much differently than these other
systems, even though the user interface is fairly similar, and understanding those differences
will help prevent you from becoming confused while using it.
</p>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="main-container">
<div class="logo">GeekHub Engeneering Co.</div>
</div>
</footer>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script src="js/app.js"></script>
<script src="js/main.js"></script>
</body>
</html>