Skip to content

Commit

Permalink
Site beta
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dione-b
Dione-b committed Jul 13, 2021
0 parents commit fbe2d8d
Show file tree
Hide file tree
Showing 12 changed files with 1,011 additions and 0 deletions.
Binary file added images/banner.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/banner1.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/carlos.jfif
Binary file not shown.
Binary file added images/danrley.jfif
Binary file not shown.
Binary file added images/danrley.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/dev.jfif
Binary file not shown.
Binary file added images/foto1.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/iago.jfif
Binary file not shown.
Binary file added images/mateus.jfif
Binary file not shown.
258 changes: 258 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,258 @@
<!DOCTYPE html>
<!-- Created By Dione referer CodingNepal -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio Website</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>

</head>
<body>
<div class="scroll-up-btn">
<i class="fas fa-angle-up"></i>
</div>
<nav class="navbar">
<div class="max-width">
<div class="logo"><a href="#">Dev<span>Ups.</span></a></div>
<ul class="menu">
<li><a href="#home" class="menu-btn">Inicio</a></li>
<li><a href="#about" class="menu-btn">Sobre</a></li>
<li><a href="#services" class="menu-btn">Serviços</a></li>
<li><a href="#skills" class="menu-btn">Habilidades</a></li>
<li><a href="#teams" class="menu-btn">Equipe</a></li>
<li><a href="#contact" class="menu-btn">Contato</a></li>
</ul>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>

<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Olá, nós somos a</div>
<div class="text-2">DevUps</div>
<div class="text-3">Trabalhamos com <span class="typing"></span></div>
<a href="#">Explorar</a>
</div>
</div>
</section>

<!-- about section start -->
<section class="about" id="about">
<div class="max-width">
<h2 class="title">Sobre Nós</h2>
<div class="about-content">
<div class="column left">
<img src="images/dev.jfif" alt="">
</div>
<div class="column right">
<div class="text">O que fazemos? <span class="typing-2"></span></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi ut voluptatum eveniet doloremque autem excepturi eaque, sit laboriosam voluptatem nisi delectus. Facere explicabo hic minus accusamus alias fuga nihil dolorum quae. Explicabo illo unde, odio consequatur ipsam possimus veritatis, placeat, ab molestiae velit inventore exercitationem consequuntur blanditiis omnis beatae. Dolor iste excepturi ratione soluta quas culpa voluptatum repudiandae harum non.</p>
<a href="#">Conheça</a>
</div>
</div>
</div>
</section>

<!-- services section start -->
<section class="services" id="services">
<div class="max-width">
<h2 class="title">Nossos Serviços</h2>
<div class="serv-content">
<div class="card">
<div class="box">
<i class="fas fa-paint-brush"></i>
<div class="text">Web Design</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem quia sunt, quasi quo illo enim.</p>
</div>
</div>
<div class="card">
<div class="box">
<i class="fas fa-chart-line"></i>
<div class="text">Marketing Digital</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem quia sunt, quasi quo illo enim.</p>
</div>
</div>
<div class="card">
<div class="box">
<i class="fas fa-code"></i>
<div class="text">Desenvolvimento Mobile</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem quia sunt, quasi quo illo enim.</p>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- skills section start -->
<section class="skills" id="skills">
<div class="max-width">
<h2 class="title">Habilidades</h2>
<div class="skills-content">
<div class="column left">
<div class="text">Competencias da Equipe</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, ratione error est recusandae consequatur, iusto illum deleniti quidem impedit, quos quaerat quis minima sequi. Cupiditate recusandae laudantium esse, harum animi aspernatur quisquam et delectus ipsum quam alias quaerat? Quasi hic quidem illum. Ad delectus natus aut hic explicabo minus quod.</p>
<a href="#">Leia Mais</a>
</div>
<div class="column right">
<div class="bars">
<div class="info">
<span>HTML</span>
<span>90%</span>
</div>
<div class="line html"></div>
</div>
<div class="bars">
<div class="info">
<span>CSS</span>
<span>60%</span>
</div>
<div class="line css"></div>
</div>
<div class="bars">
<div class="info">
<span>JavaScript</span>
<span>80%</span>
</div>
<div class="line js"></div>
</div>
<div class="bars">
<div class="info">
<span>PHP</span>
<span>50%</span>
</div>
<div class="line php"></div>
</div>
<div class="bars">
<div class="info">
<span>MySQL</span>
<span>70%</span>
</div>
<div class="line mysql"></div>
</div>
</div>
</div>
</div>
</section>

