ONLİNE HARUN PEHLİVAN

index.html

<div class="cover">
	<div class="shade"></div>
	<div class="loader"></div>
</div>
<style>
	.top-nav {
		position: fixed;
		z-index: 1400;
		width: 100%;
		top: 15px;
	}

	.top-nav .navbar-layout {
		position: relative;
		overflow: visible;
		display: flex;
	}

	.top-nav .navbar-main {
		box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.12);
		border-radius: 25px;
		background: #fff;
	}

	ul.top-nav-list {
		transition: all 0.5s ease;
		white-space: nowrap;
		align-self: stretch;
		align-items: center;
		flex-wrap: nowrap;
		list-style: none;
		max-height: 100%;
		padding: 8px 0;
		display: flex;
		height: 100%;
		width: 100%;
		margin: 0;
	}

	li.topbar-link a {
		font-family: "Ubuntu", "Roboto Slab", sans-serif;
		border-right: 1px solid rgba(0, 0, 0, 0.12);
		word-break: keep-all !important;
		text-decoration: none;
		position: relative;
		flex-wrap: nowrap;
		padding: 2px 16px;
		font-weight: 500;
		font-size: 14px;
		display: block;
		color: #727276;
		display: flex;
		min-width: 0;
		width: 100%;
	}

	li.topbar-link:last-of-type a {
		border-right: none;
	}

	li.topbar-link a:hover {
		cursor: pointer;
		color: #CF2953;
	}

	li.topbar-link-focus a {
		font-family: "Roboto Slab", "Ubuntu", sans-serif;
		text-decoration: line-through;
		font-weight: 900;
		color: #000;
	}
</style>
<section class="top-nav">
	<article class="navbar-layout">
		<section class="navbar-spacer"></section>
		<section class="navbar-main">
			<ul class="top-nav-list navbar-spacer">
				<li class="topbar-link topbar-link-focus"><a href="/">Home</a></li>
				<li class="topbar-link"><a href="/traits">Traits</a></li>
			</ul>
		</section>
		<section class="navbar-spacer"></section>
	</article>
</section>
<header class="header">
	<nav class="navbar navbar-fixed">
		<article class="navbar-layout">
			<section class="navbar-head">
				<a class="navbar-title" href="/"> 
					<img class="navbar-logo" src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1619114944/IMG_20210422_174904_smnbfu.jpg" alt="The logo of the Website" title="Leaders">
				</a>
			</section>
			<section class="navbar-spacer"></section>
			<section class="navbar-main">
				<ul class="navbar-list navbar-list-hide navbar-spacer">
					<li class="navbar-link"><a link="intro">HARUN PEHLİVAN </a></li>
					<li class="navbar-link"><a link="technical">Technical</a></li>
					<li class="navbar-link"><a link="psychology">Psychology</a></li>
					<li class="navbar-link"><a link="social">Social</a></li>
					<li class="navbar-link"><a link="personal">Personal</a></li>
					<li class="navbar-link"><a link="education">Education</a></li>
					<li class="navbar-link"><a link="conclusion">Conclusion</a></li>
					<li class="navbar-link"><a link="works-cited">Works-Cited</a></li>
				</ul>
			</section>
			<section class="navbar-spacer"></section>
			<section class="navbar-foot">
				<a class="icon-btn navbar-backup">
					<i class="icon material-icons">expand_less</i>
				</a>
				<a class="icon-btn navbar-menu">
					<i class="material-icons icon">menu</i>
				</a>
			</section>
		</article>
	</nav>
