Personal Landing Page

index.html

	<!-- end navigation -->
	<!-- intro header -->
	<header class="intro">
		<div class="intro-body">
			<div class="container">
				<div class="row">
					<div class="col-md-8 col-md-offset-2">
						<!-- start typer hello  -->
						<div class="brand-heading">
							<span class="txt-rotate" data-period="100" data-rotate='[ "Hello, ", "Aloha,", "Guten Tag,", "Shalom,", "Hallo,", "Salut,", "Ciao,", "Hola, ", "Hej," ]'></span>
						</div>
						<!-- end typer hello -->
						<p class="intro-text">My name is Denis Dinkevich.
							<br>I'm a <span class="fa fa-code" aria-hidden="true" ></span> tech recruiting enthusiast 
              <br>based in the beautiful city of <a class="Kiev">KIEV</a>, Ukraine.</p>
						<br>
            <br>
            <br>
						<div class="mouse-warp">
							<a href="#mouse-here" class="page-scroll">
								<div class="mouse">
									<div class="scroll"></div>
								</div>
							</a>
						</div>
						<!-- end mouse wrap -->
					</div>
						<!-- end mouse wrap -->
					</div>
					<!-- end column wrapping -->
				</div>
				<!-- end row header -->
			</div>
			<!-- end container header -->
		</div>
		<!-- end intro body -->
	</header>
	<!-- end intro header -->
