Typographie
How do I make an typographie?
What is a typographie? How do you make a typographie? This script and codes were developed by Francois Coron on 08 November 2022, Tuesday.
Typographie - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Typographie</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper">
<header> <h1>Typography</h1>
<nav role='navigation' class="clearfix"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Contact Us</a></li> </ul>
</nav>
</header>
<section> <article> <header> <h2>Article title</h2> <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p> </header> <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and <a href="#">expound the actual</a> teachings of the great explorer of the truth, the master-builder of human happiness.</p>
</article>
<article> <header> <h2>Article title</h2> <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p> </header> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</article>
</section>
<aside> <h2>About section</h2> <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</aside>
<footer> <p>Copyright 2009 Your name</p>
</footer>
<div>
</body>
</html>
Typographie - Script Codes CSS Codes
/* Document level adjustments */
.clearfix:after{ content:""; clear: both; display: table;
}
html { font-size: 16px; color: #333; font-family: "Helvetica Neue"; -webkit-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; -webkit-font-smoothing: antialiased;
}
@media (max-width: 900px) { html { font-size: 15px; }
}
@media (max-width: 400px) { html { font-size: 13px; }
}
.wrapper { width: 75%; margin: 0 auto; }
/* Type will scale with modules */
h1 { font-size: 2.85em; margin:1rem 0; font-weight: bold;
}
h2 { font-size: 1.85em; font-weight: bold; margin: .83em 0;
}
h3 { font-size: 2em;
}
p { margin: 1em 0; line-height: 1.6875; font-weight: normal;
}
a { text-decoration: none; color: #52BAD5;
}
a:hover{ padding-bottom:2px; border-bottom: 1px solid #52BAD5;
}
nav { border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; padding: 1rem; margin: 2em 0;
}
nav ul li{ float: left;
}
nav ul li a { margin-right: 2rem; font-weight: bold; color: #333;
}
nav ul li a:hover { border-bottom: none; color: #52BAD5;
}
article { border-bottom: 1px solid #CCC; padding: 2rem 0;
}
Developer | Francois Coron |
Username | francoiscoron |
Uploaded | November 08, 2022 |
Rating | 3 |
Size | 2,407 Kb |
Views | 10,120 |
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 |
STAR WARS LIGHTSABER | 4,420 Kb |
Reveal footer | 2,856 Kb |
Buttons | 2,509 Kb |
Simple Button Icons | 2,257 Kb |
Hover img | 3,633 Kb |
A Pen by Francois Coron | 3,029 Kb |
Starter CP | 1,938 Kb |
SVG CREAM | 2,766 Kb |
Auto Height textarea | 2,464 Kb |
Responsive Nav | 3,721 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 |
Single element checkbox | Ivijaygupta | 1,996 Kb |
Search field | Jamesbarnett | 2,100 Kb |
Octopus Bar iPad App Interactions | Davidkpiano | 6,735 Kb |
Fading gradient button | Insprd | 1,713 Kb |
React Vote Component | Souporserious | 5,465 Kb |
IPhone5S SVG Space Grey | Onlinechris | 75,035 Kb |
Javascript Welcome | Peterlewicki | 1,573 Kb |
Animated Slide Hamburger Mobile Menu | BJack | 2,247 Kb |
Board Site | IndianaLuft | 10,542 Kb |
SnappySnippet Test | Elmsoftware | 8,385 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!