My personal website. All you need to know about me.
A Pen by abdurraufahmad on CodePen.
Created
August 14, 2019 16:39
-
-
Save abdurraufahmad/cf3d743636da025c02eb03d76b3936ab to your computer and use it in GitHub Desktop.
My Personal Website
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en"> | |
| <body id="index" data-spy="scroll" data-target=".navbar" data-offset="60"> | |
| <!-- /Navigation bar --> | |
| <nav class="navbar navbar-default navbar-fixed-top"> | |
| <div class="container-fluid navContainer"> | |
| <div class="navbar-header"> | |
| <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| </button> | |
| <a class="navbar-brand" href="#index">Home</a> | |
| </div> | |
| <div class="collapse navbar-collapse" id="myNavbar"> | |
| <ul class="nav navbar-nav navbar-right"> | |
| <li><a href="#aboutme">About Me</a></li> | |
| <li><a href="#cv">CV</a></li> | |
| <li><a href="#education">Education</a></li> | |
| <li><a href="#experience">Experience</a></li> | |
| <li><a href="#portfolio">Portfolio</a></li> | |
| <li><a href="#contactme">Contact Me</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- ./Navigation bar --> | |
| <!-- /Jumbotron profile --> | |
| <div class="jumbotron text-center"> | |
| <img id="profilePhoto" src="https://dl.dropbox.com/s/f8r9fgx4otp0wuv/AnastasiosMpoletis.jpg?dl=0" class="img-circle img-responsive"> | |
| <div class="row"> | |
| <div class="col-lg-12 social-buttons-div"> | |
| <!-- LinkedIn button --> | |
| <a id="linkedin-button" class="btn btn-default social-button" href="https://www.linkedin.com/in/anastasios-mpoletis" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a> | |
| <!-- Facebook button --> | |
| <a id="facebook-button" class="btn btn-default social-button" href="https://www.facebook.com/tasos.boletis" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a> | |
| <!-- Github button --> | |
| <a id="github-button" class="btn btn-default social-button" href="https://github.com/AnastasiosMpoletis" target="_blank"><i class="fa fa-github-square" aria-hidden="true"></i></a> | |
| <!-- CodePen button --> | |
| <a id="codepen-button" class="btn btn-default social-button" href="https://codepen.io/AnastasiosMpoletis/" target="_blank"><i class="fa fa-codepen" aria-hidden="true"></i></a> | |
| <!-- FreeCodeCamp button --> | |
| <a id="freecodecamp-button" class="btn btn-default social-button" href="https://www.freecodecamp.com/anastasiosmpoletis" target="_blank"><i class="fa fa-free-code-camp" aria-hidden="true"></i></a> | |
| </div> | |
| </div> | |
| <h1>Anastasios Mpoletis</h1> | |
| <p>Front End Developer</p> | |
| </div> | |
| <!-- ./Jumbotron profile --> | |
| <!-- /About me --> | |
| <div id="aboutme" class="container-fluid partContainer"> | |
| <div class="row"> | |
| <div class="col-lg-6 innerLinks"> | |
| <h2>About me</h2> | |
| <p>I am an Informatics/Computer Science graduate from Greece and a promising <strong>Front End Developer</strong> looking for a job in Europe. <br/><br/> You can check this website along with my <a href="#portfolio">portfolio</a> and <a href="#cv">cv</a> to get to know me better.<br/><br/> If you are interested in hiring me, you can just <a href="#contactme">contact me</a>. | |
| </p> | |
| <br/><br/> | |
| </div> | |
| <div class="col-lg-6 centerize"> | |
| <img id="greekFlag" src="https://dl.dropbox.com/s/h6w7w3e1p38nsnw/greekFlag.jpeg?dl=0"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ./About me --> | |
| <!-- /CV --> | |
| <div id="cv" class="container-fluid partContainer"> | |
| <div class="row"> | |
| <div class="col-lg-6 centerize"> | |
| <img src="https://dl.dropbox.com/s/r0w3w0h7blt0fj4/cv.png?dl=0"> | |
| </div> | |
| <div class="col-lg-6 centerize"> | |
| <h2>CV</h2> | |
| <button id="cvButton" data-toggle="collapse" data-target="#demo" class="btn btn-lg"><h3>Take a look at my CV-Resume</h3> | |
| <i class="glyphicon glyphicon-large glyphicon-circle-arrow-down"></i></button> | |
| <div id="demo" class="collapse centerize"> | |
| <!-- PDF display --> | |
| <br/> | |
| <object id="pdfDisplay" data="https://dl.dropbox.com/s/m59zy0tpr0mwtah/Anastasios%20Mpoletis%20CV.pdf?dl=0" type="application/pdf"> | |
| <embed src="https://dl.dropbox.com/s/m59zy0tpr0mwtah/Anastasios%20Mpoletis%20CV.pdf?dl=0">This browser does not support PDFs. <br/>Please download the PDF to view it: <br/> | |
| <a href="https://dl.dropbox.com/s/m59zy0tpr0mwtah/Anastasios%20Mpoletis%20CV.pdf?dl=0">Download PDF</a>.</p> | |
| </embed> | |
| </object> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ./CV --> | |
| <!-- /Education --> | |
| <div id="education" class="container-fluid partContainer"> | |
| <div class="row"> | |
| <div class="col-lg-6"> | |
| <h2>Education</h2> | |
| <h3>Aristotle University of Thessaloniki (2008-2015)</h3> | |
| <p>Bachelor's Degree in Informatics, School of Informatics, Faculty of Sciences<br/> | |
| <i>Activities: Information and Communication Technologies in Education</i></p> | |
| </div> | |
| <div class="col-lg-6 centerize"> | |
| <br/><img src="https://dl.dropbox.com/s/e36eunr0c1txj0b/authLogo.gif?dl=0" alt="Aristotle University of Thessaloniki"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ./Education --> | |
| <!-- /Experience --> | |
| <div id="experience" class="container-fluid text-center partContainer"> | |
| <h2>Experience</h2> | |
| <div id="myCarousel" class="carousel slide text-center" data-ride="carousel"> | |
| <ol class="carousel-indicators"> | |
| <li data-target="#myCarousel" data-slide-to="0" class="active"></li> | |
| <li data-target="#myCarousel" data-slide-to="1"></li> | |
| <li data-target="#myCarousel" data-slide-to="2"></li> | |
| </ol> | |
| <div class="carousel-inner" role="listbox"> | |
| <div class="item active"> | |
| <div> | |
| <img src="https://dl.dropbox.com/s/l4e5hxij9lrb96u/hellenicArmyLogo.gif?dl=0" alt="Hellenic Army"> | |
| <h4>System Administrator (08/2015 - 04/2016)<br/>Hellenic Army</h4> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div> | |
| <img src="https://dl.dropbox.com/s/aja9krhdv4en8m1/googleDeveloperLogo.png?dl=0" alt="Google Developer"> | |
| <h4>Freelance Android Developer (04/2014 - 07/2014)<br/>Google</h4> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div> | |
| <img src="https://dl.dropbox.com/s/e36eunr0c1txj0b/authLogo.gif?dl=0" alt="Aristotle University of Thessaloniki"> | |
| <h4>Assistant Administrator (10/2011 - 08/2013)<br/>Aristotle University Of Thessaloniki</h4> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Previous carousel button --> | |
| <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> | |
| <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> | |
| <span class="sr-only">Previous</span> | |
| </a> | |
| <!-- Next carousel button --> | |
| <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> | |
| <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> | |
| <span class="sr-only">Next</span> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- ./Experience --> | |
| <!-- /Portfolio --> | |
| <div id="portfolio" class="container-fluid portfolio-part-container"> | |
| <h2 class="text-center">Portfolio</h2><br/> | |
| <!-- /Portfolio div --> | |
| <div class="portfolio-div"> | |
| <!-- /1st row --> | |
| <div class="row"> | |
| <!-- /My personal website --> | |
| <div class="col-md-6 project-div"> | |
| <div class="cuadro_intro_hover"> | |
| <img src="https://dl.dropbox.com/s/7cuekq16mxs9i8t/mySiteThumbnail.jpg?dl=0" class="img-responsive" alt=""> | |
| <div class="caption"> | |
| <div class="blur"></div> | |
| <div class="caption-text"> | |
| <a class="" href="http://anastasiosmpoletis.webege.com" target="_blank"><h3>Anastasios Mpoletis</h3></a> | |
| <!-- CodePen button --> | |
| <a id="codepen-button" class="btn btn-default project-button" href="https://codepen.io/AnastasiosMpoletis/full/EmoVLN/" target="_blank"><i class="fa fa-codepen" aria-hidden="true"></i><span> CodePen</span></a> | |
| <!-- Github button --> | |
| <a id="github-button" class="btn btn-default project-button" href="https://github.com/AnastasiosMpoletis/Personal-Website" target="_blank"><i class="fa fa-github-square" aria-hidden="true"></i><span> GitHub</span></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ./My personal website --> | |
| <!-- /Epic Time Clock --> | |
| <div class="col-md-6 project-div"> | |
| <div class="cuadro_intro_hover"> | |
| <img src="https://dl.dropbox.com/s/3qh3owwvxm86312/epicTimeClockThumbnail.jpg?dl=0" class="img-responsive" alt=""> | |
| <div class="caption"> | |
| <div class="blur"></div> | |
| <div class="caption-text"> | |
| <h3>Epic Time Clock</h3> | |
| <!-- CodePen button --> | |
| <a id="codepen-button" class="btn btn-default project-button" href="https://codepen.io/AnastasiosMpoletis/full/WjjyNW/" target="_blank"><i class="fa fa-codepen" aria-hidden="true"></i><span> CodePen</span></a> | |
| <!-- Github button --> | |
| <a id="github-button" class="btn btn-default project-button" href="https://gist.github.com/AnastasiosMpoletis/d565f68ff8dc8794445fe95cfda99d9a" target="_blank"><i class="fa fa-github-square" aria-hidden="true"></i><span> GitHub</span></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ./Epic Time Clock --> | |
| </div> | |
| <!-- ./1st row --> | |
| <!-- /2st row --> | |
| <div class="row"> | |
| <!-- /My Photo Gallery--> | |
| <div class="col-md-6 project-div"> | |
| <div class="cuadro_intro_hover centerize"> | |
| <img src="https://dl.dropbox.com/s/hkyf1vr6rnnhhvg/myPhotoGalleryThumbnail.png?dl=0" class="img-responsive" alt=""> | |
| <div class="caption"> | |
| <div class="blur"></div> | |
| <div class="caption-text"> | |
| <h3>My Photo Gallery</h3> | |
| <!-- CodePen button --> | |
| <a id="codepen-button" class="btn btn-default project-button" href="https://codepen.io/AnastasiosMpoletis/full/XRVQMR/" target="_blank"><i class="fa fa-codepen" aria-hidden="true"></i><span> CodePen</span></a> | |
| <!-- Github button --> | |
| <a id="github-button" class="btn btn-default project-button" href="https://gist.github.com/AnastasiosMpoletis/9c201fcd145ab4c042d24d426d2adec5" target="_blank"><i class="fa fa-github-square" aria-hidden="true"></i><span> GitHub</span></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ./My Photo Gallery--> | |
| <!-- /FreeCodeCamp Tribute Page --> | |
| <div class="col-md-6 project-div"> | |
| <div class="cuadro_intro_hover centerize"> | |
| <img src="https://dl.dropbox.com/s/8q6fig2yytf5479/tributePageThumbnail.png?dl=0" class="img-responsive" alt=""> | |
| <div class="caption"> | |
| <div class="blur"></div> | |
| <div class="caption-text"> | |
| <h3>FreeCodeCamp Tribute Page</h3> | |
| <!-- CodePen button --> | |
| <a id="codepen-button" class="btn btn-default project-button" href="https://codepen.io/AnastasiosMpoletis/full/MmZBrg/" target="_blank"><i class="fa fa-codepen" aria-hidden="true"></i><span> CodePen</span></a> | |
| <!-- Github button --> | |
| <a id="github-button" class="btn btn-default project-button" href="https://gist.github.com/AnastasiosMpoletis/803ca9ca330184a322554b709d847c82" target="_blank"><i class="fa fa-github-square" aria-hidden="true"></i><span> GitHub</span></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ./FreeCodeCamp Tribute Page --> | |
| </div> | |
| <!-- ./2nd row --> | |
| <!-- /3rd row --> | |
| <div class="row"> | |
| <!-- /FreeCodeCamp Random Quote Machine --> | |
| <div class="col-md-6 project-div"> | |
| <div class="cuadro_intro_hover centerize"> | |
| <img src="https://dl.dropbox.com/s/tnqp15yol99ogfl/randomQuoteMachineThumbnail.png?dl=0" class="img-responsive" alt=""> | |
| <div class="caption"> | |
| <div class="blur"></div> | |
| <div class="caption-text"> | |
| <h3>FreeCodeCamp Random Quote Machine</h3> | |
| <!-- CodePen button --> | |
| <a id="codepen-button" class="btn btn-default project-button" href="https://codepen.io/AnastasiosMpoletis/full/EXazEM/" target="_blank"><i class="fa fa-codepen" aria-hidden="true"></i><span> CodePen</span></a> | |
| <!-- Github button --> | |
| <a id="github-button" class="btn btn-default project-button" href="https://gist.github.com/AnastasiosMpoletis/5286774da5a5a8da070de290b294df98" target="_blank"><i class="fa fa-github-square" aria-hidden="true"></i><span> GitHub</span></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ./FreeCodeCamp Random Quote Machine --> | |
| <!-- /Sales --> | |
| <div class="col-md-6 project-div"> | |
| <div class="cuadro_intro_hover centerize"> | |
| <img src="https://dl.dropbox.com/s/u9v1fv81pxvldmo/salesProject.png?dl=0" class="img-responsive" alt=""> | |
| <div class="caption"> | |
| <div class="blur"></div> | |
| <div class="caption-text"> | |
| <h3>Sales</h3> | |
| <!-- CodePen button --> | |
| <a id="codepen-button" class="btn btn-default project-button" href="https://play.google.com/store/apps/details?id=appinventor.ai_91prince91.Sales" target="_blank"><i class="fa fa-google" aria-hidden="true"></i><span> Google Play</span></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ./Sales --> | |
| </div> | |
| <!-- ./3nd row --> | |
| </div> | |
| <!-- ./Portfolio div --> | |
| </div> | |
| <!-- ./Portfolio --> | |
| <!-- /Contact me --> | |
| <div id="contactme" class="container-fluid centerize partContainer"> | |
| <h2>Contact me</h2><br/><br/> | |
| <div class="row "> | |
| <div class="col-lg-12"> | |
| <p/>You can contact me at: | |
| <p><span class="glyphicon glyphicon-envelope"></span> | |
| <a href="mailto:anastasiosmpoletis@gmail.com?subject=Let's%20hire">anastasiosmpoletis@gmail.com</a></p> | |
| <p><span class="glyphicon glyphicon-phone"></span> +306998414453</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ./Contact me --> | |
| <hr class="hrContainer" /> | |
| <!-- /Footer --> | |
| <footer class="container-fluid text-center"> | |
| <a href="#index" title="To Top" data-toggle="tooltip"> | |
| <span class="glyphicon glyphicon-chevron-up"></span> | |
| </a> | |
| <p>Created by <a href="#"><em>Anastasios Mpoletis</em></a></p> | |
| </footer> | |
| <!-- ./Footer --> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Smooth scrolling script */ | |
| $(document).ready(function() { | |
| $(".innerLinks a, .navbar a, footer a[href='#index']").on("click", function( | |
| event | |
| ) { | |
| if (this.hash !== "") { | |
| event.preventDefault(); | |
| var hash = this.hash; | |
| $("html, body").animate( | |
| { scrollTop: $(hash).offset().top }, | |
| 900, | |
| function() { | |
| window.location.hash = hash; | |
| } | |
| ); | |
| } | |
| }); | |
| }); | |
| /* Display delay of content script */ | |
| $(window).scroll(function() { | |
| $(".slideanim").each(function() { | |
| var pos = $(this).offset().top; | |
| var winTop = $(window).scrollTop(); | |
| if (pos < winTop + screen.height * 1.1) { | |
| $(this).addClass("slide"); | |
| } | |
| }); | |
| }); | |
| /* "To Top" button tooltip script */ | |
| $(document).ready(function() { | |
| $('[data-toggle="tooltip"]').tooltip(); | |
| }); | |
| /* CV collapse glyphicon effect script */ | |
| $("#demo").on("shown.bs.collapse", function() { | |
| if ($(window).width() > 768) { | |
| $("#cvButton .glyphicon").toggleClass("rotate-180"); | |
| } | |
| }); | |
| $("#demo").on("hidden.bs.collapse", function() { | |
| if ($(window).width() > 768) { | |
| $("#cvButton .glyphicon").toggleClass("rotate-180"); | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-family: Noto Sans, Arial; | |
| background-color: #f0f0f0; | |
| } | |
| h1 { | |
| font-weight: 600; | |
| } | |
| h2 { | |
| font-size: 24px; | |
| text-transform: uppercase; | |
| color: #303030; | |
| font-weight: 600; | |
| margin-bottom: 30px; | |
| } | |
| .innerLinks p, .education p { | |
| font-size: 20px; | |
| } | |
| img { | |
| user-select: none; | |
| } | |
| .navbar { | |
| font-family: Noto Sans, Arial; | |
| margin-bottom: 0; | |
| background-color: #5c5c5c; | |
| z-index: 9999; | |
| border: 0; | |
| font-size: 15px !important; | |
| font-weight: 500; | |
| line-height: 1.42857143 !important; | |
| letter-spacing: 0; | |
| border-radius: 0; | |
| } | |
| .navbar li a, .navbar .navbar-brand { | |
| color: #fff !important; | |
| } | |
| .navbar-nav li a:hover, .navbar-nav li.active a { | |
| color: #5c5c5c !important; | |
| background-color: #fff !important; | |
| } | |
| .navbar-default .navbar-toggle { | |
| border-color: transparent; | |
| color: #fff !important; | |
| } | |
| .navContainer { | |
| padding: 0 8vw; | |
| } | |
| .jumbotron { | |
| background-image: url("https://dl.dropbox.com/s/w010ruqdprvf4u6/background.jpg?dl=0"); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-attachment: fixed; | |
| background-size: cover; | |
| color: white; | |
| text-shadow: -2px 2px 9px #000000; | |
| padding: 60px 25px 10px 25px; | |
| } | |
| #profilePhoto { | |
| display: inline; | |
| } | |
| .social-buttons-div { | |
| margin: 20px 0px 0px 0px; | |
| } | |
| .social-button { | |
| box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19); | |
| } | |
| /* /Social buttons */ | |
| #linkedin-button { | |
| /* LinkedIn official color */ | |
| background-color: #0077b5; | |
| color: white; | |
| } | |
| #facebook-button { | |
| /* Facebook official color */ | |
| background-color: #3b5998; | |
| color: white; | |
| } | |
| #github-button, #codepen-button { | |
| background-color: white; | |
| color: black; | |
| } | |
| #freecodecamp-button { | |
| /* FreeCodeCamp official color */ | |
| background-color: #006400; | |
| color: white; | |
| } | |
| /* ./Social buttons */ | |
| #greekFlag { | |
| padding-top: 30px; | |
| } | |
| /* /CV button */ | |
| #cvButton { | |
| height: 90px; | |
| outline: none; | |
| border-radius: 50px; | |
| border: 1px solid #5c5c5c; | |
| background-color: #ffffff; | |
| } | |
| #cvButton h3 { | |
| font-size: 17px; | |
| } | |
| #cvButton .glyphicon { | |
| font-size: 25px; | |
| -webkit-transition: all 0.2s ease-in; | |
| -moz-transition: all 0.2s ease-in; | |
| -o-transition: all 0.2s ease-in; | |
| transition: all 0.2s ease-in; | |
| } | |
| .glyphicon-circle-arrow-down { | |
| color: #5c5c5c; | |
| -webkit-transition: transform ease-in; | |
| -moz-transition: transform ease-in; | |
| -o-transition: transform ease-in; | |
| transition: transform ease-in; | |
| -webkit-transition: color ease-in; | |
| -moz-transition: color ease-in; | |
| -o-transition: color ease-in; | |
| transition: color ease-in; | |
| } | |
| .glyphicon-circle-arrow-down.rotate-180 { | |
| color: #0077b5; | |
| transform: rotate(180deg); | |
| -webkit-transition: transform ease-in; | |
| -moz-transition: transform ease-in; | |
| -o-transition: transform ease-in; | |
| transition: transform ease-in; | |
| -webkit-transition: color ease-in; | |
| -moz-transition: color ease-in; | |
| -o-transition: color ease-in; | |
| transition: color ease-in; | |
| } | |
| /* ./CV button */ | |
| #education h3 { | |
| color: #818181; | |
| } | |
| #education h4 { | |
| line-height: 1.4; | |
| } | |
| .partContainer { | |
| margin: 10px 8vw; | |
| padding-bottom: 30px; | |
| background-color: white; | |
| box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19); | |
| } | |
| .portfolio-part-container { | |
| margin: 10px 8vw; | |
| background-color: white; | |
| box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19); | |
| } | |
| .hrContainer { | |
| border: 0; | |
| height: 1px; | |
| margin-top: 40px; | |
| background-color: white; | |
| background-image: -webkit-linear-gradient(left, #f0f0f0, #818181, #f0f0f0); | |
| background-image: -moz-linear-gradient(left, #f0f0f0, #818181, #f0f0f0); | |
| background-image: -ms-linear-gradient(left, #f0f0f0, #818181, #f0f0f0); | |
| background-image: -o-linear-gradient(left, #f0f0f0, #818181, #f0f0f0); | |
| } | |
| .portfolio-div { | |
| width: 100%; | |
| margin: 0px; | |
| } | |
| .project-div { | |
| padding: 0px; | |
| } | |
| /* /Portfolio thumbnails */ | |
| .cuadro_intro_hover { | |
| background-color: #cccccc; | |
| position: relative; | |
| overflow: hidden; | |
| height: 100%; | |
| border: 1px solid rgba(0, 0, 0, 0.19); | |
| } | |
| .cuadro_intro_hover:hover .caption { | |
| opacity: 1; | |
| margin-bottom: 1px; | |
| transform: translateY(-7em); | |
| -webkit-transform: translateY(-7em); | |
| -moz-transform: translateY(-7em); | |
| -ms-transform: translateY(-7em); | |
| -o-transform: translateY(-7em); | |
| } | |
| .cuadro_intro_hover img { | |
| z-index: 4; | |
| } | |
| .cuadro_intro_hover .caption { | |
| position: absolute; | |
| height: 100%; | |
| -webkit-transition: all 0.3s ease-in-out; | |
| -moz-transition: all 0.3s ease-in-out; | |
| -o-transition: all 0.3s ease-in-out; | |
| -ms-transition: all 0.3s ease-in-out; | |
| transition: all 0.3s ease-in-out; | |
| width: 100%; | |
| } | |
| .cuadro_intro_hover .blur { | |
| background-color: rgba(0, 0, 0, 0.7); | |
| height: 100%; | |
| z-index: 5; | |
| position: absolute; | |
| width: 100%; | |
| } | |
| .cuadro_intro_hover .caption-text { | |
| z-index: 10; | |
| color: #fff; | |
| position: absolute; | |
| height: 100%; | |
| text-align: left; | |
| padding: 10px; | |
| top: -20px; | |
| width: 100%; | |
| } | |
| .caption-text a:link { | |
| color: white; | |
| text-decoration: none; | |
| } | |
| .caption a:hover, .caption a:active, .caption a:visited { | |
| color: #0077b5; | |
| } | |
| .project-button { | |
| border-radius: 1px; | |
| } | |
| /* ./Portfolio thumbnails */ | |
| .centerize { | |
| align-items: center; | |
| text-align: center; | |
| justify-content: center; | |
| } | |
| .lefterize { | |
| text-align: left; | |
| align-items: left; | |
| } | |
| #pdfDisplay { | |
| width: 100%; | |
| height: 115vh; | |
| } | |
| /* /Carousel */ | |
| .carousel-control.right, .carousel-control.left { | |
| background-image: none; | |
| color: #5c5c5c; | |
| } | |
| .carousel-indicators li { | |
| border-color: #5c5c5c; | |
| } | |
| .carousel-indicators li.active { | |
| background-color: #5c5c5c; | |
| } | |
| .item h4 { | |
| font-size: 19px; | |
| line-height: 1.375em; | |
| font-weight: 400; | |
| font-style: italic; | |
| margin: 70px 0; | |
| } | |
| .item span { | |
| font-style: normal; | |
| } | |
| /* ./Carousel */ | |
| .glyphicon { | |
| color: #5c5c5c; | |
| } | |
| footer .glyphicon { | |
| font-size: 20px; | |
| margin-bottom: 10px; | |
| } | |
| #contactme .glyphicon { | |
| font-size: 16px; | |
| } | |
| .slideanim { | |
| visibility: hidden; | |
| } | |
| .slide { | |
| animation-name: slide; | |
| -webkit-animation-name: slide; | |
| animation-duration: 2s; | |
| -webkit-animation-duration: 1s; | |
| visibility: visible; | |
| } | |
| @keyframes slide { | |
| 0% { | |
| opacity: 0; | |
| transform: translateY(70%); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: translateY(0%); | |
| } | |
| } | |
| @-webkit-keyframes slide { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateY(70%); | |
| } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: translateY(0%); | |
| } | |
| } | |
| @media screen and (min-width: 1440px) { | |
| .partContainer { | |
| margin: 60px 15vw; | |
| } | |
| .portfolio-part-container { | |
| margin: 60px 15vw; | |
| } | |
| .navContainer { | |
| padding: 0 15vw; | |
| } | |
| .innerLinks p, .education p { | |
| font-size: 15px; | |
| } | |
| #pdfDisplay { | |
| width: 100%; | |
| height: 95vh; | |
| } | |
| } | |
| @media screen and (min-width: 1981px) { | |
| .partContainer { | |
| margin: 60px 20vw; | |
| } | |
| .portfolio-part-container { | |
| margin: 60px 20vw; | |
| } | |
| .navContainer { | |
| padding: 0 20vw; | |
| } | |
| .innerLinks p, .education p { | |
| font-size: 15px; | |
| } | |
| #pdfDisplay { | |
| width: 100%; | |
| height: 105vh; | |
| } | |
| } | |
| @media screen and (max-width 768px) { | |
| #pdfDisplay { | |
| width: 100%; | |
| height: 1vh; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment