Bootstrap page Header Template

Developer
Omran Abazid
Size
3,140 Kb
Views
24,288
  1. Bootstrap page Header Template Previews
  2. Bootstrap page Header Template HTML Codes
  3. Bootstrap page Header Template CSS Codes

How do I make an bootstrap page header template?

Modifier bootstrap naviagtion. What is a bootstrap page header template? How do you make a bootstrap page header template? This script and codes were developed by Omran Abazid on 15 September 2022, Thursday.

Bootstrap page Header Template Previews
IQ Test

Bootstrap page Header Template - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bootstrap page Header Template</title> <link href='https://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <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> <header> <div class="container-fluid"> <div class="navbar-header"> <a href="" class="navbar-brand"> NAV</a> </div> <div class="collapse navbar-collapse"> <ul class='nav navbar-nav navbar-right'> <li><a href="">Home</a></li> <li><a href="">Contact Us</a></li> <li><a href="">About</a></li> </ul> </div> </div>
</header>
<div class="bg"> <div class="container text-center bg-text"> <h1>Hello World </h1> <br /> <button class="btn btn-default btn-lg">Register</button> <button class="btn btn-primary btn-lg">Login</button> </div>
</div>
<div class="banner"> <div class="wrapper"> Experience the <span class="orange">Development</span> world. <button class="btn btn-primary">Join Now!</button> </div>
</div>
<div class="sec first">
<h1>Section 1</h1> <hr />
</div>
<div class="sec second">
<h1>Section 2</h1> <hr />
</div>
</body>
</html>

Bootstrap page Header Template - Script Codes CSS Codes

html, * { font-family: "Raleway", sans-serif; font-weight: 700; box-sizing: border-box;
}
header { background-color: #263248;
}
div.navbar-header { color: #FF9800;
}
ul.nav li a { color: #FFFFFF; font-size: 16px;
}
ul.nav li a:hover { background: #FF9800;
}
a.navbar-brand { font-size: 30px; color: #FF9800;
}
div.bg { background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), url(https://www.whitetruffle.com/buddy_group/img/home-cover-bg.jpg); width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; height: 500px; color: white;
}
div.bg .bg-text { padding: 100px;
}
div.bg .bg-text h1 { font-size: 60px; font-weight: 400;
}
button { border: none; width: 150px;
}
button.btn-primary { background: transparent; border: 1px solid #FF9800; color: white; margin: 5px;
}
button.btn-primary:hover { background: #FF9800;
}
button.btn-default { background: #263248; border: none; color: white;
}
div.banner { height: 100px; background-color: #263248; font-size: 25px; color: #fff; position: relative;
}
div.banner .wrapper { position: absolute; top: 50%; transform: translate(0, -50%); margin-left: 10px;
}
div.banner span.orange { color: #FF9800; font-weight: bold;
}
div.banner button { margin-left: 50px; width: 200px; background-color: #FF9800; font-size: 20px;
}
div.sec { height: 400px;
}
div.sec h1 { text-align: center; font-weight: 700;
}
div.sec hr { width: 50px; border: 1.5px solid #FF9800;
}
div.sec.second { height: 400px; background: #f4f4f4; border-top: 5px solid #f1f1f1;
}
Bootstrap page Header Template - Script Codes
Bootstrap page Header Template - Script Codes
Home Page Home
Developer Omran Abazid
Username OmranAbazid
Uploaded September 15, 2022
Rating 3
Size 3,140 Kb
Views 24,288
Do you need developer help for Bootstrap page Header Template?

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!

Omran Abazid (OmranAbazid) Script Codes
Name
Wikipedia Search using the API
Moving Circle on scroll
Pomodora Timer
FCC Campers News
A Pen by Omran Abazid
Simon Game without jquery
Weather App
Bootstrap Portfolio Website
Bootstrap-jquery Address Book
Convert data into d3 format
Create amazing marketing copy 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!