<div id="mouse-here"></div>
	<!-- start about me -->
	<section id="about-me">
		<div class="container">
			<div class="row">
				<h2>ABOUT</h2>
				<div class="col-lg-6 about-intro">
					<div class="about-inner">
						<div class="about-ct">
										<img src="https://scontent-dft4-1.xx.fbcdn.net/v/t1.0-9/18920136_1279258608839979_4976809546995006261_n.jpg?oh=0f103e3c816914ccd96deccdad3140d3&oe=5A1C65AE" alt="Denis Dinkevich" class="img-responsive">
							<div class="textbox-about hidden-xs">
								<div class="btn button-social">
									<a href="https://facebook.com/diskevichh" target="_blank" alt="Facebook profile"><span class="fa fa-facebook" aria-hidden="true"></span></a>
									<a href="https://www.linkedin.com/in/denisdinkevich/" alt="LinkedIn profile" target="_blank"><span class="fa fa-linkedin" aria-hidden="true"></span></a>
									<a href="https://twitter.com/diskevi4" target="_blank" alt="Twitter profile"><span class="fa fa-twitter" aria-hidden="true"></span></a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-lg-6 about-intro-text">
          <br><p>I'm a <a class="Tech">TECH</a> Recruiter with 3+ years of the extensive experience in the field.  Driven by my thirst for knowledge & constant opportunities for personal development, I am always seeking new ways to apply my strengths & work on my weaknesses. I take great pride in my work, striving to affect my company, clients, and candidates through effective recruiting strategies, relationship building and providing positive candidate experiences. Developed and maintained the effective working relationships with client's recruitment department, in the key of the global candidate oriented relations and deep understanding of the company HR brand.</p>
					<div class="button-group" align="center">
						<div class="text" >Download CV</div>
						<div class="icon-cv"><a href="https://www.dropbox.com/s/znoyya8oigy9apn/Denis_Dinkevich_CV_2017.pdf" alt="Denis_Dinkevich_CV_2017" target="_blank"><span class="fa fa-arrow-circle-down" aria-hidden="true"></span></a></div>
					</div>
				</div>
			</div>
			<!-- end row about -->
		</div>
		<!-- end container about -->
		<!-- start count stats -->
		<section id="counter-stats">
			<div class="container">
				<div class="row">
					<div class="col-lg-3 stats">
						<span class="fa fa-code" aria-hidden="true"></span>
						<div class="counter" data-count="75">0</div>
						<h5>Engineers Hired</h5>
					</div>
					<div class="col-lg-3 stats">
						<span class="fa fa-check" aria-hidden="true"></span>
						<div class="counter" data-count="14">0</div>
						<h5>Projects done</h5>
					</div>
					<div class="col-lg-3 stats">
						<span class="fa fa-user" aria-hidden="true"></span>
						<div class="counter" data-count="18">0</div>
						<h5>Happy clients</h5>
					</div>
					<div class="col-lg-3 stats">
						<span class="fa fa-coffee" aria-hidden="true"></span>
						<div class="counter" data-count="999">0</div>
						<h5>Cups of coffee</h5>
					</div>
				</div>
				<!-- end row counter stats -->
			</div>
			<!-- end container counter stats -->
		</section>
		<!-- end cont stats -->
	</section>
	<!-- end about me -->
	<!-- start work experience -->
	<section id="experience">
		<div class="container">
			<h2>EXPERTISE</h2>
			<div class="experience-ct">
				<div class="row">
					<div class="col-md-6 timeline-label">
						<h4 align="center">Key Areas of Responsibility</h4>
						<p align="center">Technical Recruiting, Employment Branding, Growth Marketing, Talent Sourcing</p>
						<a href="https://www.linkedin.com/in/denisdinkevich/" alt="LinkedIn profile" target="_blank">
							<div class="button-group-li">
								<div class="text-timeline">View on LinkedIn</div>
								<div class="icon-li"><span class="fa fa-linkedin" aria-hidden="true"></span></div>
							</div>
						</a>
					</div>
					<div class="col-md-6 timeline col-exp">
						<div class="timeline-year">
							<time datetime="2017">2017</time>
							<div class="timeline-experience">
								<span class="timeline-circle"></span>
								<div class="timeline-experience-img"><img src="https://pbs.twimg.com/profile_images/671523129378799616/J9N6JG8u.png" alt="Attendify"></div>
								<div class="timeline-experience-info clear-after">
									<h5>Sourcing Guru</h5>
									<div class="timeline-role">Attendify</div>
									<p>May 2017 - Present</p>
								</div>
								Understand technical requirements of a role and how it fits into the organization. Execute on tactical outreach, referral generation, events and pipelining efforts. Partner closely with client- aligned recruiting leaders to drive the most effective end-to-end hiring strategy for our business partners. Research and gather market intelligence. Building the Clojure/ClojureScript talent pipeline for satisfying current hiring needs.
							</div>
							<!-- experience -->
							<time datetime="2017">2017</time>
							<div class="timeline-experience">
								<span class="timeline-circle"></span>
								<div class="timeline-experience-img"><img src="https://pbs.twimg.com/profile_images/703914424885780480/sGiY_qvn.jpg" alt="SD Solutions"></div>
								<div class="timeline-experience-info clear-after">
									<h5>Recruiting Manager</h5>
									<div class="timeline-role">SD Solutions</div>
									<p>March 2017 - July 2017</p>
								</div>
								Provide full-cycle recruitment according to the client requirements: candidates sourcing, applications review, screening and interviewing prospects with further employment coordinational activities.
							</div>
							<!-- experience -->
						</div>
						<!-- year -->
						<div class="timeline-year timeline-year1">
							<time datetime="2016">2016</time>
							<div class="timeline-experience">
								<span class="timeline-circle"></span>
								<div class="timeline-experience-img"><img src="https://media.licdn.com/mpr/mpr/shrink_200_200/AAEAAQAAAAAAAA3bAAAAJDRhOTk5ODdjLWExNDgtNDM4Ny1iYzcxLWQ0YjMzNWJkMjU3Zg.png" alt="Universal Commerce Group"></div>
								<div class="timeline-experience-info clear-after">
									<h5>Recruitment Specialist</h5>
									<div class="timeline-role">Universal Commerce Group</div>
									<p>July 2016 - March 2017</p>
								</div>
								Design and execute customized, full cycle staffing plans, partnering closely with hiring managers to achieve the best results possible. 
Collaborate with others on the recruiting team on initiatives and/ or hiring needs that may spike in other areas. 
Find and engage unique and/or passive candidates through creative sourcing techniques and web tools. 
Strategize different ways to build talent pipelines and execute on tactical research, referral generation, events and sourcing campaigns. 
IT market analysis, both our and worldwide (overall, competitors, salaries).
							</div>
							<!-- experience -->
							<time datetime="2015">2015</time>
							<div class="timeline-experience">
								<span class="timeline-circle"></span>
								<div class="timeline-experience-img"><img src="https://media.licdn.com/media/AAEAAQAAAAAAAAk8AAAAJDIzODJmMTcyLWUzYzgtNDg5Ny1hYzQ0LTBmNDAxODZjN2M3OQ.png" alt="Career Art"></div>
								<div class="timeline-experience-info clear-after">
									<h5>Technical Recruiter</h5>
									<div class="timeline-role">Career Art</div>
									<p>February 2015 - August 2016</p>
								</div>
								Developed and maintained the effective working relationships with client's recruitment department, in the key of the global candidate oriented relations and deep understanding of the company HR brand.