<!-- teams section start -->
<section class="teams" id="teams">
<div class="max-width">
<h2 class="title">Equipe</h2>
<div class="carousel owl-carousel">
<div class="card">
<div class="box">
<img src="images/danrley.jpg" alt="">
<div class="text">Danrley Silva</div>
<p>Desenvolvedor Mobile</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="images/mateus.jfif" alt="">
<div class="text">Mateus Sousa</div>
<p>Desenvolvedor Front-End</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="images/carlos.jfif" alt="">
<div class="text">Carlos Eduardo</div>
<p>Desenvolvedor Back-End</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="images/iago.jfif" alt="">
<div class="text">Iago Silva</div>
<p>Marketign Digital.</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="images/foto1.jpeg" alt="">
<div class="text">Dione Bastos</div>
<p>Analista de Cibersegurança</p>
</div>
</div>
</div>
</div>
</section>

<!-- contact section start -->
<section class="contact" id="contact">
<div class="max-width">
<h2 class="title">Contato</h2>
<div class="contact-content">
<div class="column left">
<div class="text">Contacte a gente</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos harum corporis fuga corrupti. Doloribus quis soluta nesciunt veritatis vitae nobis?</p>
<div class="icons">
<div class="row">
<i class="fas fa-user"></i>
<div class="info">
<div class="head">Nome</div>
<div class="sub-title">DevUps</div>
</div>
</div>
<div class="row">
<i class="fas fa-map-marker-alt"></i>
<div class="info">
<div class="head">Endereço</div>
<div class="sub-title">Parnaiba, Piauí</div>
</div>
</div>
<div class="row">
<i class="fas fa-envelope"></i>
<div class="info">
<div class="head">Email</div>
<div class="sub-title">devups@gmail.com</div>
</div>
</div>
</div>
</div>
<div class="column right">
<div class="text">Mensagem</div>
<form action="#">
<div class="fields">
<div class="field name">
<input type="text" placeholder="Nome" required>
</div>
<div class="field email">
<input type="email" placeholder="Email" required>
</div>
</div>
<div class="field">
<input type="text" placeholder="Enviar" required>
</div>
<div class="field textarea">
<textarea cols="30" rows="10" placeholder="Texto.." required></textarea>
</div>
<div class="button">
<button type="submit">Enviar</button>
</div>
</form>
</div>
</div>
</div>
</section>

<!-- footer section start -->
<footer>
<span>Criado por <a>DevUps</a> | <span class="far fa-copyright"></span> 2020 All rights reserved.</span>
</footer>

<script src="script.js"></script>
</body>
</html>
72 changes: 72 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
$(document).ready(function(){
$(window).scroll(function(){
// sticky navbar on scroll script
if(this.scrollY > 20){
$('.navbar').addClass("sticky");
}else{
$('.navbar').removeClass("sticky");
}

// scroll-up button show/hide script
if(this.scrollY > 500){
$('.scroll-up-btn').addClass("show");
}else{
$('.scroll-up-btn').removeClass("show");
}
});

// slide-up script
$('.scroll-up-btn').click(function(){
$('html').animate({scrollTop: 0});
// removing smooth scroll on slide-up button click
$('html').css("scrollBehavior", "auto");
});

$('.navbar .menu li a').click(function(){
// applying again smooth scroll on menu items click
$('html').css("scrollBehavior", "smooth");
});

// toggle menu/navbar script
$('.menu-btn').click(function(){
$('.navbar .menu').toggleClass("active");
$('.menu-btn i').toggleClass("active");
});

// typing text animation script
var typed = new Typed(".typing", {
strings: ["Desenvolvimento", "Educação", "Tecnologia", "Inovação",],
typeSpeed: 100,
backSpeed: 60,
loop: true
});

var typed = new Typed(".typing-2", {
strings: ["Desenvolvimento", "Educação", "Tecnologia", "Inovação",],
typeSpeed: 100,
backSpeed: 60,
loop: true
});

// owl carousel script
$('.carousel').owlCarousel({
margin: 20,
loop: true,
autoplayTimeOut: 2000,
autoplayHoverPause: true,
responsive: {
0:{
items: 1,
nav: false
},
600:{
items: 2,
nav: false
},
1000:{
items: 3,
nav: false
}
}
});
});
Loading

0 comments on commit fbe2d8d

Please sign in to comment.