</header>
<main class="main layer-white">
	<section class="layer-content">
		<section class="layer-hero-shadow">
			<section class="layer-hero">
				<div class="layer-hero-img-div layer-hero-img" data-src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1604403639/responsivecomingsoon_zzcqkv.png" alt="An iamge of the Grand Canyon."></div>
				<div class="layer-hero-overlay"></div>
				<div class="layer-hero-content">
					<h2 class="layer-hero-type">HARUN  </h2>
					<h1 class="layer-hero-title style-uppercase">PEHLİVAN</h1>
				</div>
				<div class="layer-hero-godown-anim">
					<a class="layer-hero-godown">
						<i class="icon material-icons">expand_more</i>
					</a>
				</div>
			</section>
		</section>
	</section>
	<section class="layer-content layer-white sidebar-move" id="intro">
		<section class="layout-contain">
			<section class="layer">
				<section class="layout-padding-vert-top layout-padding-horz">
					<h4 class="layer-title">HARUN PEHLİVAN </h4>
					<span class="layer-content-txt">22/07/1984 Çorum'da Doğdum Aslen Samsun'un Havza ilçesi 
    </span>
					<span class="layer-content-txt"> The language I Started Programming is PASCAL</span>
				</section>
			</section>
		</section>
	</section>
	<section class="layer-content">
		<div class="layer-godown-anim">
			<a class="layer-godown">
				<i class="icon material-icons">expand_more</i>
			</a>
		</div>
	</section>
	<section class="layer-content layer-darkgrey sidebar-move" id="technical">
		<section class="layout-padding-vert">
			<section class="layer-hero layer-hero-shadow layer-hero-sub layout-contain">
				<div class="layer-hero-img-div layer-hero-img" data-src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1604403639/responsivecomingsoon_zzcqkv.png" alt="An iamge of the edge of a hill."></div>
				<div class="layer-hero-overlay"></div>
				<div class="layer-hero-content">
					<h1 class="layer-hero-title style-uppercase">Techinical</h1>
				</div>
			</section>
		</section>
		<section class="layout-contain">
			<section class="layer">
				<section class="layout-padding-vert-top layout-padding-horz">
					<h4 class="layer-title">Techinical.</h4>
					<span class="layer-content-txt">An article from Hanselman discusses the technical view. The article uses an example of the Education system to discuss how from a technical point of view students are taught to lack curiosity especially when it comes to technology. It says, &quot;There&apos;s curious people and non curious people&quot;. This is especially true when it comes to teaching about tech, code isn&apos;t the be all end all, it is but a small piece of what should be taught, how systems works.</span>
					<span class="layer-content-txt">In the article the idea of there being two types of people in the world is delved deeply into, the idea that there are &quot;curious people and non curious people,&quot; and how each of these people live. For example, two people see some dices on
						the ground the first person, the curious person picks it up and tries to see if anyone has lost it, while the other person walks away thinking it&apos;s none of my business, the curious person finds the person whom the dice belongs to the person
						then congratulates the finder with a prize. The example is analogous (an analogy) to life and how curiosity leads to opportunity sometimes taking a chance, being curious leads to a prize.</span>
					<span class="layer-content-txt">The article then discusses a job interview question that every interviewer should ask. The question goes &quot;When you type foo.com into a browser, what happens? Then what happens? Then what happens?&quot; The question doesn&apos;t need to go exactly like that, however, the point of the question is to see the limit of ones curiosity, passion, and creativity, to what levels are you willing to go to complete task.</span>
					<span class="layer-content-txt">To end the article questions are asked, that sound in a way rhetorical. &quot;Non-technical people, here&apos;s a secret. We tech folks have no idea what the problem is. We just try to narrow it down, removing variables....What do you think? Is
							21st century technology making it too easy? Are iPhones so magical sitting atop the last millennium of technology that it&apos;s not worth teaching - or even wondering - how it all fits together?&quot;</span>
					<span class="layer-content-txt">Curiosity is a drive to understand and learns more even in the field of technology.</span>
				</section>
			</section>
		</section>
	</section>
	<section class="layer-content layer-darkgrey">
		<div class="layer-godown-anim">
			<a class="layer-godown">
				<i class="icon material-icons">expand_more</i>
			</a>
		</div>
	</section>
	<section class="layer-content layer-grey sidebar-move" id="psychology">
		<section class="layout-padding-vert">
			<section class="layer-hero layer-hero-shadow layer-hero-sub layout-contain">
				<div class="layer-hero-img-div layer-hero-img" data-src="/images/sand.jpg" alt="An iamge of sand dunes."></div>
				<div class="layer-hero-overlay"></div>
				<div class="layer-hero-content">
					<h1 class="layer-hero-title style-uppercase">Psychology</h1>
				</div>
			</section>
		</section>
		<section class="layout-contain">
			<section class="layer">
				<section class="layout-padding-vert-top layout-padding-horz">
					<h4 class="layer-title">Psychology.</h4>
					<span class="layer-content-txt">A Gallup poll revealed that less than 50% of smartphone users in the US check their phone&apos;s a few times and hour or more, this staggering number isn&apos;t all, 63% of smartphone users can&apos;t stay away from their gadgets, 70% check their phones a few times or more every hour. Studies show that tech has led to shorter attention spans. Before iPhones etc..., the average attention span for a person was 12 seconds, but now it&apos;s 8 seconds. We have convinced ourselves that our ability to multitask has improved when there is not shred of proof at all supporting this claim, in truth the brain isn&apos;t as efficient as we like to believe.</span>
					<span class="layer-content-txt">Tech addicts or addiction is the compulsive behavior to one&apos;s check phone constantly, some requiring detox or rehab to properly function. Face-to-face interactions are undermined, for example, in a train station people in trains and are zombies
						stuck to phones or some other type of screen not noticing the environments and surroundings.</span>
					<span class="layer-content-txt">Communication is shattered instead of facial expression and body movement to display emotions emojis are used as a replacement this is causing a rift in interpersonal skills, many kids don&apos;t develop conversation skills, grow up with a lack of understanding social cues. At the rate at which technology is used younger people are beginning to become more forgetful than seniors, the phenomenon occurs because in order to remember the brain moves information from the conscious mind to long term memory, but because of a lack of attentiveness the mind isn&apos;t able to do that effectively because the information isn&apos;t there to begin with as the person wasn&apos;t paying enough attention.</span>
					<span class="layer-content-txt">Another cause it the lack of time to process new information, the brain is constantly barraged with continuous amounts of information from the internet.</span>
				</section>
			</section>
		</section>
	</section>
	<section class="layer-content layer-grey">
		<div class="layer-godown-anim">
			<a class="layer-godown">
				<i class="icon material-icons">expand_more</i>
			</a>
		</div>
	</section>
	<section class="layer-content layer-white sidebar-move" id="social">
		<section class="layout-padding-vert">
			<section class="layer-hero layer-hero-shadow layer-hero-sub layout-contain">
				<div class="layer-hero-img-div layer-hero-img" data-src="/images/minimal-flower-petal.jpg" alt="An iamge of flowers on a table."></div>
				<div class="layer-hero-overlay"></div>
				<div class="layer-hero-content">
					<h1 class="layer-hero-title style-uppercase">Social</h1>
				</div>
			</section>
		</section>
		<section class="layout-contain">
			<section class="layer">
				<section class="layout-padding-vert-top layout-padding-horz">
					<h4 class="layer-title">Social.</h4>
					<span class="layer-content-txt">The misconception is that tech affect the body negatively, make no mistake it has negative effects, however, most of the better known side effects are from social media. Social media affects memory, attention spans, sleep cycles, and a scientific phenomenon called neuroplasticity (the brain&apos;s ability to alter behavior based on new experiences). Social media also has the ability to organize our lives, free our minds, allow for deeper thinking, with side effects including making us uncreative, and impatient.</span>
					<span class="layer-content-txt">Tech addicts or addiction is the compulsive behavior to one&apos;s check phone constantly, some requiring detox or rehab to properly function. Face-to-face interactions are undermined, for example, in a train station people in trains and are zombies
						stuck to phones or some other type of screen not noticing the environments and surroundings.</span>
					<span class="layer-content-txt">We experience FOMO (fear of missing out), the New York Time defined it as &quot;the blend of anxiety, inadequacy and irritation that can flare up while skimming social media&quot;. For example, you are having fun and you recognize that pang: &quot;Should I be doing something else right now?&quot; That&apos;s FOMO. Its now so hard-wired into us we some times, it causes people to think their phones are ringing, when they are not it&apos;s become almost like an itch. A 2012 study published in the journal Computers and Human Behavior, found that 89% of the 290 undergraduates surveyed reported feeling &quot;phantom vibrations&quot;. A psychologist speaking on NPR suggested that physical sensations, such as an itch, may now be misinterpreted by our brains as a vibrating phone.</span>
					<span class="layer-content-txt">Neuroscientists, glowing lights emitted by tech screens mess with your body&apos;s internal light cues and sleep-inducing hormones, circadian rhythms. A 2013 study, found that first-person shooter video games, Halo and Call of Duty, boost decision-making
							and visual skills. Force players to make snap decisions based on visual cues, which enhances visuospatial attention skills, or the ability to parse details of your physical environment.</span>
					<span class="layer-content-txt">Complex, strategy-based games like Starcraft may improve the brain&apos;s &quot;cognitive flexibility&quot;, video games like Halo inhibit players&apos; ability to rein in impulsive or aggressive behavior forcing players to make snap decisions in violent situations inhibited &quot;proactive executive control&quot; a knee-jerk reactions and impulse, meaning they were more likely to react with immediate, unchecked hostility or aggression in real life.</span>
					<span class="layer-content-txt">Curiously, curiosity is what brought about all you are reading.</span>
				</section>
			</section>
		</section>
	</section>
	<section class="layer-content layer-white">
		<div class="layer-godown-anim"><a class="layer-godown"><i class="icon material-icons">expand_more</i></a></div>
	</section>
	<section class="layer-content layer-grey sidebar-move" id="personal">
		<section class="layout-padding-vert">
			<section class="layer-hero layer-hero-shadow layer-hero-sub layout-contain">
				<div class="layer-hero-img-div layer-hero-img" data-src="/images/stone.jpg" alt="An iamge of a white stone."></div>
				<div class="layer-hero-overlay"></div>
				<div class="layer-hero-content">
					<h1 class="layer-hero-title style-uppercase">Personal</h1>
				</div>
			</section>
		</section>
		<section class="layout-contain">
			<section class="layer">
				<section class="layout-padding-vert-top layout-padding-horz">
					<h4 class="layer-title">Personal.</h4>
					<span class="layer-content-txt">This is the life someone who&apos;s curiosity built their life today. Lucas Johnson was always curious, about tech and it&apos;s rapid growth, when he got his first computer at the age of 9 he was super excited, he explored, and more often than not broke devices in the pursuit for more knowledge. Learned how to navigate his devices over time through trial and error, that&apos;s why and how he got so good code and tech.</span>
					<span class="layer-content-txt">As a kid he went on a site thought to be BBC, decided to click save as, opened it in word processor, sees &quot;&lt;&gt;&quot; everywhere, one of the words was black, changed to red, saved file opened file in Safari, first experience with coding.
						Each year he&rsquo;d grow a little bigger. So would the latest laptop. &quot;This piqued [his] curiosity&mdash;[he] was always interested to learn about these weird, magical machines and how they worked. He would go through each application to see
						what I could make, to see what would happen when I pressed this button, to see what would happen when I entered that key. &ldquo;The best way to predict the future is to invent it.&rdquo;&hairsp;&mdash;&hairsp;Alan Kay.</span>
					<span class="layer-content-txt">He started developing my skills in HTML, CSS, JavaScript, jQuery, and Python. He even started developing websites for some local businesses to earn a little bit of pocket money for himself! In a quote he said, &quot;In my lifetime, I want to use technology to improve the lives of people on this planet. I think being a Software Engineer at my age gives me a unique perspective on how technology impacts young people, because I am one of the young people impacted by it, so I see it all first-hand. That perspective is something I bring to the table when I contribute to the development of a new piece of technology, and it&rsquo;s a perspective I want to share&quot;.</span>
					<span class="layer-content-txt">Today he is a software engineer &amp; product manager focusing on financial services for under 18s, working at starling bank.</span>
					<span class="layer-content-txt"> </span>
				</section>
			</section>
		</section>
	</section>
	<section class="layer-content layer-grey">
		<div class="layer-godown-anim">
			<a class="layer-godown">
				<i class="icon material-icons">expand_more</i>
			</a>
		</div>
	</section>
	<section class="layer-content layer-darkgrey sidebar-move" id="education">
		<section class="layout-padding-vert">
			<section class="layer-hero layer-hero-shadow layer-hero-sub layout-contain">
				<div class="layer-hero-img-div layer-hero-img" data-src="/images/neon.jpg" alt="An iamge of a neon sign."></div>
				<div class="layer-hero-overlay"></div>
				<div class="layer-hero-content">
					<h1 class="layer-hero-title style-uppercase">Education</h1>
				</div>
			</section>
		</section>
		<section class="layout-contain">
			<section class="layer">
				<section class="layout-padding-vert-top layout-padding-horz">
					<h4 class="layer-title">Education.</h4><span class="layer-content-txt">Education is about bringing back curiosity and wonder. Meanwhile the media, both mass and traditional and social is killing curiosity, politics, racism, environmental or a host of other modern issues. Curiosity is nice in theory, it might work in schools, in the real world, curiosity is not valued and it&rsquo;s often disdained. The absence of wonder and curiosity sends exactly the opposite message to students. The shortage of thoughtful, welcoming conversation and discourse is alarming. For a person genuinely interested in learning about two or more sides of an issue, good luck. There aren&rsquo;t many safe places to ask questions and learn. Phrase a question incorrectly, hammered and chastised for your ignorance. So instead of engaging in civil discourse, you&rsquo;re forced to choose a side. Schools might be the only places where ignorance is embraced and addressed without judgment. The world rejects and chastises anyone who challenges any side, interestingly the statement &quot;I&rsquo;m not trying to win the argument; I&rsquo;m trying to have the argument&rdquo; is true about pretty much every statement now. To end things with a high note &ldquo;Be curious as a child, when you become an adult, you&rsquo; have to be careful which things you&rsquo;re curious about&rdquo;.</span>
					<span class="layer-content-txt"> </span>
				</section>
			</section>
		</section>
	</section>
	<section class="layer-content layer-darkgrey">
		<div class="layer-godown-anim"><a class="layer-godown"><i class="icon material-icons">expand_more</i></a></div>
	</section>
	<section class="layer-content layer-grey sidebar-move" id="conclusion">
		<section class="layout-padding-vert">
			<section class="layer-hero layer-hero-shadow layer-hero-sub layout-contain">
				<div class="layer-hero-img-div layer-hero-img" data-src="/images/sunlight-shadow.jpg" alt="An iamge of a motorcycle riding on a road."></div>
				<div class="layer-hero-overlay"></div>
				<div class="layer-hero-content">
					<h1 class="layer-hero-title style-uppercase">Conclusion</h1>
				</div>
			</section>
		</section>
		<section class="layout-contain">
			<section class="layer">
				<section class="layout-padding-vert-top layout-padding-horz">
					<h4 class="layer-title">Conclusion.</h4><span class="layer-content-txt">In conclusion, people are not curious about the technology that powers their lives because of multiple factors some of which are, the internet makes to easy to find information so people never really bother, society doesn&apos;t value curiosity, and social misconceptions make curiosity a back thought.</span>
					<span class="layer-content-txt"> </span>
				</section>
			</section>
		</section>
	</section>
	<section class="layer-content layer-grey">
		<div class="layer-godown-anim"><a class="layer-godown"><i class="icon material-icons">expand_more</i></a></div>
	</section>
	<section class="layer-content layer-white sidebar-move" id="works-cited">
		<section class="layout-padding-vert">
			<section class="layer-hero layer-hero-shadow layer-hero-sub layout-contain">
				<div class="layer-hero-img-div layer-hero-img" data-src="/images/tokyo-infinity.jpg" alt="An iamge of tokyo."></div>
				<div class="layer-hero-overlay"></div>
				<div class="layer-hero-content">
					<h1 class="layer-hero-title style-uppercase">Works Cited</h1>
				</div>
			</section>
		</section>
		<section class="layout-contain">
			<section class="layer">
				<section class="layout-padding-vert-top layout-padding-horz">
					<h4 class="layer-title">Works Cited.</h4>
					<span class="layer-content-txt layer-whitespace-prewrap">Hanselman, Scott. &ldquo;Scott Hanselman.&rdquo; <i>About Scott Hanselman</i>, 1 June 2016,<br /> www.hanselman.com/blog/IsTechnologyKillingCuriosity.aspx.
          Hiscott, Rebecca. &ldquo;8 Ways Tech Has Completely Rewired Our Brains.&rdquo; <i>Mashable</i>, Mashable,<br /> 14 Mar. 2014, mashable.com/2014/03/14/tech-brains-neuroplasticity/#wjxpPvrjLmqb.
          Johnston, Lucas. &ldquo;Technology and Me: Growing up in the Digital Age &ndash; FreeCodeCamp.org.&rdquo;<br /><i>FreeCodeCamp.org</i>, FreeCodeCamp.org, 27 Mar. 2018,<br /> medium.freecodecamp.org/technology-me-growing-up-in-the-digital-age-f628f656558e.
          Shareski, Dean. &ldquo;The Problem with Curiosity.&rdquo; <i>Tech Learning</i>, Tech Learning, 14 June 2017,<br /> www.techlearning.com/tl-advisor-blog/12029.
          &ldquo;&ZeroWidthSpace;How Technology Affects The Way Our Brain Works.&rdquo; <i>Psych Central</i>, 28 May 2018,<br /> https://psychcentral.com/blog/%E2%80%8Bhow-technology-affects-the-way-our-brain-wo<br /> rks/.</span>
				</section>
			</section>
		</section>
	</section>
	<section class="layer-content layout-margin-vert">
		<section class="layout-row">
			<section class="layout-contain">
				<h4 class="layer-title layout-padding-horz">Image Sources.</h4>
				<section class="layout-col-3">
					<section class="layer-tile">
						<a href="https://unsplash.com/photos/eKpO8DlBvo0" target="_blank">
							<load-img class="layer-tile-img" src="/images/grand-canyon.jpg" alt="An iamge of the Grand Canyon."></load-img>
							<section class="layer-tile-overlay layer-tile-overlay-20deg"></section>
							<section class="layer-tile-footer">Jasper van der Meij</section>
						</a>
					</section>
				</section>
				<section class="layout-col-3">
					<section class="layer-tile">
						<a href="https://unsplash.com/photos/vI-uFNolpLA" target="_blank">
							<load-img class="layer-tile-img" src="/images/waterfall.jpg" alt="An iamge of the edge of a hill."></load-img>
							<section class="layer-tile-overlay layer-tile-overlay-130deg"></section>
							<section class="layer-tile-footer">Annie Spratt</section>
						</a>
					</section>
				</section>
				<section class="layout-col-3">
					<section class="layer-tile">
						<a href="https://unsplash.com/photos/tSR133k8Diw" target="_blank">
							<load-img class="layer-tile-img" src="/images/sand.jpg" alt="An iamge of sand dunes."></load-img>
							<section class="layer-tile-overlay layer-tile-overlay-130deg"></section>
							<section class="layer-tile-footer">Ghost Presenter</section>
						</a>
					</section>
				</section>
				<section class="layout-col-3">
					<section class="layer-tile">
						<a href="https://unsplash.com/photos/RL3F99l0XYE" target="_blank">
							<load-img class="layer-tile-img" src="/images/minimal-flower-petal.jpg" alt="An iamge of flowers on a table."></load-img>
							<section class="layer-tile-overlay layer-tile-overlay-130deg"></section>
							<section class="layer-tile-footer">Nicolette Meade</section>
						</a>
					</section>
				</section>
				<section class="layout-col-3">
					<section class="layer-tile">
						<a href="https://unsplash.com/photos/6egdNN_3k3I" target="_blank">
							<load-img class="layer-tile-img" src="/images/stone.jpg" alt="An iamge of a white stone."></load-img>
							<section class="layer-tile-overlay layer-tile-overlay-130deg"></section>
							<section class="layer-tile-footer">Annie Spratt</section>
						</a>
					</section>
				</section>
				<section class="layout-col-3">
					<section class="layer-tile">
						<a href="https://unsplash.com/photos/j2RgHfqKhCM" target="_blank">
							<load-img class="layer-tile-img" src="/images/neon.jpg" alt="An iamge of a neon sign."></load-img>
							<section class="layer-tile-overlay layer-tile-overlay-20deg"></section>
							<section class="layer-tile-footer">Lubo Minar</section>
						</a>
					</section>
				</section>
				<section class="layout-col-3">
					<section class="layer-tile">
						<a href="https://unsplash.com/photos/TxNgJwin544" target="_blank">
							<load-img class="layer-tile-img" src="/images/sunlight-shadow.jpg" alt="An iamge of a motorcycle riding on a road."></load-img>
							<section class="layer-tile-overlay layer-tile-overlay-70deg"></section>
							<section class="layer-tile-footer">Jared Poledna</section>
						</a>
					</section>
				</section>
				<section class="layout-col-3">
					<section class="layer-tile">
						<a href="https://unsplash.com/photos/4u2U8EO9OzY" target="_blank">
							<load-img class="layer-tile-img" src="/images/tokyo-infinity.jpg" alt="An iamge of tokyo."></load-img>
							<section class="layer-tile-overlay layer-tile-overlay-50deg"></section>
							<section class="layer-tile-footer">Pawel Nolbert</section>
						</a>
					</section>
				</section>
			</section>
		</section>
	</section>
	<div class="author layout-contain">
		<p class="author-name">by <span class="layer-hero-highlight">Okiki Ojo</span></p>
		<p class="author-date">on January 14, 2019.</p>
	</div>
