├── GuessNumber
    ├── .vscode
    │   └── settings.json
    ├── css
    │   └── styles.css
    ├── index.html
    └── js
    │   └── index.js
├── Login
    ├── css
    │   └── styles.css
    ├── index.html
    └── js
    │   └── index.js
└── StarDevs
    ├── css
        └── styles.css
    ├── img
        ├── bg.jpg
        ├── darth.svg
        ├── planet.svg
        └── starship.svg
    ├── index.html
    └── js
        └── index.js


/GuessNumber/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "liveServer.settings.port": 5501
3 | }


--------------------------------------------------------------------------------
/GuessNumber/css/styles.css:
--------------------------------------------------------------------------------
  1 | /* Global ================== */
  2 | :root {
  3 |   --white: #fafafa;
  4 |   --blue: #00348a;
  5 |   --blue-light: #0bbbd6;
  6 | }
  7 | 
  8 | * {
  9 |   margin: 0;
 10 |   padding: 0;
 11 |   box-sizing: border-box;
 12 |   font-family: 'Ubuntu', sans-serif;
 13 |   text-decoration: none;
 14 | }
 15 | 
 16 | /* Header ============= */
 17 | header {
 18 |   width: 100%;
 19 |   text-align: center;
 20 |   padding: 2rem;
 21 |   box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.5);
 22 |   background-color: var(--white);
 23 | }
 24 | 
 25 | header a h1 {
 26 |   color: var(--blue);
 27 |   font-size: 2.8rem;
 28 |   font-weight: 300;
 29 | }
 30 | 
 31 | /* Container =============== */
 32 | .container {
 33 |   width: 100%;
 34 |   height: 85vh;
 35 | 
 36 |   display: flex;
 37 |   flex-direction: column;
 38 |   align-items: center;
 39 |   justify-content: flex-start;
 40 | 
 41 |   background: linear-gradient(to right, #ddd, #eee, #ddd);
 42 | }
 43 | 
 44 | /* Form =========== */
 45 | .container form {
 46 |   background: var(--blue-light);
 47 | 
 48 |   display: flex;
 49 |   flex-direction: column;
 50 |   width: 40%;
 51 |   padding: 2rem;
 52 |   margin-top: 5%;
 53 |   border-radius: 0.5rem;
 54 | }
 55 | 
 56 | .container form label {
 57 |   color: var(--white);
 58 |   font-size: 1.3rem;
 59 |   font-weight: 600;
 60 | }
 61 | 
 62 | .container form input {
 63 |   border: 0;
 64 |   outline: 0;
 65 |   margin: 5% 0px;
 66 |   padding: 10px;
 67 |   font-size: 1.2rem;
 68 |   font-weight: 300;
 69 |   border-radius: 0.2rem;
 70 |   box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1);
 71 | }
 72 | 
 73 | .container form input:focus {
 74 |   box-shadow: inset 1px 2px 4px 2px rgba(0, 0, 0, 0.1);
 75 | }
 76 | 
 77 | .container form button {
 78 |   cursor: pointer;
 79 |   margin-top: 3%;
 80 |   border: 0;
 81 |   outline: 0;
 82 |   padding: 0.8rem;
 83 |   border-radius: 0.2rem;
 84 |   font-size: 1.5rem;
 85 |   font-weight: 400;
 86 |   background: var(--blue);
 87 |   color: var(--white);
 88 |   transition: 0.3s ease-in-out;
 89 | }
 90 | 
 91 | .container form button:hover {
 92 |   color: var(--blue);
 93 |   background: var(--white);
 94 | }
 95 | 
 96 | /* Section ========== */
 97 | .container .result-box {
 98 |   margin-top: 5%;
 99 |   background: var(--white);
100 |   width: 40%;
101 |   padding: 2rem;
102 |   border-radius: 0.5rem;
103 |   box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.2);
104 |   color: #00348a;
105 | }
106 | 
107 | .container .result-box h2 {
108 |   font-weight: 500;
109 |   font-size: 1.5rem;
110 |   margin: 5% 0%;
111 | }
112 | 
113 | .container .result-box span {
114 |   font-size: 1.3rem;
115 |   font-weight: 300;
116 | }
117 | 
118 | /* Btn jogar de novo =============*/
119 | .container #btnRestart {
120 |   cursor: pointer;
121 |   border: 0;
122 |   outline: 0;
123 |   background: var(--white);
124 |   color: var(--blue);
125 |   padding: 1rem;
126 |   margin-top: 3%;
127 |   font-size: 1.3rem;
128 |   border-radius: 0.3rem;
129 |   box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.3);
130 |   transition: 0.2s ease-in-out;
131 | 
132 |   display: none;
133 | }
134 | 
135 | .container #btnRestart:hover {
136 |   background: var(--blue);
137 |   color: var(--white);
138 | }
139 | 
140 | footer {
141 |   padding: 1.5rem;
142 |   text-align: center;
143 |   box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
144 | }
145 | 
146 | footer p {
147 |   color: var(--blue);
148 |   font-size: 1rem;
149 |   font-weight: 300;
150 | }


--------------------------------------------------------------------------------
/GuessNumber/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>GuessNumber</title>
 7 |     <link rel="stylesheet" href="./css/styles.css">
 8 |     <script src="./js/index.js" defer></script>
 9 | 
10 |     <link rel="preconnect" href="https://fonts.gstatic.com">
11 |     <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500&display=swap" rel="stylesheet">
12 |   </head>
13 |   <body>
14 |     <header>
15 |       <a href="#"><h1>GuessNumber</h1></a>
16 |     </header>
17 | 
18 |     <main class="container">
19 |       <form id="form">
20 |         <label for="kick">Digite um número (0 - 10):</label>
21 |         <input type="number" id="kick" max="10" placeholder="0">
22 | 
23 |         <button type="submit">Jogar!</button>
24 |       </form>
25 | 
26 |       <section class="result-box" id="result">
27 |         <h2 id="status">Adivinhe o número sorteado!</h2>
28 |         <span id="attempt">Tentativas: 0</span>
29 |       </section>
30 | 
31 |       <button id="btnRestart" onclick="restart()">Jogar de novo!</button>
32 |     </main>
33 | 
34 |     <footer>
35 |       <p>GuessNumber, 2021 &copy;</p>
36 |     </footer>
37 |   </body>
38 | </html>


