Simple Jumbotron with BG image

Developer
Kevin
Size
1,946 Kb
Views
24,288
  1. Simple Jumbotron with BG image Previews
  2. Simple Jumbotron with BG image HTML Codes
  3. Simple Jumbotron with BG image CSS Codes

How do I make an simple jumbotron with bg image?

What is a simple jumbotron with bg image? How do you make a simple jumbotron with bg image? This script and codes were developed by Kevin on 08 October 2022, Saturday.

Simple Jumbotron with BG image Previews
IQ Test

Simple Jumbotron with BG image - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Jumbotron with BG image</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="jumbotron my-class-name"> <div class="container"> <div class="row"> <div class="col-sm-6"> <h1>Hello world</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel diam at elit tempus posuere a ut ipsum. Cras sit amet eros dui. Nam ac elit aliquet, dignissim eros ac, ultrices enim. Maecenas hendrerit, nulla sed commodo vulputate, leo libero imperdiet sem, ut pretium magna felis in elit. Aenean in metus massa. Curabitur leo nulla, bibendum vitae pretium non, pharetra vel massa. Nullam porttitor, massa ut condimentum aliquam, nunc mauris suscipit orci, sit amet commodo est purus non neque. Morbi vitae magna vitae odio faucibus imperdiet. Nunc posuere, lorem quis vestibulum facilisis, velit ex lacinia magna, id aliquam turpis purus sed augue. Proin ut malesuada felis.</p> </div> </div> </div>
</div>
</body>
</html>

Simple Jumbotron with BG image - Script Codes CSS Codes

.my-class-name { background: url(//unsplash.it/700/400); background-size: cover; padding-top: 10em; padding-bottom: 10em;
}
Simple Jumbotron with BG image - Script Codes
Simple Jumbotron with BG image - Script Codes
Home Page Home
Developer Kevin
Username kevinpowell
Uploaded October 08, 2022
Rating 3
Size 1,946 Kb
Views 24,288
Do you need developer help for Simple Jumbotron with BG image?

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!

Kevin (kevinpowell) Script Codes
Name
Mega menu
Very simple jQuery dropdown navigation
A Pen by Kevin
Flexbox - Flexbox Container Properties
Parallax only on large screens
Flexbox grid with Sass
Parallax scrolling - one class, multiple divs
Mobile nav v2
Bootstrap grid basics
A look at some CSS units
Create amazing love letters 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!