230406/PetLink
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
230406
2026-03-10 16:38:34 +00:00
commit 53061b2253
4 changed files with 184 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
main Normal file
View File

37
website/home.html Normal file
View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PetLink - Bem-vindo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>PetLink</h1>
<nav>
<a href="home.html">Início</a>
<a href="index.html#adocao">Adote um Animal</a>
<a href="index.html#doacao">Doe para um Canil</a>
</nav>
</header>
<main>
<section>
<h2>Bem-vindo ao PetLink!</h2>
<p>O PetLink conecta pessoas que querem adotar animais com canis e protetores, além de facilitar a doação de bens essenciais para os animais.</p>
<ul>
<li>Veja animais disponíveis para adoção.</li>
<li>Doe alimentos, brinquedos, cobertores e outros itens para canis.</li>
<li>Ajude a transformar vidas!</li>
</ul>
<div style="margin-top:2rem;">
<a href="index.html#adocao" class="btn">Quero Adotar</a>
<a href="index.html#doacao" class="btn">Quero Doar</a>
</div>
</section>
</main>
<footer>
<p>&copy; 2026 PetLink</p>
</footer>
</body>
</html>

56
website/index.html Normal file
View File

@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PetLink - Adoção e Doação</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>PetLink</h1>
<nav>
<a href="home.html">Início</a>
<a href="#adocao">Adote um Animal</a>
<a href="#doacao">Doe para um Canil</a>
</nav>
</header>
<main>
<section id="adocao">
<h2>Adote um Animal</h2>
<p>Veja alguns animais disponíveis para adoção:</p>
<div class="animais-lista">
<!-- Exemplos de animais -->
<div class="animal">
<img src="https://images.unsplash.com/photo-1518717758536-85ae29035b6d?auto=format&fit=facearea&w=300&h=300" alt="Cachorro para adoção">
<h3>Rex</h3>
<p>Idade: 2 anos<br>Raça: SRD<br>Personalidade: Brincalhão</p>
<button>Quero Adotar</button>
</div>
<div class="animal">
<img src="https://images.unsplash.com/photo-1518715308788-3005759c41da?auto=format&fit=facearea&w=300&h=300" alt="Gato para adoção">
<h3>Mia</h3>
<p>Idade: 1 ano<br>Raça: SRD<br>Personalidade: Carinhosa</p>
<button>Quero Adotar</button>
</div>
</div>
</section>
<section id="doacao">
<h2>Doe para um Canil</h2>
<p>Ajude os canis doando alimentos, cobertores, brinquedos e outros itens essenciais.</p>
<form class="form-doacao">
<label for="nome">Seu nome:</label>
<input type="text" id="nome" name="nome" required>
<label for="item">Item para doação:</label>
<input type="text" id="item" name="item" required>
<label for="quantidade">Quantidade:</label>
<input type="number" id="quantidade" name="quantidade" min="1" required>
<button type="submit">Quero Doar</button>
</form>
</section>
</main>
<footer>
<p>&copy; 2026 PetLink</p>
</footer>
</body>
</html>

91
website/style.css Normal file
View File

@@ -0,0 +1,91 @@
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #f7f7f7;
color: #222;
}
header {
background: #4caf50;
color: white;
padding: 1.5rem 0;
text-align: center;
}
nav a {
color: white;
margin: 0 1rem;
text-decoration: none;
font-weight: bold;
}
main {
max-width: 900px;
margin: 2rem auto;
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
section {
margin-bottom: 2.5rem;
}
.animais-lista {
display: flex;
gap: 2rem;
flex-wrap: wrap;
}
.animal {
background: #e8f5e9;
border-radius: 8px;
padding: 1rem;
width: 220px;
text-align: center;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.animal img {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 0.5rem;
}
.animal button {
background: #388e3c;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
margin-top: 0.5rem;
}
.animal button:hover {
background: #2e7031;
}
.form-doacao {
display: flex;
flex-direction: column;
gap: 0.7rem;
max-width: 350px;
}
.form-doacao input, .form-doacao button {
padding: 0.5rem;
border-radius: 4px;
border: 1px solid #ccc;
}
.form-doacao button {
background: #4caf50;
color: white;
border: none;
font-weight: bold;
cursor: pointer;
}
.form-doacao button:hover {
background: #388e3c;
}
footer {
text-align: center;
padding: 1rem 0;
background: #333;
color: white;
margin-top: 2rem;
border-radius: 0 0 8px 8px;
}