30+ successfully closed technical positions. All seniority levels. (.NET, C#, Java, QA, Android, PhP, Magento, IOS etc).
Assisted in the development and planning of training, coaching and technical support strategies. 
Administered employee surveys, performance management feedback and exit interview data.
Communicating efficiently with other clients or candidates to establish the helpful environment. 
Built key network relationships with both internal and external stakeholders.
Providing extreme customer service and ongoing support.
							</div>
							<!-- experience -->
						</div>
						<!-- year -->
					</div>
				</div>
				<!-- end row of two columns -->
			</div>
			<!-- end experience container of two columns -->
		</div>
		<!-- end container experience -->
	</section>
	<!-- end work experience -->
	<!-- start work portfolio -->

	<!-- end work portfolio -->
	<!-- start services -->
	<section id="services">
		<div class="container">
			<h2>SERVICES</h2>
			<div class="row">
				<div class="ct-services">
					<div class="col-md-4 services-item">
						<div class="rotate">
							<span class="fa fa-code" aria-hidden="true"></span>
							<!-- <i class="fa fa-file-code-o fa-wrapper" aria-hidden="true"></i> -->
						</div>
						<h3>Head Hunting</h3>
						<p>Let me find you the purple squirells with highly specific skillset/technology stack to your business requirements as well as hired a talented prospect.</p>
					</div>
					<div class="col-md-4 services-item">
						<div class="rotate">
							<span class="fa fa-linkedin fa-wrapped" aria-hidden="true"></span>
						</div>
						<h3>Talent Pipeline Building</h3>
						<p>I will assist your Hiring Team as a Technical Sourcer for fullfilling your talent pipeline with the relevant prospects. Without any negotiationing, just provide your business with the most relevant prospects in the field.</p>
					</div>
					<div class="col-md-4 services-item">
						<div class="rotate">
							<span class="fa fa-line-chart" aria-hidden="true"></span>
							<!-- <i class="fa fa-search fa-wrapper" aria-hidden="true"></i>-->
						</div>
						<h3>Employment Brand Creation</h3>
						<p>I will create a stunning content marketing strategy for successfully gaining audience's awareness, increasing brand loyalibility and building your employment brand from scratch.</p>
					</div>
				</div>
				<!-- end row of services -->
			</div>
			<!-- end row services section -->
		</div>
		<!-- end div services section -->
	</section>
	<!-- end services -->
	<!-- start testimionals -->
	
	<!-- end testimionals -->
	<!-- start footer -->
	<footer id="contact">
		<div class="container">
			<div class="row">
				<h2>CONTACT</h2>
				<p>You can 🚀 me:<br>dinkevich.hr@gmail.com</p>
				<br>
				<div class="social">
					<a href="https://twitter.com/diskevi4/" target="_blank" alt="Twitter profile"><span class="fa fa-twitter" aria-hidden="true"></span></a>
					<a href="https://www.linkedin.com/in/denisdinkevich/" target="_blank" alt="LinkedIn profile"><span class="fa fa-linkedin" aria-hidden="true"></i></a>
					<a href="https://facebook.com/diskevichh" target="_blank" alt="Facebook profile"><span class="fa fa-facebook" aria-hidden="true"></span></a>
				</div>
		<div>
		<id class="copyright"></id>
			<p id="copyright"></p>
		</div>
<br>
		<!-- end container footer section -->
	</footer>
	<!-- end footer -->
</body>

personal-landing-page.markdown

Personal Landing Page

Denis Dinkevich 2017

A Pen by Denis Dinkevich on CodePen.

License.

script.js

// PreLoader
jQuery.noConflict();
(function($) {
	$(window).on('load', function() { // makes sure the whole site is loaded
		$('#status').fadeOut(); // will first fade out the loading animation
		$('#preloader').delay(200).fadeOut('slow'); // will fade out the white DIV that covers the website.
	});
})(jQuery);

// Scroll to Top
jQuery.noConflict();
(function($) {
	$(window).scroll(function() {
		if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
			$('#return-to-top').fadeIn(200); // Fade in the arrow
		} else {
			$('#return-to-top').fadeOut(200); // Else fade out the arrow
		}
	});
	$('#return-to-top').click(function() { // When arrow is clicked
		$('body,html').animate({
			scrollTop: 0 // Scroll to top of body
		}, 500);
	});
})(jQuery);