</main>
<footer class="footer layer-white">
	<article class="layout-contain layout-padding-horz layout-margin-vert-bottom">
		<hr class="layer-line layout-margin-vert-top layout-margin-horz">
		<section class="footer-content">
			<section class="layout-padding-vert layout-margin-vert-bottom style-center"><small>Copyright © 2021 HARUN PEHLİVAN , Under a GNU Licence.</small></section>
		</section>
	</article>
</footer>

online-harun-pehlivan.markdown

ONLİNE HARUN PEHLİVAN

A Pen by HARUN PEHLİVAN on CodePen.

License.

script.babel

var Image = window.Image,
    $ = window.$,
    Element = window.Element,
    CharacterData = window.CharacterData,
    DocumentType = window.DocumentType,
    Node = window.Node,
    Navbar = $(".navbar"),
    Menu = $(".navbar-menu"),
    NavLink = $(".navbar-link"),
    Body = $("body"),
    NavBackUp = $(".navbar-backup"),
    NavList = $(".navbar-list");
var Hero = $(".layer-hero");
var GoDown = $(".layer-hero-godown-anim, .layer-godown");
var HeroImg = $(".layer-hero-img-div");
var min = Math.min,
    max = Math.max;
var map = function map(e, t, n, r, i) { return r + (i - r) * ((e - t) / (n - t)); };
var Scroll = function Scroll() {
    var Top = Body.scrollTop(),
        _Height = Hero.eq(0).height();
    var _Per = function _Per(mn, mx) { return map(Top, 0, _Height, mn, mx); };
    Navbar[
        (window.scrollY > 50 ||
            NavList.hasClass("navbar-list-show") && $(window).width() < 700 ? "add" : "remove") + "Class"](
        "navbar-focus");
        
    if (Body.scrollTop() < ($(window).height() - Navbar.height())) {
        Navbar.css({
            "box-shadow": "0 " + max(_Per(2.5, -10), 0) + "px 10px 5px rgba(0, 0, 0, 0.12)"
        });
    } else {
        Navbar.css({
            "box-shadow": "0 " + min(_Per(-2.5, 10), -2.5) + "px 10px 5px rgba(0, 0, 0, 0.12)"
        });
    }
    
    $('.layer-content').each(function() {
        var $thisDist = $(this).offset().top;
        if (Top + 300 >= $thisDist + Top && $(this).attr('id')) {
            var makeActive = $(this).attr('id');
            $("li.navbar-link").removeClass('navbar-link-focus');
            $('li.navbar-link a[link="' + makeActive + '"]').parent(".navbar-link").addClass('navbar-link-focus');
        }
    });

    Hero.each(function(i, hero) {
        var _Hero = Hero.eq(i),
            Pos = _Hero.offset().top,
            Height = _Hero.height();
        var Per = function Per(mn, mx) { return map(Top, Pos + Top, Pos + Top + Height, mn, mx); };
        var Sub = function Sub() {
            if (_Hero.hasClass("layer-hero-sub")) {
                _Hero.find(".layer-hero-img").css({
                    transform: "translate(-50%, -" + (60 - max(min(Per(0, 20), 50), 0)) + "%)",
                    // "z-index": i
                });

                _Hero.find(".layer-hero-overlay").css({
                    opacity: max(min(Per(0.45, 1), 0.99), 0.45),
                    // "z-index": i
                });

                _Hero.find(".layer-hero-content").css({
                    // "z-index": i
                });

            }
        };
        Sub();
        if (Pos <= 0 && Height + Pos >= 0 ||
            Math.round(Per(0, 100)) == 0 || Math.round(Per(0, 100)) == 100) {
            if (_Hero.hasClass("layer-hero-sub")) { Sub(); }
            else {
                _Hero.find(".layer-hero-overlay").css({
                    opacity: max(min(Per(0.55, 1), 0.99), 0.55),
                    // "z-index": i
                });

                _Hero.find(".layer-hero-img").css({
                    transform: "translate(-50%, -50%) scale(" + max(min(Per(1, 1.45), 1.45), 1) + ")",
                    // "z-index": i
                });

                _Hero.find(".layer-hero-content").css({
                    transform: "translate(-50%, " + max(min(Per(-50, 200), 100), -50) + "%)",
                    opacity: max(max(Per(1, -0.4), 0.7), -0.4),
                    // "z-index": i
                });

            }

            _Hero.find(".layer-hero-godown-anim").css({
                opacity: min(max(Per(1, -3.9), 0), 1),
                // "z-index": i
            });

        }
    });
};