--------------------------------------------------------------------------------
/GuessNumber/js/index.js:
--------------------------------------------------------------------------------
 1 | const form = document.getElementById('form');
 2 | form.addEventListener('submit', handleSubmit);
 3 | 
 4 | let status = document.getElementById('status');
 5 | let attempt = document.getElementById('attempt');
 6 | let result = document.getElementById('result');
 7 | 
 8 | const Guess = {
 9 |   max: 10,
10 |   attemptsNumber: 0,
11 |   numberDrawn: function randomValue() {
12 |     return Math.round(Math.random() * this.max);
13 |   }
14 | };
15 | 
16 | let numberDrawn = Guess.numberDrawn();
17 | 
18 | function updateAttempt(attempt, value) {
19 |   attempt.innerHTML = 'Tentativa: ' + value
20 | };
21 | 
22 | function handleSubmit(e) {
23 |   e.preventDefault();
24 | 
25 |   let kick = document.getElementById('kick').value;
26 | 
27 |   if(!kick) {
28 |     alert('Digite algum valor!')
29 |     return;
30 |   };
31 | 
32 |   updateAttempt(attempt, ++Guess.attemptsNumber);
33 | 
34 |   if(numberDrawn == kick) {
35 |     playAgain();
36 |     status.innerHTML = 'Parabéns, você acertou!';
37 |     result.style.transition = '0.4s';
38 |     result.style.backgroundColor = '#37c978';
39 |     result.style.color = '#fff';
40 |     status.style.color = '#fff';
41 |     clear();
42 |   } else if(numberDrawn > kick) {
43 |     status.innerHTML = 'O número é maior!';
44 |     status.style.color = '#de4251';
45 |     clear();
46 |   } else if(numberDrawn < kick) {
47 |     status.innerHTML = 'O número é menor!';
48 |     status.style.color = '#de4251';
49 |     clear();
50 |   }
51 | };
52 | 
53 | 
54 | function playAgain() {
55 |   document.getElementById('btnRestart').style.display = 'flex';
56 | };
57 | 
58 | function restart() {
59 |   document.location.reload(true);
60 | };
61 | 
62 | function clear() {
63 |   document.getElementById('kick').value = '';
64 | };


--------------------------------------------------------------------------------
/Login/css/styles.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   box-sizing: border-box;
  5 |   font-family: 'Poppins', sans-serif;
  6 |   text-decoration: none;
  7 |   color: #fff;
  8 | }
  9 | 
 10 | header {
 11 |   min-height: 9vh;
 12 |   display: flex;
 13 |   align-items: center;
 14 |   justify-content: center;
 15 |   background-color: #383c42;
 16 | }
 17 | 
 18 | header h1 {
 19 |   font-size: 2.5em;
 20 |   color: #fff;
 21 | }
 22 | 
 23 | main {
 24 |   width: 100%;
 25 |   min-height: 100vh;
 26 |   background: linear-gradient(#18acfe, #0166e1);
 27 | 
 28 |   display: flex;
 29 |   justify-content: center;
 30 | 
 31 |   box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.25);
 32 | }
 33 | 
 34 | main form {
 35 |   margin-top: 5%;
 36 |   width: 35%;
 37 |   height: 75vh;
 38 |   background-color: #383c42;
 39 |   box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4) inset 0px 4px 4px rgba(0, 0, 0, 0.25);
 40 |   border-radius: 18px;
 41 |   padding: 2%;
 42 | 
 43 |   display: flex;
 44 |   flex-direction: column;
 45 |   align-items: center;
 46 | }
 47 | 
 48 | main form .inputs-container {
 49 |   margin-top: 10%;
 50 |   width: 100%;
 51 | 
 52 |   display: flex;
 53 |   flex-direction: column;
 54 |   align-items: center;
 55 | }
 56 | 
 57 | main form .inputs-container input {
 58 |   width: 90%;
 59 |   height: 45px;
 60 |   padding: 8px 15px;
 61 |   border: 0;
 62 |   outline: 0;
 63 |   border-radius: 12px;
 64 | 
 65 |   font-size: 16px;
 66 |   color: #312e42;
 67 | 
 68 |   box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25);
 69 | }
 70 | 
 71 | main form .inputs-container input:focus {
 72 |   box-shadow: inset 1px 4px 7px rgba(0, 0, 0, 0.5);
 73 | }
 74 | 
 75 | main form .password-container {
 76 |   margin-top: 5%;
 77 |   width: 100%;
 78 |   position: relative;
 79 | 
 80 |   display: flex;
 81 |   flex-direction: column;
 82 |   align-items: center;
 83 | }
 84 | 
 85 | main form .password-container i {
 86 |   position: absolute;
 87 |   right: 8%;
 88 |   top: 35%;
 89 |   color: #777;
 90 |   cursor: pointer;
 91 | }
 92 | 
 93 | main form .password-container #eye {
 94 |   display: none;
 95 | }
 96 | 
 97 | main form .password-infos {
 98 |   width: 90%;
 99 |   margin-top: 3%;
100 | 
101 |   display: flex;
102 |   align-items: center;
103 |   justify-content: space-between;
104 | }
105 | 
106 | main form .password-infos a {
107 |   transition: 0.2s ease-in-out;
108 | }
109 | 
110 | main form .password-infos a:hover {
111 |   color: #18acfe;
112 | }
113 | 
114 | main form button {
115 |   background-color: #18acfe;
116 |   width: 90%;
117 |   height: 50px;
118 |   border: 0;
119 |   outline: 0;
120 |   border-radius: 12px;
121 |   margin-top: 10%;
122 |   font-size: 1.6em;
123 |   font-weight: 600;
124 |   cursor: pointer;
125 |   transition: 0.3s ease-in-out;
126 | }
127 | 
128 | main form button:hover {
129 |   background: #fff;
130 |   color: #18acfe;
131 | }
132 | 
133 | main form .links-container {
134 |   width: 100%;
135 |   display: flex;
136 |   flex-direction: column;
137 |   align-items: center;
138 |   margin-top: 10%;
139 | }
140 | 
141 | main form .links-container span {
142 |   font-size: 0.8em;
143 |   font-weight: 600;
144 | }
145 | 
146 | main form .links-container aside {
147 |   margin-top: 5%;
148 |   width: 50%;
149 | 
150 |   display: flex;
151 |   align-items: center;
152 |   justify-content: space-around;
153 | }
154 | 
155 | main form .links-container aside i {
156 |   font-size: 1.6em;
157 |   background-color: #fff;
158 |   padding: 8px;
159 |   height: 40px;
160 |   width: 40px;
161 |   border-radius: 20px;
162 |   transition: 0.3s ease-in-out;
163 |   color: #fff;
164 | 
165 |   display: flex;
166 |   align-items: center;
167 |   justify-content: center;
168 | }
169 | 
170 | main form .links-container aside .google {
171 |   color: #e34133;
172 | }
173 | 
174 | main form .links-container aside .google:hover {
175 |   background-color: #e34133;
176 |   color: #fff;
177 | }
178 | 
179 | main form .links-container aside .linkedin {
180 |   color: #0a66c2;
181 | }
182 | 
183 | main form .links-container aside .linkedin:hover {
184 |   background-color: #0a66c2;
185 |   color: #fff;
186 | }
187 | 
188 | main form .links-container aside .facebook {
189 |   color: #14a0f9;
190 | }
191 | 
192 | main form .links-container aside .facebook:hover {
193 |   background-color: #14a0f9;
194 |   color: #fff;
195 | }
196 | 
197 | main form footer {
198 |   width: 100%;
199 |   margin-top: 10%;
200 | 
201 |   display: flex;
202 |   flex-direction: column;
203 |   align-items: center;
204 | }
205 | 
206 | main form footer hr {
207 |   width: 100%;
208 |   height: 3px;
209 |   background-color: #fff;
210 | }
211 | 
212 | main form footer span {
213 |   font-weight: 400;
214 |   font-size: 0.9em;
215 |   margin-top: 5%;
216 | }
217 | 
218 | main form footer a {
219 |   font-weight: 600;
220 |   transition: 0.2s ease-in-out;
221 | }
222 | 
223 | main form footer a:hover {
224 |   color: #18acfe;
225 | }


