A Pen by Kira

Developer
Kira
Size
3,665 Kb
Views
26,312
  1. A Pen by Kira Previews
  2. A Pen by Kira HTML Codes
  3. A Pen by Kira CSS Codes
  4. A Pen by Kira JS Codes

How do I make an a pen by kira?

What is a a pen by kira? How do you make a a pen by kira? This script and codes were developed by Kira on 25 August 2022, Thursday.

A Pen by Kira Previews
IQ Test

A Pen by Kira - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Kira</title> <link href='https://fonts.googleapis.com/css?family=Bevan|Playfair+Display' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Montserrat:900" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class="bg">
<section class="hero-wrap"> <div class="slider"> <div class="slide1" style="-webkit-clip-path: polygon(0 0, 100% 0, 34% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 34% 100%, 0 100%);"></div> <div class="slide2" style="-webkit-clip-path: polygon(0 0, 100% 0, 34% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 34% 100%, 0 100%);"></div> <div class="slide3" style="-webkit-clip-path: polygon(0 0, 100% 0, 34% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 34% 100%, 0 100%);"></div>
</div></div>
</section> <div class="line-bg"> <div class="headline-wrap"> <h1 class="headline-overlay">BE MORE</h1> <h2>TOGETHER WE BUILD GREAT CULTURES,<br>
ORGANIZATIONS, TEAMS AND INDIVIDUALS</h2> </div>
</div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Kira - Script Codes CSS Codes

body { min-height: 1200px; padding-top: 100px; font-family: 'montserrat';
}
.full-page:before { background: url(http://kepixels.com/wp-content/uploads/2016/04/dotted-pattern-cropped_Artboard-1.svg); background-size: 9px; content: ""; position: absolute; width: 100%; height: 100%; opacity: .5;
}
.hero-wrap { position: relative; height: 500px; width: 100%; margin-bottom: -250px;
}
.line-bg { top: -20px; left: 800px; right: 10px; bottom: 10px; background-repeat: no-repeat; background-image: url(http://kepixels.com/wp-content/uploads/2016/05/line.png);
}
.headline-wrap { position: absolute; right: 5%; padding: 50px; background: #fff;
}
.headline-wrap h1 { font-family: 'montserrat', sans-serif; font-size: 35px; font-weight: 900; margin: 0px; color: navy; text-transform: uppercase; letter-spacing: 2.75px;
}
.headline-wrap h2 { font-family: 'montserrat', sans-serif; font-size: 13px; text-transform: uppercase; color: #404040; line-height: 25px; letter-spacing: 2px;
}
.slider { max-width: 1500px; height: 250px; margin: 20px auto; position: relative;
}
.slide1, .slide2, .slide3, .slide4, .slide5 { position: absolute; width: 100%; height: 200%;
}
.slide1 { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; border: 0px solid white; background-color: #d3d0c9; background-size: cover; background-position: center center; max-width: 70%; background: url(http://kepixels.com/wp-content/uploads/2016/05/photo-1459499362902-55a20553e082.jpeg) no-repeat center; animation: fade 8s infinite !important; -webkit-animation: fade 8s infinite !important; background-size: cover; background-position: center center;
}
.slide2 { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; border: 0px solid white; background-color: #d3d0c9; background-size: cover; background-position: center center; max-width: 70%; background: url(http://kepixels.com/wp-content/uploads/2016/05/photo-1430417934865-589b63ad5c00.jpeg) no-repeat center; animation: fade2 8s infinite !important; -webkit-animation: fade2 8s infinite !important; background-size: cover; background-position: center center;
}
.slide3 { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; border: 0px solid white; background-color: #d3d0c9; background-size: cover; background-position: center center; max-width: 70%; background: url(http://kepixels.com/wp-content/uploads/2016/05/photo-1433170897235-615700336230.jpeg) no-repeat center; animation: fade3 8s infinite !important; -webkit-animation: fade3 8s infinite !important; background-size: cover; background-position: center center;
}
@keyframes fade { 0% { opacity: 1; } 33.333% { opacity: 0; } 66.666% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes fade2 { 0% { opacity: 0; } 33.333% { opacity: 1; } 66.666% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes fade3 { 0% { opacity: 0; } 33.333% { opacity: 0; } 66.666% { opacity: 1; } 100% { opacity: 0; }
}

A Pen by Kira - Script Codes JS Codes

$(window).scroll(function () { // $('.hero-wrap').css({ // 'top' : -($(this).scrollTop()/2)+"px" // }); $('.headline-wrap').css({ 'margin-top' : -($(this).scrollTop()/2)+"px" });
});
A Pen by Kira - Script Codes
A Pen by Kira - Script Codes
Home Page Home
Developer Kira
Username kepixels
Uploaded August 25, 2022
Rating 3
Size 3,665 Kb
Views 26,312
Do you need developer help for A Pen by Kira?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kira (kepixels) Script Codes
Name
Mode Menu
Dashed Lines
Parallax Scroll Demo
Control Shape Hero
Grid Box Animated Navigation
Icon Loading Animation
Sticky CTA Buttons
Simple Modal
Rotated Text
Blog Images Sized and Centered
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!