var ImgLoad = function() {
    $("load-img").each(function(o, a) {
        var t = new Image(),
            n = a.getAttribute("src"),
            e = a.getAttribute("alt"),
            r = a.getAttribute("class");
        t.onload = function() {
            var o = $(t);
            o.attr("alt", e),
            o.attr("class", r + " load-img"),
            a.before(o.get(0)),
            $(a).remove();
        },
        t.onerror = function(o) {
            console.log("One of the images didn't load: " + o)
        },
        t.src = "https://app-leader.herokuapp.com" + n;
    });
};
Scroll();

Menu.on("click", function() {
    return (
        NavList.toggleClass("navbar-list-show"),
        Navbar[
            (window.scrollY < 50 && $(window).width() < 700 &&
                !NavList.hasClass("navbar-list-show") ? "remove" : "add") + "Class"]("navbar-focus"));

});

HeroImg.each(function(i) {
    $(this).css("background", "url(https://app-leader.herokuapp.com" + $(this).attr("data-src") + ")");
    $(this).after(
        $("<load-img/>").attr({
            src: $(this).attr("data-src"),
            class: $(this).attr("class"),
            alt: $(this).attr("alt"),
            id: "img" + i
        }));
        
    var a = $("load-img#img" + i);
    var t = new Image();
    var _src = $(this).attr("data-src");
    var _class = $(this).attr("class");
    var _alt = $(this).attr("alt");
    t.src = "https://app-leader.herokuapp.com" +  _src;
    t.onload = function() {
        var o = $(t);
        o.attr("alt", _alt),
        o.attr("class", _class + " load-img");
        a.after(t);
        $(a).remove();
    },
    t.onerror = function(o) {
        console.log("One of the images didn't load: " + o)
    };
});
NavBackUp.on("click", function() {
    Body.animate({ scrollTop: 0 }, 800, Scroll);
});
NavLink.on("click", function() {
    var Top = Body.scrollTop();
    var id = $(this).find("a").html().toLowerCase();
    var layer = $(".layer-content#" + id);
    Body.animate({ scrollTop: layer.offset().top + Top + 1 }, 600, Scroll);
});
GoDown.on("click", function() {
    var Top = Body.scrollTop();
    var End = $(this).parents(".layer-content").next(".layer-content");
    Body.animate({ scrollTop: End.offset().top + Top + 1 }, 600, Scroll);
});

