Headbands

Developer
Danny C
Size
2,054 Kb
Views
34,408
  1. Headbands Previews
  2. Headbands HTML Codes
  3. Headbands CSS Codes

How do I make an headbands?

Been seeing a trend with displaying header sections but wasn't sure how simply it could be written. The trick is in the display:table and centering up like a table cell. What is a headbands? How do you make a headbands? This script and codes were developed by Danny C on 17 October 2022, Monday.

Headbands Previews
IQ Test

Headbands - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Headbands</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="headband" style="background-image: url(http://distilleryimage0.ak.instagram.com/5df782ea129111e3bad822000a9f3047_7.jpg)">
<div class="tableCenter">
<div class="tableCell"> <h1 class="username"><small>@</small>d_castillo</h1>
<h2 class="bio">Hi I do front end dev and design earning my stripes building out emailers and exploring CMS</h2>
</div>
</div>
</div>
</body>
</html>

Headbands - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Montserrat);
body {
height: 540px;
max-height: 100%;
font-family: 'Montserrat', sans-serif;
font-size: 2.0rem;
line-height: 1.6em;
margin:0;
padding:0;
background-color:#292e30;
}
#headband {
position: relative;
display: table;
width: 100%;
/*height: 60%;*/
height: 70%;
margin-bottom: 5rem;
text-align: center;
color: #114356;
background: #2f1d3f no-repeat center center;
background-size: cover;
}
.tableCenter {
display: table-cell;
vertical-align: middle;
}
.tableCell {
position: relative;
width: 80%;
max-width: 700px;
margin: 0 auto;
}
.username {
margin: 10px 0 10px 0;
font-size: 5rem;
letter-spacing: -5px;
}
.bio {
margin: 0;
font-size: 1.8rem;
line-height: 1.5em;
font-weight: 300;
letter-spacing: 0;
display: none;
}
@media only screen and (max-width: 500px)
.username {
font-size: 3rem;
}
Headbands - Script Codes
Headbands - Script Codes
Home Page Home
Developer Danny C
Username tychoBlender
Uploaded October 17, 2022
Rating 3
Size 2,054 Kb
Views 34,408
Do you need developer help for Headbands?

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!

Danny C (tychoBlender) Script Codes
Name
AJAX Form
SOL Republic Styling Test
Navigation Transition
Single Page Layout
Embed Responsively
Crossfade video Carousel
CSS OVERLAY TECHNIQUES
IE getJSON test
Swiper
Select Menu test
Create amazing blog posts 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!