Ajuda em código HTML
08/05/2024
0
Bom dia a todos.
Sou totalmente iniciante em HTML e tive que fazer um código para um site de onde trabalho, o código ta aí abaixo. Só que gostaria de incluir bordas internas na tabela que contem as parcerias, alguém pode me ajudar?
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
section {
display: flex;
align-items: normal;
justify-content: center;
min-height: 100vh;
}
#container {
background-color: #f0f8ff;
width: 100%;
padding: 10px;
border-radius: 8px;
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.tab-buttons {
display: flex;
gap: 6px;
}
.tab-btn {
width: 100%;
border: none;
color: #020617;
background-color: #f0f8ff;
border-radius: 8px 8px 0px 0px;
font-weight: 500;
padding: 8px;
cursor: pointer;
transition: background-color .3s ease;
}
.tab-btn.active {
background-color: #c7d2fe;
}
.tab-btn:hover {
background-color: #a5b4fc;
}
.content {
display: none;
}
.content.show {
display: grid;
grid-template-columns: auto auto auto auto;
gap: 1rem;
background-color: #c7d2fe;
border-radius: 0px 0px 8px 8px;
padding: 10px;
}
.content-img {
align-self: center;
height: 100px;
}
</style>
</head>
<section>
<div id="container">
<div class="tab-buttons">
<button class="tab-btn active" content-id="educacao">
Educação
</button>
<button class="tab-btn" content-id="saude">
Saúde
</button>
<button class="tab-btn" content-id="hospedagem">
Hospedagem
</button>
</div>
<div class="tab-contents">
<div class="content" id="educacao">
<img src="resolveuid/3574a93facd1446d991a97348b3550aa/@@images/image/thumb" class="content-img" alt="Grupo Dom Bosco Ltda.">
<div class="infos">
<h4 class="content-title">
Grupo Dom Bosco Ltda.
</h4>
<p class="content-description">
<a href="tel:(98)40097070" target="_self" data-tippreview-enabled="false" data-tippreview-image="" data-tippreview-title="">(98) 4009-7053</a>
</p>
<h4 class="content-title">
Desconto
</h4>
<p class="content-description">
<a class="internal-link" href="resolveuid/87f8af5b27f644a39aa6a738fe201a45" target="_self" title="" data-tippreview-image="" data-tippreview-title="" data-tippreview-enabled="true">Até 20% de desconto na Mensalidade Escolar</a>
</p>
<h4 class="content-title">
<a class="internal-link" href="resolveuid/b030a6cf582f40809c2d5b19d2734a69" target="_self" title="" data-tippreview-image="" data-tippreview-title="" data-tippreview-enabled="true">Termo</a>
</h4>
</div>
<img src="resolveuid/4b0620583c314860b5052465eec47271/@@images/image/thumb" class="content-img" alt="Escola Upaon-Açu">
<div class="infos">
<h4 class="content-title">
Escola Upaon-Açu
</h4>
<p class="content-description">
<a href="tel:9833347032">(98) 3334-7032</a>
</p>
<h4 class="content-title">
Desconto
</h4>
<p class="content-description">
<a class="internal-link" href="resolveuid/a354d2f1f03649b3b7ab0fbd5fbbb861" target="_self" title="" data-tippreview-image="" data-tippreview-title="" data-tippreview-enabled="true">15% de desconto na Mensalidade Escolar</a>
</p>
<h4 class="content-title">
<a class="internal-link" href="resolveuid/d74a915a50d1464e993abebe57e40afc" target="_self" title="" data-tippreview-image="" data-tippreview-title="" data-tippreview-enabled="true">Termo</a>
</h4>
</div>
<img src="resolveuid/59b6df62225d43adb75ca3f0eac4140b/@@images/image/thumb" class="content-img" alt="Colégio Santa Teresa">
<div class="infos">
<h4 class="content-title">
Colégio Santa Teresa
</h4>
<p class="content-description">
<a href="tel:9832315288">(98) 3231-5288</a>
</p>
<h4 class="content-title">
Desconto
</h4>
<p class="content-description">
<a class="internal-link" href="resolveuid/2645004eb2744ea29c5bf31607847e76" target="_self" title="" data-tippreview-image="" data-tippreview-title="" data-tippreview-enabled="true">30% de desconto na Mensalidade Escolar</a>
</p>
<h4 class="content-title">
<a class="internal-link" href="resolveuid/1bc9f2d8fc5c4244b251abd7103949e4" target="_self" title="" data-tippreview-image="" data-tippreview-title="" data-tippreview-enabled="true">Termo</a>
</h4>
</div>
<img src="resolveuid/74966b5e8ddb41cfb75a931bd8c49769/@@images/image/thumb" class="content-img" alt="Centro Universitário - UNDB">
<div class="infos">
<h4 class="content-title">
Centro Universitário - UNDB
</h4>
<p class="content-description">
<a href="tel:40097083" target="_self" data-tippreview-enabled="false" data-tippreview-image="" data-tippreview-title="">4009-7083</a> e <a href="tel:40097046" target="_self" data-tippreview-enabled="false" data-tippreview-image="" data-tippreview-title="">4009-7046</a>
</p>
<h4 class="content-title">
Desconto
</h4>
<p class="content-description">
<a class="internal-link" href="resolveuid/cf19b8d686c44fc9a5d44db4fb2701ec" target="_self" title="" data-tippreview-image="" data-tippreview-title="" data-tippreview-enabled="true">Até 56,5% de desconto na Mensalidade</a>
</p>
<h4 class="content-title">
<a class="internal-link" href="resolveuid/643a2399c96141d99ec806a0ba8ee3bd" target="_self" title="" data-tippreview-image="" data-tippreview-title="" data-tippreview-enabled="true">Termo</a>
</h4>
</div>
<img src="resolveuid/4a53a0e874674481bd1ca101c4c8967f/@@images/image/thumb" class="content-img" alt="KNN Idiomas">
<div class="infos">
<h4 class="content-title">
KNN Idiomas
</h4>
<p class="content-description">
<a
Sou totalmente iniciante em HTML e tive que fazer um código para um site de onde trabalho, o código ta aí abaixo. Só que gostaria de incluir bordas internas na tabela que contem as parcerias, alguém pode me ajudar?
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
section {
display: flex;
align-items: normal;
justify-content: center;
min-height: 100vh;
}
#container {
background-color: #f0f8ff;
width: 100%;
padding: 10px;
border-radius: 8px;
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.tab-buttons {
display: flex;
gap: 6px;
}
.tab-btn {
width: 100%;
border: none;
color: #020617;
background-color: #f0f8ff;
border-radius: 8px 8px 0px 0px;
font-weight: 500;
padding: 8px;
cursor: pointer;
transition: background-color .3s ease;
}
.tab-btn.active {
background-color: #c7d2fe;
}
.tab-btn:hover {
background-color: #a5b4fc;
}
.content {
display: none;
}
.content.show {
display: grid;
grid-template-columns: auto auto auto auto;
gap: 1rem;
background-color: #c7d2fe;
border-radius: 0px 0px 8px 8px;
padding: 10px;
}
.content-img {
align-self: center;
height: 100px;
}
</style>
</head>
<section>
<div id="container">
<div class="tab-buttons">
<button class="tab-btn active" content-id="educacao">
Educação
</button>
<button class="tab-btn" content-id="saude">
Saúde
</button>
<button class="tab-btn" content-id="hospedagem">
Hospedagem
</button>
</div>
<div class="tab-contents">
<div class="content" id="educacao">
<img src="resolveuid/3574a93facd1446d991a97348b3550aa/@@images/image/thumb" class="content-img" alt="Grupo Dom Bosco Ltda.">
<div class="infos">
<h4 class="content-title">
Grupo Dom Bosco Ltda.
</h4>
<p class="content-description">
<a href="tel:(98)40097070" target="_self" data-tippreview-enabled="false" data-tippreview-image="" data-tippreview-title="">(98) 4009-7053</a>
</p>
<h4 class="content-title">
Desconto
</h4>
<p class="content-description">
<a class="internal-link" href="resolveuid/87f8af5b27f644a39aa6a738fe201a45" target="_self" title="" data-tippreview-image="" data-tippreview-title="" data-tippreview-enabled="true">Até 20% de desconto na Mensalidade Escolar</a>
</p>
<h4 class="content-title">
<a class="internal-link" href="resolveuid/b030a6cf582f40809c2d5b19d2734a69" target="_self" title="" data-tippreview-image="" data-tippreview-title="" data-tippreview-enabled="true">Termo</a>
</h4>
</div>
<img src="resolveuid/4b0620583c314860b5052465eec47271/@@images/image/thumb" class="content-img" alt="Escola Upaon-Açu">
<div class="infos">
<h4 class="content-title">
Escola Upaon-Açu
</h4>
<p class="content-description">
<a href="tel:9833347032">(98) 3334-7032</a>
</p>
<h4 class="content-title">
Desconto
</h4>
<p class="content-description">
<a class="internal-link" href="resolveuid/a354d2f1f03649b3b7ab0fbd5fbbb861" target="_self" title="" data-tippreview-image="" data-tippreview-title="" data-tippreview-enabled="true">15% de desconto na Mensalidade Escolar</a>
</p>
<h4 class="content-title">
<a class="internal-link" href="resolveuid/d74a915a50d1464e993abebe57e40afc" target="_self" title="" data-tippreview-image="" data-tippreview-title="" data-tippreview-enabled="true">Termo</a>
</h4>
</div>
<img src="resolveuid/59b6df62225d43adb75ca3f0eac4140b/@@images/image/thumb" class="content-img" alt="Colégio Santa Teresa">
<div class="infos">
<h4 class="content-title">
Colégio Santa Teresa
</h4>
<p class="content-description">
<a href="tel:9832315288">(98) 3231-5288</a>
</p>
<h4 class="content-title">
Desconto
</h4>
<p class="content-description">
<a class="internal-link" href="resolveuid/2645004eb2744ea29c5bf31607847e76" target="_self" title="" data-tippreview-image="" data-tippreview-title="" data-tippreview-enabled="true">30% de desconto na Mensalidade Escolar</a>
</p>
<h4 class="content-title">
<a class="internal-link" href="resolveuid/1bc9f2d8fc5c4244b251abd7103949e4" target="_self" title="" data-tippreview-image="" data-tippreview-title="" data-tippreview-enabled="true">Termo</a>
</h4>
</div>
<img src="resolveuid/74966b5e8ddb41cfb75a931bd8c49769/@@images/image/thumb" class="content-img" alt="Centro Universitário - UNDB">
<div class="infos">
<h4 class="content-title">
Centro Universitário - UNDB
</h4>
<p class="content-description">
<a href="tel:40097083" target="_self" data-tippreview-enabled="false" data-tippreview-image="" data-tippreview-title="">4009-7083</a> e <a href="tel:40097046" target="_self" data-tippreview-enabled="false" data-tippreview-image="" data-tippreview-title="">4009-7046</a>
</p>
<h4 class="content-title">
Desconto
</h4>
<p class="content-description">
<a class="internal-link" href="resolveuid/cf19b8d686c44fc9a5d44db4fb2701ec" target="_self" title="" data-tippreview-image="" data-tippreview-title="" data-tippreview-enabled="true">Até 56,5% de desconto na Mensalidade</a>
</p>
<h4 class="content-title">
<a class="internal-link" href="resolveuid/643a2399c96141d99ec806a0ba8ee3bd" target="_self" title="" data-tippreview-image="" data-tippreview-title="" data-tippreview-enabled="true">Termo</a>
</h4>
</div>
<img src="resolveuid/4a53a0e874674481bd1ca101c4c8967f/@@images/image/thumb" class="content-img" alt="KNN Idiomas">
<div class="infos">
<h4 class="content-title">
KNN Idiomas
</h4>
<p class="content-description">
<a
![Allan Alves Allan Alves](https://www.devmedia.com.br/imagens/fotoscolunistas/avatar/avatar-4.png)
Allan Alves
Curtir tópico
+ 0
Responder
Clique aqui para fazer login e interagir na Comunidade :)