// jQuery for page scrolling feature - requires jQuery Easing plugin
jQuery.noConflict();
(function($) {
	$(function() {
		$('a.page-scroll').bind('click', function(event) {
			var $anchor = $(this);
			$('html, body').stop().animate({
				scrollTop: $($anchor.attr('href')).offset().top
			}, 1500, 'easeInOutExpo');
			event.preventDefault();
		});
	});
})(jQuery);

// typer for hello
window.onload = function() {
	var elements = document.getElementsByClassName('txt-rotate');
	for (var i = 0; i < elements.length; i++) {
		var toRotate = elements[i].getAttribute('data-rotate');
		var period = elements[i].getAttribute('data-period');
		if (toRotate) {
			new TxtRotate(elements[i], JSON.parse(toRotate), period);
		}
	}
	// INJECT CSS
	var css = document.createElement("style");
	css.type = "text/css";
	css.innerHTML = ".txt-rotate > .wrap { border-right: 10px solid #40E0D0 }";
	document.body.appendChild(css);
};

var TxtRotate = function(el, toRotate, period) {
	this.toRotate = toRotate;
	this.el = el;
	this.loopNum = 0;
	this.period = parseInt(period, 1) || 1000;
	this.txt = '';
	this.tick();
	this.isDeleting = false;
};

TxtRotate.prototype.tick = function() {
	var i = this.loopNum % this.toRotate.length;
	var fullTxt = this.toRotate[i];

	if (this.isDeleting) {
		this.txt = fullTxt.substring(0, this.txt.length - 1);
	} else {
		this.txt = fullTxt.substring(0, this.txt.length + 1);
	}

	this.el.innerHTML = '<span class="wrap">' + this.txt + '</span>';

	var that = this;
	var delta = 200 - Math.random() * 100;

	if (this.isDeleting) {
		delta /= 2;
	}

	if (!this.isDeleting && this.txt === fullTxt) {
		delta = this.period;
		this.isDeleting = true;
	} else if (this.isDeleting && this.txt === '') {
		this.isDeleting = false;
		this.loopNum++;
		delta = 200;
	}

	setTimeout(function() {
		that.tick();
	}, delta);
};

// number count for stats
jQuery.noConflict();
(function($) {
	$('.counter').each(function() {
		var $this = $(this),
			countTo = $this.attr('data-count');

		$({
			countNum: $this.text()
		}).animate({
				countNum: countTo
			},

			{
				duration: 3000,
				easing: 'linear',
				step: function() {
					$this.text(Math.floor(this.countNum));
				},
				complete: function() {
					$this.text(this.countNum);
					//alert('finished');
				}
			});
	});
})(jQuery);

// update footer copyright year

var today = new Date();
var year = today.getFullYear();

var copyright = document.getElementById("copyright");
copyright.innerHTML = "© Denis Dinkevich " + year;

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://shvvffle.github.io/js/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

style.scss

body {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	width: 100%;
	height: 100%;
	background: #fff;
	margin: 0;
	padding: 0;
}

h2 {
	color: #311ae0;
	font-weight: 700;
	font-size: 50px;
	font-family: 'Montserrat', sans-serif;
	text-transform: lowercase;
}

h2:after {
	content: '';
	width: 50px;
	height: 3px;
	background: #311ae0;
	display: block;
	margin: 15px auto;
	transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

h2:hover:after {
	width: 100px;
}

h3,
h4,
h5 {
	font-family: 'Montserrat', sans-serif;
}


/* SCROLL TO TOP ARROW */

#return-to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: rgba(64, 224, 208, 0.8);
	width: 50px;
	height: 50px;
	display: block;
	text-decoration: none;
	-webkit-border-radius: 35px;
	-moz-border-radius: 35px;
	border-radius: 35px;
	display: none;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	z-index: 999;
}

