Text and headings flow for a health site, on the making
How do I make an text and headings flow for a health site, on the making?
What is a text and headings flow for a health site, on the making? How do you make a text and headings flow for a health site, on the making? This script and codes were developed by Laura Moraiti on 27 August 2022, Saturday.
Text and headings flow for a health site, on the making - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Text and headings flow for a health site, on the making</title> <link href='http://fonts.googleapis.com/css?family=Signika:400,300,600,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'>
<link href="https://fontastic.s3.amazonaws.com/LKUDMvGucqR52upxpor8Ea/icons.css" rel="stylesheet">
<link href="https://fontastic.s3.amazonaws.com/LKUDMvGucqR52upxpor8Ea/fonts/1417198703.woff" rel='stylesheet' type='text/css'> <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="action-bar"> <button class="js-bigger-font">A+</button> <button class="js-smaller-font">A-</button>
</div>
<article> <span class="lead">Big cats</span> <h1 class="h1">Lions like to roar, and sleep</h1> <h2 class="intro">Cute kittens with big jaws, ready to eat you if you move too much like a springbok.</h2> <div class="img-wrap"> <img src="https://c3.staticflickr.com/3/2893/12461529093_bf245d4146_b.jpg" alt="Lions are cute!" /> <span class="caption">How can you look at this cute baby and not go "aaaaaw"? / Pictures by Tambako the Jaguar & Venki</span> </div> <h2 class="h2">Overview of the majestic</h2> <p> The <a href="#">lion</a> <em>(Panthera leo)</em> <strong>is one of the five big cats in the genus Panthera</strong> and a member of the family Felidae. With some males exceeding 250 kg in weight, it is the second-largest living cat after the tiger. Wild lions currently exist in sub-Saharan Africa and in Asia while other types of lions have disappeared from North Africa and Southwest Asia in historic times. <small>Photos: Tambako the Jaguar & Venki</small> </p> <h3 class="h3">Fun facts about lions</h3> <ul> <li>Lions live for 10–14 years in the wild</li> <li>In captivity they can live longer than 20 years</li> <li>They typically inhabit savanna and grassland</li> <li>Groups of female lions typically hunt together</li> </ul> <h6 class="h6">How many subspecies?</h6> <p>Traditionally, 12 recent subspecies of lion were recognised, distinguished by mane appearance, size, and distribution. Because these characteristics are very insignificant and show a high individual variability, most of these forms were probably not true subspecies, especially as they were often based upon zoo material of unknown origin that may have had <em>"striking, but abnormal"</em> morphological characteristics.</p> <h2 class="h2">Etymology</h2> <h5 class="h5">Where the lion gets its name from</h5> <p>The lion's name, similar in many Romance languages, is derived from the Latin <em>leo</em>,<sup>1</sup> and the Ancient Greek λέων (<em>leon</em>)<sup>2</sup>. The Hebrew word לָבִיא (<em>lavi</em>) may also be related. It was one of the species originally described by Linnaeus, who gave it the name <em>Felis leo</em>, in his eighteenth-century work, <em>Systema Naturae</em><sup>3</sup>.</p> <h4 class="h4">Heraldic depictions</h4> <h2 class="h6">Royal cats</h2> <ol> <li>Throne Chair of Denmark</li> <li>Throne Chairs of Norway</li> <li>Coat of arms of Denmark</li> <li>Coat of arms of Norway</li> </ol>
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Text and headings flow for a health site, on the making - Script Codes CSS Codes
body { padding: 3rem;
}
@media (max-width: 600px) { body { padding: 1rem; }
}
* { box-sizing: border-box; font-family: 'Signika'; font-weight: 300; margin-top: 0; padding: 0; font-size: 102%; line-height: 1.485; margin-bottom: 1.75rem; color: #504a43;
}
.lead { font-family: Roboto Condensed; text-transform: uppercase; border-bottom: 2px dotted #00AFE7; padding-bottom: .2em; display: inline-block; margin-bottom: 1rem;
}
.h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; line-height: 1;
}
.h5, .h6 { text-transform: uppercase; letter-spacing: 1.25px; font-family: Roboto Condensed;
}
h1, h2, h3, h4, h5, h6 { margin: 0;
}
.h1, .h2, .h3, .h4, .h5, .h6 { margin-bottom: 1.75rem;
}
.h1 { font-size: 400%;
}
@media (max-width: 500px) { .h1 { letter-spacing: -3px; }
}
.h2 { font-size: 300%;
}
.h3 { font-size: 250%;
}
.h4 { font-size: 180%;
}
.h5 { font-size: 145%;
}
.h6 { font-size: 125%;
}
.intro { font-size: 125%;
}
ul,
ol { padding-left: 2rem;
}
ul li,
ol li { margin-bottom: .5rem;
}
ul li { list-style-type: none; position: relative; padding-left: 1.75rem;
}
ul li:before { font-family: 'untitled-font-1'; font-size: 115%; content: 'l'; display: block; position: absolute; left: 0; top: 0; color: #BCD63F;
}
ol { counter-reset: list;
}
ol li { list-style-type: none;
}
ol li:before { counter-increment: list; content: counter(list); font-family: Roboto Condensed; color: #BCD63F; background-color: rgba(188, 214, 63, 0.15); border-radius: 100%; width: 2rem; line-height: 2rem; display: inline-block; text-align: center; margin-right: .75rem;
}
.img-wrap img { display: block; max-width: 100%; height: auto; border-top-right-radius: 2rem; border-bottom-left-radius: 2rem; margin-bottom: 0;
}
.img-wrap p { font-size: 75%; text-align: center; padding: 3rem 1rem 1rem; border: solid 1px rgba(188, 214, 63, 0.35); border-bottom-left-radius: 2rem; margin-top: -2rem;
}
a { text-decoration: none; color: #a1ba28; position: relative;
}
a:before { content: ''; width: 0; height: 2px; display: block; background-color: rgba(188, 214, 63, 0.3); position: absolute; bottom: 0; left: 0; transition: all .3s ease-in;
}
a:hover:before { width: 100%;
}
Text and headings flow for a health site, on the making - Script Codes JS Codes
// .js-bigger-font
// .js-smaller-font
(function() { var fontSize = { container: $('article'), config: { increment: 1.05 }, init: function() { var btn = $('button'); btn.on('click', this.changeSize); }, changeSize: function() { var b = $(this), btnClass = b .attr('class') .split('-'), btnAction = btnClass[1], container = fontSize.container, config = fontSize.config, initSize = parseInt(container.css('font-size')); if(btnAction == 'bigger') { fSize = initSize + config.increment; } else if(btnAction == 'smaller') { fSize = initSize - config.increment; } container.css('font-size', fSize); console.log(fSize); } }; fontSize.init();
})();
![Text and headings flow for a health site, on the making - Script Codes](http://shots.codepen.io/Fixie/pen/YPXooQ-512.jpg)
Developer | Laura Moraiti |
Username | Fixie |
Uploaded | August 27, 2022 |
Rating | 3.5 |
Size | 5,185 Kb |
Views | 22,264 |
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!
Name | Size |
Dynamic prefix, transition and transform SASS mixins | 2,551 Kb |
Easy hover effect for videos | 1,985 Kb |
WIP | 3,174 Kb |
Responsive Equal Height Columns using jQuery | 3,830 Kb |
Music equalizer bars with jQuery | 2,372 Kb |
Edit inline text and hidden input with jQuery | 3,914 Kb |
A Pen by Laura Moraiti | 5,467 Kb |
User card | 2,074 Kb |
Horizontal infinite loop newsticker | 2,634 Kb |
Fun responsive split layout | 3,484 Kb |
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!
Name | Username | Size |
Sass random color animation | Jotavejv | 4,827 Kb |
Template | Indra_z85 | 2,323 Kb |
Multicolumns 2 | Raphaelgoetter | 1,857 Kb |
Email Marketing Mock | Kristenzirkler | 8,224 Kb |
Motion Lines - codevember - 02 - 2016 | Caiocares | 2,744 Kb |
My Starter Kit For Codepen | Dkdesign | 2,012 Kb |
Flying Bee | Pwsm50 | 3,711 Kb |
Vertically rotating text with CSS | Nopr | 2,141 Kb |
Pomodoro Clock | Osycon | 3,705 Kb |
Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!