Commit 9fe8bc0d authored by Rijo Thomas's avatar Rijo Thomas

Initial commit

parents
# This file is a template, and might need editing before it works on your project.
# Full project: https://gitlab.com/pages/plain-html
pages:
stage: deploy
script:
- mkdir .public
- cp -r * .public
- mv .public public
artifacts:
paths:
- public
only:
- master
# A HERO CAN BE ANYONE
### Credits
Theme - https://codepen.io/MightyShaban/pen/CIfdj
Content - https://www.quora.com/Why-do-people-obsess-over-Batman
.main_h {
position: fixed;
max-height: 70px;
z-index: 999;
width: 100%;
padding-top: 17px;
background: none;
overflow: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
top: -100px;
padding-bottom: 6px;
font-family: 'Ubuntu', sans-serif;
}
@media only screen and (max-width: 766px) {
.main_h {
padding-top: 25px;
}
}
.open-nav {
max-height: 400px !important;
}
.open-nav .mobile-toggle {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
.sticky {
background-color: #fff;
opacity: 1;
top: 0px;
border-bottom: 1px solid gainsboro;
}
.logo {
width: 50px;
font-size: 25px;
color: #8f8f8f;
text-transform: uppercase;
float: left;
display: block;
margin-top: 0;
line-height: 1;
margin-bottom: 10px;
}
@media only screen and (max-width: 766px) {
.logo {
float: none;
}
}
nav {
float: right;
width: 60%;
}
@media only screen and (max-width: 766px) {
nav {
width: 100%;
}
}
nav ul {
list-style: none;
overflow: hidden;
text-align: right;
float: right;
}
@media only screen and (max-width: 766px) {
nav ul {
padding-top: 10px;
margin-bottom: 22px;
float: left;
text-align: center;
width: 100%;
}
}
nav ul li {
display: inline-block;
margin-left: 35px;
line-height: 1.5;
}
@media only screen and (max-width: 766px) {
nav ul li {
width: 100%;
padding: 7px 0;
margin: 0;
}
}
nav ul a {
color: #888888;
text-transform: uppercase;
font-size: 12px;
}
.mobile-toggle {
display: none;
cursor: pointer;
font-size: 20px;
position: absolute;
right: 22px;
top: 0;
width: 30px;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
@media only screen and (max-width: 766px) {
.mobile-toggle {
display: block;
}
}
.mobile-toggle span {
width: 30px;
height: 4px;
margin-bottom: 6px;
border-radius: 1000px;
background: #8f8f8f;
display: block;
}
.row {
width: 100%;
max-width: 940px;
margin: 0 auto;
position: relative;
padding: 0 2%;
}
* {
box-sizing: border-box;
}
body {
/*color: #8f8f8f;*/
color: #333333;
background: white;
font-family: 'Ubuntu', sans-serif;
font-weight: 300;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: underline;
text-decoration-color: #e8f380;
color: #fff;
}
h1 {
font-size: 30px;
line-height: 1.8;
text-transform: none;
font-family: 'Ubuntu', sans-serif;
}
p {
margin-bottom: 20px;
font-size: 17px;
line-height: 2;
text-align: justify;
}
footer {
margin: auto;
text-align: center;
/* background: #333333; */
color: #fff;
padding-bottom: 10px;
padding-top: 10px;
font-size: 14px;
}
.content {
padding: 50px 2% 50px;
}
.hero {
position: relative;
background: #333 url(../img/batman.jpeg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
text-align: center;
color: #fff;
padding-top: 110px;
min-height: 500px;
letter-spacing: 2px;
font-family: 'Ubuntu', sans-serif;
}
.hero h1 {
font-size: 50px;
line-height: 1.3;
text-transform: uppercase;
}
.hero h1 span {
font-size: 25px;
color: #e8f380;
border-bottom: 2px solid #e8f380;
padding-bottom: 12px;
line-height: 3;
}
.mouse {
display: block;
margin: 0 auto;
width: 26px;
height: 46px;
border-radius: 13px;
border: 2px solid #e8f380;
bottom: 40px;
position: absolute;
left: 50%;
margin-left: -14px;
}
.mouse span {
display: block;
margin: 6px auto;
width: 2px;
height: 2px;
border-radius: 4px;
background: #e8f380;
border: 1px solid transparent;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: scroll;
animation-name: scroll;
}
@-webkit-keyframes scroll {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
}
@keyframes scroll {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="icon" type="image/png" href="img/favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<title>The Batman</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet" type='text/css'>
<!-- <header class="main_h">
<div class="row">
<a class="logo" href="#">L/F</a>
<div class="mobile-toggle">
<span></span>
<span></span>
<span></span>
</div>
<nav>
<ul>
<li><a href=".sec01">Section 01</a></li>
<li><a href=".sec02">Section 02</a></li>
<li><a href=".sec03">Section 03</a></li>
<li><a href=".sec04">Section 04</a></li>
</ul>
</nav>
</div>
</header> -->
<div class="hero">
<h1><span>A Hero Can Be Anyone</span><br>The Batman</h1>
<!-- <div class="mouse">
<span></span>
</div> -->
</div>
<div class="row content">
<h1 class="sec01">Why</h1>
<p>Obsession with Batman primarily is because of the various lessons his life and actions present, where he despite being a mere Human, one without any super powers, would stand up for what is right and just in all his might and capacity. Such a character gives people Hope, Motivation, and a solid reason to believe that they need not be Super heroes, or have any support, or be blessed with privileges for having a reason to do the right thing, and the outcome would stop mattering at all. </p>
<h1 class="sec02">Build a better you</h1>
<p>Batman wasn’t born with super powers; he was born Bruce Wayne, a man who created his alter-ego Batman to fight injustice and crime in Gotham. He is like a man possessed; doing whatever he can to get an edge – more efficient training routines, a lighter material for his uniform to move faster, night vision goggles, better wings for the bat suit, etc.</p>
<h1 class="sec03">Find what drives you</h1>
<p>“They told me there was nothing out there, nothing to fear. But the night my parents were murdered I caught a glimpse of something. I’ve looked for it ever since. I went around the world, searched in all the shadows. And there is something out there in the darkness, something terrifying, something that will not stop until it gets revenge… Me.”. Bruce Wayne will run through walls to get what he wants.</p>
<h1 class="sec04">The night is darkest before the dawn</h1>
<p>Maybe you’re a blogger and after a few months of growth things start to slow down and you begin to question if it’s worth all of the time and effort. The night is the darkest before the dawn, my friend.
If you can get through that tough time, if you can push through when most others give up, you’ll find success in whatever it is you’re chasing.</p>
<h1>Be the hero we needed</h1>
<p>At the end of The Dark Knight, Batman takes the rap for a crime he didn’t commit in order to continue giving hope to the Gotham people. Essentially, he had to make a completely selfless decision so that the community was protected from the truth. It is easier to take the “I’m innocent” path and keep himself clean, but that’s not what’s needed to be done. He does what’s right and what’s necessary.</p>
<h1>It’s what you do that defines you</h1>
<p>Bruce’s love interest, Rachel Dawes, is unaware that her childhood friend is Batman. She only sees the false exterior he’s created to hide his identity – that of an aloof billionaire playboy. When he tries to explain to her that deep down inside he’s the same person she used to know, she tells him, “It’s not who you are underneath, but what you do that defines you.”</p>
<h1>Be prepared for whatever might happen</h1>
<p>Whether the Joker had him dangling by a rope with sharks waiting to eat him, or The Riddler had him under a saw, preparing to cut him in two, Batman was always ready for the situation. After all, he had instant shark repellent in his belt, and he was equipped with rust solution for the saw. So lesson number six is to always be prepared.</p>
<h1>Always be kind to people</h1>
<p>Always be kind to people because you might need them later in life. Batman had a knack for feeling sorry for the underdog. We could never figure out if he liked or hated Cat Woman. His kindness to her, got him and Robin out of more than one sticky situation. Cat Woman let him go, because she too was confused about how she felt about the masked wonder.</p>
<h1>Always thinking about others before his self</h1>
<p>Batman was always thinking about others before his self. He was very self sacrificing. That was the point of the Bat signal- so he would always be on hand to battle Gotham’s wows, and to help it’s citizens. Bruce Wayne would drop what he was doing in an instant to become Batman and put others before his own needs.</p>
<h1>Give and share knowledge freely</h1>
<p>The Riddler in Batman Forever creates a device to steal people’s thoughts from them… The lesson here? Share what you know with people you care about - don’t keep secrets, they’re never good for you. Also, when you share with others they’ll usually share with you - and that’s pretty awesome!</p>
<h1>Humanity deserves to be saved</h1>
<p>Even when people have committed atrocious actions, they can always change their ways. Of course we have laws and when you violate them you’re punished accordingly, but for things such as greed, selfishness, racism - things that have no punishment, people can always turn it around, don’t give up on them - we have to believe it will get better and work towards making it better ourselves.</p>
<p><span style="font-style: italic">Put on your cape, brave the darkness, and the light will come!</span></p>
</div>
<footer><a href="https://gitlab.com/rt1d6m7/batman"><img src="https://docs.gitlab.com/assets/images/gitlab-logo.svg" height="35" width="35"></a></footer>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
// Sticky Header
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('.main_h').addClass('sticky');
} else {
$('.main_h').removeClass('sticky');
}
});
// Mobile Navigation
$('.mobile-toggle').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.main_h').removeClass('open-nav');
} else {
$('.main_h').addClass('open-nav');
}
});
$('.main_h li a').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.navigation').removeClass('open-nav');
$('.main_h').removeClass('open-nav');
}
});
// Navigation Scroll - ljepo radi materem
$('nav a').click(function(event) {
var id = $(this).attr("href");
var offset = 70;
var target = $(id).offset().top - offset;
$('html, body').animate({
scrollTop: target
}, 500);
event.preventDefault();
});
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment