Typographie

Size
2,407 Kb
Views
10,120

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 Previews

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;
}
Typographie - Script Codes
Typographie - Script Codes
Home Page Home
Developer Francois Coron
Username francoiscoron
Uploaded November 08, 2022
Rating 3
Size 2,407 Kb
Views 10,120
Do you need developer help for Typographie?

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!

Francois Coron (francoiscoron) Script Codes
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!