Easy Lines Around a Subtitle

Developer
Matt Gross
Size
1,807 Kb
Views
42,504
  1. Easy Lines Around a Subtitle Previews
  2. Easy Lines Around a Subtitle HTML Codes
  3. Easy Lines Around a Subtitle CSS Codes

How do I make an easy lines around a subtitle?

Super-easy way to use flexbox to create lines on either side of the subtitle, without needing to know anything about what's actually in the subtitle itself. . What is a easy lines around a subtitle? How do you make a easy lines around a subtitle? This script and codes were developed by Matt Gross on 07 September 2022, Wednesday.

Easy Lines Around a Subtitle Previews
IQ Test

Easy Lines Around a Subtitle - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Easy Lines Around a Subtitle</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Title -->
<h1>Lines Around a Subitle</h1>
<!-- Subtitle wrapped in a div -->
<div class="container"> <p class="subtitle">This Sub</p>
</div>
</body>
</html>

Easy Lines Around a Subtitle - Script Codes CSS Codes

/* Basic Formatting */
* { margin: 0; padding: 0; box-sizing: border-box;
}
body { padding: 100px; text-align: center;
}
/* Flexbox on the subtitle's container */
.container { display: flex; justify-content: center; align-items: center;
}
/* Before & After elements create a line on each side of the subtitle */
.container:before,
.container:after { content: ''; background: #999;
/* Height of the line */ height: 1px;
/* Tells the elements to grow to fill the available space, */ flex-grow: 1;
}
/* padding controls the space between the text and the lines */
.subtitle { padding: 0 15px;
}
Easy Lines Around a Subtitle - Script Codes
Easy Lines Around a Subtitle - Script Codes
Home Page Home
Developer Matt Gross
Username mattgrosswork
Uploaded September 07, 2022
Rating 3
Size 1,807 Kb
Views 42,504
Do you need developer help for Easy Lines Around a Subtitle?

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!

Matt Gross (mattgrosswork) Script Codes
Name
Basic Fullscreen Video Background
EvenVision Branded Ajax Loader
Super Basic Menu with Best Practices
A Pen by Matt Gross
Scared Eyes
Playing with transition timing
Basic Flexbox Layout
Basic Flexbox Reference
Circle Hovers
Working on a Volusion version of a Drupal Theme
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!