--------------------------------------------------------------------------------
/Login/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Login-Helper</title>
 7 |     <link rel="stylesheet" href="./css/styles.css">
 8 |     <script src="./js/index.js" defer></script>
 9 | 
10 |     <link rel="preconnect" href="https://fonts.gstatic.com">
11 |     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
12 |     <script src="https://kit.fontawesome.com/d987aa355c.js" crossorigin="anonymous" defer></script>
13 |   </head>
14 | 
15 |   <body>
16 |     <header>
17 |       <h1>Login-Helper</h1>
18 |     </header>
19 | 
20 |     <main>
21 |       <form>
22 |         <section class="inputs-container">
23 |           <input type="email" placeholder="example@gmail.com">
24 | 
25 |           <div class="password-container">
26 |             <input type="password" id="field-password" class="field-password" placeholder="*******">
27 |             <i class="fas fa-eye" id="eye" onclick="showPassword()"></i>
28 |             <i class="fas fa-eye-slash" id="eye-slash" onclick="showPassword()"></i>
29 |           </div>
30 |         </section>
31 | 
32 |         <section class="password-infos">
33 |           <div>
34 |             <input type="checkbox">
35 |             <span>Lembrar senha?</span>
36 |           </div>
37 | 
38 |           <a href="#">Esqueceu sua senha?</a>
39 |         </section>
40 | 
41 |         <button id="btn-login">Login</button>
42 | 
43 |         <section class="links-container">
44 |           <span>Ou entre com:</span>
45 | 
46 |           <aside>
47 |             <a href="#"><i class="fab fa-google-plus-square google"></i></a>
48 |             <a href="#"><i class="fab fa-linkedin linkedin"></i></a>
49 |             <a href="#"><i class="fab fa-facebook-square facebook"></i></a>
50 |           </aside>
51 |         </section>
52 | 
53 |         <footer>
54 |           <hr>
55 |           <span>Ainda não tem uma conta? <a href="#">Cadastra-se</a></span>
56 |         </footer>
57 |       </form>
58 |     </main>
59 | 
60 |   </body>
61 | </html>


--------------------------------------------------------------------------------
/Login/js/index.js:
--------------------------------------------------------------------------------
 1 | function showPassword() {
 2 |   const eye = document.getElementById('eye');
 3 |   const eyeSlash = document.getElementById('eye-slash');
 4 |   const fieldPassword = document.getElementById('field-password');
 5 | 
 6 |   if(eye.style.display === 'none') {
 7 |     eye.style.display = 'block';
 8 |     eyeSlash.style.display = 'none';
 9 |     fieldPassword.type = 'text';
10 |   } else {
11 |     eye.style.display = 'none';
12 |     eyeSlash.style.display = 'block';
13 |     fieldPassword.type = 'password';
14 |   }
15 | };
16 | 
17 | document.getElementById('btn-login').addEventListener('click', function(e) {
18 |   e.preventDefault();
19 |   alert('Logado!');
20 | });


