├── AULA - 8 Feed Rede Social
├── AULA 5 - LINKTREE
├── AULA 6 - PLAYLIST
├── AULA1-HTML-basicform.html
├── AULA2-HTML-basicform.html
├── AULA3-HTMLreverseengineering.html
├── Aula 7 - Formularios com HTML
├── Aula 9 - Intro ao Java Script
├── Aula4-USODEIMAGENS.html
└── README.md
/AULA - 8 Feed Rede Social:
--------------------------------------------------------------------------------
1 | ----------------HTML-----------------
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Feed de Rede Social
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
Nome do Usuário
21 |
Aqui vai a biografia do usuário. Pode ser uma frase curta ou descrição pessoal.
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 | -------------------CSS-----------------------
62 |
63 | * {
64 | margin: 0;
65 | padding: 0;
66 | box-sizing: border-box;
67 | }
68 |
69 | body {
70 | font-family: 'Arial', sans-serif;
71 | background-color: #f3f3f3;
72 | color: #333;
73 | display: flex;
74 | justify-content: center;
75 | align-items: center;
76 | height: 100vh;
77 | }
78 |
79 | .container {
80 | max-width: 1000px;
81 | width: 100%;
82 | padding: 20px;
83 | background-color: #fff;
84 | border-radius: 10px;
85 | box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
86 | }
87 |
88 | .profile-section {
89 | display: flex;
90 | align-items: center;
91 | margin-bottom: 30px;
92 | }
93 |
94 | .profile-image img {
95 | width: 120px;
96 | height: 120px;
97 | border-radius: 50%;
98 | object-fit: cover;
99 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
100 | transition: transform 0.3s ease;
101 | }
102 |
103 | .profile-image img:hover {
104 | transform: scale(1.1);
105 | }
106 |
107 | .profile-info {
108 | margin-left: 20px;
109 | }
110 |
111 | .profile-info h2 {
112 | font-size: 24px;
113 | margin-bottom: 10px;
114 | }
115 |
116 | .profile-info .bio {
117 | font-size: 16px;
118 | color: #666;
119 | }
120 |
121 | .feed-section {
122 | display: flex;
123 | justify-content: center;
124 | }
125 |
126 | .image-grid {
127 | display: grid;
128 | grid-template-columns: repeat(3, 1fr);
129 | gap: 20px;
130 | }
131 |
132 | .image-item {
133 | width: 100%;
134 | position: relative;
135 | overflow: hidden;
136 | border-radius: 10px;
137 | transition: transform 0.3s ease, box-shadow 0.3s ease;
138 | }
139 |
140 | .image-item img {
141 | width: 100%;
142 | height: 100%;
143 | object-fit: cover;
144 | transition: transform 0.3s ease;
145 | }
146 |
147 | .image-item:hover {
148 | transform: scale(1.05);
149 | box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
150 | }
151 |
152 | .image-item:hover img {
153 | transform: scale(1.1);
154 | }
155 |
--------------------------------------------------------------------------------
/AULA 5 - LINKTREE:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Rhaldney Lima
8 | Psicologo, Professor de TI e alguém
9 | curioso por natureza.
10 | Seja bem-vindo as ramicações do meu
11 | universo!
12 | INSTAGRAM
14 | LINKEDIN
15 | GITHUB
17 |
18 |
19 |
20 |
21 | -------------- CSS ----------------
22 |
23 | img {
24 | border: solid 5px white;
25 | border-radius: 100px;
26 | width: 150px;
27 | height: 150px;
28 | }
29 | h2 {
30 | font-size: 18px;
31 | }
32 | body {
33 | background: rgb(135,129,236);
34 | background: linear-gradient(192deg, rgba(135,129,236,1) 11%, rgba(9,9,121,1) 49%, rgba(0,116,139,1) 100%);
35 | font-family: Helvetica;
36 | color: white;
37 | text-align: center;
38 | }
39 | a {
40 | background-color: white;
41 | font-size: 15px;
42 | border-radius: 40px;
43 | padding: 10px;
44 | margin: 10px;
45 | display: block;
46 | text-align: center;
47 | color: #8781ec;
48 | font-weight: bold;
49 | text-decoration: none;
50 | }
51 |
--------------------------------------------------------------------------------
/AULA 6 - PLAYLIST:
--------------------------------------------------------------------------------
1 | -------------- HTML -----------------
2 |
3 |
4 |
5 |
6 |
7 |
8 | Player de Streaming
9 |
10 |
11 |
12 |
13 |
30 |
31 |
32 |
33 | --------------------- CSS ----------------------
34 |
35 | body {
36 | font-family: Arial, sans-serif;
37 | margin: 0;
38 | padding: 0;
39 | background-image: url("https://cvv.org.br/wp-content/uploads/2015/12/ladygagadivulgacao-1.jpg");
40 | background-size: cover;
41 | background-position: center;
42 | color: #fff;
43 | }
44 |
45 | .container {
46 | max-width: 800px;
47 | margin: 0 auto;
48 | padding: 20px;
49 | background-color: rgba(0, 0, 0, 0.7);
50 | border-radius: 10px;
51 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
52 | }
53 |
54 | header {
55 | margin-bottom: 20px;
56 | }
57 |
58 | .artist-photo {
59 | width: 35%;
60 | height: auto;
61 | border-radius: 10px;
62 | margin-bottom: 10px;
63 | }
64 |
65 | .top {
66 | margin-bottom: 10px;
67 | font-size: 1.2rem;
68 | text-decoration: none;
69 | color: white;
70 | transition: color 0.3s;
71 | }
72 | .top :hover {
73 | color: #1ed760;
74 | }
75 | .music-list {
76 | list-style: none;
77 | padding: 8px;
78 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
79 | background-color: rgba(0, 0, 0, 0.5);
80 | border-radius: 10px;
81 | }
82 |
83 | .music-list li {
84 | margin: 8px 0px 3px 8px;
85 | }
86 |
87 | .music-list a {
88 | text-decoration: none;
89 | color: white;
90 | font-size: 1.2rem;
91 | transition: color 0.3s;
92 | }
93 |
94 | .music-list a:hover {
95 | color: #1ed760;
96 | }
97 |
98 | .music-list i {
99 | margin-right: 10px;
100 | }
101 |
102 |
103 |
--------------------------------------------------------------------------------
/AULA1-HTML-basicform.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | SITE TESTE
6 |
7 |
8 |
9 | OLÁ PESSOAS DO 8º ANO
10 | MEU NOME É TIO RHALL
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/AULA2-HTML-basicform.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | FORMULARIO DE CADASTRO
7 |
8 |
9 |
10 |
11 | CADASTRE-SE
12 |
13 |
14 | PREENCHA COM ATENÇÃO
15 | NOME:
16 |
17 |
18 |
19 | DADOS DE LOGIN
20 | E-MAIL:
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/AULA3-HTMLreverseengineering.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
30 |
31 |
32 | OURO & VOCÊ
33 |
1508 |
1509 |
1528 |
1529 |
1530 |
1531 |
1532 |
1533 |
1534 |
1535 |
1536 |
1537 |
1538 |
1539 |
1540 |
1541 |
1542 |
1543 |
1544 |
1545 |
1546 |
1547 |
1548 |
1549 |
1550 |
1551 |
1552 |
1553 |
1554 |
1555 |
1556 |
1557 |
1558 |
1561 |
1564 |
1567 |
1568 |
1569 |
1572 |
1575 |
1578 |
1579 |
1580 |
1583 |
1586 |
1589 |
1590 |
1591 |
1594 |
1597 |
1600 |
1601 |
1602 |
1603 |
1604 |
1605 |
1606 |
1607 |
1608 |
1609 |
1610 |
1611 |
Pesquisar o site
1612 |
1613 |
1614 |
1615 |
1616 |
1617 |
1618 |
1619 |
1620 |
1621 |
1622 |
1623 |
1624 |
1627 |
1628 |
1629 |
1630 |
1631 |
1632 |
1633 |
1644 |
1645 |
1646 |
1647 |
1648 |
1649 |
Pular para o conteúdo principal
1650 |
1651 |
1652 |
1653 |
1654 |
Pular para a navegação
1655 |
1656 |
1657 |
1658 |
1659 |
1660 |
1661 |
1725 |
1726 |
1727 |
1730 |
1731 |
1732 |
1737 |
1738 |
1739 |
1740 |
1741 |
1742 |
1743 |
1744 |
fortaleça seus votos de amor com ouro
1745 |
1746 |
1747 |
1748 |
1749 |
1750 |
1751 |
1752 |
1757 |
1758 |
1759 |
1760 |
1761 |
1762 |
1763 |
1764 |
1765 |
1766 |
1767 |
1768 |
1769 |
1770 |
1771 |
1772 |
1773 |
1774 |
1775 |
1776 |
1777 |
1778 |
1779 |
10% DE DESCONTO EM SUA PRIMEIRA COMPRA
1780 |
1781 |
1782 |
1783 |
1784 |
1785 |
1786 |
1787 |
1788 |
1789 |
1790 |
1791 |
1792 |
1793 |
1794 |
1809 |
1810 |
1811 |
1812 |
1813 |
1814 |
1815 |
1816 |
1817 |
1818 |
1819 |
1820 |
1821 |
1822 |
1823 |
1824 |
1825 |
1826 |
1827 |
ALIANÇAS DE CASAMENTO
1828 |
1829 |
1830 |
1831 |
1832 |
1833 |
1834 |
1835 |
1836 |
1837 |
1838 |
a partir de R$1.999,00 ou 12x sem juros no cartão.
1839 |
1840 |
1841 |
1842 |
1843 |
1844 |
1845 |
1846 |
1847 |
1848 |
1849 |
1850 |
1851 |
1852 |
1853 |
1854 |
1855 |
1856 |
1857 |
1858 |
1859 |
1860 |
ENTREGA GRÁTIS PARA TODO O BRASIL
1861 |
1862 |
1863 |
1864 |
1865 |
1866 |
1867 |
1868 |
1869 |
1870 |
1871 |
1872 |
1873 |
1874 |
1875 |
1899 |
1904 |
1919 |
1920 |
1921 |
1922 |
1923 |
1924 |
1925 |
1926 |
1927 |
1928 |
1929 |
1930 |
1931 |
1932 |
1933 |
ALIANÇAS DE OURO, OURO BRANCO E OURO ROSÊ
1934 |
1935 |
1936 |
1937 |
1938 |
1939 |
1940 |
1941 |
1942 |
1943 |
1944 |
1945 |
1946 |
1947 |
1948 |
1949 |
1950 |
1951 |
1972 |
1973 |
1974 |
1975 |
1976 |
a partir de R$ 999,00 ou 12x sem juros no cartão.
1977 |
1978 |
1979 |
1980 |
1981 |
1982 |
1983 |
1984 |
1999 |
2004 |
2005 |
2006 |
2007 |
2041 |
2042 |
2043 |
2044 |
2045 |
2046 |
2047 |
2048 |
2057 |
2058 |
2059 |
2060 |
2061 |
2062 |
2074 |
2075 |
2087 |
2088 |
2089 |
2090 |
2091 |
2092 |
2093 |
2094 |
2095 |
2096 |
2108 |
2109 |
2110 |
2111 |
ou 12x sem juros no cartão.
2119 |
2120 |
2121 |
2122 |
2123 |
2124 |
2125 |
2126 |
2127 |
2128 |
2129 |
2130 |
2131 |
2140 |
2161 |
2162 |
2163 |
2164 |
2165 |
2166 |
2178 |
2179 |
2180 |
2181 |
ou 12x sem juros no cartão.
2189 |
2190 |
2191 |
2192 |
2193 |
2194 |
2195 |
2196 |
2197 |
2198 |
2199 |
2200 |
2201 |
2210 |
2231 |
2232 |
2233 |
2234 |
2235 |
2236 |
2248 |
2249 |
2250 |
2251 |
ou 12x sem juros no cartão.
2259 |
2260 |
2261 |
2262 |
2263 |
2264 |
2265 |
2266 |
2267 |
2268 |
2269 |
2270 |
2271 |
2272 |
2273 |
2274 |
2275 |
2276 |
2277 |
2278 |
2279 |
2280 |
2281 |
2282 |
2283 |
2284 |
2285 |
2286 |
2287 |
2288 |
2289 |
2290 |
2291 |
Página atualizada
2292 |
2293 |
2294 |
Sites do Google
2295 |
2296 |
2297 |
Denunciar abuso
2298 |
2299 |
2300 |
2301 |
2302 |
2303 |
2304 |
2305 |
2306 |
2307 |
2308 |
2309 |
2310 |
2311 |
2312 |
2313 |
2314 |
2315 |
2316 |
2317 |
2320 |
2321 |
2322 |
2323 |
2324 |
2325 |
2326 |
2327 |
2328 |
--------------------------------------------------------------------------------
/Aula 7 - Formularios com HTML:
--------------------------------------------------------------------------------
1 | ------------HTML--------------
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Cadastro - Rede Social
10 |
11 |
12 |
13 |
14 |
31 |
32 |
33 |
34 |
35 | ---------------css-----------------
36 |
37 | * {
38 | margin: 0;
39 | padding: 0;
40 | box-sizing: border-box;
41 | font-family: Arial, sans-serif;
42 | }
43 |
44 | body {
45 | background-image: url("#todo");
46 | background-size: cover;
47 | background-position: center;
48 | display: flex;
49 | justify-content: center;
50 | align-items: center;
51 | height: 125vh;
52 | }
53 |
54 | .container {
55 | background: rgba(255, 255, 255, 0.6);
56 | padding: 45px;
57 | border-radius: 25px;
58 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
59 | }
60 |
61 | .form-container {
62 | text-align: center;
63 | margin-bottom: 20px;
64 | font-size: 22px;
65 | color: #333;
66 | }
67 | h6 {
68 | text-align: center;
69 | color: #333;
70 | margin-bottom: 10px;
71 | }
72 | h4 {
73 | text-align: center;
74 | margin-bottom: 10px;
75 | color: #333;
76 | }
77 | form {
78 | display: flex;
79 | flex-direction: column;
80 | }
81 |
82 | form input {
83 | padding: 10px;
84 | margin-bottom: 15px;
85 | border: 1px solid #ddd;
86 | border-radius: 30px;
87 | font-size: 16px;
88 | }
89 |
90 | form button {
91 | padding: 10px;
92 | border: none;
93 | border-radius: 30px;
94 | background-color: #4caf50;
95 | color: white;
96 | font-size: 16px;
97 | cursor: pointer;
98 | transition: background-color 0.3s ease;
99 | }
100 |
101 | form button:hover {
102 | background-color: #todo;
103 | }
104 |
105 | .social-login {
106 | display: flex;
107 | flex-direction: column;
108 | margin-top: 20px;
109 | }
110 |
111 | .social-login button {
112 | padding: 10px;
113 | margin-top: 10px;
114 | border: none;
115 | border-radius: 30px;
116 | font-size: 16px;
117 | cursor: pointer;
118 | transition: background-color 0.3s ease;
119 | }
120 |
121 | .social-login .google {
122 | background-color: #todo;
123 | color: #todo;
124 | }
125 |
126 | .social-login .facebook {
127 | background-color: #todo;
128 | color: #todo;
129 | }
130 |
131 | .social-login .google:hover {
132 | background-color: #todo;
133 | }
134 |
135 | .social-login .facebook:hover {
136 | background-color: #todo;
137 | }
138 |
--------------------------------------------------------------------------------
/Aula 9 - Intro ao Java Script:
--------------------------------------------------------------------------------
1 | ------------- HTML ---------------
2 |
3 |
4 |
5 |
6 |
7 |
8 | Introdução ao JavaScript
9 |
10 |
11 |
12 |
21 |
22 |
23 | O que é JavaScript?
24 | JavaScript é uma linguagem de programação que permite adicionar interatividade e comportamento dinâmico às páginas web. Ela é usada em milhões de sites para criar menus interativos, atualizar conteúdos automaticamente, criar animações, validar formulários, e muito mais.
25 | Quando um usuário interage com um site (como clicar em botões, preencher formulários ou rolar a página), o JavaScript pode reagir a essas ações, tornando a experiência mais rica e interativa.
26 | Exemplo de Uso
27 | Clique no botão abaixo para ver um exemplo simples de como o JavaScript pode alterar o conteúdo de uma página em tempo real:
28 | Clique Aqui!
29 | Este texto será alterado quando você clicar no botão.
30 |
35 |
36 |
37 |
69 |
70 | Exemplos
71 | Clique para ver um exemplo
72 |
77 |
78 |
79 |
87 |
88 |
89 |
90 |
91 | --------------------- CSS -----------------------
92 | body {
93 |
94 | font-family: Arial, sans-serif;
95 |
96 | margin: 0;
97 |
98 | padding: 0;
99 |
100 | background-color: #f4f4f4;
101 |
102 | }
103 |
104 | header {
105 |
106 | background-color: #333;
107 |
108 | color: white;
109 |
110 | padding: 10px;
111 |
112 | text-align: center;
113 |
114 | }
115 |
116 | nav a {
117 |
118 | color: white;
119 |
120 | padding: 10px;
121 |
122 | text-decoration: none;
123 |
124 | display: inline-block;
125 |
126 | }
127 |
128 | section {
129 |
130 | margin: 20px;
131 |
132 | padding: 20px;
133 |
134 | background-color: white;
135 |
136 | border-radius: 5px;
137 |
138 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
139 |
140 | }
141 |
142 | footer {
143 |
144 | text-align: center;
145 |
146 | padding: 10px;
147 |
148 | background-color: #333;
149 |
150 | color: white;
151 |
152 | position: fixed;
153 |
154 | width: 100%;
155 |
156 | bottom: 0;
157 |
158 | }
159 |
160 | ------------------------- JS ---------------------------------
161 |
162 | document.getElementById("contactForm").addEventListener("submit", function(event) {
163 |
164 | event.preventDefault();
165 |
166 | alert("Formulário enviado com sucesso!");
167 |
168 | });
169 |
--------------------------------------------------------------------------------
/Aula4-USODEIMAGENS.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | FORMULARIO DE CADASTRO
7 |
8 |
9 |
10 |
11 | CADASTRE-SE
12 |
13 |
14 | PREENCHA COM ATENÇÃO
15 | NOME:
16 |
17 |
18 |
19 | DADOS DE LOGIN
20 | E-MAIL:
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | # **Olá, eu sou Rhaldney Lima!** 👋
4 |
5 |
6 | ### 🚀 **Sobre mim**
7 | ##### 👀 I’m interested in games, psychology, science, technology, art, culture, educacion, digital fabrication, maker school, music and design.
8 | ##### 🌱 I’m currently learning IA for developers, Phyton, HTML 5, CSS, JS, Git and GitHub.
9 | ##### 💞️ I’m looking to collaborate on projects didactics for educacion.
10 | ##### 📫 How to reach me? [](https://www.linkedin.com/in/rhaldneylima/) and [](https://www.instagram.com/rhalldney/)
11 | ##### 😄 Pronouns: He/Him and She/Her.
12 | ##### ⚡ Fun fact: I like sleep and dance.
13 | ---
14 | ### 🛠 **Habilidades**
15 | 
16 | ---
17 | ### 🌟 **Tio Rhall GitHub Stats**
18 | 
19 | ---
20 | ### 📂 **REPOSITÓRIOS**
21 | [](https://github.com/tiorhall/tiorhall)
22 | ---
23 |
--------------------------------------------------------------------------------