Skip to content

Commit

Permalink
Merge pull request #6 from Jovens-do-futuro/dev-pedro
Browse files Browse the repository at this point in the history 
feat: componentes header & footer
  • Loading branch information
@luizbrito6
luizbrito6 authored May 21, 2024
2 parents 41fcf28 + d509a28 commit c555f35
Show file tree
Hide file tree
Showing 15 changed files with 205 additions and 42 deletions.
Binary file added assets/logo.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions components/footer.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<footer>
<p>Copyright &copy; 2022. Todos os direitos reservados.</p>
</footer>
23 changes: 23 additions & 0 deletions components/header.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<header>
<nav>
<ul>
<li>
<a href="">
<img
src="../assets/logo.jpeg"
alt="Logo da Associação Jovens do Futuro"
/>
</a>
</li>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</nav>
</header>
47 changes: 47 additions & 0 deletions global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
:root {
--white: #f3f3f3;
--black: #333;
--blue: #007bff;
}

body {
Expand All @@ -23,3 +24,49 @@ body {
color: var(--white);
}
}

footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 1rem;
text-align: center;
background-color: var(--blue);
color: var(--white);
}

header {
padding: 1rem 0rem;
text-align: center;
background-color: var(--blue);
color: var(--white);

ul {
display: flex;
list-style: none;
justify-content: center;
padding: 0;
}

li {
display: flex;
align-items: center;
margin: 0 1rem;
}

a {
color: var(--white);
text-decoration: none;
}

nav {
background-color: var(--black);
}

img {
width: 3rem;
margin-right: 0.5rem;
border-radius: 0.2rem;
}
}
30 changes: 18 additions & 12 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Associação Jovens do Futuro</title>
<link rel="stylesheet" href="./pages/home/style.css">
<link rel="stylesheet" href="./global.css">
</head>
<body>

</body>
</html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Associação Jovens do Futuro</title>

<link rel="stylesheet" href="./pages/home/style.css" />
<link rel="stylesheet" href="./global.css" />

<script src="scripts/loaders/header.js" type="module" defer></script>
<script src="scripts/loaders/footer.js" type="module" defer></script>
</head>
<body>
<header></header>

<footer></footer>
</body>
</html>
27 changes: 16 additions & 11 deletions pages/contato/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contatos</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="../../global.css">
</head>
<body>

</body>
</html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contatos</title>
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="../../global.css" />

<script src="../../scripts/loaders/header.js" type="module" defer></script>
<script src="../../scripts/loaders/footer.js" type="module" defer></script>
</head>
<body>
<header></header>

<footer></footer>
</body>
</html>
27 changes: 16 additions & 11 deletions pages/doacoes/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Doações</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="../../global.css">
</head>
<body>

</body>
</html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Doações</title>
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="../../global.css" />

<script src="../../scripts/loaders/header.js" type="module" defer></script>
<script src="../../scripts/loaders/footer.js" type="module" defer></script>
</head>
<body>
<header></header>

<footer></footer>
</body>
</html>
Empty file removed pages/home/style.css
View file
Empty file.
14 changes: 11 additions & 3 deletions pages/servicos/CCA/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,15 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Centro de Crianças e Adolescentes</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="../../../global.css"> </head>
<body></body>
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="../../../global.css" />

<script src="../../scripts/loaders/header.js" type="module" defer></script>
<script src="../../scripts/loaders/footer.js" type="module" defer></script>
</head>
<body>
<header></header>

<footer></footer>
</body>
</html>
9 changes: 8 additions & 1 deletion pages/servicos/CEI/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Centro de Educação Infantil</title>
<link rel="stylesheet" href="style.css" />

<script src="../../scripts/loaders/header.js" type="module" defer></script>
<script src="../../scripts/loaders/footer.js" type="module" defer></script>
</head>
<body></body>
<body>
<header></header>

<footer></footer>
</body>
</html>
9 changes: 8 additions & 1 deletion pages/servicos/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,13 @@
<title>Serviços</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="../../../global.css"> </head>

<script src="../../scripts/loaders/header.js" type="module" defer></script>
<script src="../../scripts/loaders/footer.js" type="module" defer></script>
</head>
<body></body>
<body>
<header></header>

<footer></footer>
</body>
</html>
12 changes: 9 additions & 3 deletions pages/sobre/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,15 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sobre</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="../../global.css"> </head>
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="../../global.css" />

<script src="../../scripts/loaders/header.js" type="module" defer></script>
<script src="../../scripts/loaders/footer.js" type="module" defer></script>
</head>
<body>

<header></header>

<footer></footer>
</body>
</html>
13 changes: 13 additions & 0 deletions scripts/loaders/footer.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import loader from './index.js'

function loadFooter() {
const url = '../../components/footer.html'

loader(url, function (response) {
const footer = document.querySelector('footer')

footer.innerHTML = response
})
}

loadFooter()
13 changes: 13 additions & 0 deletions scripts/loaders/header.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import loader from './index.js'

function loadHeader() {
const url = '../../components/header.html'

loader(url, function (response) {
const header = document.querySelector('header')

header.innerHTML = response
})
}

loadHeader()
20 changes: 20 additions & 0 deletions scripts/loaders/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
export default async (url, callback) => {
try {
const response = await fetch(url);

const data = await response.text();

if (!response.ok) {
throw new Error('Erro ao carregar o arquivo');
}

if (!data) {
throw new Error('Arquivo vazio');
}

callback(data);
} catch (error) {
console.error('Erro:', error);
callback('');
}
}

0 comments on commit c555f35

Please sign in to comment.