Full-Width Hero with Image Using Flexbox

Developer
Brian Haferkamp
Size
2,459 Kb
Views
34,408
  1. Full-Width Hero with Image Using Flexbox Previews
  2. Full-Width Hero with Image Using Flexbox HTML Codes
  3. Full-Width Hero with Image Using Flexbox CSS Codes

How do I make an full-width hero with image using flexbox?

A full-width hero section with background image using flexbox to center the content over the image. It's responsive to the viewport height and width using vh and vw. The content includes a ghost button.. What is a full-width hero with image using flexbox? How do you make a full-width hero with image using flexbox? This script and codes were developed by Brian Haferkamp on 10 October 2022, Monday.

Full-Width Hero with Image Using Flexbox Previews
IQ Test

Full-Width Hero with Image Using Flexbox - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Full-Width Hero with Image Using Flexbox</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="hero"> <div class="center-content"> <h1>An Article Title</h1> <h3>A longer subtitle but still important</h3> <a href="#" class="button">Some Action Here</a> </div>
</header>
</body>
</html>

Full-Width Hero with Image Using Flexbox - Script Codes CSS Codes

.hero { background-image: url("https://unsplash.it/1500?random"); background-size: cover; background-position: center; width: 100wh; height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex;
}
.center-content { width: 400px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: auto;
}
.center-content h1, .center-content h3 { color: white; line-height: 1;
}
.center-content h1 { text-transform: uppercase; font-size: 3em; margin-bottom: 0; text-align: center;
}
.center-content h3 { margin-bottom: 40px; font-size: 1.5em; font-weight: normal;
}
.button { text-transform: uppercase; color: white; padding: 20px; border: 1px solid white; text-decoration: none;
}
.button:hover { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.7); color: white;
}
Full-Width Hero with Image Using Flexbox - Script Codes
Full-Width Hero with Image Using Flexbox - Script Codes
Home Page Home
Developer Brian Haferkamp
Username brianhaferkamp
Uploaded October 10, 2022
Rating 3
Size 2,459 Kb
Views 34,408
Do you need developer help for Full-Width Hero with Image Using Flexbox?

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!

Brian Haferkamp (brianhaferkamp) Script Codes
Name
2-Up Magazine Layout
System Fonts Can Be Beautiful
Creating a CSS Flexbox Grid
Brutalism Web Design School
RADIOLOGY
Emoji-Driven Survey
Gradient Transitions Between Sections
Brutal, Bro
Travel Blog Design with Sticky Nav and Sidebar
Follow Your Heart
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!