-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
141 lines (133 loc) · 7.46 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Soda Pop</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Alkatra:wght@400;500;600;700&family=Allan:wght@400;700&family=Bebas+Neue&family=Delicious+Handrawn&family=Fira+Sans: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&family=Mallanna&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<!-- bootstrap icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- css -->
<link rel="stylesheet" href="/css/site.css">
<!-- dev icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">
<!-- favicon -->
<link rel="shortcut icon" href="/images/favicon_io/favicon-16x16.png" type="image/x-icon" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark" id="mainNav">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/images/Semicolon Angel Corral Nunez Logo/Semicolon Only/Semicolon Color logo - no background.png" height="60">
<span class="ms-4 ms-md-3 fs-2">Soda Pop</span>
</a>
<!-- Mobile hamburger menu button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="text-info">
<i class="bi bi-list"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active fs-5" aria-current="page" href="/index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link fs-5" href="/app.html">The App</a>
</li>
<li class="nav-item">
<a class="nav-link fs-5" href="/code.html">The Code</a>
</li>
<li class="nav-item">
<a class="nav-link fs-5" target="_blank" href="https://github.com/angelcorralnunez/Soda-Pop">The Repo</a>
</li>
<li class="nav-item">
<a class="nav-link fs-5" target="_blank" href="https://angelcorralnunez.netlify.app/">About</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="container">
<div class="row row-cols-1 row-cols-md-2 gy-3 py-5 h-100 align-items-center">
<div class="col mx-2 mx-md-0">
<h1 id="index-title" class="txt-wht-outline display-5 fw-bold">Soda Pop</h1>
<h2 id="index-subtitle" class="txt-grn-outline dispay-5 text-bs-purple mb-3">Coding Challenge</h2>
<h3 class="lead text-dark fw-normal mb-3">Soda Pop is a Full Stack Web App that uses Javascript logic to calculate
if numbers are divisible by 3, by 5, or by both, replacing them with the words 'Soda', 'Pop', or 'Soda Pop'.
Then it determines if the remaining numbers are even or odd, showing the even numbers in green.</h3>
<ul class="checklist text-dark">
<li>
<i class="bi bi-check-square-fill"></i>
<span class="text-info-emphasis">CSS and Bootstrap Layout</span>
</li>
<li>
<i class="bi bi-check-square-fill"></i>
<span class="text-info-emphasis">Javascript Fundamentals</span>
</li>
<li>
<i class="bi bi-check-square-fill"></i>
<span class="text-info-emphasis">Javascript Loops</span>
</li>
<li>
<i class="bi bi-check-square-fill"></i>
<span class="text-info-emphasis">Javascript DOM Manipulation</span>
</li>
<li>
<i class="bi bi-check-square-fill"></i>
<span class="text-info-emphasis">Boolean Logic</span>
</li>
</ul>
<a class="try-btn btn btn-dark border-light text-light fw-bold btn-lg mb-2 mx-xs-2" href="/app.html">Try it out!</a>
<h4 class="mt-3 text-info-emphasis fw-bold mb-3 mx-xs-2">Tech Stack:</h4>
<div>
<i class="devicon-javascript-plain colored devIcons text-info-emphasis"
alt="icon for the Javascript programming language"></i>
<i class="devicon-html5-plain colored devIcons text-secondary"
alt="icon for the HTML programming language"></i>
<i class="devicon-css3-plain colored devIcons text-info"
alt="icon for the CSS programming language"></i>
<i id="bs-icon" class="devicon-bootstrap-plain colored devIcons"
alt="icon for the Bootstrap framework for the CSS programming language"></i>
</div>
</div>
<div class="col d-flex order-first order-md-last">
<img id="app-logo-img" src="images/Soda-Pop.png" class="img-fluid mx-auto my-auto" alt="Soda Pop App Logo">
</div>
</div>
</main>
</body>
<footer class="py-3">
<div class="container">
<div class="row row-cols-1 row-cols-lg-3 align-items-center">
<div class="col text-center text-lg-start">
© 2023 Angel Corral Nunez
</div>
<div class="col text-center">
<img src="/images/Angel Single Semicolon Logo/Logo Files/For Web/svg/Color logo - no background.svg" height="48" width="350"/>
</div>
<div class="col text-center text-lg-end">
<a href="https://www.linkedin.com/in/angelcorralnunez/"><i
class="socialicons bi bi-linkedin px-1"></i></a>
<a href="https://github.com/angelcorralnunez"><i class="socialicons bi bi-github px-1"></i></a>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous">
</script>
</html>