Scribd
Upload
4 views

message (1)

The document is an HTML template for a webpage titled 'Talent Uninassau - Seu primeiro emprego começa aqui', aimed at connecting university students and recent graduates with job opportunities. It includes a structured layout with a header, hero section, and footer, styled using CSS variables for colors and responsive design. The page features navigation links, a hero image, and buttons for exploring job vacancies.

Uploaded by

pedrocruzprodutos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views

message (1)

The document is an HTML template for a webpage titled 'Talent Uninassau - Seu primeiro emprego começa aqui', aimed at connecting university students and recent graduates with job opportunities. It includes a structured layout with a header, hero section, and footer, styled using CSS variables for colors and responsive design. The page features navigation links, a hero image, and buttons for exploring job vacancies.

Uploaded by

pedrocruzprodutos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 9

ta certo?

(% load static %)
{% extends "siteuninassau/index.html" %}

{% block content %}
<!DOCTYPE html>
<!-- saved from url=(0140)https://bbk9bntnfg76tjg0.canva-hosted-embed.com/codelet/
AAEAEGJiazlibnRuZmc3NnRqZzAAAAAAAZbfKpLJd3iClCjMbAn0xTg0e3YHPb4WmuGygBHaZUiIMBlOLtI
/ -->
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />


<title>Talent Uninassau - Seu primeiro emprego começa aqui</title>
<style>
/* Reset e estilos gerais */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

:root {
--primary: #6a1b9a;
--primary-light: #9c4dcc;
--primary-dark: #38006b;
--accent: #ff9800;
--light: #f5f5f5;
--dark: #333;
--gray: #e0e0e0;
}

body {
background-color: var(--light);
color: var(--dark);
line-height: 1.6;
}

.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}

section {
padding: 60px 0;
}

h1,
h2,
h3,
h4 {
margin-bottom: 20px;
color: var(--primary-dark);
}

p {
margin-bottom: 15px;
}

.btn {
display: inline-block;
padding: 12px 24px;
background-color: var(--accent);
color: white;
text-decoration: none;
border-radius: 30px;
font-weight: bold;
text-align: center;
transition: all 0.3s ease;
border: none;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn:hover {
background-color: #e68a00;
transform: translateY(-2px);
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.btn-primary {
background-color: var(--primary);
}

.btn-primary:hover {
background-color: var(--primary-light);
}

.text-center {
text-align: center;
}

/* Header e navegação */
header {
background-color: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 1000;
}

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
}

.logo {
display: flex;
align-items: center;
}

.logo img {
height: 50px;
margin-right: 10px;
}

.logo h1 {
font-size: 1.8rem;
color: var(--primary);
margin: 0;
}

.nav-links {
display: flex;
list-style: none;
}

.nav-links li {
margin-left: 25px;
}

.nav-links a {
text-decoration: none;
color: var(--dark);
font-weight: 500;
transition: color 0.3s;
}

.nav-links a:hover {
color: var(--primary);
}

.mobile-menu-btn {
display: none;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--primary);
}

/* Hero Section */
.hero {
background: linear-gradient(
135deg,
var(--primary-light),
var(--primary-dark)
);
color: white;
padding: 80px 0;
position: relative;
overflow: hidden;
min-height: calc(100vh - 80px);
display: flex;
align-items: center;
}

.hero-content {
display: flex;
align-items: center;
justify-content: space-between;
}
.hero-text {
flex: 1;
padding-right: 30px;
}

.hero-text h1 {
font-size: 3rem;
margin-bottom: 20px;
color: white;
}

.hero-text p {
font-size: 1.2rem;
margin-bottom: 30px;
}

.hero-image {
flex: 1;
text-align: center;
}

.mascot {
width: 100%;
max-width: 400px;
filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.2));
}

/* Footer */
footer {
background-color: var(--primary-dark);
color: white;
padding: 20px 0;
text-align: center;
}

/* Responsividade */
@media (max-width: 768px) {
.hero-content {
flex-direction: column;
text-align: center;
}

.hero-text {
padding-right: 0;
margin-bottom: 30px;
}

.nav-links {
display: none;
position: absolute;
top: 70px;
left: 0;
right: 0;
background: white;
flex-direction: column;
padding: 20px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.nav-links.active {
display: flex;
}

.nav-links li {
margin: 10px 0;
}

.mobile-menu-btn {
display: block;
}
}
</style>
</head>
<body>
<!-- Header -->
<header>
<div class="container">
<nav class="navbar">
<div class="logo">
<svg
width="40"
height="40"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M12 2L2 7L12 12L22 7L12 2Z" fill="#6a1b9a"></path>
<path
d="M2 17L12 22L22 17"
stroke="#6a1b9a"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M2 12L12 17L22 12"
stroke="#6a1b9a"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
<h1>Talent Uninassau</h1>
</div>
<ul class="nav-links">
<li><a href="index.html">Início</a></li>
<li><a href="vagas.html">Vagas</a></li>
<li><a href="eventos.html">Eventos</a></li>
<li><a href="cursos.html">Cursos</a></li>
<li><a href="parceiros.html">Parceiros</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</div>
</header>

<!-- Hero Section -->


<section id="inicio" class="hero">
<div class="container">
<div class="hero-content">
<div class="hero-text">
<h1>Seu primeiro emprego começa aqui</h1>
<p>
Conectamos estudantes universitários e recém-formados às melhores
oportunidades do mercado. Encontre a vaga perfeita para iniciar
sua carreira profissional!
</p>
<a href="vagas.html" target="_blank" class="btn">Explorar Vagas</a>
</div>
<div class="hero-image">
<svg
class="mascot"
viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
>
<!-- Cabeça -->
<circle cx="100" cy="70" r="50" fill="#FFD7B5"></circle>
<!-- Olhos -->
<circle cx="80" cy="60" r="8" fill="white"></circle>
<circle cx="120" cy="60" r="8" fill="white"></circle>
<circle cx="80" cy="60" r="4" fill="#333"></circle>
<circle cx="120" cy="60" r="4" fill="#333"></circle>
<!-- Sorriso -->
<path
d="M70 80 Q100 100 130 80"
stroke="#333"
stroke-width="3"
fill="none"
></path>
<!-- Cabelo -->
<path
d="M50 50 Q70 20 100 30 Q130 20 150 50"
fill="#6a1b9a"
></path>
<!-- Corpo -->
<rect
x="75"
y="120"
width="50"
height="60"
fill="#9c4dcc"
rx="10"
></rect>
<!-- Braços -->
<rect
x="45"
y="130"
width="30"
height="15"
fill="#9c4dcc"
rx="7"
></rect>
<rect
x="125"
y="130"
width="30"
height="15"
fill="#9c4dcc"
rx="7"
></rect>
<!-- Pernas -->
<rect
x="85"
y="180"
width="15"
height="20"
fill="#6a1b9a"
rx="5"
></rect>
<rect
x="105"
y="180"
width="15"
height="20"
fill="#6a1b9a"
rx="5"
></rect>
<!-- Gravata -->
<path
d="M100 120 L90 140 L100 160 L110 140 Z"
fill="#ff9800"
></path>
<!-- Diploma -->
<rect
x="125"
y="110"
width="30"
height="20"
fill="#f5f5f5"
rx="3"
transform="rotate(15, 140, 120)"
></rect>
<path
d="M145 105 Q155 110 145 115"
stroke="#333"
stroke-width="2"
fill="none"
></path>
</svg>
</div>
</div>
</div>
</section>

<!-- Footer -->


<footer>
<div class="container">
<p>© 2023 Talent Uninassau. Todos os direitos reservados.</p>
</div>
</footer>

<!-- Página de Vagas (oculta, será aberta em nova aba) -->


<div id="vagas-page" style="display: none">
<!-- Conteúdo da página de vagas -->
</div>
<!-- Página de Eventos (oculta, será aberta em nova aba) -->
<div id="eventos-page" style="display: none">
<!-- Conteúdo da página de eventos -->
</div>

<!-- Página de Cursos (oculta, será aberta em nova aba) -->


<div id="cursos-page" style="display: none">
<!-- Conteúdo da página de cursos -->
</div>

<!-- Página de Depoimentos (oculta, será aberta em nova aba) -->


<div id="depoimentos-page" style="display: none">
<!-- Conteúdo da página de depoimentos -->
</div>

<!-- Página de Parceiros (oculta, será aberta em nova aba) -->


<div id="parceiros-page" style="display: none">
<!-- Conteúdo da página de parceiros -->
</div>

<!-- Página de Contato (oculta, será aberta em nova aba) -->


<div id="contato-page" style="display: none">
<!-- Conteúdo da página de contato -->
</div>

<script>
// Menu mobile toggle
document
.querySelector(".mobile-menu-btn")
.addEventListener("click", function () {
const navLinks = document.querySelector(".nav-links");
if (navLinks.classList.contains("active")) {
navLinks.classList.remove("active");
} else {
navLinks.classList.add("active");
}
});
</script>
<script>
(function () {
function c() {
var b = a.contentDocument || a.contentWindow.document;
if (b) {
var d = b.createElement("script");
d.innerHTML =

"window.__CF$cv$params={r:'940c64cd8428f1a1',t:'MTc0NzQxNDQzMy4wMDAwMDA='};var
a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/
scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";
b.getElementsByTagName("head")[0].appendChild(d);
}
}
if (document.body) {
var a = document.createElement("iframe");
a.height = 1;
a.width = 1;
a.style.position = "absolute";
a.style.top = 0;
a.style.left = 0;
a.style.border = "none";
a.style.visibility = "hidden";
document.body.appendChild(a);
if ("loading" !== document.readyState) c();
else if (window.addEventListener)
document.addEventListener("DOMContentLoaded", c);
else {
var e = document.onreadystatechange || function () {};
document.onreadystatechange = function (b) {
e(b);
"loading" !== document.readyState &&
((document.onreadystatechange = e), c());
};
}
}
})();
</script>
<iframe
height="1"
width="1"
style="
position: absolute;
top: 0px;
left: 0px;
border: none;
visibility: hidden;
"
src="./saved_resource.html"
></iframe>
</body>
</html>
{% endblock %}

You might also like