Body.scroll(Scroll);
$(document).ready(function() {
    $("div.cover").on("click", function() {
        $(this).removeClass("load");
    });
    setTimeout(function() {
        $("div.cover").removeClass("load");
        $("a[href|='/']").click(function(e) {
            $("div.cover").addClass("load");
        });
    }, 500);
    ImgLoad();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

/* -- Elements -- */
*,
:before,
:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box; 
    -o-box-sizing: border-box; 
    box-sizing: border-box;
    font-size: 100%;
    outline: none;
    resize: none;
    border: none;
    padding: 0;
    margin: 0;
}

@media (max-width: 300px) {
    *,
    :before,
    :after {
        word-break: break-all;
    }
}

@media (min-width: 300px) {
    *,
    :before,
    :after {
        word-wrap: break-word;
    }
}

@keyframes load {
    to {
        background: #51637c;
    }
}

@keyframes rot {
    to {
        transform: rotate(360deg);
    }
}

::-webkit-scrollbar-thumb {
    z-index: 99000;
}

::-moz-selection {
    background: #131313;
    z-index: 325;
    color: #fff;
}

::selection {
    background: #131313;
    z-index: 325;
    color: #fff;
}

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box; 
    -o-box-sizing: border-box; 
    box-sizing: border-box;
}

html,
body {
    font-family: "Roboto Slab", "Helvetica", "Helvetica Neue",
        "Arial", sans-serif;
    transition: all 0.2s ease;
    background: #ffffff;
    line-height: 1.15;
    min-height: 100vh;    
    font-weight: 500;
    font-size: 15px;
    overflow: auto;
    color: #9d9d9d;
    height: 100%;
    width: 100%;
}

body {
    -webkit-flex-direction: column;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -moz-box;
    position: absolute;
    overflow-y: scroll;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    height: 100%;
    padding: 0;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: inherit;
    line-height: 1.15;
    font-weight: 400;
    color: inherit;
    display: block;
}

h1,
h2,
h3 {
    margin-bottom: 10px;
    margin-top: 20px;
}

h3,
h4,
h5,
h6,
p {
    font-family: "Helvetica", "Helvetica Neue", "Arial", sans-serif;
    font-weight: 400;
}

h1 {
    margin: 2.1rem 0 1.68rem 0;
    font-size: 4.2rem;
    font-weight: 900;
}

h2 {
    margin: 1.78rem 0 1.424rem 0;
    font-size: 3.56rem;
    font-weight: 700;
}

h3 {
    margin: 1.46rem 0 1.168rem 0;
    font-size: 2.92rem;
    font-weight: 600;
}

h4 {
    margin: 1.14rem 0 0.912rem 0;
    font-size: 2.28rem;
}

h5 {
    margin: 0.82rem 0 0.656rem 0;
    font-size: 1.64rem;
}

h6 {
    margin: 0.5rem 0 0.4rem 0;
    font-size: 1rem;
}

p {
    margin: 0 0 10px;
    margin-right: 2em;
    margin-left: 2em;
}

hr {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -ms-box-sizing: content-box; 
    -o-box-sizing: content-box; 
    box-sizing: content-box;
    overflow: visible;
    height: 0;
}

small {
    font-size: 85%;
}

img,
load-img {
    vertical-align: middle;
    min-width: 100%;
    height: 200px;
    width: 100%;
}