--------------------------------------------------------------------------------
/StarDevs/css/styles.css:
--------------------------------------------------------------------------------
  1 | /* Global ================ */
  2 | :root {
  3 |   --yellow: #DCA500;
  4 |   --yellow-light: #FFBF00;
  5 |   --grey: #333;
  6 |   --white: #fafafa;
  7 | }
  8 | 
  9 | * {
 10 |   margin: 0;
 11 |   padding: 0;
 12 |   box-sizing: border-box;
 13 | }
 14 | 
 15 | body {
 16 |   background: url('../img/bg.jpg');
 17 |   padding: 2%;
 18 | }
 19 | 
 20 | /* Texts ================ */
 21 | h1, h2, span, p {
 22 |   font-family: 'Nunito', sans-serif;
 23 |   color: var(--white);
 24 | }
 25 | 
 26 | /* Header ================ */
 27 | header h1 {
 28 |   color: var(--yellow-light);
 29 |   font-weight: 200;
 30 |   font-size: 4em;
 31 | }
 32 | 
 33 | /* Cards ================ */
 34 | main .cards-main {
 35 |   display: flex;
 36 |   align-items: center;
 37 |   justify-content: space-around;
 38 | 
 39 |   margin-top: 5%;
 40 | }
 41 | 
 42 | main .cards-main .card-container {
 43 |   width: 25%;
 44 |   background-color: var(--white);
 45 |   padding: 1rem;
 46 |   border-radius: 0.3rem;
 47 |   cursor: pointer;
 48 | 
 49 |   display: flex;
 50 |   align-items: center;
 51 |   justify-content: space-between;
 52 | 
 53 |   transition: 0.3s ease-in-out;
 54 | }
 55 | 
 56 | main .cards-main .card-container:hover {
 57 |   margin-top: -3%;
 58 |   border-radius: 1rem;
 59 |   box-shadow: 0px 0px 5px 3px #999;
 60 | }
 61 | 
 62 | main .cards-main .card-container .card-main {
 63 |   display: flex;
 64 |   flex-direction: column;
 65 |   align-items: center;
 66 |   justify-content: center;
 67 | }
 68 | 
 69 | main .cards-main .card-container .card-main span {
 70 |   color: var(--grey);
 71 |   font-size: 1.8em;
 72 |   font-weight: 600;
 73 | }
 74 | 
 75 | main .cards-main .card-container .card-main h2 {
 76 |   color: var(--yellow-light);
 77 |   font-size: 2em;
 78 | }
 79 | 
 80 | 
 81 | /* Phrases ================ */
 82 | main .phrases-container {
 83 |   width: 100%;
 84 |   margin-top: 8%;
 85 | 
 86 |   display: flex;
 87 |   flex-direction: column;
 88 |   align-items: center; 
 89 | }
 90 | 
 91 | main .phrases-container button {
 92 |   width: 25%;
 93 |   border: none;
 94 |   outline: none;
 95 |   padding: 1rem;
 96 |   border-radius: 0.3rem;
 97 |   cursor: pointer;
 98 | 
 99 |   font-size: 1.7em;
100 |   font-weight: 600;
101 | 
102 |   background-color: var(--yellow);
103 |   color: var(--white);
104 | 
105 |   transition: 0.3s ease-in-out;
106 | }
107 | 
108 | main .phrases-container button:hover {
109 |   border-radius: 2rem;
110 |   color: var(--yellow);
111 |   background-color: var(--white);
112 | }
113 | 
114 | main .phrases-container p {
115 |   text-align: center;
116 |   width: 75%;
117 |   font-size: 2em;
118 |   font-weight: 700;
119 |   margin-top: 4%;
120 | 
121 |   transition: 0.1s ease-in;
122 | }
123 | 
124 | main .phrases-container p:hover {
125 |   opacity: 0.7;
126 | }


--------------------------------------------------------------------------------
/StarDevs/img/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dev-chico/Curso-HTML-CSS-JS/8d16a97cc2192352de58eec057a3270cce0e5884/StarDevs/img/bg.jpg


