Pagina Com Preloader Codigo HTML CSS JAVASCRIPT
Por: weslley0509 • 17/4/2021 • Trabalho acadêmico • 3.278 Palavras (14 Páginas) • 195 Visualizações
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Open+Sans:400,400i,700,700i,800,800i&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css"/>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<title>João Lemon - UX/UI Designer</title>
</head>
<body>
<div class="jl-preloader">
<div class="jç-preloader-symbol">
<img src="images/lemon-loader.svg">
<p class="jl-text-light jl-mar-top-15">Aguarde um pouquinho ... Estou preparando a limonada</p>
</div>
</div>
<header class="jl-topbar">
<div class="jl-logo">
<img src="images/logo.svg" alt="Logo João Lemon UX/UI Designer"/>
</div>
<nav class="jl-menu">
<a href="#">Home</a>
<a href="#">Projetos</a>
<a href="#">Sobre</a>
</nav>
</header>
<div class="jl-contact-info jl-bg-black jl-text-light">
<div class="jl-contact-info-inner">
<h2 class="jl-title jl-text-green">Contato</h2>
<p>hello@joaolemon.com</p>
<p>+55 (00) 9 9999 8888</p>
<div class="jl-social-links">
<a href="#" class="jl-social">
<img src="images/icon-instagram.svg" alt="Instagram">
</a>
<a href="#" class="jl-social">
<img src="images/icon-twitter.svg" alt="Twitter">
</a>
<a href="#" class="jl-social">
<img src="images/icon-dribbble.svg" alt="Dribbble">
</a>
</div>
</div>
<div class="jl-corner">
</div>
</div>
<button class="jl-btn-contact">
</button>
<div class="jl-page-wrapper">
<section class="jl-full-height jl-first-section" id="jl-home-presentation">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-3 offset-md-2 jl-display-text">
<h1 class="jl-title jl-text-green jl-title-big">Olá!</h1>
<p class="jl-text-light">Meu nome é <span class="jl-text-green">João Lemon</span>, sou designer
de <span class="jl-text-green">UX e UI</span>. Nulla vulputate, ex in
tincidunt consequat, dui metus luctus purus, ut dapibus quam augue sit amet leo. Phasellus
sit amet purus in elit efficitur viverra.</p>
<a class="jl-btn">Meu botão</a>
</div>
</div>
</div>
<div class="jl-scroll-down">
<div class="jl-arrow-down">
<img src="images/arrow-down.svg" alt="Role a Página">
</div>
</div>
</section>
<section class="jl-full-height">
section 1
</section>
...