Capture Header

Developer
Mike
Size
2,600 Kb
Views
8,096
  1. Capture Header Previews
  2. Capture Header HTML Codes
  3. Capture Header CSS Codes

How do I make an capture header?

To download the full tempale http://pixelhint.com/demo/capture/. What is a capture header? How do you make a capture header? This script and codes were developed by Mike on 13 January 2023, Friday.

Capture Header Previews
IQ Test

Capture Header - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Capture Header</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="free" data-stellar-background-ratio="0.5" style="background-position: 50% 32.5px;" id="free">	<div class="container">	<div class="caption">	<h1 style="visibility: visible; animation-name: fadeInLeft;" class="text-uppercase animated wow fadeInLeft animated">Take Photos Like A Pro.</h1>	<p style="visibility: visible; animation-name: fadeInLeft;" class="text-lowercase animated wow fadeInLeft animated">With only your iphone and capture app you can take stunning image like a professional Photographer.</p>	<a style="visibility: visible; animation-name: fadeInLeft;" href="https://pixelhint.com/capture-free-responsive-bootstrap-app-landing-page-theme" class="app_store_btn text-uppercase animated wow fadeInLeft animated">	<i class="right_button_icon"></i>	<span>Iphone App</span>	</a>	<a style="visibility: visible; animation-name: fadeInLeft;" href="https://pixelhint.com/capture-free-responsive-bootstrap-app-landing-page-theme" class="app_store_btn text-uppercase animated wow fadeInLeft animated">	<i class="left_button_icon"></i>	<span>Android App</span>	</a>	</div>	</div>	</section> <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
</body>
</html>

Capture Header - Script Codes CSS Codes

/*	Hero section	*/
.free{	display: block;	position: relative;	width: 100%;	height: 333px;	background: url('http://lettona.com/sites/default/files/background_2.jpg') no-repeat fixed center center;	background-size: cover; opacity: .7;
}
.hardware{	display: block;	position: relative;	width: 100%;	height: 333px;	background: url('http://lettona.com/sites/default/files/background_2.jpg') no-repeat fixed center center;	background-size: cover;
}
.software{	display: block;	position: relative;	width: 100%;	height: 333px;	background: url('http://lettona.com/sites/default/files/bg-shopping.jpg') no-repeat fixed center center;	background-size: cover;
}
.support{	display: block;	position: relative;	width: 100%;	height: 333px;	background: url('https://www.lettona.com/sites/default/files/parallax-transparent_0.jpg') no-repeat fixed center center;	background-size: cover;
}
.support .caption,
.software .caption,
.hardware .caption,
.free .caption{	position: absolute;	max-width: 550px;	margin-left: 80px;	top: 50%;	transform:translate(0,-50%);	-webkit-transform:translate(0,-50%);	-moz-transform:translate(0,-50%);	-o-transform:translate(0,-50%);
}
.support .caption h1,
.software .caption h1,
.hardware .caption h1 {	color: #525252;	font-size: 34px;	font-weight: bold;	word-break: break-word;
}
.free .caption h1{	color: #F9F9D5;	font-size: 34px;	font-weight: bold;	word-break: break-word;
}
.support .caption p
.software .caption p
.hardware .caption p{ color: #6d6c6c;	font-size: 16px;	line-height: 30px;	margin: 15px 0 35px 0;
}
.free .caption p{	color: #D3D3C6;	font-size: 16px;	line-height: 30px;	margin: 15px 0 35px 0;
}
a.app_store_btn{	display: inline-block;	text-decoration: none;	padding: 15px 40px;	border: 2px solid #525252;	-moz-border-radius: 2px;	-webkit-border-radius: 2px;	border-radius: 2px;	margin: 20px 20px 10px 0;	color: #0088cc;	font-size: 16px;
}
.right_button_icon,
.left_button_icon{	display: inline-block;	width: 16px;	height: 16px;	vertical-align: middle;	margin-right: 20px;	margin-bottom: 3px;
}
a.app_store_btn:hover,
a.app_store_btn:focus{	border-color: #0088cc;	color: #0088cc!important;
}
a.app_store_btn:hover .left_button_icon{	background: url('https://pixelhint.com/demo/capture/img/iphone_app_hover.png') no-repeat;
}
a.app_store_btn:hover .right_button_icon{	background: url('https://pixelhint.com/demo/capture/img/android_app_hover.png') no-repeat;
}
a.app_link{	text-transform: lowercase;	letter-spacing: .5px;	color: #636363;	font-size: 16px;
}
a.app_link:hover,
a.app_link:focus{	text-decoration: none;	color: #41c27d!important;
}
a.app_store_btn,
.button_icon,
a.app_link{	transition: all .2s linear;	-o-transition: all .2s linear;	-moz-transition: all .2s linear;	-webkit-transition: all .2s linear;
}
Capture Header - Script Codes
Capture Header - Script Codes
Home Page Home
Developer Mike
Username honchoman
Uploaded January 13, 2023
Rating 3
Size 2,600 Kb
Views 8,096
Do you need developer help for Capture Header?

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!

Mike (honchoman) Script Codes
Name
Product page with fancy hover effect
Jumbotron from Bootstrap Billboard
Social Media Button Design
Notificator
Product Features
Tabbed pos mockup slider
Click Carousel
Parallax backgrounds with centered content
A Pen by Mike
A Pen by Mike
Create amazing Facebook ads 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!