load-img {
    animation: load 0.5s ease-in infinite alternate;
    background: #252b33;
    min-height: 300px;
}

img.load-img {
    animation: show 0.5s ease-in linear;
}

@keyframes show {
    from { opacity: 0; }
	to { opacity: 1; }
}

a {
    background-color: transparent;
    transition: all 0.1s ease;
    text-decoration: none;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
    color: #f36;
}

a:hover,
a:focus {
    text-decoration: underline;
    color: #CF2953;
}

ul ul,
ol ul {
    list-style-type: circle;
}

ul,
menu,
dir {
    list-style-type: disc;
    margin: 20px 2em;
    display: block;
}

ol ol ul,
ol ul ul,
ul ol ul,
ul ul ul {
    list-style-type: square;
}

ol {
    list-style-type: decimal;
    display: block;
}

li {
    text-align: inherit;
    display: list-item;
}

hr {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -ms-box-sizing: content-box; 
    -o-box-sizing: content-box; 
    box-sizing: content-box;
    border-style: inset;
    border-width: 1px;
    overflow: visible;
    display: block;
    height: 0;
}

/* -- Loader -- */
div.cover {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    position: fixed;
    display: flex;
    left: 0;
    top: 0;
}

div.cover,div.cover div.shade {
    transition: 3s all ease;
    z-index: -3000;
    height: 100%;
    width: 100%;
    opacity: 0
}

div.load.cover {
    z-index: 3000;
    opacity: 1
}

div.load div.shade {
    background: #000;
    display: block;
    opacity: .5 !important
}

div.load .loader {
    animation: rot .8s linear infinite;
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-right-color: #ff3366;
    border-left-color: #ff3366;
	border-style: solid;
    border-radius: 20em;
    position: absolute;
    border-width: 5px;
    display: block;
    z-index: 3050;
    width: 50px;
    height: 50px;
}

/* -- Styles -- */
.style-bold {
    font-weight: 700;
}

.style-center {
    text-align: center;
}

.style-uppercase {
    text-transform: uppercase;
}

.color-grey,
.color-grey:hover {
    color: #9d9d9d;
}

.color-white {
    color: #fff;
}

.color-red {
    color: #d85856;
}

/* -- Icons & Font -- */
.material-icons, .icon {
    font-family: "Material Icons", "MaterialIcons-Regular";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    vertical-align: middle;
    letter-spacing: normal;
    display: inline-block;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    font-weight: normal;
    position: relative;
    font-size: inherit;
    font-style: normal;
    word-wrap: normal;
    line-height: 1;
    direction: ltr;
    height: 1em;
    width: 1em;
}

.icon-btn {
    background-color: transparent;
    transition: all ease 0.3s;
    justify-content: center;
    letter-spacing: normal;
    align-content: center;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    align-items: center;
    border-radius: 20em;
    text-align: center;
    line-height: 24px;
    font-weight: 500;
    display: flex;
    z-index: 425;
    height: 40px;
    width: 40px;
}

.icon-btn .icon, 
.icon-btn:hover {
    text-transform: none !important;
    text-decoration: none;
    font-size: 24px;
}

.icon-btn:hover {
    background: #f36;
}

/* -- Header -- */
.header {
    line-height: 45px;
}

/* -- Navigation -- */
.navbar {
    box-shadow: 0 10px 10px 5px rgba(0, 0, 0, 0.15);
    justify-content: flex-start;
    transition: all 0.2s ease;
    flex-direction: column;
    max-height: 1000px;
    position: relative;
    background: white;
    flex-wrap: nowrap;
    flex-shrink: 0;
    color: #727276;
    z-index: 1200;
    width: 100%;
}

.navbar-fixed {
    position: fixed;
    width: 100%;
    bottom: 0;
}

.navbar-layout {
    transition: all 0.5s ease;
    align-self: stretch;
    align-items: center;
    padding: 0 20px;
    margin: 0 auto;
}

.navbar-head {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    display: flex;
}

.navbar-title {
    font-family: "Ubuntu", "Roboto Slab", "Helvetica", "Arial", sans-serif !important;
/* 	box-shadow: 0px 0 15px 1px #f36; */
    letter-spacing: 0.02em;
    text-decoration: none;
	border-radius: 2px;
    position: relative;
    font-weight: 700;
    font-size: 20px;
    flex-shrink: 0;
	margin: 5px 0;
	height: 35px;
	width: 35px;
    color: #f36;
}

.navbar-title:hover,
.navbar-title:focus {
    text-decoration: none;
    color: #c62828;
}

.navbar-logo {
	border: 3px solid #ff0064;
	border-radius: 2px;
    display: block;
	height: auto;
	width: 100%;
}

.navbar-spacer {
    flex: 1;
}

ul.navbar-list {
    transition: all 0.5s ease;
/*     align-self: stretch; */
/*     align-items: center; */
    list-style: none;
    overflow: auto;
/*     height: 100%; */
	width: 100%;
    margin: 0;
}

.navbar-list-show {
    transition: max-height 0.5s ease;
    max-height: 50vh !important;
}

.navbar-list-hide {
    transition: max-height 0.5s ease;
    max-height: 0;
}

li.navbar-link a {
	font-family: "Helvetica", "Ubuntu", "Roboto Slab", sans-serif;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    display: block;
    color: #727276;
/*   	min-width: 0; */
    width: 100%;
}

li.navbar-link a:hover {
    cursor: pointer;
    color: #CF2953;
}

li.navbar-link-focus a {
	font-family: "Ubuntu", "Roboto Slab", sans-serif;
    font-weight: 700;
    color: #CF2953;
}

.navbar-foot {
    vertical-align: middle;
    justify-content: center;
    align-items: center;
    position: absolute;
    margin-right: auto;
    padding: 0 20px;
    display: flex;
    z-index: 120;
    float: right;
    height: 100%;    
    color: #000;
    right: 0;
    top: 0;
}

.navbar-menu {
	/*background-color: #fff;*/
	margin-left: 5px;
}

.navbar-menu .icon, .navbar-backup .icon {
    color: #f36 !important;
}

.navbar-menu:hover .icon, .navbar-backup:hover .icon {
    color: #010101 !important;
}

@media (min-width: 600px) {
    .navbar-layout {
        position: relative;
		overflow: auto;
        display: flex;
    }
    .navbar-head {
        margin: 0 20px 0 0;
    }
    .navbar-head,
    li.navbar-link {
		word-break: keep-all !important;
        position: relative;
  		flex-wrap: nowrap;
        display: flex;
    }
    ul.navbar-list {
  		white-space: nowrap;
  		flex-wrap: nowrap;
        max-height: 100%;
        overflow: auto;
        display: flex;
		width: 100%;
    }
    li.navbar-link a {
		word-break: keep-all !important;
        padding: 0 24px;
    }
    li.navbar-link-focus a:before {
        display: none;
    }
    .navbar-foot {
        position: relative;
        padding: inherit;
        display: flex;
        float: right;
    }
    .navbar-menu {
        position: relative;
        display: none;
    }
}

/* -- Main Content -- */
.main {
    background: #fff;
    position: relative;
    display: block;
    width: 100%;
    z-index: 25;
}

/* -- Layout -- */
.layout-contain {
    margin: 0 auto;
    width: 100%;
}

