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 |
A Pen by Francois Coron | 3,029 Kb |
Responsive Nav | 3,721 Kb |
SVG CREAM | 2,766 Kb |
Hover img | 3,633 Kb |
Starter jade | 2,008 Kb |
Light card transition on scroll | 3,814 Kb |
Reveal footer | 2,856 Kb |
UI Quotes | 4,430 Kb |
Starter CP | 1,938 Kb |
Buttons | 2,509 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 |
Revolving Text Landing Page Trial | TimRuby | 2,976 Kb |
3D flipping card | Ssaakkaa | 2,238 Kb |
RWD Conversion Practice | Jxqr97 | 2,743 Kb |
Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 Kb |
Filter inputs | Rowinf | 1,721 Kb |
Simple Flat Menu | Jeplaa | 2,467 Kb |
Login with flip 3d animation | Mariusbalaj | 3,014 Kb |
Scrolling Horizontal Isotope | Bramus | 2,017 Kb |
Mesmerizing octopus | Jllodra | 3,549 Kb |
Two joint circles - One element | Berdejitendra | 1,704 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!