Skip to content

Commit

Permalink
Adiciona estilos personalizados e script para exibição de certificados
Browse files Browse the repository at this point in the history
  • Loading branch information
RoodneyMoraes committed Nov 16, 2024
1 parent 759f4ad commit 6878c9b
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 148 deletions.
118 changes: 18 additions & 100 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,120 +14,38 @@
<!-- GOOGLE TAG (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-CMLZKJVKKY"></script>
<script src="/src/js/google-analytics.js"></script>
<!-- GOOGLE SEARCH CONSOLE -->
<meta name="google-site-verification" content="XQsiX2YxaWq7-5UC_GOf7TztluKwd9738FXi1Y62G7A" />

<!-- CERTIFICADO CARDS -->
<script src="src/js/custom-index.js"></script>
</head>

<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top navbar-shadow">
<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top navbar-shad</nav>">">
<div class="container">
<a class="navbar-head">Certificações da Microsoft Azure</a>
<a class="navbar-head">CERTIFICAÇÕES DA MICROSOFT AZURE</a>
</div>
</nav>

<!-- SECTION -->
<section id="certificados" class="text-center">
<div class="container">
<div class="row g-4">
<div class="col-lg-4 col-md-6">
<div class="certificado-card">
<img src="src/img/MS-900.png" alt="MS-900">
<h5>Microsoft Certified: MS-900</h5>
<p>Demonstre a compreensão do Microsoft 365 para fornecer aplicativos de produtividade líderes
do setor, juntamente com serviços de nuvem inteligentes e segurança de classe mundial.</p>
<div class="buttons">
<a href="https://github.com/RoodneyMoraes/certificacoes-microsoft-azure/wiki/%2301-%E2%80%90-Microsoft-Certified:-MS%E2%80%90900" class="btn-plano">Plano de Estudo</a>
<a href="src/page/ms-900.html" class="btn-simulado">Fazer Simulado</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="certificado-card">
<img src="src/img/AZ-900.png" alt="AZ-900">
<h5>Microsoft Certified: AZ-900</h5>
<p>Demonstrar conhecimento fundamental dos conceitos de nuvem e dos principais serviços do
Azure, além de recursos e ferramentas de gerenciamento e governança do Azure.</p>
<div class="buttons">
<a href="https://github.com/RoodneyMoraes/certificacoes-microsoft-azure/wiki/%2302-%E2%80%90-Microsoft-Certified:-AZ%E2%80%90900" class="btn-plano">Plano de Estudo</a>
<a href="src/page/az-900.html" class="btn-simulado">Fazer Simulado</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="certificado-card">
<img src="src/img/DP-900.png" alt="DP-900">
<h5>Microsoft Certified: DP-900</h5>
<p>Demonstrar o conhecimento fundamental dos principais conceitos de dados relacionados aos
serviços de dados do Microsoft Azure.</p>
<div class="buttons">
<a href="https://github.com/RoodneyMoraes/certificacoes-microsoft-azure/wiki/%2303-%E2%80%90-Microsoft-Certified:-DP%E2%80%90900" class="btn-plano">Plano de Estudo</a>
<a href="src/page/dp-900.html" class="btn-simulado">Fazer Simulado</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="certificado-card">
<img src="src/img/SC-900.png" alt="SC-900">
<h5>Microsoft Certified: SC-900</h5>
<p>Este curso fornece conhecimento de nível básico sobre conceitos de segurança, conformidade e
identidade e soluções da Microsoft baseadas na nuvem.</p>
<div class="buttons">
<a href="https://github.com/RoodneyMoraes/certificacoes-microsoft-azure/wiki/%2304-%E2%80%90-Microsoft-Certified:-SC%E2%80%90900" class="btn-plano">Plano de Estudo</a>
<a href="src/page/sc-900.html" class="btn-simulado">Fazer Simulado</a>
<!-- CERTIFICADO CARD TEMPLATE -->
<template id="certificado-card-template">
<div class="col-lg-4 col-md-6">
<div class="certificado-card">
<img src="" alt="">
<h5></h5>
<p></p>
<div class="buttons">
<a href="" class="btn-plano">Plano de Estudo</a>
<a href="" class="btn-simulado">Fazer Simulado</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="certificado-card">
<img src="src/img/AI-900.png" alt="AI-900">
<h5>Microsoft Certified: AI-900</h5>
<p>Demonstre conceitos fundamentais de IA relacionados ao desenvolvimento de software e serviços
do Microsoft Azure para criar soluções de IA.</p>
<div class="buttons">
<a href="https://github.com/RoodneyMoraes/certificacoes-microsoft-azure/wiki/%2305-%E2%80%90-Microsoft-Certified:-AI%E2%80%90900" class="btn-plano">Plano de Estudo</a>
<a href="src/page/ai-900.html" class="btn-simulado">Fazer Simulado</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="certificado-card">
<img src="src/img/AZ-104.png" alt="AZ-104">
<h5>Microsoft Certified: AZ-104</h5>
<p>Demonstre as principais habilidades para configurar, gerenciar, proteger e administrar
funções profissionais importantes no Microsoft Azure.</p>
<div class="buttons">
<a href="https://github.com/RoodneyMoraes/certificacoes-microsoft-azure/wiki/%2306-%E2%80%90-Microsoft-Certified:-AZ%E2%80%90104" class="btn-plano">Plano de Estudo</a>
<a href="src/page/az-104.html" class="btn-simulado">Fazer Simulado</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="certificado-card">
<img src="src/img/AZ-204.png" alt="AZ-204">
<h5>Microsoft Certified: AZ-204</h5>
<p>Crie soluções de ponta a ponta no Microsoft Azure para criar Funções do Azure, implementar e
gerenciar aplicativos Web, desenvolver soluções utilizando o Armazenamento do Microsoft
Azure e muito mais.</p>
<div class="buttons">
<a href="https://github.com/RoodneyMoraes/certificacoes-microsoft-azure/wiki/%2307-%E2%80%90-Microsoft-Certified:-AZ%E2%80%90204" class="btn-plano">Plano de Estudo</a>
<a href="src/page/az-204.html" class="btn-simulado">Fazer Simulado</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="certificado-card">
<img src="src/img/AZ-305.png" alt="AZ-305">
<h5>Microsoft Certified: AZ-305</h5>
<p>Esta certificação valida habilidades avançadas em projetar e gerenciar soluções Azure,
abrangendo identidade, segurança, dados e infraestrutura. Ideal para arquitetos de soluções.
</p>
<div class="buttons">
<a href="https://github.com/RoodneyMoraes/certificacoes-microsoft-azure/wiki/%2308-%E2%80%90-Microsoft-Certified:-AZ%E2%80%90305" class="btn-plano">Plano de Estudo</a>
<a href="src/page/az-305.html" class="btn-simulado">Fazer Simulado</a>
</div>
</div>
</div>
</template>
</div>
</div>
</section>
Expand Down Expand Up @@ -157,4 +75,4 @@ <h4 class="navbar-footer">Sucesso no dia do exame! 🌟</h4>
</footer>
</body>

</html>
</html>
76 changes: 28 additions & 48 deletions src/css/custom-index.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
/* IMPORT FONTS */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap');

/* ROOT VARIABLES */
:root {
--azure: #0078d4;
--dark: #092032;
Expand All @@ -8,26 +10,20 @@
--shadow: 0px 6px 30px rgba(0, 0, 0, 0.08);
}

/* BODY */
body {
font-family: "Barlow", sans-serif;
color: var(--body);
line-height: 1.7;
}

h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.display-4 {
/* HEADINGS */
h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4 {
font-weight: 700;
color: var(--dark);
}

/* LINKS */
a {
color: var(--dark);
transition: all 0.4s ease;
Expand All @@ -39,68 +35,56 @@ a:hover {
color: var(--azure);
}

/* SECTIONS */
section {
padding-top: 50px;
padding-bottom: 50px;
}


.navbar .navbar-nav .nav-link {
color: var(--dark);
}

.navbar .navbar-nav .nav-link:hover {
color: var(--azure);
}

.navbar .navbar-nav .nav-link.active {
color: var(--azure);
}

.navbar-head {
font-size: 28px;
font-weight: 700;
text-transform: uppercase;
padding: 50px 0;
}

/* NAVBAR */
.navbar {
background-color: #0d6efd !important;

}

.navbar .container {
justify-content: center;
}

.navbar .navbar-head {
color: white;
font-size: 2rem;
font-weight: bold;
text-align: center;
color: white;
}

.navbar .navbar-head:hover {
color: #d1e7ff;
}

.navbar .navbar-nav .nav-link {
color: var(--dark);
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
color: var(--azure);
}

.navbar-shadow {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* CARD DOS CERTIFICADOS */
/* CERTIFICATE CARD */
.certificado-card {
padding: 32px;
background-color: #fff;
box-shadow: var(--shadow);
border: 2px solid rgba(13, 110, 253, 0.2);
border-radius: 8px;
padding: 20px;
box-shadow: var(--shadow);
}

.certificado-card h5 {
margin-top: 24px;
margin-bottom: 14px;
margin: 24px 0 14px;
}

.certificado-card img {
Expand Down Expand Up @@ -128,8 +112,7 @@ section {
color: white;
border: none;
padding: 10px 20px;
margin-right: 10px;
margin-bottom: 5px;
margin: 0 10px 5px 0;
cursor: pointer;
transition: background-color 0.3s ease;
width: 160px;
Expand All @@ -146,21 +129,18 @@ section {
/* FOOTER */
footer {
background: linear-gradient(0deg, rgba(8, 32, 50, 0.9), rgba(8, 32, 50, 0.9)), #082032;
;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

footer .footer-top {
padding-top: 40px;
padding-bottom: 40px;
padding: 40px 0;
}

.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 20px;
padding-top: 20px;
padding: 20px 0;
}

footer .navbar-footer {
Expand All @@ -175,10 +155,10 @@ footer .social-icons a {
width: 50px;
height: 50px;
font-size: 20px;
margin-left: 4px;
margin-right: 4px;
margin: 0 4px;
}

/* SOCIAL ICONS */
.social-icons a {
width: 28px;
height: 28px;
Expand All @@ -196,10 +176,10 @@ footer .social-icons a {
color: var(--azure);
}

/* MOBILE */
/* MEDIA QUERIES - MOBILE */
@media (max-width: 768px) {
.navbar .navbar-head {
font-size: 1.3rem;
padding: 15px 0;
}
}
}
Loading

0 comments on commit 6878c9b

Please sign in to comment.