Merge branch 'master' of github.com:alexventuraio/30DaysOfJavaScript … · Sarahjdes/30DaysOfJavaScript@8fe4ce0 · GitHub
Skip to content

Commit 8fe4ce0

Browse files
author
Alejandro Ventura Contreras
committed
Merge branch 'master' of github.com:alexventuraio/30DaysOfJavaScript into infinite-scroll-example
2 parents 2e6ba79 + 74c18e4 commit 8fe4ce0

6 files changed

Lines changed: 139 additions & 0 deletions

File tree

‎30DaysOfJavaScript/assets/43.png‎

1.28 MB
Loading
Lines changed: 16 additions & 0 deletions
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Kitties API</title>
8+
<link rel="stylesheet" href="styles.css">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<h1>Kitties Gallery</h1>
13+
<button id="btn_generate" class="btn">Get 5 New Kitties</button>
14+
<div id="gallery" class="gallery"></div>
15+
</div>
16+
<footer>
17+
<p>
18+
By <a href="https://github.com/alexventuraio">Alex Ventura</a>
19+
</p>
20+
</footer>
21+
<script src="app.js"></script>
22+
</body>
23+
</html>
Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
2+
3+
:root {
4+
--error-color: #dc3545;
5+
--success-color: #28a745;
6+
--warning-color: #ffc107;
7+
}
8+
9+
* {
10+
margin: 0;
11+
padding: 0;
12+
box-sizing: border-box;
13+
}
14+
15+
body {
16+
font-family: 'Open Sans', sans-serif;
17+
font-size: 16px;
18+
background-color: #19172e;
19+
display: flex;
20+
flex-direction: column;
21+
justify-content: center;
22+
align-items: center;
23+
min-height: 100vh;
24+
}
25+
26+
.container {
27+
background-color: rgba(255, 255, 255, 0.05);
28+
padding: 1em;
29+
border-radius: 5px;
30+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
31+
width: 90%;
32+
text-align: center;
33+
}
34+
35+
h1 {
36+
color: #fff;
37+
margin-bottom: 20px;
38+
}
39+
40+
.gallery {
41+
display: grid;
42+
grid-template-columns: repeat(5, 1fr);
43+
grid-template-rows: repeat(5, 10vw);
44+
grid-gap: 15px;
45+
}
46+
47+
.gallery__img {
48+
width: 100%;
49+
height: 100%;
50+
object-fit: cover;
51+
}
52+
53+
.btn {
54+
text-transform: uppercase;
55+
width: 400px;
56+
height: 35px;
57+
outline: none;
58+
border: none;
59+
margin: 20px 0;
60+
font-size: 18px;
61+
border-radius: 3px;
62+
background-color: white;
63+
cursor: pointer;
64+
transition: all 300ms ease;
65+
}
66+
67+
.btn:hover {
68+
color: #fff;
69+
background-color: #5c1ed5;
70+
cursor: pointer;
71+
}
72+
73+
.btn:focus {
74+
outline: none;
75+
}
76+
77+
footer {
78+
color: pink;
79+
font-size: 1rem;
80+
padding: 22px;
81+
line-height: 3vh;
82+
margin-top: 30px;
83+
}
84+
85+
footer a {
86+
color: inherit;
87+
}
88+
89+
footer a:visited {
90+
color: inherit;
91+
}

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,9 @@ Repo containing all the projects made in 30 Days while completing the <b>30 Days
107107
## [Day 38 - Snake Game](https://30daysofjs.netlify.app/32%20-%20Snake%20Game/index.html)
108108
![Snake Game](https://github.com/swapnilsparsh/30DaysOfJavaScript/blob/master/30DaysOfJavaScript/assets/38.png)
109109

110+
## [Day 43 - Getting Started with APIs](https://30daysofjs.netlify.app/43%20-%20Getting%20Started%20with%20APIs/index.html)
111+
![Getting Started with APIs](https://github.com/swapnilsparsh/30DaysOfJavaScript/blob/master/30DaysOfJavaScript/assets/43.png)
112+
110113
## [Day 44 - Infinite Scroll](https://30daysofjs.netlify.app/44%20-%20infinite%20scroll/index.html)
111114
![Feedback UI](https://github.com/swapnilsparsh/30DaysOfJavaScript/blob/master/30DaysOfJavaScript/assets/44.png)
112115
## License

‎index.html‎

Lines changed: 6 additions & 0 deletions

0 commit comments

Comments
 (0)