26 | 
27 |
30 |
34 |
27 | Boas-vindas!
28 |Que tal mudar sua vida adotando seu novo melhor amigo? Vem com a gente!
29 |
35 | 
36 |
37 |
36 | Semana 2 - Adição de responsividade as telas, para Ipad e Desktop
15 | Semana 3 e 4 - Validação com expressões regulares, redirecionamento de links e autenticação de senha/confirmaçao
16 |
17 |
18 |
19 | Aplicação do Projeto
20 | O projeto teve como objetivo a prática de HTML,CSS e JavaScript, com uma proposta que se assemelhe a uma rotina de trabalho, melhorando a vivência em ambiente de trabalho e costume com prazos e responsabilidades
21 |
22 |
23 |
24 | Status do Projeto
25 | :construction: Projeto em Construção :construction:
26 | Front-End :white_check_mark:
27 |
28 |
29 |
30 |
31 | Link do Projeto
32 | https://adopet-front-end.vercel.app/
33 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | Adopet │ Seja Bem-vindo
15 |
16 |
17 |
18 |
19 |
20 | 
21 | 
22 |
23 |
24 |
25 |
38 |
41 |
42 |
--------------------------------------------------------------------------------
/css/contato.css:
--------------------------------------------------------------------------------
1 | body{
2 | position: relative;
3 | min-height: 100vh;
4 | }
5 | .contato__texto{
6 | padding: 0 50px;
7 | text-align: center;
8 | margin: 100px auto 50px auto;
9 | }
10 | .contato__formulario{
11 | background-color: var(--cinza-claro);
12 | width: 86.66%;
13 | margin: 0 auto 20px auto;
14 | display: flex;
15 | flex-direction: column;
16 | padding: 10px;
17 | border-radius: 10px;
18 | }
19 |
20 | .contato__titulo:first-child{
21 | margin-top: 30px;
22 | }
23 | .contato__titulo{
24 | font-weight: 600;
25 | margin: 15px 5%;
26 | }
27 |
28 | .contato__campo{
29 | box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
30 | width: 90%;
31 | height: 48px;
32 | padding: 10px;
33 | border-radius: 6px;
34 | border: none;
35 | margin: 0 auto;
36 | }
37 | .contato__campo::placeholder{
38 | font-size: 14px;
39 | color: var(--cinza-medio);
40 | }
41 |
42 | .contato__mensagem{
43 | width: 90%;
44 | height: 172px;
45 | box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
46 | padding: 20px;
47 | border: none;
48 | margin: 0 auto;
49 | }
50 | .contato__mensagem::placeholder{
51 | font-size: 14px;
52 | color: var(--cinza-medio);
53 | }
54 |
55 | .contato__botao{
56 | background-color: var(--vermelho);
57 | color: #FFFFFF;
58 | border-radius: 6px;
59 | font-weight: 600;
60 | align-items: center;
61 | justify-content: center;
62 | width: 148px;
63 | height: 40px;
64 | margin: 30px auto;
65 | border: none;
66 | }
67 |
68 | @media screen and (min-width:768px) {
69 | body{
70 | height: 1200px;
71 | }
72 | .contato__texto{
73 | margin-top: 200px;
74 | }
75 | .contato{
76 | background-image: url(/img/Lateral-direita-splash.png);
77 | background-position: right 0px top 150px;
78 | background-size: 100px;
79 | background-repeat: no-repeat;
80 | }
81 |
82 | .contato__formulario{
83 | width: 524px;
84 | }
85 |
86 | .contato__texto{
87 | font-size: 18px;
88 | width: 540px;
89 | }
90 |
91 | }
92 |
93 | @media screen and (min-width:1440px){
94 | .contato__formulario{
95 | width: 552px;
96 | }
97 | }
98 |
--------------------------------------------------------------------------------
/login.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Login │ Adopet
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | 
23 |
24 |
25 |
26 |
27 | 
28 | Já tem conta? Faça seu login:
29 |
30 |
41 |
42 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/css/perfil.css:
--------------------------------------------------------------------------------
1 | body{
2 | position: relative;
3 | min-height: 100vh;
4 | }
5 | .perfil__formulario{
6 | width: 86.66%;
7 | height: 825px;
8 | background: var(--cinza-claro);
9 | border-radius: 10px;
10 | margin: 40px auto 0 auto;
11 | display: flex;
12 | flex-direction: column;
13 | }
14 |
15 | .perfil__perfil{
16 | color: var(--cinza-escuro);
17 | font-size: 21px;
18 | font-weight: 600;
19 | line-height: 24px;
20 | margin: 30px auto 10px auto;
21 | }
22 | .perfil__foto{
23 | display: flex;
24 | flex-direction: column;
25 | align-items: center;
26 | }
27 |
28 | .perfil__usuario{
29 | width: 80px;
30 | margin-bottom: 10px;
31 | }
32 |
33 | .perfil__texto{
34 | text-align: center;
35 | padding: 0 60px;
36 | margin-top: 80px;
37 | }
38 | .perfil__titulo--foto{
39 | font-weight: 600;
40 | margin: 10px 5% 0 5%;
41 | }
42 | .perfil__titulo{
43 | font-weight: 600;
44 | margin: 15px 5%;
45 | }
46 |
47 | .perfil__dados{
48 | display: flex;
49 | flex-direction: column;
50 | }
51 |
52 | .perfil__campo{
53 | box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
54 | width: 90%;
55 | padding: 12px;
56 | border-radius: 6px;
57 | border: none;
58 | margin: 0 auto;
59 | }
60 |
61 | .perfil__mensagem{
62 | width: 90%;
63 | height: 172px;
64 | box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
65 | padding: 20px;
66 | border: none;
67 | margin: 0 auto;
68 | }
69 |
70 | .perfil__botao{
71 | background-color: var(--vermelho);
72 | color: #FFFFFF;
73 | border-radius: 6px;
74 | font-weight: 600;
75 | align-items: center;
76 | justify-content: center;
77 | width: 148px;
78 | height: 40px;
79 | border: none;
80 | margin: 35px auto 0 auto;
81 | }
82 | @media screen and (min-width:768px) {
83 | body{
84 | height: 1255px;
85 | }
86 | .perfil{
87 | background-image: url(/img/Lateral-direita-splash.png);
88 | background-position: right 0px top 150px;
89 | background-size: 100px;
90 | background-repeat: no-repeat;
91 | }
92 | .perfil__formulario{
93 | height: 756px;
94 | width: 552px;
95 | }
96 |
97 | .perfil__texto{
98 | margin: 200px auto 0 auto;
99 | font-size: 18px;
100 | width: 620px;
101 | }
102 |
103 | .perfil__foto{
104 | margin-bottom: 0px;
105 | }
106 | .perfil__mensagem{
107 | height: 104px;
108 | }
109 | }
--------------------------------------------------------------------------------
/contato.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Mensagem │ Contato
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 
20 |
21 |
22 |
23 |
24 |
25 |
26 | 
27 |
28 |
29 |
30 | Envie uma mensagem para a pessoa ou instituição que está cuidando do animal:
31 |
42 |
43 |
44 |
45 |
48 |
49 |
--------------------------------------------------------------------------------
/css/inicial.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: var(--azul);
3 | background-image: url(/img/Superior-Home-Splash.png);
4 | background-repeat: no-repeat;
5 | background-size: 360px;
6 | color: #FFFFFF;
7 | position: relative;
8 | min-height: 100vh;
9 | height: 917px;
10 |
11 | }
12 |
13 | .home {
14 | display: flex;
15 | flex-direction: column;
16 | justify-content: center;
17 | align-items: center;
18 | margin-top: 150px;
19 | background-image: url('/img/Lateral-home-splash.png');
20 | background-repeat: no-repeat;
21 | background-position: top -15px right -20px;
22 | background-size: 100px;
23 |
24 |
25 | }
26 |
27 | .home__conteudo {
28 | display: flex;
29 | flex-direction: column;
30 | align-items: center;
31 | justify-content: center;
32 | }
33 |
34 | .home__logo {
35 | margin-bottom: 1.5rem;
36 | width: 190px;
37 | }
38 |
39 | .home__boasvindas {
40 | font-size: 26px;
41 | font-weight: 500;
42 | line-height: 48px;
43 | font-family: 'IBM Plex Sans', sans-serif;
44 | align-items: center;
45 | }
46 |
47 | .home__texto {
48 | width: 69%;
49 | text-align: center;
50 | padding-left: 1em;
51 | padding-right: 1em;
52 | margin-bottom: 1.5em;
53 | }
54 |
55 | .home__botoes {
56 | display: flex;
57 | flex-direction: column;
58 | justify-content: center;
59 | align-items: center;
60 | filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.25));
61 | margin-bottom: 150px;
62 |
63 | }
64 |
65 | .home__botao {
66 | background-color: var(--vermelho);
67 | color: #FFFFFF;
68 | border-radius: 6px;
69 | height: 40px;
70 | width: 180px;
71 | font-weight: 600;
72 | font-family: var(--letra-padrao);
73 | border: 1px solid var(--azul);
74 | margin-bottom: 1em;
75 | }
76 |
77 | .home__imagem {
78 | width: 20%;
79 | max-width: 250px;
80 | bottom: 80px;
81 | left: 40%;
82 | position: absolute;
83 |
84 | }
85 |
86 | @media screen and (min-width:768px) {
87 | body {
88 | background-size: 550px;
89 | }
90 |
91 | .home__texto {
92 | font-size: 18px;
93 | line-height: 26px;
94 | }
95 |
96 | .home__logo {
97 | width: 250px;
98 | margin-bottom: 0.5rem;
99 | }
100 |
101 | .home__botao {
102 | font-size: 18px;
103 | width: 250px;
104 | }
105 |
106 | .home {
107 | margin-top: 130px;
108 | }
109 |
110 | .home__boasvindas {
111 | font-size: 28px;
112 | }
113 | }
114 |
--------------------------------------------------------------------------------
/css/home.css:
--------------------------------------------------------------------------------
1 | body{
2 | position: relative;
3 | height: 2296px;
4 | }
5 | .home__titulo{
6 | line-height: 20px;
7 | display: flex;
8 | justify-content: center;
9 | align-items: center;
10 | margin-top: 4.5em;
11 | padding-left: 5em;
12 | padding-right: 5em;
13 | text-align: center;
14 | margin-bottom: .5em;
15 | }
16 | .card{
17 | width: 360px;
18 | height: 196px;
19 | background-color: var(--cinza-claro);
20 | display: flex;
21 | padding: 1em;
22 | margin-bottom: 1.5em;
23 | position: relative;
24 |
25 |
26 | }
27 |
28 | .card__img{
29 | width: 50%;
30 | }
31 |
32 | .card__descricao{
33 | width: 50%;
34 | display: flex;
35 | flex-direction: column;
36 | margin-left: 1em;
37 | }
38 |
39 | .card__nome{
40 | font-weight: 600;
41 | display: flex;
42 | justify-content: flex-start;
43 | }
44 |
45 | .card__caracteristicas{
46 | color: var(--cinza-escuro);
47 | font-size: 14px;
48 | margin: 0 0;
49 | line-height: 20px;
50 | }
51 |
52 | .card__localizacao{
53 | font-size: 12px;
54 | color: var(--cinza-escuro);
55 | margin-top: 1em;
56 | }
57 | .card__contato{
58 | display: flex;
59 | width: 18px;
60 | align-items: center;
61 |
62 | }
63 | .card__contato-texto{
64 | min-width: 114px;
65 | flex-wrap: nowrap;
66 | font-size: 10px;
67 | line-height: 16px;
68 | color: var(--cinza-escuro);
69 | display: flex;
70 | justify-content: center;
71 | }
72 |
73 | .ultimo{
74 | margin-bottom: 6em;
75 | }
76 |
77 |
78 | @media screen and (min-width:768px) {
79 | body{
80 | background-size: 550px;
81 | height: 1550px;
82 | }
83 | .cadastro__logo{
84 | width: 252px;
85 | }
86 | .home__titulo{
87 | margin-top: 15rem;
88 | margin-bottom: 1rem;
89 | font-size: 18px;
90 | }
91 | .home{
92 | display: flex;
93 | flex-direction: column;
94 | justify-content: space-evenly;
95 | align-items: center;
96 | }
97 | .home__cards{
98 | display: flex;
99 | flex-wrap: wrap;
100 | gap: 10px;
101 | width: 730px;
102 | margin: 0 auto;
103 | }
104 |
105 | .card{
106 | margin-bottom: 0rem;
107 | width: 360px;
108 | }
109 |
110 | .card:last-child{
111 | justify-content: left;
112 | }
113 | .home__texto{
114 | font-size: 18px;
115 | }
116 | }
117 |
118 | @media screen and (min-width:1440px){
119 | body{
120 | height: 1200px;
121 | }
122 |
123 | .home__titulo{
124 | margin-top: 7rem;
125 | }
126 | .home__cards{
127 | width: 1200px;
128 | }
129 |
130 | .card{
131 | width: 363px;
132 | }
133 | }
--------------------------------------------------------------------------------
/Perfil.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | Perfil │ Adopet
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | 
26 |
27 |
28 |
29 | Esse é o perfil que aparece para responsáveis ou ONGs que recebem sua mensagem.
30 |
31 | Perfil
32 | Foto
33 |
34 |
35 | Clique na foto para editar
36 |
37 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
59 |
60 |
--------------------------------------------------------------------------------
/cadastro.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Cadastro │ Adopet
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | Ainda não tem cadastro?
29 | Então, antes de buscar seu melhor amigo, precisamos de alguns dados:
30 |
31 |
45 |
46 |
47 |
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/css/login.css:
--------------------------------------------------------------------------------
1 | body{
2 | background-image: url(/img/Superior-Home-Splash.png);
3 | background-repeat: no-repeat;
4 | background-size: 360px;
5 | position: relative;
6 | min-height: 100vh;
7 | }
8 |
9 | .login{
10 | display: flex;
11 | flex-direction: column;
12 | background-image: url(/img/Esquerda-Splash.png);
13 | background-repeat: no-repeat;
14 | background-position: left 0px top 320px;
15 | background-size: 75px;
16 | }
17 | .login__cabecalho{
18 | display: flex;
19 | flex-direction: column;
20 | margin-top: 100px;
21 | align-items: center;
22 | justify-content: center;
23 | }
24 |
25 | .cabecalho__patas{
26 | position: absolute;
27 | top:0;
28 | right: 0;
29 | }
30 |
31 | .login__logo{
32 | width: 142px;
33 | margin: 0em auto;
34 |
35 | }
36 |
37 | .login__cabecalho{
38 | display: flex;
39 | flex-direction: column;
40 | }
41 | .login__titulo{
42 | text-align: center;
43 | padding: 0 3em;
44 | margin-bottom: 0;
45 | margin-top: 2em;
46 | }
47 |
48 |
49 | .login__formulario{
50 | display: flex;
51 | flex-direction: column;
52 | width: 315px;
53 | justify-content: center;
54 | align-items: center;
55 | text-align: center;
56 | margin: 1em auto;
57 |
58 | }
59 |
60 | .login__formulario-titulo{
61 | justify-content: center;
62 | line-height: 24px;
63 | margin-bottom: 1em;
64 | color: var(--cinza-escuro);
65 | }
66 | .login__input{
67 | width: 100%;
68 | margin: 0 auto;
69 | align-items: center;
70 | justify-content: center;
71 | background: var(--cinza-claro);
72 | border-radius: 6px;
73 | box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
74 | height: 40px;
75 | margin-bottom: 2em;
76 | border: none;
77 | text-align: center;
78 | }
79 | .login__input:last-child{
80 | margin-bottom: 0;
81 | }
82 |
83 | .login__input::placeholder{
84 | font-size: 12px;
85 | text-align: center;
86 | color: var(--cinza-medio);
87 | }
88 |
89 | .visualizar::placeholder{
90 | background-image: url(/img/Vector.png);
91 | background-repeat: no-repeat;
92 | background-position: right 5px bottom -1px;
93 | }
94 |
95 |
96 | .login__botoes{
97 | display: flex;
98 | justify-content: center;
99 | margin-top: 0;
100 | flex-direction: column;
101 | align-items: center;
102 | margin-bottom: 100px;
103 | }
104 |
105 | .login__senha{
106 | color: var(--vermelho);
107 | text-decoration: underline;
108 | margin-bottom: 2em;
109 | font-size: 12px;
110 | }
111 | .login__botao{
112 | background-color: var(--vermelho);
113 | color: #FFFFFF;
114 | border-radius: 6px;
115 | height: 40px;
116 | width: 180px;
117 | font-weight: 600;
118 | font-family: var(--letra-padrao);
119 | border: 1px solid var(--azul);
120 | margin-bottom: 15em;
121 |
122 | }
123 | @media screen and (min-width:768px) {
124 | body{
125 | background-size: 550px;
126 | }
127 | .login__logo{
128 | margin-top: 50px;
129 | width: 252px;
130 | }
131 | .login{
132 | background-image: url(/img/Lateral-direita-splash.png);
133 | background-position: right 0px top 150px;
134 | background-size: 100px;
135 | }
136 |
137 | .login__titulo{
138 | font-size: 18px;
139 | }
140 | .login__input-ultimo::placeholder{
141 | font-size: 14px;
142 | }
143 | .login__botao{
144 | font-size: 18px;
145 | }
146 | }
147 |
148 | @media screen and (min-width:1440px){
149 | .login__formulario{
150 | width: 552px;
151 | }
152 | .senha{
153 | width: 362px;
154 | }
155 | .login__input::placeholder{
156 | font-size: 16px;
157 | }
158 | }
--------------------------------------------------------------------------------
/css/cadastro.css:
--------------------------------------------------------------------------------
1 | body{
2 | font-family: var(--letra-padrao);
3 | background-image: url(/img/Superior-Home-Splash.png);
4 | background-repeat: no-repeat;
5 | background-size: 360px;
6 | min-height:100vh;
7 | position:relative;
8 |
9 | }
10 |
11 | .cabecalho__patas{
12 | position: absolute;
13 | top:0;
14 | right: 0;
15 | }
16 | .cadastro{
17 | display: flex;
18 | flex-direction: column;
19 | background-image: url(/img/Esquerda-Splash.png);
20 | background-repeat: no-repeat;
21 | background-position: left 0px top 320px;
22 | flex:1;
23 | }
24 |
25 | .cadastro__cabecalho{
26 | display: flex;
27 | flex-direction: column;
28 | margin-top: 100px;
29 | align-items: center;
30 | justify-content: center;
31 | }
32 | .cadastro__logo{
33 | width: 143px;
34 | margin: 0em auto;
35 |
36 | }
37 | .cadastro__texto{
38 | text-align: center;
39 | padding: 0 3em;
40 | margin-bottom: 0;
41 | }
42 | .cadastro__formulario{
43 | display: flex;
44 | flex-direction: column;
45 | width: 300px;
46 | justify-content: center;
47 | align-items: center;
48 | text-align: center;
49 | margin: 2em auto;
50 |
51 | }
52 | .cadastro__formulario-titulo{
53 | justify-content: center;
54 | color: var(--cinza-escuro);
55 | line-height: 24px;
56 | }
57 | .cadastro__formulario-campo{
58 | width: 100%;
59 | margin: 0 auto;
60 | align-items: center;
61 | justify-content: center;
62 | background: var(--cinza-claro);
63 | border-radius: 6px;
64 | box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
65 | height: 40px;
66 | margin-bottom: 2em;
67 | border: none;
68 | text-align: center;
69 | }
70 |
71 | .cadastro__formulario-campo--senha{
72 | width: 100%;
73 | margin: 0 auto;
74 | align-items: center;
75 | justify-content: center;
76 | background: var(--cinza-claro);
77 | border-radius: 6px;
78 | box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
79 | height: 40px;
80 | margin-bottom: 2em;
81 | border: none;
82 | text-align: center;
83 | }
84 | .cadastro__formulario-campo--senha:last-child{
85 | margin-bottom:0;
86 | }
87 |
88 | .cadastro__formulario-campo::placeholder{
89 | font-size: 12px;
90 | text-align: center;
91 | color: var(--cinza-medio);
92 | }
93 | .cadastro__formulario-campo--senha::placeholder{
94 | font-size: 12px;
95 | text-align: center;
96 | color: var(--cinza-medio);
97 | }
98 | .visualizar::placeholder
99 | {
100 | background-image: url(/img/Vector.png);
101 | background-repeat: no-repeat;
102 | background-position: right 5px bottom -1px;
103 | }
104 | .cadastro__botoes{
105 | display: flex;
106 | justify-content: center;
107 | margin-top: 0;
108 | }
109 | .cadastro__botao{
110 | background-color: var(--vermelho);
111 | color: #FFFFFF;
112 | border-radius: 6px;
113 | height: 40px;
114 | width: 180px;
115 | font-weight: 600;
116 | font-family: var(--letra-padrao);
117 | border: 1px solid var(--azul);
118 | margin-bottom: 8em;
119 | }
120 |
121 | @media screen and (min-width:768px) {
122 | body{
123 | background-size: 550px;
124 | }
125 | .cadastro__logo{
126 | width: 252px;
127 | }
128 |
129 | .cadastro__cabecalho{
130 | margin-top: 150px;
131 | }
132 | .cadastro{
133 | background-image: url(/img/Lateral-direita-splash.png);
134 | background-position: right 0px top 200px;
135 | background-size: 100px;
136 | }
137 | .cadastro__texto{
138 | font-size: 18px;
139 | padding: 0 8em;
140 | }
141 |
142 | .cadastro__formulario-campo::placeholder{
143 | font-size: 14px;
144 | }
145 | }
146 |
147 | @media screen and (min-width:1440px){
148 | .cadastro__formulario{
149 | width: 552px;
150 | }
151 |
152 | .cadastro__formulario-campo--senha{
153 | width: 362px;
154 | }
155 | .cadastro__formulario-campo::placeholder{
156 | font-size: 16px;
157 | }
158 | }
--------------------------------------------------------------------------------
/home.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Pets para Adoçao │ Adopet
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | Olá! Veja os amigos disponíveis para adoção!
30 |
31 |
32 |
33 | 
34 |
35 | Dunga
36 | 2 anos
37 | Porte pequeno
38 | Calmo e educado
39 | Rio de Janeiro (RJ)
40 |
41 | 
42 | Falar com responsável
43 |
44 |
45 |
46 |
47 | 
48 |
49 | Felícia
50 | 3 meses
51 | Porte pequeno
52 | Ativa e carinhosa
53 | Nova Iguaçu (RJ)
54 |
55 |
56 | Falar com responsável
57 |
58 |
59 |
60 |
61 | 
62 |
63 | Sirius
64 | 6 meses
65 | Porte grande
66 | Ativo e educado
67 | Duque de Caxias (RJ)
68 |
69 |
70 | Falar com responsável
71 |
72 |
73 |
74 |
75 | 
76 |
77 | Fiona
78 | 3 anos
79 | Porte pequeno
80 | Calma e carinhosa
81 | São Gonçalo (RJ)
82 |
83 |
84 | Falar com responsável
85 |
86 |
87 |
88 |
89 | 
90 |
91 | Sid
92 | 8 meses
93 | Porte médio/grande
94 | Brincalhão e amável
95 | Rio de Janeiro (RJ)
96 |
97 |
98 | Falar com responsável
99 |
100 |
101 |
102 |
103 | 
104 |
105 | Yoda
106 | 1 ano
107 | Porte médio
108 | Ativo e carinhoso
109 | Nova Iguaçu (RJ)
110 |
111 |
112 | Falar com responsável
113 |
114 |
115 |
116 |
117 | 
118 |
119 | Lua
120 | 6 meses
121 | Porte médio
122 | Ativa e carinhosa
123 | Duque de Caxias (RJ)
124 |
125 |
126 | Falar com responsável
127 |
128 |
129 |
130 |
131 | 
132 |
133 | Amora
134 | 45 dias
135 | Porte grande
136 | Calma e carinhosa
137 | São Gonçalo (RJ)
138 |
139 |
140 | Falar com responsável
141 |
142 |
143 |
144 |
145 | 
146 |
147 | Zelda
148 | 5 meses
149 | Porte médio
150 | Ativa e amável
151 | Rio de Janeiro (RJ)
152 |
153 |
154 | Falar com responsável
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
166 |
167 |
--------------------------------------------------------------------------------
18 |
19 |
Aplicação do Projeto
20 | O projeto teve como objetivo a prática de HTML,CSS e JavaScript, com uma proposta que se assemelhe a uma rotina de trabalho, melhorando a vivência em ambiente de trabalho e costume com prazos e responsabilidades 21 | 22 |23 |
24 |
Status do Projeto
25 | :construction: Projeto em Construção :construction:26 | Front-End :white_check_mark:
27 | 28 | 29 |
30 |
31 |
Link do Projeto
32 | https://adopet-front-end.vercel.app/ 33 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
19 |
20 |
21 |
22 |
23 |
21 |
22 |
19 |
20 |
21 |
22 |
23 |
24 |
21 |
22 |
23 |
27 |
28 |
30 |
41 |
28 | Já tem conta? Faça seu login:
29 |
19 |
20 |
21 |
22 |
23 |
24 |
20 |
21 |
22 |
23 |
25 |
26 |
27 |
28 |
27 | Envie uma mensagem para a pessoa ou instituição que está cuidando do animal:
31 |
42 |
43 |
44 |
19 |
20 |
21 |
22 |
23 |
24 |
20 |
21 |
22 |
23 |
25 |
26 |
27 |
26 | Esse é o perfil que aparece para responsáveis ou ONGs que recebem sua mensagem.
30 | Perfil
32 | Foto
33 |
35 |
19 |
20 |
21 |
22 |
23 |
24 |
21 |
22 |
23 |
27 |
28 |
31 |
45 |
46 |
28 | Ainda não tem cadastro?
Então, antes de buscar seu melhor amigo, precisamos de alguns dados:
30 |
16 |
17 |
18 |
19 |
20 |
21 |
17 |
18 |
19 |
20 |
22 |
23 |
24 |
25 |
24 |
29 |
31 | Olá! Veja os amigos disponíveis para adoção!
30 |
33 |
34 |
46 |
34 |
35 |
42 |
45 | Dunga
36 |2 anos
37 |Porte pequeno
38 |Calmo e educado
39 |Rio de Janeiro (RJ)
40 | 41 |
42 | Falar com responsável
43 | 44 |
47 |
48 |
60 |
48 |
49 |
56 |
59 | Felícia
50 |3 meses
51 |Porte pequeno
52 |Ativa e carinhosa
53 |Nova Iguaçu (RJ)
54 | 55 |
56 | Falar com responsável
57 | 58 |
61 |
62 |
74 |
62 |
63 |
70 |
73 | Sirius
64 |6 meses
65 |Porte grande
66 |Ativo e educado
67 |Duque de Caxias (RJ)
68 | 69 |
70 | Falar com responsável
71 | 72 |
75 |
76 |
88 |
76 |
77 |
84 |
87 | Fiona
78 |3 anos
79 |Porte pequeno
80 |Calma e carinhosa
81 |São Gonçalo (RJ)
82 | 83 |
84 | Falar com responsável
85 | 86 |
89 |
90 |
102 |
90 |
91 |
98 |
101 | Sid
92 |8 meses
93 |Porte médio/grande
94 |Brincalhão e amável
95 |Rio de Janeiro (RJ)
96 | 97 |
98 | Falar com responsável
99 | 100 |
103 |
104 |
116 |
104 |
105 |
112 |
115 | Yoda
106 |1 ano
107 |Porte médio
108 |Ativo e carinhoso
109 |Nova Iguaçu (RJ)
110 | 111 |
112 | Falar com responsável
113 | 114 |
117 |
118 |
130 |
118 |
119 |
126 |
129 | Lua
120 |6 meses
121 |Porte médio
122 |Ativa e carinhosa
123 |Duque de Caxias (RJ)
124 | 125 |
126 | Falar com responsável
127 | 128 |
131 |
132 |
144 |
132 |
133 |
140 |
143 | Amora
134 |45 dias
135 |Porte grande
136 |Calma e carinhosa
137 |São Gonçalo (RJ)
138 | 139 |
140 | Falar com responsável
141 | 142 |
145 |
146 |
158 |
146 |
147 |
154 |
157 | Zelda
148 |5 meses
149 |Porte médio
150 |Ativa e amável
151 |Rio de Janeiro (RJ)
152 | 153 |
154 | Falar com responsável
155 | 156 |