EM Units Experiment

Developer
Henri Peetsmann
Size
1,921 Kb
Views
6,072
  1. EM Units Experiment Previews
  2. EM Units Experiment HTML Codes
  3. EM Units Experiment CSS Codes

How do I make an em units experiment?

What is a em units experiment? How do you make a em units experiment? This script and codes were developed by Henri Peetsmann on 09 December 2022, Friday.

EM Units Experiment Previews
IQ Test

EM Units Experiment - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>EM Units Experiment</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="row"> <div class="col-sm-6 col-sm-offset-3"> <div class="box"> <h3>EM units</h3> <p>This is a simple experiment with em units to show how they can be used with font-size and media queries to make a dynamic page.</p> <p>Basically font-size declaration is just used for the ratio and not the font-size itself.</p> <p>Go ahead and resize this viewport to see the effect.</p> </div> </div> </div>
</div>
</body>
</html>

EM Units Experiment - Script Codes CSS Codes

body { background: #ddd; padding-top: 35px;
}
.box { font-size: 20px; /* this will not be used to size text */ padding: 1em; border-top-right-radius: 1.5em; background: #fff;
} @media(min-width: 768px){ .box { font-size: 25px; }} @media(min-width: 992px){ .box { font-size: 35px; }} @media(min-width: 1200px){ .box { font-size: 45px; }}
h3 { font-size: 23px; padding: 0.6em 0 0.4em 0; margin-bottom: 0.75em; border-bottom: solid 0.3em indigo; text-transform: uppercase;
} @media(min-width: 768px){ h3 { font-size: 23px; }} @media(min-width: 992px){ h3 { font-size: 29px; }} @media(min-width: 1200px){ h3 { font-size: 32px; }}
p { font-size: 16px; /* I do not want to use em-s here */ line-height: 1.4; /* No need to use em-s here either */ margin-bottom: 1em;
}
EM Units Experiment - Script Codes
EM Units Experiment - Script Codes
Home Page Home
Developer Henri Peetsmann
Username henripeetsmann
Uploaded December 09, 2022
Rating 3
Size 1,921 Kb
Views 6,072
Do you need developer help for EM Units Experiment?

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!

Henri Peetsmann (henripeetsmann) Script Codes
Name
Responsive SVG cross-browser
Dynamic ring loader
Modified Bootstrap dropdown
Responsive Moto G mockup
Sprite animation experiment
Centre aligned responsive header
Sponsor logos
Search box
Responsive MacBook retina mockup
A Pen by Henri Peetsmann
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!