Text and headings flow for a health site, on the making

Developer
Laura Moraiti
Size
5,185 Kb
Views
22,264
  1. Text and headings flow for a health site, on the making Previews
  2. Text and headings flow for a health site, on the making HTML Codes
  3. Text and headings flow for a health site, on the making CSS Codes
  4. Text and headings flow for a health site, on the making JS Codes

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 Previews
IQ Test

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
Text and headings flow for a health site, on the making - Script Codes
Home Page Home
Developer Laura Moraiti
Username Fixie
Uploaded August 27, 2022
Rating 3.5
Size 5,185 Kb
Views 22,264
Do you need developer help for Text and headings flow for a health site, on the making?

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!

Laura Moraiti (Fixie) Script Codes
Name
Two column of responsive height
Edit inline text and hidden input with jQuery
Fun responsive split layout
Responsive three column fixed layout
Dynamic prefix, transition and transform SASS mixins
Responsive Equal Height Columns using jQuery
Simple gallery jquery
Breadcrumb made with jQuery
Responsive and friendly table
Music equalizer bars with jQuery
Create amazing Facebook ads 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!