Skip to content

Commit

Permalink
adicionando um card dinamico
Browse files Browse the repository at this point in the history
  • Loading branch information
@felipetaua
felipetaua committed Sep 25, 2024
1 parent 0fb4441 commit f3672ce
Show file tree
Hide file tree
Showing 5 changed files with 82 additions and 44 deletions.
28 changes: 7 additions & 21 deletions aboutus.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ <h1 class="headline">
<div class="sectionPic bouncepic aboutusPic" id="sectionPic">
<img src="./img/about-hero.png" alt="">
</div>
<span id="Programador"></span>
</section>

<!-- About us status -->
Expand Down Expand Up @@ -83,22 +84,22 @@ <h1><b>20+</b> Countries</h1>
<img src="./img/fast-forward-icon-white.svg" alt="">
<div class="offerDesc">
<h1>Constante Evolução</h1>
<p>The Complete Guide to Management and How to Implement it Quickly and Effectively</p>
<p>Com projetos como esse podemos ver nossa evolução ao longo do tempo.</p>
</div>
</div>

<div class="eachOffer">
<img src="./img/support-agent-icon-white.svg" alt="">
<div class="offerDesc">
<h1>Ambiente Colaborativo</h1>
<p>The Best Support for Online crypto & How to Craft a Compelling Description</p>
<p>em equipe, permitindo que os colegas compartilhem as suas habilidades, talentos e ideias para alcançar um objetivo em comum.</p>
</div>
</div>

<div class="eachOffer">
<img src="./img/progress-warning-icon-white.svg" alt="">
<div class="offerDesc">
<h1>Best Progress</h1>
<h1>Avaliação dos alunos</h1>
<p>What is a Crypto-Mining Malware and Why You MUST Protect Against Them</p>
</div>
</div>
Expand All @@ -107,18 +108,14 @@ <h1>Best Progress</h1>

<!-- Play Video -->
<section class="videoSection">
<h1 class="videoSectionHeader">Play The Video.</h1>
<h1 class="videoSectionHeader">O Video.</h1>
<div class="videoContainer">
<div class="video">
<img src="./img/about-video.jpg" class="thumbnail" alt="">
<img src="./img/video-play-icon-white.svg" class="playIcon" alt="">
</div>
<p>
Crypto mining has become more popular with people
from all walks of life and across the world.
This article will teach you how to mine crypto
without having to buy expensive hardware or pay
exorbitant electricity bills.
No trailer nos deparamos com evolução das ténologias desde o início, ao chegar aos tempos modernos podemos ver ténologias atuais então chegamos no futuro e mostramos a SINTEC o evento de técnologia do agora! Em breve...
</p>
</div>
</section>
Expand All @@ -131,8 +128,6 @@ <h1 class="sectionHeader">Alunos e Instrutores envolvidos</h1>
<div class="teamPic">
<img src="./img/Taua.png" alt="">
<div class="teamSocialLink">
<img src="./img/Facebook_black.svg" alt="">
<img src="./img/Vimeo_black.svg" alt="">
<img src="./img/Instagram_black.svg" alt="">
</div>
</div>
Expand All @@ -145,10 +140,8 @@ <h1 class="teamName"> Tauã Felipe</h1>

<div class="eachCarousel eachTeam">
<div class="teamPic">
<img src="./img/nicoly.png" alt="">
<img src="./img/Nicoly.png" alt="">
<div class="teamSocialLink">
<img src="./img/Facebook_black.svg" alt="">
<img src="./img/Vimeo_black.svg" alt="">
<img src="./img/Instagram_black.svg" alt="">
</div>
</div>
Expand All @@ -162,8 +155,6 @@ <h1 class="teamName">Nicoly Carvalho</h1>
<div class="teamPic">
<img src="./img/Bruna.png" alt="">
<div class="teamSocialLink">
<img src="./img/Facebook_black.svg" alt="">
<img src="./img/Vimeo_black.svg" alt="">
<img src="./img/Instagram_black.svg" alt="">
</div>
</div>
Expand All @@ -177,8 +168,6 @@ <h1 class="teamName">Bruna Estefani</h1>
<div class="teamPic">
<img src="./img/Luis.png" alt="">
<div class="teamSocialLink">
<img src="./img/Facebook_black.svg" alt="">
<img src="./img/Vimeo_black.svg" alt="">
<img src="./img/Instagram_black.svg" alt="">
</div>
</div>
Expand All @@ -193,9 +182,6 @@ <h1 class="teamName">Luiz Gustavo</h1>
<div class="teamPic">
<img src="./img/Alunos.png" alt="">
<div class="teamSocialLink">
<img src="./img/Facebook_black.svg" alt="">
<img src="./img/Vimeo_black.svg" alt="">
<img src="./img/Twitter_black.svg" alt="">
<img src="./img/Instagram_black.svg" alt="">
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,7 @@ <h1 class="sectionHeader">O grupo</h1>
<p class="sectionPara">
Todos no grupo se dedicam muito, para conseguir fazer o que nos foi proposto estamos em sintonia, todos com os mesmos objetivos!
</p>
<button class="btn">Explore Now</button>
<a href="#programador"><button class="btn">Explore Now</button></a>
</div>

<div class="sectionPic dashboardPic">
Expand Down
49 changes: 38 additions & 11 deletions modal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,44 @@
>
<button class="primary" onclick="window.dialog.showModal();">Open Dialog</button>

<div class="sectionModal">
<dialog id="dialog">

<h2>Hello.</h2>
<p class="carouselPara">A CSS-only modal based on the <a href="https://developer.mozilla.org/es/docs/Web/CSS/::backdrop" target="_blank">::backdrop</a> pseudo-class. Hope you find it helpful.
</p>
<p class="carouselPara">You can also change the styles of the <code>::backdrop</code> from the CSS.
</p>
<button onclick="window.dialog.close();" aria-label="close" class="x">❌</button>
</dialog>
</div>
<div class="sectionModal">
<dialog id="dialog">
<h2 id="cardTitle">Card 1</h2>
<p id="cardContent" class="carouselPara">
Conteúdo do Card 1. Aqui você pode colocar o conteúdo do primeiro card.
</p>
<button onclick="previousCard();" aria-label="previous" class="prev">⬅️ Anterior</button>
<button onclick="nextCard();" aria-label="next" class="next">➡️ Próximo</button>
<button onclick="window.dialog.close();" aria-label="close" class="x">❌ Fechar</button>
</dialog>
</div>

<script>
const cards = [
{ title: 'Card 1', content: 'Conteúdo do Card 1. Aqui você pode colocar o conteúdo do primeiro card.' },
{ title: 'Card 2', content: 'Conteúdo do Card 2. Aqui você pode colocar o conteúdo do segundo card.' },
{ title: 'Card 3', content: 'Conteúdo do Card 3. Aqui você pode colocar o conteúdo do terceiro card.' }
];

let currentCardIndex = 0;

function updateCard() {
document.getElementById('cardTitle').innerText = cards[currentCardIndex].title;
document.getElementById('cardContent').innerText = cards[currentCardIndex].content;
}

function nextCard() {
currentCardIndex = (currentCardIndex + 1) % cards.length;
updateCard();
}

function previousCard() {
currentCardIndex = (currentCardIndex - 1 + cards.length) % cards.length;
updateCard();
}
</script>


<div class="footerCopyright">
<p>&copy; 2024 desenvolvido por <a href="#" class="developedBy">felipetauaSystems</a>.</p>
</div>
Expand Down
43 changes: 32 additions & 11 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,22 +14,43 @@ bar.onclick = (e) => {
}


// carousel
// Seleção dos elementos do carousel
const carouselContainer = document.querySelector(".carouselContainer");
const eachCarousel = document.querySelector(".eachCarousel").clientWidth;
const allEachCarousel = document.querySelectorAll(".eachCarousel");
const allIndicator = document.querySelectorAll(".indicator");

let currentSlide = 0;
const totalSlides = allEachCarousel.length;

// Função para alternar os slides
const slideCarousel = (index) => {
for(let x = 0; x<allEachCarousel.length;x++){
if(x === index){
allEachCarousel[x].classList.add("eachCarouselBorder")
allIndicator[x].classList.add("activeIndicator")
}else{
allEachCarousel[x].classList.remove("eachCarouselBorder")
allIndicator[x].classList.remove("activeIndicator")
for (let x = 0; x < totalSlides; x++) {
if (x === index) {
allEachCarousel[x].classList.add("eachCarouselBorder");
allIndicator[x].classList.add("activeIndicator");
} else {
allEachCarousel[x].classList.remove("eachCarouselBorder");
allIndicator[x].classList.remove("activeIndicator");
}
}
carouselContainer.scrollLeft = (index * (eachCarousel + 10))
console.log(carouselContainer.scrollLeft)
}

// Ajusta a rolagem horizontal da div do carousel
carouselContainer.scrollLeft = (index * (eachCarousel + 10)); // Ajuste de espaçamento de 10px entre slides
currentSlide = index;
}

// Função para iniciar a troca automática dos slides
const startAutoSlide = () => {
setInterval(() => {
// Atualiza para o próximo slide
const nextSlide = (currentSlide + 1) % totalSlides; // Reinicia no primeiro slide após o último
slideCarousel(nextSlide);
}, 3000); // Troca de slide a cada 3 segundos
}

// Inicializa o primeiro slide
slideCarousel(currentSlide);

// Inicia a troca automática dos slides
startAutoSlide();
4 changes: 4 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,10 @@ header{
width: 100%;
height: 300px;
}
.carouselContainer {
scroll-behavior: smooth;
}

.carouselDesc{
margin-left: 1em;
}
Expand Down

0 comments on commit f3672ce

Please sign in to comment.