#return-to-top span {
	color: #fff;
	margin: 0;
	position: relative;
	left: 16px;
	top: 13px;
	font-size: 19px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

#return-to-top:hover {
	background: rgba(64, 224, 208, 1);
}

#return-to-top:hover span {
	color: #fff;
	top: 5px;
}


/* END SCROLL TO TOP ARROW */
.Kiev {
  color: Green;
  font-family: roboto;
  font-weight: strong;
}

/* START PRELOADER */

#preloader {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #2b85e5;
	z-index: 99;
	height: 100%;
}

#status {
	width: 200px;
	height: 200px;
	position: absolute;
	left: 50%;
	top: 50%;
	background-image: url(http://marinamarques.pt/img/preloader.gif);
	background-repeat: no-repeat;
	background-position: center;
	margin: -100px 0 0 -100px;
}


/* END PRELOADER */

.fa-code {
  color: #311ae0;
  size: 60px;
}
/* start header */

.navbar-fixed-top {
	background-color: #2b85e5;
}

.navbar-brand {
	padding: 0px 15px;
	height: 56px;
	margin-left: 0;
}

.navbar {
	margin-bottom: 0px;
	border: none;
}

.navbar-inverse .navbar-toggle:focus,
.navbar-inverse .navbar-toggle:hover {
	background-color: #2b85e5;
}

.navbar-inverse .navbar-toggle {
	border: none;
}

.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
	border: none;
}

.navbar-toggle .icon-bar {
	width: 35px;
	height: 5px
}

#ResponsiveNav li a {
	font-size: 16px;
	color: #311ae0;
	font-weight: 700;
	display: inline-block;
	position: relative;
	text-decoration: none;
	overflow: hidden;
	-webkit-transition: all .40s ease-in-out;
	transition: all .40s ease-in-out;
	font-family: 'Roboto', sans-serif;
	text-transform: lowercase;
}

#ResponsiveNav li a:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	height: 3px;
	background: #311ae0;
	-webkit-transition: .35s;
	transition: .35s;
}

#ResponsiveNav li a:hover {
	color: #000;
}

#ResponsiveNav ul li a:hover:after,
#ResponsiveNav ul li a:focus:after,
#ResponsiveNav ul li a:active:after {
	width: 70%;
}

button.navbar-toggle.collapsed {
	background-color: #2b85e5;
	border: none;
}

.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
	background-color: #2b85e5;
	border: none;
}

.navbar-default .navbar-toggle .icon-bar {
	background-color: #fff;
}


/*/ start hamburger menu desktop overwrite bootstrap /*/

.navbar-header {
	float: none;
}

.navbar-toggle {
	display: block;
}

.navbar-collapse.collapse {
	display: none!important;
}

.navbar-nav {
	float: none!important;
}

.navbar-nav>li {
	float: none;
}

.navbar-collapse.collapse.in {
	display: block !important;
}


/*/ end hamburger menu desktop overwrite bootstrap /*/


/*/ start intro /*/