--------------------------------------------------------------------------------
/StarDevs/img/darth.svg:
--------------------------------------------------------------------------------
1 | <svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M57.4278 41.3438C53.3671 41.5196 50.9941 42.2051 49.5175 43.6466C47.8125 45.2813 47.8125 47.3555 47.8125 48.8672V48.92C47.8125 50.9591 48.0409 53.0684 49.6758 54.5976C51.0292 55.8633 52.9629 56.4258 55.9863 56.4258C56.5137 56.4258 57.0938 56.4083 57.6562 56.373C62.1738 56.127 65.2675 55.5117 66.6913 53.2266C67.6054 51.7676 67.623 49.9746 66.7442 47.9004C65.795 45.5097 63.9844 41.0801 57.4278 41.3438ZM64.3183 51.7325C63.4921 53.0508 60.5567 53.4024 57.498 53.5782C56.9708 53.6133 56.4609 53.6309 55.9863 53.6309C53.7715 53.6309 52.3828 53.297 51.6094 52.5762C50.9062 51.9083 50.625 50.8887 50.625 48.9375V48.8672C50.625 47.4258 50.6778 46.4238 51.4688 45.668C52.3829 44.7716 54.3163 44.297 57.5508 44.1563C62.1387 43.9629 63.2637 46.7403 64.1778 48.9551V48.9726C64.9161 50.7657 64.4766 51.4863 64.3183 51.7325Z" fill="#333333"/>
3 | <path d="M52.0312 84.4629C52.8047 84.4629 53.4375 83.83 53.4375 83.0566V77.08C53.4375 76.3066 52.8047 75.6738 52.0312 75.6738C51.2578 75.6738 50.625 76.3066 50.625 77.08V83.0566C50.625 83.83 51.2578 84.4629 52.0312 84.4629Z" fill="#333333"/>
4 | <path d="M45 84.4629C45.7734 84.4629 46.4062 83.8301 46.4062 83.0567V73.5645C46.4062 72.791 45.7734 72.1583 45 72.1583C44.2266 72.1583 43.5938 72.791 43.5938 73.5645V83.0567C43.5938 83.8301 44.2266 84.4629 45 84.4629Z" fill="#333333"/>
5 | <path d="M32.5547 41.3788C26.0509 41.0625 24.2051 45.5274 23.2031 47.9179L24.5039 48.4629L23.2031 47.9179C22.3418 50.0097 22.3594 51.8028 23.2559 53.2441C24.3281 54.9316 26.209 56.0566 32.291 56.3905C32.9063 56.4258 33.4513 56.4433 33.9785 56.4433C37.0196 56.4433 38.9531 55.8808 40.2892 54.6153C41.9239 53.0683 42.1525 50.9766 42.1525 48.9375V48.8847C42.1525 47.373 42.1525 45.2988 40.465 43.6816C38.9708 42.2403 36.5977 41.5546 32.5547 41.3788ZM39.34 48.955C39.34 50.9062 39.0587 51.9258 38.3555 52.5937C37.5997 53.3145 36.211 53.6484 33.9785 53.6484C33.5216 53.6484 33.0293 53.6308 32.4668 53.5957C29.4259 53.4199 26.4902 53.0859 25.6465 51.75C25.5059 51.5215 25.0664 50.8183 25.8047 48.9903C26.7892 46.6347 27.8965 43.9629 32.4317 44.1913C35.6485 44.332 37.5821 44.8066 38.5138 45.7207C39.2872 46.459 39.34 47.4258 39.34 48.9024V48.955Z" fill="#333333"/>
6 | <path d="M37.9688 84.4629C38.7422 84.4629 39.375 83.83 39.375 83.0566V77.08C39.375 76.3066 38.7422 75.6738 37.9688 75.6738C37.1953 75.6738 36.5625 76.3066 36.5625 77.08V83.0566C36.5625 83.83 37.1953 84.4629 37.9688 84.4629Z" fill="#333333"/>
7 | <path d="M87.1699 74.373L86.9941 73.8105C85.0782 67.7109 83.3556 62.3671 81.8439 57.8496C81.1758 54.6153 77.2911 36.2988 74.8302 32.9062C74.7949 32.8711 74.7774 32.8359 74.7423 32.8008C74.6895 28.2129 73.9512 18.1582 68.9064 11.6016C63.334 4.37695 54.3165 3.12891 49.8165 2.98828C49.6935 2.79492 49.5703 2.60155 49.4298 2.42578L49.2891 2.25C48.252 0.93164 46.6876 0.175781 45.0001 0.175781C43.3126 0.175781 41.7481 0.93164 40.7286 2.25L40.5703 2.44336C40.4298 2.61913 40.3066 2.8125 40.1836 3.00586C37.7052 3.07617 34.2949 3.48046 30.7969 4.74609C26.7364 6.22266 23.4844 8.54296 21.1114 11.6191C16.0665 18.1582 15.3282 28.2129 15.2754 32.8008C15.2403 32.8359 15.2227 32.8711 15.1876 32.9062C12.6563 36.3867 8.63091 55.5645 8.10357 58.078C5.39653 66.1113 2.95317 74.0215 2.8477 74.373C2.60161 75.1288 2.90044 75.955 3.56841 76.377L22.0782 88.3653C23.502 89.2792 25.1368 89.7715 26.8419 89.8066H26.8594C26.9298 89.8066 27.0001 89.8066 27.0703 89.8066H62.8594C62.9298 89.8066 63 89.8066 63.0703 89.8066H63.0879C64.7403 89.7538 66.375 89.2617 67.834 88.3653L86.3965 76.3593L86.4493 76.3242C87.1524 75.8847 87.4161 75.0937 87.1699 74.373ZM24.5566 86.1855C24.0294 85.6582 23.7481 84.9726 23.7481 84.2167C23.7481 83.4609 24.0469 82.7578 24.5743 82.2129C25.6465 81.123 27.4395 81.123 28.5469 82.2304C29.0743 82.7578 29.3731 83.4433 29.3731 84.1992C29.3731 84.955 29.0743 85.6582 28.5294 86.203C28.0899 86.6601 27.4923 86.9413 26.8419 86.9941C26.4024 86.9766 25.9629 86.9062 25.5411 86.8183C25.1895 86.6953 24.8379 86.4667 24.5566 86.1855ZM30.5157 80.2266C29.8302 79.5586 29.0391 79.084 28.1778 78.8379L39.6036 68.2383C40.5703 69.2754 41.8536 69.4336 42.5743 69.4336H45.0001H47.4258C48.8673 69.4336 49.7989 68.8711 50.3965 68.2383L61.8223 78.8379C60.961 79.1016 60.1699 79.5586 59.4844 80.2266C58.4122 81.2812 57.832 82.6875 57.832 84.1816C57.832 85.1836 58.0957 86.1504 58.5879 87.0117H31.4298C31.9219 86.1679 32.1856 85.2012 32.1856 84.1816C32.1681 82.6875 31.5879 81.2812 30.5157 80.2266ZM41.1153 64.0546C41.1153 61.9101 42.1173 59.4141 44.9649 59.4141H45.0001H45.0352C47.8828 59.4141 48.8848 61.9101 48.8848 64.0546C48.8848 66.6211 47.9356 66.6211 47.4258 66.6211H45.0001H42.5743C42.0645 66.6211 41.1153 66.6211 41.1153 64.0546ZM61.4707 86.1855C60.9435 85.6582 60.6445 84.9375 60.6445 84.1816C60.6445 83.4433 60.9435 82.7403 61.4707 82.2129C62.5782 81.123 64.3536 81.1054 65.4435 82.1953C66.5332 83.3028 66.5508 85.078 65.4435 86.1679C65.1798 86.4316 64.8457 86.6425 64.5294 86.7655C64.0899 86.8887 63.6328 86.9413 63.1758 86.9766C62.5254 86.9413 61.9278 86.6601 61.4707 86.1855ZM67.1133 79.9101L51.5919 65.4961C51.6622 65.0566 51.6973 64.5645 51.6973 64.0371C51.6973 59.6425 48.9552 56.584 45.0352 56.584H45.0001H44.9649C41.0449 56.584 38.3028 59.6425 38.3028 64.0371C38.3028 64.5645 38.3379 65.0566 38.4082 65.4961L22.8868 79.9101C22.0957 76.3242 20.7774 71.1034 18.9141 66.5683C16.4883 60.6796 13.7637 56.3379 12.375 54.2988C13.6934 50.5371 14.959 47.0917 15.961 44.8417C17.209 42.0117 18.9141 38.127 26.4552 38.127C30.0411 38.127 32.9415 38.9179 35.5078 39.6211C37.7227 40.2187 39.8145 40.7812 42.0118 40.7812H48.0235C50.2207 40.7812 52.3126 40.2187 54.5274 39.6211C57.0939 38.9179 59.9941 38.127 63.5802 38.127C71.1036 38.127 72.8262 42.0117 74.0743 44.8417C74.9707 46.8633 76.1661 50.0625 77.6427 54.2812C76.254 56.3203 73.5118 60.6621 71.086 66.5683C69.2227 71.1034 67.9044 76.3242 67.1133 79.9101ZM39.4102 29.3554V37.6875C38.4082 37.4941 37.3711 37.2129 36.2461 36.8965C33.504 36.1582 30.4102 35.3145 26.4552 35.3145C20.3028 35.3145 17.1564 37.6699 15.3457 40.1133C16.1544 37.4062 16.8927 35.332 17.4376 34.5762C21.2169 29.4082 30.0235 29.3554 39.4102 29.3554ZM50.5899 29.3554C59.959 29.3554 68.7832 29.4082 72.5449 34.5762C73.0899 35.332 73.8282 37.3711 74.6191 40.0429C72.8086 37.6171 69.6622 35.3145 63.5802 35.3145C59.6251 35.3145 56.5314 36.1582 53.7891 36.8965C52.6465 37.2129 51.6094 37.4941 50.5899 37.6875V29.3554ZM66.6739 13.3418C70.3828 18.1582 71.5078 25.2774 71.8243 30.0409C66.709 26.578 58.8516 26.5429 50.5899 26.5429V5.85351C54.8262 6.11718 62.1387 7.4707 66.6739 13.3418ZM42.7677 4.18359L42.9082 3.99024C43.4181 3.35742 44.1739 2.98828 44.9824 2.98828C45.7911 2.98828 46.5469 3.35742 47.0743 4.0078L47.2149 4.18359C47.5665 4.64062 47.7774 5.2207 47.7774 5.80078V37.9687H42.2227V5.80078C42.2227 5.2207 42.4161 4.64062 42.7677 4.18359ZM23.3262 13.3418C27.8614 7.4707 35.1739 6.11718 39.4102 5.85351V26.5429C31.1485 26.5429 23.2911 26.578 18.1758 30.0409C18.4923 25.2597 19.6173 18.1582 23.3262 13.3418ZM11.2149 57.6738C12.6211 59.9238 14.5547 63.3516 16.3126 67.6405C18.9493 74.0566 20.5137 82.248 20.8828 84.2167L5.78325 74.4433C6.50395 72.123 8.80669 64.7754 11.2149 57.6738ZM69.1173 84.2343C69.4689 82.2655 71.0332 74.0742 73.6876 67.6405C75.4629 63.334 77.3965 59.9062 78.8028 57.6562C78.9082 57.9726 79.0137 58.2891 79.1368 58.623C79.1368 58.6582 79.1544 58.6933 79.1544 58.7109H79.1719C80.6836 63.1933 82.3887 68.4843 84.2695 74.4609L69.1173 84.2343Z" fill="#333333"/>
8 | </svg>
9 | 


