| Current File : /home/exataengenharia/public_html/resources/views/components/orcamento.blade.php |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Orçamento</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<style>
@font-face {
font-family: 'main';
src: url('/fonts/MarlinGeo-Regular.otf') format('opentype');
}
main {
display: grid;
grid-template-columns: 2fr 2fr;
justify-content: baseline;
}
iframe#orcamento {
width: 100%;
height: 110vh;
overflow-y: none !important;
border-radius: 30px;
}
body {
background-color: #FF6700;
color: #fff;
}
.container__one h1 {
font-size: 60px;
font-family: main;
}
.container__one h2 {
width: calc(100% - 200px);
font-size: 26px;
margin-top: 2rem;
line-height: 1.5;
font-family: main;
}
/* config mobile */
@media (min-width: 300px) and (max-width: 900px) {
main {
grid-template-columns: 1fr;
}
}
.break__line {
padding: 5rem;
}
</style>
</head>
<body>
<section>
<header>
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth !important;
}
/* Resto do código CSS */
.mynav {
width: 100%;
background-color: #fff;
display: flex;
align-items: center;
padding: 1rem;
position: fixed;
z-index: 100000000;
}
.mynav>.mynav-header {
flex: 0.95;
padding-left: 1rem;
}
.mynav>.mynav-header>.mynav-title {
font-size: 22px;
color: #000;
}
.mynav>.mynav-list {
display: flex;
gap: 2rem;
align-items: center;
transform: translateY(10px);
}
.mynav>.mynav-list>li {
list-style-type: none;
align-self: center;
}
.mynav>.mynav-list>li a {
text-decoration: none;
color: #000;
cursor: pointer;
font-size: 18px;
font-family: main, Helvetica, sans-serif;
font-weight: 600;
align-self: center;
}
.mynav>#mynav-check {
display: none;
}
@media (max-width: 1200px) {
.mynav {
padding: 1rem;
}
.mynav>.mynav-btn {
display: inline-block;
position: absolute;
right: 0;
top: 0;
padding-top: 0.2rem;
transform: scale(1.3);
}
.mynav>.mynav-btn>label {
display: inline-block;
width: 50px;
height: 50px;
padding: 33px 70px;
cursor: pointer;
}
.mynav>.mynav-btn>label>span {
display: block;
width: 30px;
height: 2px;
background-color: #000;
transform-origin: center;
transition: transform 0.3s ease-in-out;
}
.mynav>.mynav-btn>label>span:nth-child(1) {
transform: translateY(10px);
}
.mynav>.mynav-btn>label>span:nth-child(3) {
transform: translateY(-10px);
}
.mynav>#mynav-check:checked~.mynav-btn>label>span:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
.mynav>#mynav-check:checked~.mynav-btn>label>span:nth-child(2) {
transform: scaleX(0);
}
.mynav>#mynav-check:checked~.mynav-btn>label>span:nth-child(3) {
transform: translateY(5px) rotate(-50deg);
}
.mynav>.mynav-list {
position: absolute;
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
background-color: #fff;
height: 0;
transition: all 0.3s ease-in;
top: 60px;
left: 0;
overflow: hidden;
}
.mynav>.mynav-list>li {
width: 100%;
margin-top: 1.5rem;
}
.mynav>#mynav-check:checked~.mynav-list {
height: calc(100vh - 50px);
}
}
@media (min-width: 300px) and (max-width: 700px) {
.mynav>.mynav-list {
position: absolute;
display: flex;
flex-direction: column;
gap: 0rem;
padding: 1rem;
width: 100%;
background-color: #fff;
height: 0;
transition: all 0.3s ease-in;
top: 60px;
left: 0;
overflow: hidden;
}
.list-space {
margin-left: 0rem !important;
transform: translateY(-12px);
}
}
</style>
</head>
<body>
<nav class="mynav">
<input type="checkbox" id="mynav-check">
<div class="mynav-header">
<div class="mynav-title">
<a href="{{route('usuarios.index')}}">
<img width="200" src="img/EXATA-ENGENHARIA-SOLAR.png" alt="Logo da Exata">
</a>
</div>
</div>
<div class="mynav-btn">
<label for="mynav-check">
<span></span>
<span></span>
<span></span>
</label>
</div>
<ul class="mynav-list nav" style="z-index: 1000000000;">
<li><a href="{{route('usuarios.index')}}" data-target="home" class="smooth-scroll">Voltar para o site da <strong>Exata</strong></a></li>
<li><a href="{{route('orcamento')}}" class="btn btn-dark"><span style="color: #fff;">Solicite um orçamento</span></a></li>
</ul>
</nav>
</body>
</html>
<div class="break__line"></div>
</header>
<main class="container">
<section class="container__one">
<h1>
<strong>Solicite aqui <br></strong> o seu orçamento!
</h1>
<h2>
Receba uma proposta
irrecusável do seu sistema
de Energia Solar.
</h2>
</section>
<section class="content__two">
<iframe
src="https://azume.com.br/simulador/64665aa58bd4850014768921"
id="orcamento"
scrolling="no"
/>
</section>
</main>
</section>
</body>
</html>