.intro {
	display: table;
	width: 100%;
	height: auto;
	text-align: center;
	color: white;
	background: url(https://scontent-dft4-1.xx.fbcdn.net/v/t1.0-9/18921763_1279272055505301_47037393026651072_n.jpg?oh=927739c290eeeb8882bf197c6838dd44&oe=5A2083B8) no-repeat top center scroll;
	background-size: cover;
	-o-background-size: cover;
}

.intro .intro-body {
	display: table-cell;
	vertical-align: middle;
	padding: 15% 0;
	background: rgba(0, 0, 0, 0.5);
}

.brand-heading {
	font-size: 100px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	text-align: left;
	color: #2b85e5;
}

.intro .intro-body .intro-text {
	font-size: 25px;
	font-family: 'Montserrat', sans-serif;
	text-align: left;
}

span.city {
	background-color: #000;
	color: #2b85e5;
	border-radius: 4px;
	width: 15px;
}

@media (min-width: 768px) {
	.intro {
		height: 100%;
		padding: 0;
	}
	.intro .intro-body .brand-heading {
		font-size: 130px;
	}
	.intro .intro-body .intro-text {
		font-size: 35px;
	}
}

.mouse-warp {
	margin: 40px auto;
	display: block;
	width: 28px;
	opacity: 0.5;
}

.mouse {
	width: 28px;
	height: 50px;
	border: 2px solid #2b85e5;
	border-radius: 14px;
}

.scroll {
	width: 4px;
	height: 4px;
	border-radius: 2px;
	background: #2b85e5;
	position: relative;
	left: 10px;
	-webkit-animation: scrolls 1.3s ease-out infinite;
}

@-webkit-keyframes scrolls {
	0% {
		top: 8px;
		opacity: 0;
		-webkit-transform: scaleY(1) scaleX(1);
	}
	5% {
		top: 8px;
		opacity: 0.8;
		-webkit-transform: scaleY(1.2) scaleX(1.2);
	}
	10% {
		top: 8px;
		opacity: 1;
		-webkit-transform: scaleY(1.6) scaleX(1.6);
	}
	15% {
		top: 8px;
		opacity: 1;
		-webkit-transform: scaleY(1.2) scaleX(1.2);
	}
	20% {
		top: 8px;
		opacity: 1;
		-webkit-transform: scaleY(1.2) scaleX(1.2);
	}
	30% {
		top: 15px;
		opacity: 1;
		-webkit-transform: scaleY(1.2) scaleX(1.2);
	}
	100% {
		top: 30px;
		opacity: 0;
		-webkit-transform: scaleY(1.2) scaleX(0.8);
	}
}


/* End Scroll Down Indicator */


/*/ end intro /*/


/*/ start about /*/

#about-me {
	margin-top: 20px;
}

#about-me h2 {
	font-weight: 700;
	margin-top: 22px;
	padding-bottom: 10px;
	text-align: center;
}

.about-intro-text p {
	float: right;
}

.about-intro-text span {
	color: #311ae0;
	font-weight: 700;
}

.about-intro-text .fa-beer {
	color: #311ae0;
	font-size: 20px;
}

.button-group {
	cursor: pointer;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	color: #2b85e5;
}

.text {
	background: #2b85e5;
	color: #fff;
	font-size: 18px;
	height: 50px;
	padding: 0 55px;
	line-height: 60px;
}

.icon-cv {
	font-size: 30px;
	width: 50px;
	height: 50px;
	line-height: 40px;
	box-sizing: border-box;
	border: 4px solid #1BEFEC;
	border-left: none;
	-webkit-transition: 600ms -webkit-transform ease-in-out;
	transition: 600ms -webkit-transform ease-in-out;
	transition: 600ms transform ease-in-out;
	transition: 600ms transform ease-in-out, 600ms -webkit-transform ease-in-out;
	-webkit-transform: rotateY(90deg);
	transform: rotateY(90deg);
	-webkit-transform-origin: left;
	transform-origin: left;
	color: #311ae0;
	background: #fff;
	text-align: center;
}

a .fa-arrow-circle-down {
	color: #311ae0;
}

.button-group:hover .icon-cv {
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

.button-group {
	-webkit-perspective: 200px;
	perspective: 200px;
	-webkit-perspective-origin: calc(100% - 50px);
	perspective-origin: calc(100% - 50px);
	margin-top: 5%;
}

.about-inner {
	position: relative;
	padding: 0;
	overflow: hidden;
}

.about-inner>img {
	display: block;
	min-width: 100%;
	height: auto;
}

.about-ct .textbox-about {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform: scale(0);
	transform: scale(0);
}

.about-ct:hover .textbox-about {
	-webkit-transform: scale(1);
	transform: scale(1);
}

.textbox-about {
	-webkit-transition: all 0.7s ease;
	transition: all 0.7s ease;
}

div.button-social {
	border: 2px solid #fff;
	padding: 12px 18px;
	-webkit-transition: all .35s;
	transition: all .35s;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	margin-top: 25px;
	font-size: 18px;
	color: #fff;
	margin: 5% 5%;
}

div.button-social a {
	color: #fff;
	font-size: 18px;
	margin: 15px;
}

div.button-social a:hover {
	color: #2b85e5;
}

.button-group:focus,
.icon-cv:focus,
.text:focus {
	outline: 0;
}


/*/ start count stats /*/

#counter-stats {
	margin-top: 50px;
	width: 100%;
	height: auto;
}