--------------------------------------------------------------------------------
/StarDevs/img/planet.svg:
--------------------------------------------------------------------------------
1 | <svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M30.4101 53.1563C36.9317 53.1563 42.2403 47.8476 42.2403 41.3262C42.2403 34.8047 36.9317 29.4962 30.4101 29.4962C23.8887 29.4962 18.5801 34.8047 18.5801 41.3262C18.5801 47.8476 23.8887 53.1563 30.4101 53.1563ZM30.4101 32.3087C35.3847 32.3087 39.4278 36.3516 39.4278 41.3262C39.4278 46.3008 35.3847 50.3438 30.4101 50.3438C25.4355 50.3438 21.3926 46.3008 21.3926 41.3262C21.3926 36.3516 25.4355 32.3087 30.4101 32.3087Z" fill="#333333"/>
3 | <path d="M61.4005 44.332C65.3029 44.332 68.4845 41.1504 68.4845 37.248C68.4845 33.3457 65.3029 30.1641 61.4005 30.1641C57.4981 30.1641 54.3164 33.3457 54.3164 37.248C54.3164 41.1504 57.4981 44.332 61.4005 44.332ZM61.4005 32.9766C63.7559 32.9766 65.672 34.8925 65.672 37.248C65.672 39.6034 63.7559 41.5195 61.4005 41.5195C59.045 41.5195 57.1289 39.6034 57.1289 37.248C57.1289 34.8925 59.045 32.9766 61.4005 32.9766Z" fill="#333333"/>
4 | <path d="M88.2071 20.0567C85.3771 15.1524 78.1876 13.3242 67.9219 14.8535C61.3654 9.84376 53.3848 7.11914 44.9825 7.11914C34.8575 7.11914 25.3477 11.0566 18.1934 18.2109C11.0392 25.3653 7.11924 34.875 7.11924 45C7.11924 46.6171 7.22471 48.2167 7.41806 49.7988C0.966895 57.9024 -1.03701 65.0566 1.79306 69.9609C3.97275 73.7403 8.73642 75.6913 15.5039 75.6913C17.5255 75.6913 19.7227 75.5157 22.0783 75.1641C28.6348 80.1738 36.6154 82.8808 45.0001 82.8808C55.1251 82.8808 64.6348 78.9433 71.7892 71.7891C78.9434 64.6347 82.8809 55.125 82.8809 45C82.8809 43.4004 82.7755 41.8008 82.5821 40.2363C85.7813 36.2109 87.9785 32.291 88.9279 28.7403C89.8418 25.3653 89.5958 22.4472 88.2071 20.0567ZM45.0001 9.93164C62.4376 9.93164 76.9219 22.7109 79.6114 39.3926C73.6876 46.4766 64.4942 53.9824 53.7539 60.1875C43.1017 66.3399 32.1856 70.5586 22.8692 72.1758C14.9767 65.7421 9.93174 55.9512 9.93174 45C9.93174 25.6641 25.6642 9.93164 45.0001 9.93164ZM4.21884 68.5546C2.25009 65.1445 3.65634 59.7657 8.08604 53.578C9.66806 60.4159 13.131 66.709 18.211 71.7891C18.5275 72.1054 18.8263 72.4042 19.1602 72.7032C11.5665 73.4238 6.18759 71.9649 4.21884 68.5546ZM65.4259 73.4941C64.8985 72.5274 64.5821 71.4199 64.5821 70.4004C64.5821 66.9903 67.3418 64.2304 70.7521 64.2304C71.7539 64.2304 72.8263 64.5292 73.7755 65.0215C71.4904 68.2909 68.6602 71.1562 65.4259 73.4941ZM80.0684 45C80.0684 51.4336 78.3283 57.4629 75.2872 62.6484C73.8809 61.8574 72.2813 61.4179 70.7521 61.4179C65.795 61.4179 61.7696 65.4433 61.7696 70.4004C61.7696 71.9824 62.2442 73.6347 63.0704 75.0409C57.7969 78.2226 51.6094 80.0683 45.0001 80.0683C37.9864 80.0683 31.465 77.9941 25.9805 74.4433C34.9981 72.4921 45.211 68.3788 55.1602 62.6308C65.2852 56.7949 73.9337 49.9571 80.0333 43.2421C80.0509 43.8222 80.0684 44.4199 80.0684 45ZM86.2208 28.002C85.5176 30.6035 84.041 33.4688 81.9142 36.4395C80.3321 29.5841 76.8868 23.3087 71.7892 18.2109C71.4904 17.9121 71.1739 17.6133 70.8575 17.3145C78.4513 16.5938 83.8126 18.0528 85.7813 21.4629C86.7658 23.1855 86.9239 25.3829 86.2208 28.002Z" fill="#333333"/>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/StarDevs/img/starship.svg:
--------------------------------------------------------------------------------
1 | <svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M87.4512 58.4825V33.3105H88.5938C89.3671 33.3105 90 32.6778 90 31.9043C90 31.1309 89.3671 30.498 88.5938 30.498H87.4512V27.1054C87.4512 26.332 86.8184 25.6992 86.045 25.6992C85.2716 25.6992 84.6387 26.332 84.6387 27.1054V30.498H83.4962C82.7226 30.498 82.0899 31.1309 82.0899 31.9043C82.0899 32.6778 82.7226 33.3105 83.4962 33.3105H84.6387V58.4825C83.1972 59.045 82.1778 60.4512 82.1778 62.0859V63.4746H78.1524C77.9766 63.4746 77.7832 63.4746 77.6075 63.4746V38.5488H78.3457C79.1191 38.5488 79.752 37.9161 79.752 37.1425C79.752 36.3691 79.1191 35.7363 78.3457 35.7363H77.6075V32.3613C77.6075 31.5879 76.9746 30.955 76.2012 30.955C75.4278 30.955 74.795 31.5879 74.795 32.3613V35.7363H74.0391C73.2657 35.7363 72.6329 36.3691 72.6329 37.1425C72.6329 37.9161 73.2657 38.5488 74.0391 38.5488H74.795V63.3692C70.4883 63.1055 66.2168 62.3321 62.0683 61.0663C61.2949 60.0645 60.0821 59.4141 58.7285 59.4141H55.7579L49.4649 4.18359C49.2188 1.93359 47.3907 0.210938 45.1758 0.0527344V0.0351562C45.123 0.0351562 45.0528 0.0351562 45 0.0351562C44.9472 0.0351562 44.877 0.0351562 44.8242 0.0351562V0.0527344C42.6093 0.210938 40.7812 1.93359 40.5351 4.18359L34.2421 59.4317H31.2715C29.9179 59.4317 28.705 60.082 27.9316 61.084C23.7832 62.3496 19.5117 63.123 15.205 63.3867V38.5488H15.9609C16.7343 38.5488 17.3671 37.9161 17.3671 37.1425C17.3671 36.3691 16.7343 35.7363 15.9609 35.7363H15.205V32.3613C15.205 31.5879 14.5723 30.955 13.7988 30.955C13.0254 30.955 12.3926 31.5879 12.3926 32.3613V35.7363H11.6543C10.8809 35.7363 10.248 36.3691 10.248 37.1425C10.248 37.9161 10.8809 38.5488 11.6543 38.5488H12.3926V63.4746C12.2168 63.4746 12.0234 63.4746 11.8477 63.4746H7.82226V62.0859C7.82226 60.4512 6.80274 59.045 5.36133 58.4825V33.3105H6.50391C7.27734 33.3105 7.91016 32.6778 7.91016 31.9043C7.91016 31.1309 7.27734 30.498 6.50391 30.498H5.36133V27.1054C5.36133 26.332 4.72851 25.6992 3.95508 25.6992C3.18163 25.6992 2.54883 26.332 2.54883 27.1054V30.498H1.40625C0.632812 30.498 0 31.1309 0 31.9043C0 32.6778 0.632812 33.3105 1.40625 33.3105H2.54883V58.4825C1.10742 59.045 0.0878907 60.4512 0.0878907 62.0859V78.2579C0.0878907 80.3848 1.82812 82.125 3.95508 82.125C5.48438 82.125 6.82032 81.2286 7.45312 79.9278L16.0312 81.7911C21.041 82.8809 26.2266 83.4609 31.4472 83.5312V88.5762C31.4472 89.3496 32.0801 89.9825 32.8535 89.9825C33.627 89.9825 34.2597 89.3496 34.2597 88.5762V84.2345L35.1738 84.6212C38.25 85.922 41.4843 86.6075 44.8242 86.6425C44.877 86.6425 44.9472 86.6425 45 86.6425C45.0528 86.6425 45.123 86.6425 45.1758 86.6425C48.5157 86.5899 51.7676 85.922 54.8262 84.6212L55.7403 84.2345V88.5762C55.7403 89.3496 56.373 89.9825 57.1465 89.9825C57.9199 89.9825 58.5528 89.3496 58.5528 88.5762V83.4962C63.9316 83.3907 69.293 82.7403 74.5137 81.5274L82.4413 79.6817C83.0038 81.1055 84.4101 82.125 86.0274 82.125C88.1543 82.125 89.8945 80.3848 89.8945 78.2579V62.0859C89.9121 60.4512 88.8925 59.045 87.4512 58.4825ZM60.1347 63.6504V72.3867C60.1347 74.0391 58.7988 75.375 57.1465 75.375C55.4941 75.375 54.1582 74.0391 54.1582 72.3867V63.6504C54.1582 62.877 54.791 62.2442 55.5645 62.2442H58.7285C59.502 62.2442 60.1347 62.877 60.1347 63.6504ZM45 2.84766C45.8613 2.93554 46.5821 3.60351 46.6875 4.5L47.5663 12.2168C46.8282 11.9531 45.9668 11.7422 45.0175 11.7422C44.0508 11.7422 43.1895 11.9355 42.4688 12.1817L43.3476 4.5C43.4179 3.62109 44.1387 2.93554 45 2.84766ZM29.8653 63.6504C29.8653 62.877 30.498 62.2442 31.2715 62.2442H34.4355C35.209 62.2442 35.8418 62.877 35.8418 63.6504V72.3867C35.8418 74.0391 34.5059 75.375 32.8535 75.375C31.2012 75.375 29.8653 74.0391 29.8653 72.3867V63.6504ZM5.00976 78.2579C5.00976 78.8379 4.53516 79.3125 3.95508 79.3125C3.375 79.3125 2.90039 78.8379 2.90039 78.2579V62.0859C2.90039 61.5058 3.375 61.0312 3.95508 61.0312C4.53516 61.0312 5.00976 61.5058 5.00976 62.0859V78.2579ZM7.82226 77.1153V66.2871H11.8477C12.4102 66.2871 12.9727 66.2695 13.5352 66.252C13.623 66.2695 13.7109 66.2871 13.7988 66.2871C13.9219 66.2871 14.0449 66.2695 14.1504 66.2345C18.5097 66.0586 22.834 65.3907 27.0528 64.248V72.3692C27.0528 75.0762 28.9336 77.3613 31.4472 77.9942V80.6837C26.4375 80.6309 21.4454 80.0684 16.6289 79.0137L7.82226 77.1153ZM53.7363 82.002C50.959 83.1796 48.0234 83.7774 45 83.8125C41.9766 83.795 39.041 83.1796 36.2637 82.002L34.2597 81.1582V78.0117C36.7734 77.3789 38.6543 75.0938 38.6543 72.3867V63.6504C38.6543 62.2793 37.9863 61.0488 36.9668 60.2754L42.0645 15.5216C42.3808 15.2754 43.4883 14.5547 45 14.5547C46.3712 14.5547 47.5312 15.2578 47.9355 15.5391L53.0332 60.2754C52.0137 61.0488 51.3457 62.2617 51.3457 63.6504V72.3867C51.3457 75.0938 53.2266 77.3789 55.7403 78.0117V81.1582L53.7363 82.002ZM73.8808 78.7852C68.8711 79.9454 63.7207 80.5957 58.5528 80.6837V78.0117C61.0663 77.3789 62.9472 75.0938 62.9472 72.3867V64.2657C67.166 65.4082 71.4903 66.0762 75.8496 66.252C75.955 66.2871 76.0782 66.3046 76.2012 66.3046C76.2891 66.3046 76.377 66.2871 76.4649 66.2695C77.0274 66.2871 77.5899 66.3046 78.1524 66.3046H82.1778V76.8692L73.8808 78.7852ZM87.0996 78.2579C87.0996 78.8379 86.625 79.3125 86.045 79.3125C85.4649 79.3125 84.9903 78.8379 84.9903 78.2579V62.0859C84.9903 61.5058 85.4649 61.0312 86.045 61.0312C86.625 61.0312 87.0996 61.5058 87.0996 62.0859V78.2579Z" fill="#333333"/>
3 | <path d="M48.5332 37.3008C48.3046 35.5429 46.7754 34.207 45 34.207C43.207 34.207 41.6953 35.5254 41.4667 37.2832L40.1836 46.4413C39.9024 48.3925 40.1484 50.4316 40.8691 52.3125C41.3965 53.6836 42.7324 54.5976 44.209 54.5976H45.0175H45.8262C47.3028 54.5976 48.6387 53.6836 49.1659 52.3125C49.8867 50.4316 50.1153 48.4101 49.8516 46.4413L48.5332 37.3008ZM46.5117 51.2929C46.4062 51.5742 46.1074 51.7851 45.8086 51.7851H45H44.1913C43.8925 51.7851 43.5937 51.5917 43.4883 51.2929C42.9433 49.8516 42.7675 48.3046 42.9784 46.828L44.2617 37.6524C44.3145 37.2832 44.6308 37.0195 45.0175 37.0195C45.3867 37.0195 45.7207 37.3008 45.7734 37.6699L47.0566 46.828C47.25 48.3222 47.0742 49.8691 46.5117 51.2929Z" fill="#333333"/>
4 | <path d="M45 58.0605C42.6796 58.0605 40.7812 59.9589 40.7812 62.2792C40.7812 64.5996 42.6796 66.498 45 66.498C47.3204 66.498 49.2188 64.5996 49.2188 62.2792C49.2188 59.9589 47.3204 58.0605 45 58.0605ZM45 63.6855C44.2266 63.6855 43.5938 63.0526 43.5938 62.2792C43.5938 61.5058 44.2266 60.873 45 60.873C45.7734 60.873 46.4062 61.5058 46.4062 62.2792C46.4062 63.0526 45.7734 63.6855 45 63.6855Z" fill="white"/>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/StarDevs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Star-Devs</title>
 7 |     <!-- CSS -->
 8 |     <link rel="stylesheet" href="./css/styles.css">
 9 |     <!-- JS -->
