-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (114 loc) · 8.52 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
<!doctype html>
<html lang="en" class="h-100">
<head>
<title>Word Reverse: A Coding Project By Matthew Snyder</title>
<!-- Required meta tags -->
<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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/5db21ba9c6.js" crossorigin="anonymous"></script> <!--font-awesome-->
<link rel="icon" type="img/png" href="img/favicon-32x32.png">
</head>
<body class="d-flex flex-column h-100"> <!--Column will fill up height of browser-->
<!--Nav Area -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top"> <!--Expand all of the links for medium screens and above, and hamburger icon for screens less than medium breakpont. dark background, fixed to to top-->
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="img/Dark logo.svg" alt="Matthew Snyder Mark" class="d-inline-block align-text-top" width="40" height="25">Word Reverse</a>
<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">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="app.html">The App</a>
</li>
<li class="nav-item">
<a class="nav-link" href="code.html">The Code</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="#">Git Repo</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="#">About</a> <!--Put portfolio link here later-->
</li>
</ul>
</div>
</div>
</nav>
<!--Main Section-->
<main class="flex-shrink-0">
<div class="container col-xxl-8 px-4 py-5"> <!--Puts gutters on left and right and centers content on the pge-->
<div class="row g-5 py-5 order-last order-lg-first row-cols-1 row-cols-lg-2">
<div class="col order-last order-lg-first">
<h1 class="display-5 fw-bold lh-1 mb-3">APP NAME: A coding Project</h1> <!--fw-bold means font-weight bold-->
<h4 class="lead">Live life on loop at a time. A javascript coding exercise usign loops. Write a programs that displays number from 0 to 100. Display the even numbers in <strong>BOLD</strong></h4>
<ul class="fa-ul pt-2 checklist">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>CSS and 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 Loops</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>Javascript Functions</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>Javascript Dom Manipulation</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>Javascript If/Then/Else</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>Javascript Boolean</li>
</ul>
<div>
<a type="button" class="btn btn-outline-dark btn-lg px-4 me-md-2" href="app.html">Try It Out</a>
</div>
<h5 class="fw-bold mt-5">
<div class="d-flex">
<div class="row">
<div class="col"> <i class="javascriptIcon fab fa-js-square fa-4x"></i></div>
<div class="col"><i class = "bootstrapIcon fab fa-bootstrap fa-4x"></i></div>
<div class="col"><i class="htmlIcon fab fa-html5 fa-4x"></i></div>
<div class="col"><i class="cssIcon fab fa-css3-alt fa-4x"></i></div>
</div>
</div>
</h5>
</div>
<div class="col">
<img src="img/logo word-reverse.svg" alt="Hundo logo" class="img-fluid center-block d-block mx-auto" alt="App logo" width="400" height="300"> <!--img-fluid allows img to resize when resolution goes up and down, very responsive. d-block allows us to center where img sets -->
</div>
</div>
</div>
</main>
<!--Footer Section-->
<footer class="footer mt-auto py-3">
<div class="container-fluid ">
<div class="row row-cols-1 row-cols-lg-3 gy-3"> <!--Each column is 4 unites wide since there is a 12 unite maximum -->
<div class="col order-last text-light order-lg-first"> <!--When the screen size is less than large than we want this copy right information to be on the bottom instead of first. For large and above we want the copy right information first.-->
<div class="" style="font-size:12px"><span class="text-muted" style="font-size:12px">©2021</span> Matthew Snyder | [email protected]</div> <!--text-muted just changes the appearance of the text-->
</div>
<div class="col d-flex align-items-centers justify-content-start justify-content-lg-center"> <!--d-flex allows us to control horizontal and vertical positions, aligned content to the center using align items which gives vertical alignment and then justify content-center is horizontal alignment which leaves the content in center of col-->
<img src="img/dark-logo.svg.svg" alt="Matthew Snyder logo" height="24"> <!--put height="24" to keeps things proportional and looking right-->
</div>
<div class="col d-flex align-items-center justify-content-start justify-content-lg-end"> <!--d-flex makes the column take up the least amount of space, doesnt try and spread anything out, align items center provides vertical alignment. justify-content-end moves our items to the far right of the col-->
<div class="row">
<div class="col social"><a href="https://github.com/mattsnyde" target="_blank"> <i class="fab fa-github fa-2x"></i></a></div>
<div class="col social" ><a href="https://www.linkedin.com/in/matthew-snyder-00552320b/" target="_blank"><i class="fab fa-linkedin fa-2x"></i></a></div>
<div class="col social"><a href="https://twitter.com/Matt31137398" target="_blank"><i class="fab fa-twitter fa-2x"></i></a></div>
</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous">
</script>
<script src="js/site.js"></script>
</body>
</html>
<!--when using target="_blank" inside of an <a></a> it will open a new tab instead of turning the tab the person is currently in into the link they just clicked.
for example If i am on my portfolio site and a i link to my github using <a></a> with no target-"_blank" then my portfolio site will close and will be turned into my github.
Versus if i included a target="_blank inside of my <a></a> and when the user clicked my github icon it would have just opened a new tab that is my github and would not close the user out of my portfolio."
-->