.stats {
	text-align: center;
	font-size: 35px;
	font-weight: 700;
	font-family: 'Montserrat', sans-serif;
	text-transform: lowercase;
}

.stats .fa {
	color: #000;
	font-size: 60px;
}


/*/ end count stats /*/


/*/ end about /*/


/*/ start about work experience /*/

#experience {
	margin-top: 20px;
}

#experience h2 {
	font-weight: 700;
	margin-top: 22px;
	padding-bottom: 10px;
	text-align: center;
}

.timeline-label h4 {
	margin-top: 0;
	font-size: 30px;
	color:  #000;
	padding: 16px 0px;
	font-weight: 700;
}

.timeline-label p {
	color: #000;
	padding: 8px 0px;
	line-height: 27px;
}

.button-group-li {
	cursor: pointer;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
  color: #311ae0;
}

.timeline-label a {
	text-decoration: none;
}

.text-timeline {
	background: #2b85e5;
	color: #fff;
	font-size: 18px;
	height: 40px;
	padding: 0 25px;
	line-height: 40px;
}

.icon-li {
	font-size: 20px;
	width: 40px;
	height: 40px;
	line-height: 30px;
	box-sizing: border-box;
	border: 4px solid #40E0D0;
	border-left: none;
	-webkit-transition: 600ms -webkit-transform ease-in-out;
	transition: 600ms -webkit-transform ease-in-out;
	transition: 600ms transform ease-in-out;
	transition: 600ms transform ease-in-out, 600ms -webkit-transform ease-in-out;
	-webkit-transform: rotateY(90deg);
	transform: rotateY(90deg);
	-webkit-transform-origin: left;
	transform-origin: left;
	color: #2b85e5;
	background: #fff;
	text-align: center;
}

.button-group-li:hover .icon-li {
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

.button-group-li {
	-webkit-perspective: 200px;
	perspective: 200px;
	-webkit-perspective-origin: calc(100% - 40px);
	perspective-origin: calc(100% - 40px);
}

.timeline-label {
	padding-left: 7%;
	margin-top: 2%;
}

.col-exp {
	margin-top: 2%;
}

.timeline .timeline-experience {
	position: relative;
	float: left;
	margin-left: 32px;
	padding-left: 64px;
	border-left: 3px solid #cebeb5;
}

.timeline .timeline-experience-info h5 {
	margin-top: 0;
	margin-bottom: 0.333em;
	font-size: 20px;
	color: #000;
	font-weight: 700;
}

.timeline .timeline-experience-info .timeline-role {
	font-size: 16px;
	color: #311ae0;
	font-weight: 600;
}

.timeline .timeline-experience-info p {
	font-size: 12px;
	color: #000;
	line-height: 27px;
}

.timeline time {
	display: block;
	width: 80px;
	color: #ef6300;
	text-align: center;
	font-weight: 900;
}

.timeline .timeline-experience-img,
.timeline .timeline-experience-info,
.timeline .timeline-experience-info h5,
.timeline .timeline-experience-info .role,
.timeline .timeline-experience-info p {
	clear: none;
}

.timeline .timeline-experience .timeline-circle {
	position: absolute;
	top: 16px;
	left: -13px;
	display: block;
	width: 19px;
	height: 19px;
	border: 2px solid #000;
	border-radius: 50%;
	background-color: #42f486;
}

.timeline .timeline-experience-img {
	float: left;
	width: 64px;
	height: 64px;
}

.timeline .timeline-experience-img img {
	width: 100%;
}

.timeline .timeline-experience-info {
	margin-left: 87px;
}

.timeline-experience-info p {
	margin-top: 10px;
	margin-bottom: 20px;
}


/*/ end about work experience /*/


/*/ end about /*/


/*/ start work portfolio /*/

#portfolio {
	margin-top: 20px;
}

.portfolio-ct h2 {
	font-weight: 700;
	margin-top: 22px;
	padding-bottom: 10px;
	text-align: center;
}

.grid-portfolio {
	margin-top: 20px;
}

.portfolio-details {
	text-align: center;
}

.thumbnail {
	max-width: 500px;
	border: none;
	position: relative;
	background: none;
	padding: 0;
}

.portfolio-details h3 {
	color: #0d35db;
	font-weight: 700;
	font-size: 25px;
	font-family: 'Montserrat', sans-serif;
}