10 |     <script src="./js/index.js" defer></script>
11 |     <!-- Fonts -->
12 |     <link rel="preconnect" href="https://fonts.gstatic.com">
13 |     <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;600;700&display=swap" rel="stylesheet">
14 |   </head>
15 |   <body>
16 |     <header>
17 |       <h1>Star-Devs</h1>
18 |     </header>
19 | 
20 |     <main>
21 |       <section class="cards-main">
22 |         <div class="card-container">
23 |           <div class="card-main">
24 |             <span>Personagens</span>
25 |             <h2 id="persons">Carregando...</h2>
26 |           </div>
27 |           <img src="./img/darth.svg" alt="Imagem Personagens">
28 |         </div>
29 | 
30 |         <div class="card-container">
31 |           <div class="card-main">
32 |             <span>Naves Estelares</span>
33 |             <h2 id="starships">Carregando...</h2>
34 |           </div>
35 |           <img src="./img/starship.svg" alt="Imagem Naves Estalares">
36 |         </div>
37 | 
38 |         <div class="card-container">
39 |           <div class="card-main">
40 |             <span>Planetas</span>
41 |             <h2 id="planets">Carregando...</h2>
42 |           </div>
43 |           <img src="./img/planet.svg" alt="Imagem Planetas">
44 |         </div>
45 |       </section>
46 | 
47 |       <section class="phrases-container">
48 |         <button id="btn-phrases" onclick="loadPhrase()">Ler uma frase!</button>
49 |         <p id="phrase"></p>
50 |       </section>
51 |     </main>
52 | 
53 |   </body>
54 | </html>