.layout-contain-small {
    max-width: 550px;
    margin: 0 auto;
    width: 100%;
}

@media (min-width: 800px) {
    .layout-contain {
        max-width: 800px;
    }
}

@media (min-width: 900px) {
    .layout-contain-small {
        max-width: 800px;
    }

    .layout-contain {
        max-width: 1000px;
    }
}

/* -- Margin -- */
.layout-margin-horz {
    margin-right: 25px;
    margin-left: 25px;
}

.layout-margin-horz-small {
    margin-right: 15px;
    margin-left: 15px;
}

.layout-margin-horz-mid {
    margin-right: 20px;
    margin-left: 20px;
}

.layout-margin-horz-left {
    margin-left: 25px;
}

.layout-margin-horz-right {
    margin-right: 25px;
}

.layout-margin-horz-left-small {
    margin-left: 15px;
}

.layout-margin-horz-right-small {
    margin-right: 15px;
}

.layout-margin-horz-left-mid {
    margin-left: 20px;
}

.layout-margin-horz-right-mid {
    margin-right: 20px;
}

.layout-margin-vert {
    margin-bottom: 25px;
    margin-top: 25px;
}

.layout-margin-vert-small {
    margin-bottom: 15px;
    margin-top: 15px;
}

.layout-margin-vert-mid {
    margin-bottom: 20px;
    margin-top: 20px;
}

.layout-margin-vert-top {
    margin-top: 25px;
}

.layout-margin-vert-bottom {
    margin-bottom: 25px;
}

.layout-margin-vert-top-small {
    margin-top: 15px;
}

.layout-margin-vert-bottom-small {
    margin-bottom: 15px;
}

.layout-margin-vert-top-mid {
    margin-top: 20px;
}

.layout-margin-vert-bottom-mid {
    margin-bottom: 20px;
}

/* -- Padding -- */
.layout-padding-horz {
    padding-right: 25px;
    padding-left: 25px;
}

.layout-padding-horz-small {
    padding-right: 15px;
    padding-left: 15px;
}

.layout-padding-horz-mid {
    padding-right: 20px;
    padding-left: 20px;
}

.layout-padding-horz-left {
    padding-left: 25px;
}

.layout-padding-horz-right {
    padding-right: 25px;
}

.layout-padding-horz-left-small {
    padding-left: 15px;
}

.layout-padding-horz-right-small {
    padding-right: 15px;
}

.layout-padding-horz-left-mid {
    padding-left: 20px;
}

.layout-padding-horz-right-mid {
    padding-right: 20px;
}

.layout-padding-vert {
    padding-bottom: 25px;
    padding-top: 25px;
}

.layout-padding-vert-small {
    padding-bottom: 15px;
    padding-top: 15px;
}

.layout-padding-vert-mid {
    padding-bottom: 20px;
    padding-top: 20px;
}

.layout-padding-vert-top {
    padding-top: 25px;
}

.layout-padding-vert-bottom {
    padding-bottom: 25px;
}

.layout-padding-vert-top-small {
    padding-top: 15px;
}

.layout-padding-vert-bottom-small {
    padding-bottom: 15px;
}

.layout-padding-vert-top-mid {
    padding-top: 20px;
}

.layout-padding-vert-bottom-mid {
    padding-bottom: 20px;
}

/* -- Rows & Columns */
.layout-clearfix::after,
.layout-clearfix::before,
.layout-contain::after,
.layout-contain::before,
.layout-row::after,
.layout-row::before {
    display: table;
    content: "";
    clear: both;
}

.layout-row {
    align-items: center;
    flex-direction: row;
    margin-right: auto;
    margin-left: auto;
}

.layout-contain .layout-row {
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}

.layout-row [class*="layout-col"] {
    padding: 0 0.75rem;
    margin-left: auto;
    min-height: 1px;
    float: left;
    right: auto;
    left: auto;
}

@media (max-width: 700px) {
    .layout-row [class*="layout-col"] {
        width: 100%;
    }
}

@media (max-width: 850px) {
    .layout-row [class*="layout-col"] {
        width: 50%;
    }
}

.layout-col-1 {
    width: 10.33333333333%;
}

.layout-col-2 {
    width: 18.6666666667%;
}

.layout-col-3 {
    width: 25%;
}

.layout-col-4 {
    width: 33.33333333%;
}

.layout-col-5 {
    width: 41.6666666667%;
}

.layout-col-6 {
    width: 50%;
}

.layout-col-7 {
    width: 58.3333333333%;
}

.layout-col-8 {
    width: 66.66666667%;
}

.layout-col-9 {
    width: 75%;
}

.layout-col-10 {
    width: 83.3333333333%;
}

.layout-col-11 {
    width: 91.6666666667%;
}

.layout-col-12 {
    width: 100%;
}

/* -- Layer -- */
.layer {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.layer-content {
    font-family: "Roboto Slab", sans-serif;
    position: relative;
    line-height: 28px;    
    font-weight: 500;
    display: block;
}

.layer-white {
    background-color: #fff !important;
}

.layer-grey {
    background-color: #eee !important;
}

.layer-darkgrey {
    background-color: #222 !important;
}

/* -- Hero -- */
.layer-hero {
	transition: 0.8s all ease;
    background: #323a45;
    position: relative;
    text-align: center;
    overflow: hidden;
    height: 600px;
    width: 100%;
    margin: auto;
}

.layer-hero-shadow {
    -webkit-box-shadow: 0 5px 50px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 5px 50px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 5px 50px 10px rgba(0, 0, 0, 0.3);
    position: relative;
    display: block;
    z-index: 325;
}

.layer-hero-sub {
    border-radius: 10px !important;
    height: 400px !important;
}

.layer-hero-sub .layer-hero-content {
    transform: translate(-50%, -20%);
}

.layer-hero-sub.layer-hero-shadow {
    -webkit-box-shadow: 0 15px 50px 10px rgba(0, 0, 0, 0.18);
    -moz-box-shadow: 0 15px 50px 10px rgba(0, 0, 0, 0.18);
    box-shadow: 0 15px 50px 10px rgba(0, 0, 0, 0.18);
}

.layer-hero-highlight {
    color: #f36;
}

.layer-hero-godown-anim {
    transition: all ease-out 0.6s;
}

.layer-hero-godown {
    background: rgba(255, 255, 255, 0.25);
    transform: translate(-50%, 0);
/*     transition: all ease 0.3s; */
    justify-content: center;
/*     border: 3px solid #fff; */
    align-content: center;
    text-transform: none;
    align-items: center;
    border-radius: 20em;
    position: absolute;
    text-align: center;
    display: flex;
    z-index: 425;
    bottom: 70px;
    height: 50px;
    width: 50px;
    left: 50%;
}

.layer-hero-godown-anim:hover, 
.layer-hero-godown:hover {
    text-decoration: none !important;
    opacity: 1 !important;
    cursor: pointer;
}

.layer-hero-godown .icon {
    font-size: 32px;
    display: flex;
    z-index: 425;
    color: #fff;
}

.layer-hero-godown-anim:after {
    animation: grow 4s infinite linear forwards;
    transform: translateX(-50%) scale(0);
    border: 2px solid #fff;
    align-items: center;
    border-radius: 20em;
    position: absolute;
    display: flex;
    z-index: 425;
    height: 50px;
    bottom: 70px;
    content: "";
    width: 50px;
    left: 50%;
}

@keyframes grow {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0);
    }
    70% {
        opacity: 0.5;
        transform: translateX(-50%) scale(1.5);
    }
    
    100% {
        opacity: 0;
        transform: translateX(-50%) scale(1.5);
    }
}

