-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
165 lines (162 loc) · 10.3 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Cheat Sheet</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<div class="col-md-8">
<img src="images/ib_logo.png" class="header-logo">
</div>
<div class="bg-yellow">
<div class="container body-padding yellow-block">
<div class="row">
<div class="col-lg-6 sixty-percent pull-left">
<div class="vertical">
<h3><strong>I am Bham</strong></h1>
<h4 class="text-left"><strong>Calling all Pioneers, Builders, The Curious, and The Determined...</strong></h3>
<p class="text-left">From steel factories to start-ups, this city of artisans has relied on
the strength and the skills of its people. Innovate Birmingham will
propel the next generation of pioneers on the frontier of the tech economy.</p>
<br/>
<span class="learn-button"><a href="#" data-toggle="modal" data-target="#myModalBham">LEARN MORE</a></span>
</div>
</div>
<div class="col-lg-6 forty-percent pull-right">
<img src="images/mac.png" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="badges-container">
<div class="container ">
<div class="row">
<div class="col-md-4 badge-padding">
<img src="images/html.png" class="img-responsive center-block">
<br/>
<p class="badges-text">Learn HTML... markup for your webpages!</p>
<br/>
<span class="more-button">
<a href="#" data-toggle="modal" data-target="#myModalHtml">LEARN MORE</a></span>
</div>
<div class="col-md-4 badge-padding">
<img src="images/css.png" class="img-responsive center-block">
<br/>
<p class="badges-text">Style your HTML with CSS!</p>
<br/>
<span class="more-button">
<a href="#" data-toggle="modal" data-target="#myModalCss">LEARN MORE</a></span>
</div>
<div class="col-md-4 badge-padding">
<img src="images/js.png" class="img-responsive center-block">
<br/>
<p class="badges-text">Want to do anything? Then you need JS!</p>
<br/>
<span class="more-button">
<a href="#" data-toggle="modal" data-target="#myModalJs">LEARN MORE</a></span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="modal fade" id="myModalHtml">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header head-html">
<h1>HTML</h1>
</div>
<div class="modal-body">
<p>Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.</p>
<p>Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
</div>
<div class="modal-footer foot-html">
<input type="text" class="btn btn-default" value="Close">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="modal fade" id="myModalCss">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header head-css">
<h1>CSS</h1>
</div>
<div class="modal-body">
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
<p>CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.</p>
</div>
<div class="modal-footer foot-css">
<input type="text" class="btn btn-default" value="Close">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="modal fade" id="myModalJs">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header head-js">
<h1>JAVASCRIPT</h1>
</div>
<div class="modal-body">
<p>JavaScript (/ˈdʒɑːvəˌskrɪpt/), often abbreviated as JS, is a high-level, interpreted scripting language that conforms to the ECMAScript specification. JavaScript has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.</p>
<p>Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide Web.[9] JavaScript enables interactive web pages and is an essential part of web applications. The vast majority of websites use it, and major web browsers have a dedicated JavaScript engine to execute it.</p>
<p>As a multi-paradigm language, JavaScript supports event-driven, functional, and imperative (including object-oriented and prototype-based) programming styles. It has APIs for working with text, arrays, dates, regular expressions, and the DOM, but the language itself does not include any I/O, such as networking, storage, or graphics facilities. It relies upon the host environment in which it is embedded to provide these features.</p>
</div>
<div class="modal-footer">
<input type="text" class="btn btn-default" value="Close">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="modal fade" id="myModalBham">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header head-bham">
<h1>I Am Bham</h1>
</div>
<div class="modal-body">
I am Bham, Inc. provides demand-driven technology training to build the IT talent pipeline for the Birmingham region.
</div>
<div class="modal-footer foot-bham">
<input type="text" class="btn btn-default" value="Close">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/boostrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="js/custom.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>