--------------------------------------------------------------------------------
/StarDevs/js/index.js:
--------------------------------------------------------------------------------
 1 | const persons = document.getElementById('persons');
 2 | const starships = document.getElementById('starships');
 3 | const planets = document.getElementById('planets');
 4 | 
 5 | fillCounters();
 6 | 
 7 | function fillCounters() {
 8 |   Promise.all([
 9 |     getData('people/'),
10 |     getData('starships/'),
11 |     getData('planets')
12 |   ])
13 |   .then(data => {
14 |     persons.style.fontSize = '5em';
15 |     starships.style.fontSize = '5em';
16 |     planets.style.fontSize = '5em';
17 | 
18 |     persons.innerHTML = data[0].count;
19 |     starships.innerHTML = data[1].count;
20 |     planets.innerHTML = data[2].count;
21 |   })
22 |   .catch(err => console.log('Erro:', err))
23 | };
24 | 
25 | function getData(param) {
26 |   return fetch(`https://swapi.dev/api/${param}`)
27 |           .then(res => res.json())
28 | };
29 | 
30 | function loadPhrase() {
31 |   const btn = document.getElementById('btn-phrases');
32 |   const phrase = document.getElementById('phrase');
33 | 
34 |   return fetch('http://swquotesapi.digitaljedi.dk/api/SWQuote/RandomStarWarsQuote')
35 |         .then(data => data.json())
36 |         .then(json => {
37 |           btn.innerHTML = 'Ver mais uma frase!';
38 |           phrase.innerHTML = `"${json.content}"`;
39 | 
40 |           phrase.animate([
41 |             { transform: 'translateY(-70px)'},
42 |             { transform: 'translateY(0px)'}
43 |           ], {
44 |             duration: 500
45 |           })
46 |         })
47 |         .catch(err => console.log('Erro: ', err))
48 | };


--------------------------------------------------------------------------------