@media (max-width: 800px) {
    .layer-hero {
        height: 500px;
        width: 100%;
    }
    .layer-hero-content {
        max-width: 500px !important;
    }
    .layer-hero-title {
        font-size: 50px !important;
        line-height: 40px !important;
    }
    .layer-hero-sub {
        width: 95%;
    }
}

@media (max-width: 600px) {
    .layer-hero {
        height: 450px;
        width: 100%;
    }
    .layer-hero-content {
        max-width: 500px !important;
    }
    .layer-hero-title {
        font-size: 40px !important;
        line-height: 40px !important;
    }
    .layer-hero-sub {
        width: 95%;
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    .layer-hero {
        height: 280px;
        width: 100%;
    }
    .layer-hero-content {
        max-width: 500px !important;
    }
    .layer-hero-title {
        font-size: 35px !important;
        line-height: 35px !important;
    }
    .layer-hero-godown,
    .layer-hero-godown-anim:after {
        bottom: 30px;
    }
    .layer-hero-sub {
        width: 95%;
    }
}

.layer-hero-img {
    -webkit-transform: translate(-50%, -50%) scale(1);
    animation: load 0.5s ease-in infinite alternate;
    -moz-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
/* 	transition: all ease 0.2s; */
    position: absolute;
    min-width: 1600px;
    height: auto;
    width: 120%;
    z-index: 0;
    left: 50%;
    top: 50%;
}

load-img.layer-hero-img {
    min-height: 100%;
    height: 200%;
    width: 200%;
}

.layer-hero-overlay {
    position: relative;
    background: #252b33;
    display: block;
    height: 100%;
    opacity: 0.35;
    width: 100%;
}

.layer-hero-content {
    transform: translate(-50%, -50%);
    position: absolute;
    max-width: 700px;
    color: white;
    opacity: 1;
    width: 90%;
    left: 50%;
    top: 45%;
}

.layer-hero-type {
    font-family: "Helvetica", "Roboto Slab", "Arial", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.125em;
    display: inline-block;
    background: #CF2953;
    text-align: center;
    font-weight: 900;
    margin-bottom: 0;
    padding: 5px 7px;
    font-size: 15px;
    color: #fff;
}

.layer-hero-title {
    font-family: "Helvetica Neue", "Arial", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    line-height: 66px;
    margin-top: 10px;
    font-weight: 500;
    font-size: 70px;
    color: #fff;
}

@media (max-width: 600px) {
    .layer-hero-sub {
        height: 200px !important;
    }
}

@media (max-height: 83vh) {
    .layer-hero {
        max-height: 73vh;
        border: none;
    }
}

/* -- Components-- */
.layer-title {
    font-family: 'Ubuntu', 'Open Sans', "Roboto Slab", "Arial", sans-serif;
/*     text-transform: uppercase; */
    font-size: 30px;
    font-weight: 700;
    color: #f36;
}

.layer-content-txt {
    margin-bottom: 20px;
    line-height: 1.5;
    font-size: 21px;
    display: block;
}

.layer-whitespace-prewrap {
    white-space: pre-wrap;
}

.layer-img {
    max-width: 600px !important;
    height: auto;
    margin: auto;
    width: 80%;
}

.layer-line {
    border: 0.5px solid #dedede;
}

.layer-godown {
/*     background: rgba(229, 57, 53, 0.25); */
    transform: translate(-50%, 0);
    transition: all ease 0.3s;
    justify-content: center;
/*     border: 3px solid #fff; */
    align-content: center;
    text-transform: none;
    align-items: center;
    border-radius: 20em;
    position: relative;
    text-align: center;
    display: flex;
    z-index: 425;
    height: 50px;
    width: 50px;
    left: 50%;
}

.layer-godown:hover {
    text-decoration: none !important;
    opacity: 1 !important;
    cursor: pointer;
}

.layer-godown .icon {
    font-size: 32px;
    display: flex;
    z-index: 425;
    color: #999;
}

.layer-godown:hover .icon {
    color: #f36;
}

/* -- Tiles -- */
.layer-tile {
    box-shadow: 0 0 50px 5px rgba(0, 0, 0, 0.24);
	background: #3c3c3c;
	margin-bottom: 10px;
	position: relative;
	border-radius: 6px;
	min-height: 200px;
	max-height: 300px;
	margin-top: 10px;
	overflow: hidden;
	min-width: 100%;
	cursor: pointer;
	color: #ffffff;
	display: block;
	width: 100%;
	border: 0;
}

.layer-tile:hover {
    box-shadow: 0 0 25px 5px rgba(0, 0, 0, 0.35);
}

.layer-tile a {
    display: block;
}

.layer-tile-overlay {
	background: linear-gradient(50deg, #252b33 20%, #f36 90%);
	transition: all 0.2s ease;
	position: absolute;
	height: 100%;
	opacity: 0.4;
	width: 100%;
	left: 0;
	top: 0;
}

.layer-tile-overlay-20deg {
	background: linear-gradient(20deg, #252b33 20%, #f36 90%);
}

.layer-tile-overlay-50deg {
	background: linear-gradient(50deg, #252b33 20%, #f36 90%);
}

.layer-tile-overlay-70deg {
	background: linear-gradient(70deg, #252b33 20%, #f36 90%);
}

.layer-tile-overlay-100deg {
	background: linear-gradient(100deg, #252b33 20%, #f36 90%);
}

.layer-tile-overlay-130deg {
	background: linear-gradient(130deg, #252b33 20%, #f36 90%);
}

.layer-tile-overlay-180deg {
	background: linear-gradient(130deg, #252b33 20%, #f36 90%);
}

.layer-tile-img {    
    transform: translateY(-20%);
	transition: all 0.3s ease;
	min-width: 600px;
	height: auto;
	width: 150%;
}

load-img.layer-tile-img {
    display: block;
    height: 500px;
}

.layer-tile:hover .layer-tile-overlay {
	opacity: 0.6;
}

.layer-tile:hover .layer-tile-img {
	transform: translate(-20%, -20%) scale(1.3);
}

.layer-tile-footer {
    font-family: "Helvetica", "Arial", sans-serif;
	position: absolute;
	margin: 20px;
	color: #fff;
	bottom: 0;
}

/* -- Author -- */
.author {
	text-align: center;
}

/* -- Footer -- */
.footer {
    background: #fff;
    color: #131313;
    width: 100%;
    z-index: 25;
}

.footer a {
    font-family: "Helvetica", "Arial", sans-serif;
    text-decoration: none;
    position: relative;
    flex-shrink: 0;
    color: #f36;
}

.footer a:hover {
    text-decoration: underline !important;
    color: #CF2953 !important;
    font-weight: 900;
}

styles

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Open+Sans|Roboto+Slab|Ubuntu" rel="stylesheet" />