| <body class="page-scroll" id="page-top"> | |
| <nav class="navbar navbar-default navbar-fixed-top bg-light" id="myNav" role="navigation"> | |
| <div class="container no-padding"> | |
| <div class="navbar-header"> | |
| <!-- nav menu icon toggle --> | |
| <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false"> | |
| <span class="icon-bar top-bar"></span> | |
| <span class="icon-bar middle-bar"></span> | |
| <span class="icon-bar bottom-bar"></span> | |
| </button> | |
| <!-- navbar svg logo --> | |
| <a class="navbar-brand page-scroll" href="#page-top"> | |
| <svg class="nav-logo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/199/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 40 40" style="enable-background:new 0 0 41 41;" xml:space="preserve"> | |
| <style type="text/css"> | |
| .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#1A1C1C;transition:.45s;} | |
| .st0:hover{fill:#9dbdc6;} | |
| </style> | |
| <g> | |
| <path class="st0" d="M13.68,13.114h4.426h0.177h9.692c0.046-0.002-0.657-0.002,0.135-0.002c1.619-0.002,2.608,0.903,2.139,2.401 | |
| l-0.813,2.589c-0.256,0.809-0.902,1.53-1.788,1.953l2.849,7.835c-13.793-2.695-9.446-8.267-3.501-4.942 | |
| c-0.608-1.044-1.988-2.368-6.261-2.032c-2.367,0.184-6.45,0.749-10.232,2.32L13.68,13.114L13.68,13.114z M0.5,0.5h40v40h-40V0.5L0.5,0.5z"/> | |
| </g> | |
| </svg> | |
| </a> | |
| <!-- navbar svg logo end --> | |
| <div class="collapse navbar-collapse bg-light" id="myNavbar"> | |
| <ul class="nav navbar-nav navbar-right"> | |
| <li><a href="#portfolio" class="page-scroll">Portfolio</a></li> | |
| <li><a href="#about" class="page-scroll">About</a></li> | |
| <li><a href="#skills" class="page-scroll">Skills</a></li> | |
| <li><a href="#contact" class="page-scroll">Contact</a></li> | |
| </ul> | |
| </div> | |
| <!-- navbar-collapse end --> | |
| </div> | |
| <!-- navbar-header end --> | |
| </div> | |
| <!-- container end --> | |
| </nav> | |
| <!-- hero --> | |
| <section class="hero-section wrap"> | |
| <div class="hero-bg"></div> | |
| <div class="container no-padding padding-sm"> | |
| <div class="hero-intro"> | |
| <span>Hi I'm Obrach</span> | |
| <div class=title>I Create Branding &<br> Develop Websites</div> | |
| <a href="#portfolio" class="page-scroll"><button class="btn-lg hero-btn">Take A Look</buton></a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- hero end --> | |
| <!-- portfolio gallery --> | |
| <section class="portfolio-section" id="portfolio"> | |
| <div class="box-expand"></div> | |
| <div class="container-fluid"> | |
| <div class="row no-gutter gallery-boxes"> | |
| <!-- portfolio box1 --> | |
| <div class="col-lg-4 col-sm-6"> | |
| <a href="#" class="portfolio-box"> | |
| <img class="img-responsive" src="http://gdurl.com/MeDU"> | |
| <div class="portfolio-box-caption"> | |
| <div class="portfolio-box-caption-content"> | |
| <div class="project-category text-faded"> | |
| <div class="project-name"> | |
| Eq Arte | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| <!-- portfolio box1 end --> | |
| <!-- portfolio box2 --> | |
| <div class="col-lg-4 col-sm-6"> | |
| <a href="#" class="portfolio-box"> | |
| <img class="img-responsive" src="http://gdurl.com/wCuO"> | |
| <div class="portfolio-box-caption"> | |
| <div class="portfolio-box-caption-content"> | |
| <div class="project-category text-faded"> | |
| <div class="project-name"> | |
| Retrouve | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| <!-- portfolio box2 end --> | |
| <!-- portfolio box3 --> | |
| <div class="col-lg-4 col-sm-6"> | |
| <a href="#" class="portfolio-box"> | |
| <img class="img-responsive" src="http://gdurl.com/sO5Q"> | |
| <div class="portfolio-box-caption"> | |
| <div class="portfolio-box-caption-content"> | |
| <div class="project-category text-faded"> | |
| <div class="project-name"> | |
| Mathaholic | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| <!-- portfolio box3 end --> | |
| <!-- portfolio box4 --> | |
| <div class="col-lg-4 col-sm-6"> | |
| <a href="#" class="portfolio-box"> | |
| <img class="img-responsive" src="http://gdurl.com/wBWs"> | |
| <div class="portfolio-box-caption"> | |
| <div class="portfolio-box-caption-content"> | |
| <div class="project-category text-faded"> | |
| <div class="project-name"> | |
| Puertas Adentro | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| <!-- portfolio box4 end --> | |
| <!-- portfolio box5 --> | |
| <div class="col-lg-4 col-sm-6"> | |
| <a href="#" class="portfolio-box"> | |
| <img class="img-responsive" src="http://gdurl.com/X-EJ"> | |
| <div class="portfolio-box-caption"> | |
| <div class="portfolio-box-caption-content"> | |
| <div class="project-category text-faded"> | |
| <div class="project-name"> | |
| Claseviva | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| <!-- portfolio box5 end --> | |
| <!-- portfolio box6 --> | |
| <div class="col-lg-4 col-sm-6"> | |
| <a href="#" class="portfolio-box"> | |
| <img class="img-responsive" src="http://gdurl.com/6d8o"> | |
| <div class="portfolio-box-caption"> | |
| <div class="portfolio-box-caption-content"> | |
| <div class="project-category text-faded"> | |
| <div class="project-name"> | |
| Tondo Art | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| <!-- portfolio box6 end --> | |
| <!-- portfolio box7 --> | |
| <div class="col-lg-4 col-sm-6"> | |
| <a href="#" class="portfolio-box"> | |
| <img class="img-responsive" src="http://gdurl.com/Kevb"> | |
| <div class="portfolio-box-caption"> | |
| <div class="portfolio-box-caption-content"> | |
| <div class="project-category text-faded"> | |
| <div class="project-name"> | |
| Mandioca | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| <!-- portfolio box7 end --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- portfolio gallery end --> | |
| <!-- | |
| --> | |
| <section class="about-section bg-light" id="about"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <img class="img-responsive about-img" src="https://scontent.fmid1-1.fna.fbcdn.net/v/t31.0-8/p960x960/14566436_10211014324979802_7260818878039415644_o.jpg?oh=0d4dd5cce80a0f387f0044f69cc99f08&oe=59204DF7"> | |
| </div> | |
| <div class="col-md-6"> | |
| <h2>Juan Manuel Obrach</h2> | |
| <div class="about-content"> | |
| <p>Hace mas de 5 años inicie mi carrera como programador "Full-stack" para un proyecto personal el cual me llevo a ingresar a trabajar junto al team de desarrolladores <a href="http://www.gm2dev.com/">gm2dev</a>(Argentina) trabajando profesionalmente en todo tipo de soluciones para empresas de estados unidos y europa. Esta experiencia me permitio absorver conocimientos de base para permitirme estudiar las tecnologias mas emergentes</p> | |
| <p>Ademas, tuve la oportunidad de desarrollar de manera personal 2 <a href="https://play.google.com/store/apps/details?id=com.ionicframework.todo761039&hl=en">aplicaciones</a> para Ios / Android en 2 eventos organizados por la municipalidad de San Isidro - Argentina</p> | |
| <p> La mision que tengo para cada proyecto en el cual formo parte es en la creacion de un producto que respete los estandares de perfomance , diseño y organizacion teniendo en cuenta los tiempos y el presupuesto establecido por el cliente</p> | |
| <p> Actualmente me encuentro viviendo en Playa del Carmen - Mexico. Donde formo parte de una startup en la cual me encuentro desarrollando un software de automatizacion de procesos basado en <a href="https://www.chef.io/">Chef.io </a></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- about end --> | |
| <!-- skils --> | |
| <section class="skills-section bg-light padding-sm" id="skills"> | |
| <div class="container"> | |
| <div class="row"> | |
| <h2 class="left">Mis conocimientos</h2> | |
| <div class="skills-bar-container"> | |
| <ul id="gallery_skills" style="display:flex;"> | |
| <li><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1024px-HTML5_logo_and_wordmark.svg.png" alt="" /></li> | |
| <li><img src="http://w3widgets.com/responsive-slider/img/css3.png" alt="" /></li> | |
| <li><img src="https://www.javacodegeeks.com/wp-content/uploads/2016/01/javascript-shield.png" alt="" /></li> | |
| <li><img src="http://precision-software.com/wp-content/uploads/2014/04/jQurery.gif" alt="" /></li> | |
| <li><img src="http://sass-lang.com/assets/img/styleguide/color-1c4aab2b.png" alt="" /></li> | |
| <li><img src="http://8-themes.com/wp-content/uploads/2016/02/logo-git-300x125.png" alt="" /></li> | |
| <li><img src="http://p9.storage.canalblog.com/95/52/388561/21464247.png" alt="" /></li> | |
| <!-- gulp --> | |
| <li><img src="https://camo.githubusercontent.com/1d502a993a7f1698c519016c0b931cbdf6dd8d11/687474703a2f2f726d646961732e636f6d2f696d616765732f737562646f6d61696e732f67756c70776f726b666c6f772f67756c702d6c6f676f2e706e67" alt="" /></li> | |
| <!-- Bower --> | |
| <li><img src="http://atomrace.com/blog/wp-content/uploads/2016/01/bower-javascript1.png" alt="" /></li> | |
| <!--- mysql --> | |
| <li><img src="https://upload.wikimedia.org/wikipedia/en/thumb/6/62/MySQL.svg/640px-MySQL.svg.png" alt="" /></li> | |
| <!-- Mongodb --> | |
| <li><img src="http://www.theodo.fr/uploads/blog//2015/11/mongodb.png" alt="" /></li> | |
| <!-- VisualBasic --> | |
| <li><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Visual_Basic_for_Applications_logo_and_wordmark.svg/2000px-Visual_Basic_for_Applications_logo_and_wordmark.svg.png" alt="" /></li> | |
| <!-- wordpress --> | |
| <li><img src="https://s.w.org/about/images/logos/wordpress-logo-stacked-rgb.png" alt="" /></li> | |
| <!-- reactjs --> | |
| <li><img src="http://donejs.com/static/img/react-logo.png" alt="" /></li> | |
| <!-- angular --> | |
| <li><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/AngularJS_logo.svg/695px-AngularJS_logo.svg.png" alt="" /></li> | |
| <!-- ionic --> | |
| <li><img src="https://baxeico.files.wordpress.com/2015/05/ionic-logo-268x300.png" alt="" /></li> | |
| <!-- bootstrap --> | |
| <li><img src="http://iomg.med.br/images/partner-logos/logo-bootstrap.png" alt="" /></li> | |
| <!-- Bash --> | |
| <li><img src="http://www.unixstickers.com/image/data/stickers/binbash/Bash-logotype-new.sh.png" alt="" /></li> | |
| <!-- Chef.io --> | |
| <li><img src="http://s3.amazonaws.com/opscode-corpsite/assets/121/pic-chef-logo.png" alt="" /></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- skills end --> | |
| <!-- contact --> | |
| <footer class="contact-section bg-dark" id="contact"> | |
| <div class="container"> | |
| <div class="row contact-info lt-blue"> | |
| <div class="row"> | |
| <div class="col-sm-12"> | |
| <div class="flex contact-icons center img-responsive"> | |
| <a href="https://www.facebook.com/juanmanuel.obrach/" target="_blank"><i class="fa fa-facebook"></i></a> | |
| <a href="https://github.com/juanobrach/" target="_blank"><i class="fa fa-github"></i></a> | |
| <a href="codepen.io/juanobrach/" target="_blank"><i class="fa fa-codepen"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-xs-12"> | |
| <a href="#" class="center email-sm"><h3>juanobrach@gmail.com</h3></a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- contact end --> | |
| </body> | |
| <!-- body end --> |
Part of the Free Code Camp Front End Development course is to build your own portfolio website to showcase your skills. Here is my humble portfolio website build with Bootstrap CSS and J Query.
Thanks for Watching!
Forked from Rick Wisneske's Pen Rick Wisneske Portfolio.
A Pen by Juan Obrach on CodePen.
Part of the Free Code Camp Front End Development course is to build your own portfolio website to showcase your skills. Here is my humble portfolio website build with Bootstrap CSS and J Query.
Thanks for Watching!
Forked from Rick Wisneske's Pen Rick Wisneske Portfolio.
A Pen by Juan Obrach on CodePen.
| $(function() { | |
| // // Parallax Background Image | |
| var lFollowX = 0, | |
| lFollowY = 0, | |
| x = 0, | |
| y = 0, | |
| friction = 1 / 35; | |
| function moveBackground() { | |
| x += (lFollowX - x) * friction; | |
| y += (lFollowY - y) * friction; | |
| translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)'; | |
| $('.hero-bg').css({ | |
| '-webit-transform': translate, | |
| '-moz-transform': translate, | |
| 'transform': translate | |
| }); | |
| window.requestAnimationFrame(moveBackground); | |
| } | |
| $(window).on('mousemove click', function(e) { | |
| var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX)); | |
| var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY)); | |
| lFollowX = (-10 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow | |
| lFollowY = (-5 * lMouseY) / 100; | |
| }); | |
| moveBackground(); | |
| // Portfolio Box Expand | |
| // jQuery for page scrolling feature - requires jQuery Easing plugin | |
| $('a.page-scroll').bind('click', function(event) { | |
| var $anchor = $(this); | |
| $('html, body').stop().animate({ | |
| scrollTop: ($($anchor.attr('href')).offset().top - 79) | |
| }, 1250, 'easeInOutExpo'); | |
| event.preventDefault(); | |
| }); | |
| // // Highlight the top nav as scrolling occurs | |
| $('body').scrollspy({ | |
| target: "#myNav", | |
| offset: 80 | |
| }); | |
| // Fixed Nav Menu Navbar Shrink on Scroll | |
| // Closes the Responsive Menu on Menu Item Click | |
| $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function() { | |
| $('.navbar-toggle:visible').click(); | |
| }); | |
| // Skills Bars Animation | |
| setTimeout(function() { | |
| $('#html-percent').html('100%'); | |
| }, 2800); | |
| setTimeout(function() { | |
| $('#css-percent').html('90%'); | |
| }, 3500); | |
| setTimeout(function() { | |
| $('#javascript-percent').html('70%'); | |
| }, 4200); | |
| setTimeout(function() { | |
| $('#git-percent').html('70%'); | |
| }, 4200); | |
| setTimeout(function() { | |
| $('#php-percent').html('95%'); | |
| }, 4900); | |
| setTimeout(function() { | |
| $('#nodejs-percent').html('25%'); | |
| }, 5600); | |
| setTimeout(function() { | |
| $('#wordpress-percent').html('100%'); | |
| }, 5600); | |
| setTimeout(function() { | |
| $('#ionic-percent').html('70%'); | |
| }, 5600); | |
| setTimeout(function() { | |
| $('#gulp-percent').html('100%'); | |
| }, 5600); | |
| setTimeout(function() { | |
| $('#mysql-percent').html('80%'); | |
| }, 5600); | |
| // Fit Text Plugin for Main Header | |
| // $("h1").fitText( | |
| // 1.2, { | |
| // minFontSize: '35px', | |
| // maxFontSize: '65px' | |
| // } | |
| // ); | |
| // // Offset for Main Navigation | |
| // $('#mainNav').affix({ | |
| // offset: { | |
| // top: 100 | |
| // } | |
| // }) | |
| // Touch Events | |
| function onTouch(evt) { | |
| evt.preventDefault(); | |
| if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0)) | |
| return; | |
| var newEvt = document.createEvent("MouseEvents"); | |
| var type = null; | |
| var touch = null; | |
| switch (evt.type) { | |
| case "touchstart": | |
| type = "mousedown"; | |
| touch = evt.changedTouches[0]; | |
| break; | |
| case "touchmove": | |
| type = "mousemove"; | |
| touch = evt.changedTouches[0]; | |
| break; | |
| case "touchend": | |
| type = "mouseup"; | |
| touch = evt.changedTouches[0]; | |
| break; | |
| } | |
| newEvt.initMouseEvent(type, true, true, evt.originalTarget.ownerDocument.defaultView, 0, | |
| touch.screenX, touch.screenY, touch.clientX, touch.clientY, | |
| evt.ctrlKey, evt.altKey, evt.shiftKey, evt.metaKey, 0, null); | |
| evt.originalTarget.dispatchEvent(newEvt); | |
| } | |
| // Initialize WOW.js Scrolling Animations | |
| new WOW().init(); | |
| }); |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> | |
| <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> |
| * , | |
| *::before, | |
| *::after { | |
| border: none; | |
| border-radius: 0 !important; | |
| box-shadow: none; | |
| } | |
| a { | |
| text-decoration: none !important; | |
| } | |
| body { | |
| box-sizing: border-box; | |
| font-family: "Roboto", Helvetica, sans serif; | |
| z-index: -2; | |
| } | |
| .bg-light { | |
| background: #daeaef; | |
| } | |
| .bg-dark { | |
| background: #2c3e50; | |
| } | |
| .center { | |
| margin-left: auto; | |
| margin-right: auto; | |
| text-align: center; | |
| } | |
| .left{ | |
| text-align:center; | |
| } | |
| .flex { | |
| align-items: center; | |
| display: flex; | |
| flex-direction: row; | |
| font-size: 2em; | |
| justify-content: space-around; | |
| height: 100%; | |
| } | |
| h1, | |
| h2, | |
| h3 { | |
| font-family: 'Roboto Slab', serif; | |
| font-weight: bold; | |
| } | |
| .lt-blue { | |
| color: #daeaef; | |
| } | |
| .drk-blue { | |
| color: #2c3e50; | |
| } | |
| .no-gutter { | |
| margin-left: 0; | |
| margin-right: 0; | |
| } | |
| .no-gutter > [class*='col-'] { | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| .no-padding { | |
| padding: 0; | |
| } | |
| @media screen and (max-width: 768px) { | |
| .padding-sm { | |
| padding: 0 20px; | |
| } | |
| } | |
| .row { | |
| margin-left: -15px; | |
| margin-right: -15px; | |
| } | |
| .section { | |
| padding: 250px 0; | |
| } | |
| @media screen and (max-width: 768px) { | |
| .section { | |
| padding: 150px 0; | |
| } | |
| } | |
| .text-faded { | |
| color: rgb(255, 255, 255); | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| .title { | |
| color: #191b1c; | |
| font-family: "Roboto Slab", serif; | |
| font-size: 3.85em; | |
| font-weight: bold; | |
| letter-spacing: -.01em; | |
| line-height: 1em; | |
| word-spacing: -.05em; | |
| } | |
| @media screen and (max-width: 768px) { | |
| .title { | |
| font-size: 3.45em; | |
| letter-spacing: -.009em; | |
| line-height: 1em; | |
| word-spacing: -.04em; | |
| } | |
| } | |
| /* navbar */ | |
| .navbar-header { | |
| float: none; | |
| height: 80px; | |
| } | |
| .navbar-fixed-top .navbar-collapse { | |
| max-height: 450px; | |
| } | |
| .navbar-fixed-top a { | |
| display: block; | |
| transition: .45s; | |
| } | |
| @media screen and (max-width: 768px) { | |
| .nav .navbar-nav .navbar-right { | |
| border: none !important; | |
| padding: 0 15px !important; | |
| } | |
| } | |
| .navbar-default .navbar-nav li a { | |
| background-color: transparent !important; | |
| color: #1a1c1d; | |
| font-family: "Roboto", Helvetica, sans serif; | |
| font-size: .96em; | |
| font-weight: normal; | |
| margin-top: 10px; | |
| padding-top: 20px; | |
| text-transform: uppercase; | |
| } | |
| @media screen and (max-width: 768px) { | |
| .navbar-default li a { | |
| font-family: "Roboto", Helvetica, sans serif; | |
| font-size: 1.55em; | |
| font-weight: 400; | |
| margin: 50px auto; | |
| text-transform: uppercase; | |
| } | |
| .navbar-default li a:hover { | |
| color: #9dbdc6 !important; | |
| } | |
| } | |
| .navbar-default .navbar-nav>.active>a, | |
| .navbar-default .navbar-nav>.active>a:focus, | |
| .navbar-default .navbar-nav>.active>a:hover { | |
| color: #9dbdc6; | |
| } | |
| .navbar-default .navbar-nav li a:hover, | |
| .navbar-default .navbar-nav li a:focus { | |
| color: #9dbdc6; | |
| } | |
| .navbar-toggle { | |
| margin: 25px; | |
| } | |
| @media screen and (max-width: 768px) { | |
| .navbar-toggle { | |
| border: none; | |
| background: transparent !important; | |
| } | |
| .navbar-default .navbar-toggle .icon-bar { | |
| background-color: #1a1c1d; | |
| } | |
| .navbar-default .navbar-toggle:hover .icon-bar { | |
| background-color: #9dbdc6; | |
| transition: .45s; | |
| } | |
| /* nav-toggle icon animation*/ | |
| .navbar-toggle .icon-bar { | |
| width: 22px; | |
| transition: all 0.1s; | |
| } | |
| .navbar-toggle .top-bar { | |
| transform-origin: 10% 10%; | |
| transform: rotate(45deg); | |
| } | |
| .navbar-toggle .middle-bar { | |
| opacity: 0; | |
| } | |
| .navbar-toggle .bottom-bar { | |
| transform: rotate(-45deg); | |
| transform-origin: 10% 90%; | |
| } | |
| .navbar-toggle.collapsed .top-bar { | |
| transform: rotate(0); | |
| } | |
| .navbar-toggle.collapsed .middle-bar { | |
| opacity: 1; | |
| } | |
| .navbar-toggle.collapsed .bottom-bar { | |
| transform: rotate(0); | |
| } | |
| /* nav-toggle animation end*/ | |
| .navbar-toggle:hover { | |
| background: transparent !important; | |
| } | |
| } | |
| @media screen and (max-width: 768px) { | |
| .navbar-brand { | |
| margin-left: 15px !important; | |
| } | |
| .navbar-collapse { | |
| border: none; | |
| box-shadow: none; | |
| /* clear: both; */ | |
| text-align: center; | |
| width: 100%; | |
| } | |
| } | |
| /* navbar end */ | |
| /* hero */ | |
| @media screen and (min-width: 1024px) { | |
| .hero-bg { | |
| background: url("https://dl.dropboxusercontent.com/u/8239023/RW_Design/fcc-rwportfolio/images/wave-hero-img-lg-Ret.jpg") no-repeat top right; | |
| background-size: 2200px; | |
| height: 100%; | |
| left: 0; | |
| position: absolute; | |
| top: 0; | |
| transform: scale(1.1); | |
| transition: .25s ease; | |
| width: 100%; | |
| z-index: -5; | |
| } | |
| } | |
| @media screen and (max-width: 1024px) { | |
| .hero-bg { | |
| background: url("https://dl.dropboxusercontent.com/u/8239023/RW_Design/fcc-rwportfolio/images/wave-hero-img-med-Ret.jpg") no-repeat top right; | |
| background-size: 1650px; | |
| height: 100%; | |
| left: 0; | |
| position: absolute; | |
| top: 0; | |
| transform: scale(1.1); | |
| transition: .25s ease; | |
| width: 100%; | |
| z-index: -5; | |
| } | |
| } | |
| @media screen and (max-width: 768px) { | |
| .hero-bg { | |
| background: url("https://dl.dropboxusercontent.com/u/8239023/RW_Design/fcc-rwportfolio/images/wave-hero-img-med-Ret.jpg") no-repeat top right; | |
| background-size: 1500px; | |
| height: 100%; | |
| left: 0; | |
| position: absolute; | |
| top: 0; | |
| transform: scale(1.1); | |
| transition: .25s ease; | |
| width: 100%; | |
| z-index: -5; | |
| } | |
| } | |
| .hero-btn { | |
| background-color: transparent; | |
| border: 2px solid #1d1f20 !important; | |
| font-family: 'Roboto', Helvetica, sans serif; | |
| font-size: 1.25em; | |
| margin-top: 1.5em; | |
| transition: .45s ease; | |
| } | |
| .hero-btn a { | |
| color: #1d1f20; | |
| text-decoration: none; | |
| } | |
| .hero-btn:hover, .hero-btn:focus { | |
| background-color: #e74c3c; | |
| } | |
| @media screen and (max-width: 768px) { | |
| .hero-btn { | |
| font-size: 1.36em; | |
| margin-top: 1.15em; | |
| } | |
| } | |
| .hero-section { | |
| padding-top: 275px; | |
| padding-bottom: 525px; | |
| } | |
| @media screen and (max-width: 1024px) { | |
| .hero-section { | |
| padding-top: 275px; | |
| padding-bottom: 125px; | |
| } | |
| } | |
| @media screen and (max-width: 768px) { | |
| .hero-section { | |
| padding-top: 275px; | |
| padding-bottom: 125px; | |
| } | |
| } | |
| .hero-intro { | |
| text-align: right; | |
| width: 100%; | |
| } | |
| .hero-intro > span { | |
| color: #191b1c; | |
| font-size: 1.56em; | |
| font-weight: normal; | |
| line-height: 1.96em; | |
| } | |
| @media screen and (max-width: 768px) { | |
| .hero-intro > span { | |
| color: #191b1c; | |
| font-size: 1.26em; | |
| font-weight: normal; | |
| line-height: 1.56em; | |
| } | |
| } | |
| .wrap { | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| /* hero end */ | |
| /* portfolio gallery */ | |
| .box-expand { | |
| background: #FFF; | |
| display: none; | |
| height: 100%; | |
| overflow: hidden; | |
| position: absolute; | |
| width: 100%; | |
| z-index: 25; | |
| } | |
| .gallery-boxes { | |
| z-index: -1; | |
| } | |
| .portfolio-box { | |
| display: block; | |
| margin: 0 auto; | |
| position: relative; | |
| width: 100%; | |
| } | |
| .portfolio-box .portfolio-box-caption { | |
| background: rgb(231, 76, 60); | |
| background: rgba(231, 76, 60, 0.9); | |
| bottom: 0; | |
| color: white; | |
| display: block; | |
| height: 100%; | |
| opacity: 0; | |
| position: absolute; | |
| text-align: center; | |
| transition: all 0.35s; | |
| width: 100%; | |
| } | |
| .portfolio-box .portfolio-box-caption .portfolio-box-caption-content { | |
| position: absolute; | |
| text-align: center; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 100%; | |
| } | |
| .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category { | |
| font-size: .95em; | |
| font-weight: normal; | |
| text-transform: uppercase; | |
| } | |
| .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category, | |
| .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name { | |
| font-family: 'Roboto', Helvetica, sans-serif; | |
| padding: 0 15px; | |
| } | |
| .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name { | |
| font-family: 'Roboto Slab', serif; | |
| font-size: 1.65em; | |
| text-transform: capitalize; | |
| } | |
| .portfolio-box:hover .portfolio-box-caption, | |
| .portfolio-box:focus .portfolio-box-caption{ | |
| opacity: 1; | |
| } | |
| /* portfolio gallery end */ | |
| /* about */ | |
| .about-content { | |
| padding: 5px 0; | |
| } | |
| .about-img { | |
| height: auto; | |
| padding: 25px 0; | |
| width: 100%; | |
| } | |
| .about-section { | |
| padding: 85px 0 30px; | |
| } | |
| .about-section p { | |
| text-align: justify; | |
| } | |
| /* about end */ | |
| /* skills */ | |
| .skills-section { | |
| padding-bottom: 100px; | |
| padding-top: 50px; | |
| } | |
| .skills-bar-container ul { | |
| list-style: none; | |
| padding: 25px 0; | |
| width: 100%; | |
| } | |
| .skills-bar-container h1 { | |
| margin-bottom: 50px; | |
| } | |
| .skills-bar-container label { | |
| color: #1A1C1C; | |
| position: relative; | |
| font-size: .96em; | |
| font-weight: 300; | |
| } | |
| .skills-bar-container .percent { | |
| color: #1A1C1C; | |
| font-size: .96em; | |
| float: right; | |
| } | |
| .progressbar { | |
| position: absolute; | |
| width: 0%; | |
| height: 100%; | |
| border-radius: 5px; | |
| animation-duration: 2s; | |
| animation-timing-function: ease-out; | |
| animation-fill-mode: both; | |
| } | |
| #progress-html { | |
| animation-name: progress-html; | |
| animation-delay: .7s; | |
| } | |
| #progress-css { | |
| animation-name: progress-css; | |
| animation-delay: 1.4s; | |
| } | |
| #progress-javascript { | |
| animation-name: progress-javascript; | |
| animation-delay: 2.1s; | |
| } | |
| #progress-ionic { | |
| animation-name: progress-ionic; | |
| animation-delay: 2.1s; | |
| } | |
| #progress-git { | |
| animation-name: progress-git; | |
| animation-delay: 2.8s; | |
| } | |
| #progress-php { | |
| animation-name: progress-php; | |
| animation-delay: 3.5s; | |
| } | |
| #progress-nodejs { | |
| animation-name: progress-nodejs; | |
| animation-delay: 4.2s; | |
| } | |
| #progress-wordpress { | |
| animation-name: progress-wordpress; | |
| animation-delay: 4.9s; | |
| } | |
| #progress-gulp { | |
| animation-name: progress-gulp; | |
| animation-delay: 4.9s; | |
| } | |
| #progress-mysql { | |
| animation-name: progress-mysql; | |
| animation-delay: 4.9s; | |
| } | |
| .progressred { | |
| background-color: #ff3d2e; | |
| } | |
| @keyframes progress-html { | |
| 0% { | |
| width: 0%; | |
| } | |
| 100% { | |
| width: 100%; | |
| } | |
| } | |
| @keyframes progress-css { | |
| 0% { | |
| width: 0%; | |
| } | |
| 100% { | |
| width: 90%; | |
| } | |
| } | |
| @keyframes progress-javascript { | |
| 0% { | |
| width: 0%; | |
| } | |
| 100% { | |
| width: 70%; | |
| } | |
| } | |
| @keyframes progress-git { | |
| 0% { | |
| width: 0%; | |
| } | |
| 100% { | |
| width: 70%; | |
| } | |
| } | |
| @keyframes progress-php { | |
| 0% { | |
| width: 0%; | |
| } | |
| 100% { | |
| width: 95%; | |
| } | |
| } | |
| @keyframes progress-nodejs { | |
| 0% { | |
| width: 0%; | |
| } | |
| 100% { | |
| width: 25%; | |
| } | |
| } | |
| @keyframes progress-ionic { | |
| 0% { | |
| width: 0%; | |
| } | |
| 100% { | |
| width: 70%; | |
| } | |
| } | |
| @keyframes progress-wordpress { | |
| 0% { | |
| width: 0%; | |
| } | |
| 100% { | |
| width: 100%; | |
| } | |
| } | |
| @keyframes progress-gulp { | |
| 0% { | |
| width: 0%; | |
| } | |
| 100% { | |
| width: 100%; | |
| } | |
| } | |
| @keyframes progress-mysql { | |
| 0% { | |
| width: 0%; | |
| } | |
| 100% { | |
| width: 80%; | |
| } | |
| } | |
| /* skills end */ | |
| /* contact */ | |
| .contact-section { | |
| height: 20%; | |
| } | |
| .contact-icons { | |
| padding: 25px 0; | |
| max-width: 700px; | |
| } | |
| .contact-info { | |
| padding-bottom: 150px; | |
| padding-top: 100px; | |
| } | |
| .contact-info a { | |
| color: #daeaef; | |
| } | |
| .contact-info a:hover { | |
| color: #ff3d2e; | |
| transition: .45s ease; | |
| } | |
| /* contact end */ | |
| #gallery_skills{ | |
| display:flex; | |
| flex-flow:row wrap | |
| } | |
| #gallery_skills li img{ | |
| max-width:300px; | |
| max-height:300px; | |
| } |
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> |