-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
179 lines (159 loc) · 11.9 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
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="theme-color" content="#0B1016"/>
<title>Home</title>
<meta name="description" content="This is the home page for Jared Parrish’s Bootstrap 4 demonstration. The page features some information about Bootstrap and is styled using Bootstrap's classes.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/prefix/index.css" />
<link rel="icon" type="image/png" href="./images/jp-favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
<body id="home-page">
<header class="container-fluid p-0">
<section class="jumbotron jumbotron-fluid text-center mb-0 hero-jumbotron">
<h1 class="px-4">Bootstrap 4</h1>
<p class="header-text px-4">Welcome to My Bootstrap 4 Demo </p>
</section>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark pl-4">
<a class="navbar-brand" href="https://www.jaredparrish.com/"><img src="../images/jp-logo-white-with-stroke.png" width="40" height="40" alt="jared-parrish-logo" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/about-me.html">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
<section class="container-fluid">
<div class="row justify-content-center mt-5 mt-md-7">
<div class="col-10 col-lg-8">
<h1 class="mb-4">Why I Made This Demo</h1>
<p>Pursuing web and software development as a profession requires a strong set of skills that spans many different domains. As part of my ongoing effort to refine and demonstrate my skills in a number of different areas of web and software development, I will be publishing a series of projects which explore these various subjects.
</p>
<p>For this project, I focused on <a href="https://github.com/twbs/bootstrap" class="text-info">Bootstrap 4</a>. Aesthetics are important to any project on the web, and Bootstrap offers a powerful and developer-friendly way to create user facing content. Bootstrap’s efficient workflow, immense popularity, and responsive design inspired me to put this project together.</p>
<p>Because I wanted to focus on Bootstrap for this project, I decided to build out the website using plain HTML and have hosted the project GitHub Pages. For my implementation of Bootstrap 4, I’ve used Bootstrap’s source files which allowed me to implement some custom theming using SCSS. Following Bootstrap’s <a href="https://getbootstrap.com/docs/4.5/getting-started/download/#source-files" class="text-info">recommendations</a>, I’ve also used <a href="https://github.com/postcss/autoprefixer" class="text-info">Autoprefixer</a>, <a href="https://github.com/postcss/postcss" class="text-info">PostCSS</a>, and the <a href="https://github.com/postcss/postcss-cli" class="text-info">PostCSS CLI</a> to add vendor prefixes to my final CSS file. I’m always open to feedback on any of my projects - please feel free to reach out any time to share your thoughts on my work!</p>
</div>
</div>
<div class="row mt-4">
<div class="col-10 col-lg-8 col-xl-6 offset-1 offset-lg-2">
<blockquote class="blockquote">
<p>"Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world."</p>
<footer class="blockquote-footer">From <a class="text-info" href="https://getbootstrap.com/docs/4.5/about/overview/#history">getbootstrap.com</a></footer>
</blockquote>
</div>
</div>
</section>
<section class="container-fluid mt-5 mt-md-7 mb-8 reasons">
<div class="row mb-4">
<div class="col-12">
<h1 class="text-center">Reasons to Love Bootstrap</h1>
</div>
</div>
<div class="row px-4 px-md-7">
<div class="col-12 col-md-6 col-lg-4 my-3 mx-auto mx-lg-auto">
<div class="border border-primary rounded p-4 h-100">
<div class="row align-items-start mx-0 mb-2">
<h2 class="reasons-heading font-weight-bold">Efficient</h2>
<svg class="ml-3" width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-stopwatch-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M6.5 0a.5.5 0 0 0 0 1H7v1.07A7.001 7.001 0 0 0 8 16 7 7 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm2 5.6a.5.5 0 1 0-1 0v2.9h-3a.5.5 0 0 0 0 1H8a.5.5 0 0 0 .5-.5V5.6z"/>
</svg>
</div>
<p class="reasons-text">Bootstrap's classes allow developers to efficiently implement stunning designs without having to hop between multiple files or write large amounts of CSS.</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 my-3 mx-auto mx-lg-auto">
<div class="border border-primary rounded p-4 h-100">
<div class="row align-items-start mx-0 mb-2">
<h2 class="reasons-heading font-weight-bold">Popular</h2>
<svg class="ml-3" width="2.3em" height="2.3em" viewBox="0 0 16 16" class="bi bi-people-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5.784 6A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/>
</svg>
</div>
<p class="reasons-text">Bootstrap’s immense popularity with companies of all sizes has created a huge community of developers that work with the framework. </p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 my-3 mt-md-4 my-lg-3 mx-auto">
<div class="border border-primary rounded p-4 h-100">
<div class="row align-items-start mx-0 mb-2">
<h2 class="reasons-heading font-weight-bold">Responsive</h2>
<svg class="ml-3" width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-phone-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M3 2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V2zm6 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg>
</div>
<p class="reasons-text">Bootstrap is responsive and is built with mobile-first design in mind which allows developers to create applications that look great on any device.</p>
</div>
</div>
</div>
</section>
<section class="container-fluid bg-dark position-relative mt-5">
<div class="custom-shape-divider-top-1601254226">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M1200 0L0 0 598.97 114.72 1200 0z" class="shape-fill"></path>
</svg>
</div>
<div class="row divider-text-div">
<div class="col-12 d-flex flex-column justify-content-center divider-text-container">
<h1 class="divider-text text-center mx-3 my-3 mt-5" id="divider-text-heading-home">Intuitive. Powerful. Developer Friendly.</h1>
<h2 class="divider-text text-center m-3" id="divider-text-subheading-home">Bootstrap is Awesome.</h2>
</div>
</div>
<div class="custom-shape-divider-bottom-1601254498">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M598.97 114.72L0 0 0 120 1200 120 1200 0 598.97 114.72z" class="shape-fill"></path>
</svg>
</div>
</section>
<section class="container-fluid">
<div class="row justify-content-md-center align-items-center mt-5 mb-2 my-sm-7">
<div class="col-10 col-sm-5 col-lg-4 mx-auto mx-md-4 my-4">
<img id="random-image" class="rounded-circle mw-100" alt="Random image from unsplash.com"/>
</div>
<div class="col-10 col-sm-5 col-lg-5 mx-auto mx-md-4 my-5 my-md-0">
<p class="text-center text-sm-left">Here, I do an API call to <a href="https://source.unsplash.com/" class="text-info">source.unsplash.com</a> using the JavaScript Fetch API to retrieve a random 500px x 500px image which I then position and round using Bootstrap.</p>
</div>
</div>
</section>
<script src="js/unsplash.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
<!-- SOFTWARE USED IN THE DEVELOPMENT OF THIS PROJECT
Bootstrap - License: MIT, Copyright (c) 2011-2020 Twitter, Inc., Copyright (c) 2011-2020 The Bootstrap Authors
autoprefixer - License: MIT, Copyright 2013 Andrey Sitnik <[email protected]>
postcss - License: MIT, Copyright 2013 Andrey Sitnik <[email protected]>
postcss-cli - License: MIT, Copyright (c) 2016 Michael Ciniawsky
--------------------------------------------------
MIT LICENSE
The MIT License (MIT)
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -->