<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'css/styleguide.css'%}" />
<link rel="stylesheet" href="{% static 'css/style.css'%}" />
<link rel="stylesheet" href="{% static 'css/globals.css'%}" />
<title>ProIF</title>
</head>
<body>
<div class="desktop">
<div class="frame">
<div class="navbar">
<div class="container">
<img class="column" src="{% static 'img/column.png' %}" />
<div class="div">
<div class="link">Projetos</div>
<div class="link">Sobre</div>
<div class="link">Contato</div>
</div>
<div class="button-wrapper">
<a href="{% url 'formulario' %}">
<button class="button"><button class="text-wrapper">Participar</button></button>
</a>
</div>
</div>
</div>
</div>
<div class="frame-2">
<p class="INSPIRANDO-MUDAN-AS">
<span class="span">INSPIRANDO MUDANÇAS,<br />CULTIVANDO </span>
<span class="text-wrapper-2">TALENTOS</span>
<span class="span">.</span>
</p>
<div class="frame-3">
<div class="select">
<div class="select-2">
<div class="select-one">Selecione o curso</div>
<img class="img" src="{% static 'img/icon-chevron-down-2.svg' %}" />
</div>
</div>
<div class="select">
<div class="select-2">
<div class="select-one">Selecione o período</div>
<img class="img" src="{% static 'img/icon-chevron-down-2.svg' %}" />
</div>
</div>
<a href="{%url 'listar_curriculos'%}">
<button class="div-wrapper"><button class="button-2">Explorar</button></button>
</a>
</div>
</div>
<div class="frame-4">
<div class="text-wrapper-3">3º Período</div>
</div>
<div class="frame-5">
<div class="tooltip-top">
<div class="tooltip">
<div class="content">
<a href="/curriculo_nat"><img class="placeholder-image" src="{% static 'img/natalia.png' %}" /></a>
<div class="frame-6">
<div class="content-2">
<div class="text-wrapper-4">Natália Kelly</div>
<p class="p">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="actions">
<button class="button-3">
<button class="button-4">Descubra mais</button> <img class="img"
src="{% static 'img/icon-chevron-right-3.svg' %}" />
</button>
</div>
</div>
</div>
</div>
</div>
<div class="tooltip-wrapper">
<div class="tooltip">
<div class="content">
<a href="/curriculo_gley"><img class="placeholder-image-2" src="{% static 'img/gleydson.png' %}" /></a>
<div class="frame-6">
<div class="content-2">
<div class="text-wrapper-4">Gleydson Araujo</div>
<p class="p">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="actions">
<button class="button-3">
<button class="button-4">Descubra mais</button> <img class="img"
src="{% static 'img/icon-chevron-right-1.svg' %}" />
</button>
</div>
</div>
</div>
</div>
</div>
<div class="tooltip-top-2">
<div class="tooltip">
<div class="content">
<a href="/curriculo_helo"><img class="placeholder-image-2" src="{% static 'img/heloisa.png' %}" /></a>
<div class="frame-6">
<div class="content-2">
<div class="text-wrapper-4">Heloiza Felix</div>
<p class="p">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="actions">
<button class="button-3">
<button class="button-4">Descubra mais</button> <img class="img"
src="{% static 'img/icon-chevron-right-3.svg' %}" />
</button>
</div>
</div>
</div>
</div>
</div>
<div class="tooltip-top-3">
<div class="tooltip">
<div class="content">
<a href="/curriculo_eliel"><img class="placeholder-image" src="{% static 'img/eliel.png' %}" /></a>
<div class="frame-6">
<div class="content-2">
<div class="text-wrapper-4">Eliel Ferreira</div>
<p class="p">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="actions">
<button class="button-3">
<button class="button-4">Descubra mais</button> <img class="img"
src="{% static 'img/icon-chevron-right-2.svg' %}" />
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
* {
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
text-decoration: none !important;
}
html,
body {
margin: 0px;
height: 100%;
}
a {
text-decoration: none;
}
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,600");
:root {
--black: rgba(0, 0, 0, 1);
--neutraldark-gray: rgba(80, 80, 80, 1);
--white: rgba(255, 255, 255, 1);
--text-regular-normal-font-family: "Roboto-Regular", Helvetica;
--text-regular-normal-font-weight: 400;
--text-regular-normal-font-size: 16px;
--text-regular-normal-letter-spacing: 0px;
--text-regular-normal-line-height: 150%;
--text-regular-normal-font-style: normal;
--text-regular-semi-bold-font-family: "Roboto-SemiBold", Helvetica;
--text-regular-semi-bold-font-weight: 600;
--text-regular-semi-bold-font-size: 16px;
--text-regular-semi-bold-letter-spacing: 0px;
--text-regular-semi-bold-line-height: 150%;
--text-regular-semi-bold-font-style: normal;
--text-small-normal-font-family: "Roboto-Regular", Helvetica;
--text-small-normal-font-weight: 400;
--text-small-normal-font-size: 14px;
--text-small-normal-letter-spacing: 0px;
--text-small-normal-line-height: 150%;
--text-small-normal-font-style: normal;
}
.desktop {
display: flex;
flex-direction: column;
align-items: center;
gap: 25px;
padding: 0px 235px;
position: relative;
background-color: #ffffff;
}
.desktop .frame {
display: inline-flex;
align-items: flex-start;
padding: 25px 0px 0px 11px;
position: relative;
flex: 0 0 auto;
margin-left: -7.5px;
margin-right: -7.5px;
}
.desktop .navbar {
display: flex;
flex-direction: column;
width: 934px;
height: 72px;
align-items: center;
justify-content: center;
padding: 0px 64px;
position: relative;
background-color: var(--white);
border-bottom-width: 1px;
border-bottom-style: solid;
border-color: #000000;
}
.desktop .container {
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.desktop .column {
position: relative;
flex: 1;
flex-grow: 1;
}
.desktop .div {
display: inline-flex;
align-items: flex-start;
gap: 32px;
position: relative;
flex: 0 0 auto;
}
.desktop .link {
position: relative;
width: fit-content;
margin-top: -1px;
font-family: var(--text-regular-normal-font-family);
font-weight: var(--text-regular-normal-font-weight);
color: var(--black);
font-size: var(--text-regular-normal-font-size);
letter-spacing: var(--text-regular-normal-letter-spacing);
line-height: var(--text-regular-normal-line-height);
white-space: nowrap;
font-style: var(--text-regular-normal-font-style);
}
.desktop .button-wrapper {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
position: relative;
flex: 1;
flex-grow: 1;
}
.desktop .button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 20px;
position: relative;
flex: 0 0 auto;
margin-top: -2px;
margin-bottom: -2px;
margin-right: -2px;
background-color: var(--black);
border: 1px solid;
border-color: var(--black);
all: unset;
box-sizing: border-box;
}
.desktop .text-wrapper {
position: relative;
width: fit-content;
margin-top: -1px;
margin-left: -1px;
font-family: var(--text-regular-normal-font-family);
font-weight: var(--text-regular-normal-font-weight);
color: var(--white);
font-size: var(--text-regular-normal-font-size);
letter-spacing: var(--text-regular-normal-letter-spacing);
line-height: var(--text-regular-normal-line-height);
white-space: nowrap;
font-style: var(--text-regular-normal-font-style);
all: unset;
box-sizing: border-box;
}
.desktop .frame-2 {
display: flex;
flex-direction: column;
width: 886px;
height: 177px;
align-items: center;
gap: 26px;
position: relative;
}
.desktop .INSPIRANDO-MUDAN-AS {
position: relative;
width: fit-content;
margin-top: -1px;
font-family: "Roboto-Medium", Helvetica;
font-weight: 400;
color: #000000;
font-size: 30px;
text-align: center;
letter-spacing: 0;
line-height: 41.1px;
}
.desktop .span {
font-weight: 500;
}
.desktop .text-wrapper-2 {
font-family: "Roboto-Bold", Helvetica;
font-weight: 700;
}
.desktop .frame-3 {
display: flex;
width: 886px;
height: 69px;
align-items: center;
gap: 19px;
padding: 10px 10px 10px 14px;
position: relative;
background-color: #2e2e2e;
border-radius: 5px;
}
.desktop .select {
display: flex;
flex-direction: column;
width: 365px;
align-items: flex-start;
gap: 24px;
position: relative;
align-self: stretch;
}
.desktop .select-2 {
display: flex;
width: 367px;
align-items: center;
gap: 16px;
padding: 12px;
position: relative;
flex: 0 0 auto;
margin-top: -1px;
margin-left: -1px;
margin-right: -1px;
background-color: var(--white);
border: 1px solid;
border-color: var(--black);
}
.desktop .select-one {
position: relative;
flex: 1;
font-family: var(--text-regular-normal-font-family);
font-weight: var(--text-regular-normal-font-weight);
color: var(--neutraldark-gray);
font-size: var(--text-regular-normal-font-size);
letter-spacing: var(--text-regular-normal-letter-spacing);
line-height: var(--text-regular-normal-line-height);
font-style: var(--text-regular-normal-font-style);
}
.desktop .img {
position: relative;
width: 24px;
height: 24px;
}
.desktop .div-wrapper {
display: flex;
width: 112px;
height: 50px;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 20px;
position: relative;
margin-top: -0.5px;
margin-bottom: -0.5px;
margin-right: -1px;
background-color: #ffffff;
border: 1px solid;
border-color: var(--black);
box-shadow: 0px 4px 4px #00000040;
all: unset;
box-sizing: border-box;
}
.desktop .button-2 {
position: relative;
width: fit-content;
font-family: "Roboto-SemiBold", Helvetica;
font-weight: 600;
color: #000000;
font-size: 16px;
letter-spacing: 0;
line-height: 24px;
white-space: nowrap;
all: unset;
box-sizing: border-box;
}
.desktop .frame-4 {
display: inline-flex;
height: 30px;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0px 13px;
position: relative;
border-radius: 8px 8px 0px 0px;
border: 1px solid;
border-color: #000000;
box-shadow: 0px 4px 4px #00000040;
}
.desktop .text-wrapper-3 {
position: relative;
width: fit-content;
font-family: "Roboto-Light", Helvetica;
font-weight: 300;
color: #000000;
font-size: 15px;
letter-spacing: 0;
line-height: 22.5px;
white-space: nowrap;
}
.desktop .frame-5 {
position: relative;
width: 974px;
height: 358px;
margin-left: -22px;
margin-right: -22px;
}
.desktop .tooltip-top {
display: flex;
flex-direction: column;
width: 233px;
height: 336px;
align-items: center;
justify-content: flex-end;
gap: 4px;
position: absolute;
top: 11px;
left: 0;
}
.desktop .tooltip {
display: inline-flex;
flex-direction: column;
align-items: center;
position: relative;
flex: 0 0 auto;
margin-top: -10.45px;
margin-left: -3.62px;
margin-right: -3.62px;
border-radius: 5px;
}
.desktop .content {
display: flex;
flex-direction: column;
width: 240px;
height: 346px;
align-items: flex-start;
gap: 12px;
padding: 12px;
position: relative;
border-radius: 5px;
border: 1px solid;
border-color: #000000;
}
.desktop .placeholder-image {
position: relative;
align-self: stretch;
width: 100%;
height: 212px;
}
.desktop .frame-6 {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
margin-bottom: -4px;
}
.desktop .content-2 {
display: flex;
flex-direction: column;
width: 216px;
align-items: flex-start;
gap: 4px;
position: relative;
flex: 0 0 auto;
}
.desktop .text-wrapper-4 {
position: relative;
align-self: stretch;
margin-top: -1px;
font-family: var(--text-regular-semi-bold-font-family);
font-weight: var(--text-regular-semi-bold-font-weight);
color: #000000;
font-size: var(--text-regular-semi-bold-font-size);
text-align: center;
letter-spacing: var(--text-regular-semi-bold-letter-spacing);
line-height: var(--text-regular-semi-bold-line-height);
font-style: var(--text-regular-semi-bold-font-style);
}
.desktop .p {
position: relative;
align-self: stretch;
font-family: var(--text-small-normal-font-family);
font-weight: var(--text-small-normal-font-weight);
color: #1c1c1c;
font-size: var(--text-small-normal-font-size);
text-align: justify;
letter-spacing: var(--text-small-normal-letter-spacing);
line-height: var(--text-small-normal-line-height);
font-style: var(--text-small-normal-font-style);
}
.desktop .actions {
display: flex;
width: 216px;
align-items: flex-start;
gap: 8px;
padding: 0px 0px 0px 6px;
position: relative;
flex: 0 0 auto;
background-color: #545454;
border-radius: 2px;
box-shadow: 0px 4px 4px #00000040;
}
.desktop .button-3 {
display: flex;
width: 210px;
align-items: center;
justify-content: center;
position: relative;
all: unset;
box-sizing: border-box;
}
.desktop .button-4 {
position: relative;
width: fit-content;
font-family: "Roboto-Regular", Helvetica;
font-weight: 400;
color: #ffffff;
font-size: 12px;
letter-spacing: 0;
line-height: 18px;
white-space: nowrap;
all: unset;
box-sizing: border-box;
}
.desktop .tooltip-wrapper {
left: 246px;
display: flex;
flex-direction: column;
width: 233px;
height: 336px;
align-items: center;
justify-content: flex-end;
gap: 4px;
position: absolute;
top: 11px;
}
.desktop .placeholder-image-2 {
position: relative;
align-self: stretch;
width: 110%;
height: 212px;
}
.desktop .tooltip-top-2 {
left: 492px;
display: flex;
flex-direction: column;
width: 233px;
height: 336px;
align-items: center;
justify-content: flex-end;
gap: 4px;
position: absolute;
top: 11px;
}
.desktop .tooltip-top-3 {
left: 737px;
display: flex;
flex-direction: column;
width: 233px;
height: 336px;
align-items: center;
justify-content: flex-end;
gap: 4px;
position: absolute;
top: 11px;
}
