Fitter Happier Text

Developer
Brent Jackson
Size
2,536 Kb
Views
46,552
  1. Fitter Happier Text Previews
  2. Fitter Happier Text HTML Codes
  3. Fitter Happier Text CSS Codes
  4. Fitter Happier Text JS Codes

How do I make an fitter happier text?

Fully fluid headings using SVG text element. Does not require window resize events. JavaScript is only used on page load.. What is a fitter happier text? How do you make a fitter happier text? This script and codes were developed by Brent Jackson on 15 September 2022, Thursday.

Fitter Happier Text Previews
IQ Test

Fitter Happier Text - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fitter Happier Text</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> <div class="banner-object center"> <div class="banner-body"> <h1 class="js-fht">Fitter Happier</h1> <span>Fully fluid headings using SVG</span> <a href="https://github.com/jxnblk/fitter-happier-text" target="_blank">Github</a> </div>
</div> <script src='https://jxnblk.github.io/fitter-happier-text/dist/fitter-happier-text.js'></script> <script src="js/index.js"></script>
</body>
</html>

Fitter Happier Text - Script Codes CSS Codes

body { color: white; background-color: #f48; font-weight: 600; font-family: 'Avenir Next', sans-serif; text-transform: uppercase; letter-spacing: .2em; height: 100%; box-sizing: border-box; padding: 2em; font-size: 1rem;
}
html { height: 100%;
}
.center { text-align: center;
}
.banner-object { height: 100%;
}
.banner-object:before { content: ''; display: inline-block; width: 0; height: 100%; vertical-align: middle; margin-left: -.5rem;
}
.banner-body { display: inline-block; vertical-align: middle; width: 100%; box-sizing: border-box; padding: 2em;
}
a { color: rgba(0, 0, 0, 0.6);
}

Fitter Happier Text - Script Codes JS Codes

var headings = document.querySelectorAll('.js-fht');
fitterHappierText(headings);
Fitter Happier Text - Script Codes
Fitter Happier Text - Script Codes
Home Page Home
Developer Brent Jackson
Username jxnblk
Uploaded September 15, 2022
Rating 4
Size 2,536 Kb
Views 46,552
Do you need developer help for Fitter Happier Text?

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!

Brent Jackson (jxnblk) Script Codes
Name
Building SVG Icons with React
Eat me
Chrome-like Spinning Loading Indicator
Absolute Grid
Comparison of Roboto Draft vs Roboto
Bootstrap Thumbnail Radio Group
Colors
Flex Object Grid with Fallback
Dropbar
Paginated Tiles with CSS Multi-Column Layout
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!