-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
144 lines (118 loc) · 6.71 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
<!doctype html>
<html lang="en" class="h-100">
<head>
<title>Rewind: A Coding Project By Jeremy Wohl</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!-- FontAwesome -->
<script src="https://kit.fontawesome.com/5db21ba9c6.js" crossorigin="anonymous"></script>
<!-- Custom CSS -->
<link href="/css/site.css" rel="stylesheet">
<link re="icon" type="image/png" href="img/favicon-32x32.png">
</head>
<body class="d-flex flex-column h-100">
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<div class="container-fluid">
<!-- _jeremy.Wohl; Logo -->
<a class="navbar-brand" href="https://jdwohldev.netlify.app"><img src="/img/jeremyWohl-large.png" class="d-inline-block alignt-text-top" width="100" height="40"></a>
<!-- Hamburger Button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<!-- Nav Items -->
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item ms-3">
<a class="nav-link active" aria-current="page" href="/index.html">Rewind: The Challenge</a>
</li>
<li class="nav-item ms-3"><a class="nav-link" href="/solution.html">My Solution</a></li>
<li class="nav-item ms-3"><a class="nav-link" href="/code.html">My Code</a></li>
<li class="nav-item ms-3"><a class="nav-link" target="_blank" href="https://github.com/jWohl1985">Git Repo</a></li>
<li class="nav-item ms-3"><a class="nav-link" href="http://jdwohldev.netlify.app/challenges.html">Back To Challenges</a></li>
</ul>
</div>
</div>
</nav>
<!-- Main Section -->
<main class="flex-shrink-0">
<div class="container col-xxl-8 px-4 py-5">
<div class="row g-5 py-5 row-cols-1 row-cols-lg-2">
<!-- App Description -->
<div class="col order-last order-lg-first">
<h1 class="display-5 fw-bold lh-1 mb-3">Rewind: A Coding Project</h1>
<h4 class="lead">Write a program that takes a string in from the user and then displays it in reverse.</h4>
<ul class="fa-ul pt-2 checklist">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>HTML/CSS & Bootstrap Layout</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>JavaScript Fundamentals</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>JavaScript Conditionals</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>JavaScript Loops</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>JavaScript DOM Manipulation</li>
</ul>
<!-- Call to action -->
<div class="mt-5">
<a type="button" class="btn btn-dark btn-lg px-4 me-md-2 solutionbutton" href="/solution.html">My Solution</a>
</div>
<!-- Technology Icons -->
<h5 class="fw-bold mt-5">
<div class="d-flex">
<div class="row">
<div class="col"><i class="fab fa-js-square fa-4x jsicon" title="JavaScript"></i></div>
<div class="col"><i class="fab fa-bootstrap fa-4x bsicon" title="Bootstrap"></i></div>
<div class="col"><i class="fab fa-html5 fa-4x html5icon" title="HTML5"></i></div>
<div class="col"><i class="fab fa-css3-alt fa-4x cssicon" title="CSS3"></i></div>
</div>
</div>
</h5>
</div>
<!-- App Image -->
<div class="col">
<div class="d-flex justify-content-center">
<img src="/img/rewind.gif" class="img-fluid center-block d-block" alt="App Logo">
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="footer mt-auto py-3 sticky-footer">
<div class="container-fluid">
<div class="row row-cols-1 row-cols-lg-3 gy-2">
<!-- Copyright -->
<div class="col d-flex align-items-center order-last order-lg-first text-light">
<div><span class="text-muted">©2022 Jeremy Wohl</span></div>
</div>
<!-- _jeremy.Wohl; Logo -->
<div class="col d-flex align-items-center justify-content-start justify-content-lg-center">
<a href="https://jdwohldev.netlify.app">
<img src="/img/jeremyWohl-large.png" alt="Jeremy Wohl Logo" width="100" height="40">
</a>
</div>
<!-- Social Media Links -->
<div class="col d-flex align-items-center justify-content-start justify-content-lg-end">
<div class="row">
<div class="col social">
<a href="https://www.linkedin.com/in/jeremy-wohl-4239a0243/" target="_blank">
<i class="fab fa-linkedin fa-2x"></i>
</a>
</div>
<div class="col social">
<a href="https://github.com/jwohl1985" target="_blank">
<i class="fab fa-github fa-2x"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous">
</script>
</body>
</html>