.portfolio-details p {
	font-size: 14px;
}

ul.portfolio-tags {
	padding: 10px 0 10px 0;
	text-align: center;
}

li.portfolio-tag {
	list-style-type: none;
	font-size: 9px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color: #40E0D0;
	display: inline;
	border: 2px solid #40E0D0;
	padding: 8px;
}

span.portfolio-link {
	font-size: 30px;
	border: 2px solid #fff;
	border-radius: 50px;
	padding: 20px;
	color: #fff;
	margin: 20% auto;
}

.portfolio-item-ct .textbox-portfolio {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform: scale(0);
	transform: scale(0);
	background: #40e0d0;
	opacity: 0.9;
}

.portfolio-item-ct:hover .textbox-portfolio {
	-webkit-transform: scale(1);
	transform: scale(1);
}

.textbox-portfolio {
	-webkit-transition: all 0.7s ease;
	transition: all 0.7s ease;
}

div.button-weblink {
	-webkit-transition: all .35s;
	transition: all .35s;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	color: #fff;
	text-align: center;
}

.portfolio-tag:focus,
.portfolio-tags:focus {
	outline: 0;
}


/*/ end work portfolio /*/


/*/ start services /*/

#services {
	margin-top: 20px;
	width: 100%;
	height: auto;
	text-align: center;
	margin-bottom: 45px;
}

#services h2 {
	font-weight: 700;
	margin-top: 22px;
	padding-bottom: 10px;
	text-align: center;
}

.ct-services {
	margin-top: 20px;
}

#services h3 {
	color: #311ae0;
	font-size: 22px;
	font-weight: bold;
	text-transform: no-transform;
}

#services .fa {
	font-size: 60px;
	color: #311ae0;
}

#services .rotate:hover {
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
}

#services .rotate {
	-webkit-transition-duration: 0.8s;
	transition-duration: 0.8s;
	-webkit-transition-property: -webkit-transform;
	transition-property: -webkit-transform;
	transition-property: transform;
	transition-property: transform, -webkit-transform;
	overflow: hidden;
}


/*/ end services /*/


/*/ start testimionals /*/

#testimionals {
	margin-top: 20px;
	width: 100%;
	height: auto;
	text-align: center;
}

#testimionals h2 {
	font-weight: 700;
	color: #fff;
	margin-top: 22px;
	padding-bottom: 10px;
	text-align: center;
}

.testimionals-bg {
	width: 100%;
	height: auto;
	background: url(http://marinamarques.pt/img/mm_testimionals.jpg) no-repeat top center scroll;
	background-size: cover;
	-o-background-size: cover;
}

.testimionals-bg-opacity {
    width: 100%;
    height: auto;
    background: rgba(0, 0, 0, 0.5);
}

.quotes {
	color: #fff;
	font-size: 60px;
}

.client {
	font-size: 16px;
	font-style: italic;
}

.carousel-caption {
	position: static;
	/*/ this is to replace the images of bootstrap slider /*/
	font-size: 18px;
	color: #fff;
	min-height: 200px;
}

.carousel-control.left,
.carousel-control.right {
	background: none;
}


/*/ end testimionals /*/


/*/ start contact /*/

footer {
	text-align: center;
	font-size: 18px;
	margin-top: 20px;
}

#contact h2 {
	font-weight: 700;
	margin-top: 22px;
	padding-bottom: 10px;
	text-align: center;
}

footer p {
	margin-top: 50px;
}

.social,
footer a {
	font-size: 30px;
	color: #000;
	margin: 10px;
}

footer a:hover,
footer a:after,
footer a:visited footer a:focus {
	color: #000;
}

#copyright {
	margin-top: 25px;
	font-size: 14px;
	font-weight: strong;
}


/*/ end contact /*/


/*/ media queries /*/

@media only screen and (max-width: 480px) {
	.brand-heading {
		font-size: 85px;
		margin-top: 10%;
		color: #2b85e5;
	}
	.col-exp {
		margin-top: 15%;
	}
	.timeline .timeline-experience {
		margin-left: 20px;
		padding-left: 20px;
	}
	.timeline time {
		width: 40px;
	}
	.services-item {
		margin-bottom: 15%;
		color: #0003ce;
	}
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />