Skip to content

Commit

Permalink
adicionando o conteúdo principal
Browse files Browse the repository at this point in the history
  • Loading branch information
@felipetaua
felipetaua committed Sep 23, 2024
0 parents commit 05d5ba4
Show file tree
Hide file tree
Showing 101 changed files with 2,509 additions and 0 deletions.
76 changes: 76 additions & 0 deletions ModalEventos.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
:root {
--vs-primary: 29 92 255;
}


/*Dialog Styles*/
dialog {
text-align: center;
margin: 20px 0 0 20px;
padding: 1rem 3rem;
background: white;
width: 80vh;
height: 60vh;
padding-top: 2rem;
border-radius: 20px;
border: 0;
box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.1);
-webkit-animation: fadeIn 1s ease both;
animation: fadeIn 1s ease both;
}
dialog::-webkit-backdrop {
-webkit-animation: fadeIn 1s ease both;
animation: fadeIn 1s ease both;
background: rgba(255, 255, 255, 0.4);
z-index: 2;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
dialog::backdrop {
-webkit-animation: fadeIn 1s ease both;
animation: fadeIn 1s ease both;
background: rgba(255, 255, 255, 0.4);
z-index: 2;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
dialog .x {
padding-left: 100pxn;
filter: grayscale(1);
border: none;
background: none;
position: absolute;
top: 15px;
right: 10px;
transition: ease filter, transform 0.3s;
cursor: pointer;
transform-origin: center;
}
dialog .x:hover {
filter: grayscale(0);
transform: scale(1.1);
}

dialog p a:visited {
color: rgb(var(--vs-primary));
}



@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
274 changes: 274 additions & 0 deletions aboutus.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,274 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./commonStyle.css">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/aa7454d09f.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Header -->
<header>
<div id="logo">
<a href="./index.html">
<img src="./img/logo-SINTEC.png" alt="" height="80px">
</a>
</div>
<ul class="nav" id="nav">
<ul class="navLogo">
<a href="./index.html">
<img src="./img/logo-SINTEC.png" alt="" height="130px">
</a>
</ul>
<li class="nav-link"><a href="./index.html">Home</a></li>
<li class="nav-link"><a href="./eventos.html">Eventos</a></li>
<li class="nav-link"><a href="./aboutus.html">Conheça</a></li>
<li class="nav-link"><a href="./contact.html">Forms</a></li>
<li class="sociallinkContainer">
<img class="sociallink" src="./img/fabook-icon-white.svg" alt="">
<img class="sociallink" src="./img/inkedin-icon-white.svg" alt="">
<img class="sociallink" src="./img/whatsapp-icon-white.svg" alt="">
</li>
</ul>
<div id="barContainer">
<i id="bar" class="fa-solid fa-bars"></i>
</div>
</header>

<!-- aboutus hero -->
<section class="gridSection">
<div class="sectionDesc aboutusDesc">
<h1 class="headline">
O Técnico de Informática para Internet
</h1>
<p class="sub-headline">
It is the perfect spot get started with your company.
It can be the first thing that people see and it will set
the tone for their experience with your company.
</p>
</div>
<div class="sectionPic bouncepic aboutusPic" id="sectionPic">
<img src="./img/about-hero.png" alt="">
</div>
</section>

<!-- About us status -->
<div class="statusContainer">
<div class="status">
<h1><b>360</b> Client</h1>
<p>An about page is a key component of every website.</p>
</div>

<div class="status">
<h1><b>150+</b> Projects</h1>
<p>Page is the first page a visitor sees when they visit your website.</p>
</div>

<div class="status">
<h1><b>20+</b> Countries</h1>
<p>It is the perfect spot to get started with your company.</p>
</div>
</div>

<div class="services">
<div class="aboutusimgContainer">
<img src="./img/about-image-1.jpg" alt="">
<img src="./img/about-image-2.jpg" alt="">
</div>

<div class="offers">
<div class="eachOffer">
<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>
</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>
</div>
</div>

<div class="eachOffer">
<img src="./img/progress-warning-icon-white.svg" alt="">
<div class="offerDesc">
<h1>Best Progress</h1>
<p>What is a Crypto-Mining Malware and Why You MUST Protect Against Them</p>
</div>
</div>
</div>
</div>

<!-- Play Video -->
<section class="videoSection">
<h1 class="videoSectionHeader">Play The 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.
</p>
</div>
</section>

<!-- Carousel -->
<section class="teamSection">
<h1 class="sectionHeader">Alunos e Instrutores envolvidos</h1>
<div class="carouselContainer">
<div class="eachCarousel eachTeam">
<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>
<div class="teamDesc">
<h1 class="teamName"> Tauã Felipe</h1>
<p class="position">Programador e Designer</p>
</div>

</div>

<div class="eachCarousel eachTeam">
<div class="teamPic">
<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>
<div class="teamDesc">
<h1 class="teamName">Nicoly Carvalho</h1>
<p class="position">Programadora e Escritora</p>
</div>
</div>

<div class="eachCarousel eachTeam">
<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>
<div class="teamDesc">
<h1 class="teamName">Bruna Estefani</h1>
<p class="position">Instrutora do Senac</p>
</div>
</div>

<div class="eachCarousel eachTeam">
<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>
<div class="teamDesc">
<h1 class="teamName">Luiz Gustavo</h1>
<p class="position">Instrutor do Senac</p>
</div>

</div>

<div class="eachCarousel eachTeam">
<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>
<div class="teamDesc">
<h1 class="teamName">Todos os alunos</h1>
<p class="position">Programadores</p>
</div>
</div>
</div>
<div class="carouselIndicator">
<div class="indicator activeIndicator" onclick="slideCarousel(0)"></div>
<div class="indicator" onclick="slideCarousel(1)"></div>
<div class="indicator" onclick="slideCarousel(2)"></div>
<div class="indicator" onclick="slideCarousel(3)"></div>
<div class="indicator" onclick="slideCarousel(4)"></div>
</div>
</section>

<!-- footer -->
<footer>
<div class="joinSection">
<div class="joinDesc">
<h1 class="sectionHeader">Join with us</h1>
<p class="sectionPara">
Once you have created your account, you can purchase coins from website
</p>
</div>
<button class="btn primaryBtn">JOIN NOW</button>
</div>

<div class="footerlinksContainer">
<div class="footerAboutus">
<img src="./img/logo-SINTEC.png" alt="" height="80px">
<p class="darkPara">With no commissions and a simple user interface,
Prouple is the most reliable way to trade for
Cryptocurrency.
</p>
<div class="footersociallinkContainer">
<img class="sociallink" src="./img/fabook-icon-white.svg" alt="">
<img class="sociallink" src="./img/inkedin-icon-white.svg" alt="">
<img class="sociallink" src="./img/whatsapp-icon-white.svg" alt="">
</div>
</div>

<div class="footerlink">
<h1 class="linkTitle">Explore</h1>
<a href="#" class="eachLink">About us</a>
<a href="#" class="eachLink">FAQ</a>
<a href="#" class="eachLink">Blog</a>
<a href="#" class="eachLink">Contact</a>
</div>

<div class="footerlink">
<h1 class="linkTitle">Nav</h1>
<a href="./index.html" class="eachLink">Home</a>
<a href="./eventos.html" class="eachLink">Programação</a>
<a href="./contact.html" class="eachLink">Forms</a>
<a href="./aboutus.html" class="eachLink">Conheça</a>
</div>

<div class="footerlink">
<h1 class="linkTitle">Resource</h1>
<a href="#" class="eachLink">Style Guide</a>
<a href="#" class="eachLink">Change Log</a>
<a href="#" class="eachLink">License</a>
</div>
</div>

<div class="footerCopyright">
<p>&copy; Direitos Reservados SINTEC 2024 desenvolvido por <a href="https://github.com/felipetaua" class="developedBy" target="_blank">felipetauaSystems</a>.</p>
</div>
</footer>

<script src="./script.js"></script>
</body>
</html>
Loading

0 comments on commit 05d5ba4

Please sign in to comment.