A Pen by Sethu Senthil on CodePen.
Last active
November 26, 2018 21:27
-
-
Save SethuSenthil/068d0001f55c9abbeb3b2079953d3c8e to your computer and use it in GitHub Desktop.
GwQyYX
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Template</title> | |
| <link rel="stylesheet" href="https://sethusenthil.com/Product-Sans/api/font.css"> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| </head> | |
| <body> | |
| <gfont> | |
| <section> | |
| <article> | |
| <h1> <img src="https://wiki.openmrs.org/download/attachments/131074/global.logo?version=6&modificationDate=1394789288000&api=v2" alt="" class=imgb style="vertical-align:middle" height="30px" width=30px;/> | |
| <span style="">Title of article</span</h1> | |
| <p style="color:grey;">By: {Author} | |
| <br> | |
| Posted On: {num1}/{num2}/{num3} | |
| </p> | |
| <img class="imgr alignleft wp-image-3313 size-medium" src="https://via.placeholder.com/150" alt="OpenMRS Mozambique Case Study" width="300" height="204" sizes="(max-width: 300px) 100vw, 300px"/> <p class="tdlr">TDLR: Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse in est ante in. Consequat id porta nibh venenatis cras sed. Sem integer vitae justo eget magna fermentum iaculis. In ante metus dictum at tempor commodo. Purus in massa tempor nec feugiat nisl pretium. Montes nascetur ridiculus mus mauris vitae ultricies. Semper viverra nam libero justo laoreet sit amet. Gravida in fermentum et sollicitudin ac orci phasellus. Quis risus sed vulputate odio ut enim blandit. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque. Dui id ornare arcu odio ut sem. | |
| <br> | |
| <br> | |
| Magna fringilla urna porttitor rhoncus dolor purus non enim praesent. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. In egestas erat imperdiet sed euismod nisi porta lorem mollis. Ultricies lacus sed turpis tincidunt id. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Euismod quis viverra nibh cras pulvinar mattis. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Rutrum quisque non tellus orci ac auctor augue mauris augue. Mauris pharetra et ultrices neque ornare aenean euismod. Nulla facilisi cras fermentum odio eu. Sit amet facilisis magna etiam tempor orci. Convallis convallis tellus id interdum velit. Turpis egestas pretium aenean pharetra magna ac placerat. Est ante in nibh mauris cursus mattis molestie a iaculis. Pharetra diam sit amet nisl suscipit.</p> | |
| <h2>Small Topic</h2> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultrices vitae auctor eu augue ut lectus. Sed odio morbi quis commodo. Eget duis at tellus at urna condimentum mattis. | |
| </p> | |
| <h2>Other Topic Example : Example</h2> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit ullamcorper dignissim cras tincidunt lobortis. Urna cursus eget nunc scelerisque. Nunc non blandit massa enim nec dui nunc. Augue neque gravida in fermentum et. Semper auctor neque vitae tempus. Arcu felis bibendum ut tristique et egestas. Cras pulvinar mattis nunc sed blandit libero volutpat sed. Risus quis varius quam quisque. Viverra nam libero justo laoreet sit amet cursus. Cursus risus at ultrices mi tempus imperdiet nulla. Morbi leo urna molestie at elementum. Sed elementum tempus egestas sed sed risus. Sit amet dictum sit amet justo donec enim diam vulputate. Duis at tellus at urna condimentum mattis pellentesque. Urna cursus eget nunc scelerisque viverra mauris in. Sapien faucibus et molestie ac feugiat sed. Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Egestas dui id ornare arcu odio ut. Pretium fusce id velit ut tortor pretium viverra. | |
| <br> | |
| <br> | |
| Magna eget est lorem ipsum dolor sit amet. Turpis egestas pretium aenean pharetra magna ac placerat. Mauris pharetra et ultrices neque ornare aenean euismod. Elementum nibh tellus molestie nunc non blandit massa. Eu facilisis sed odio morbi. Consectetur a erat nam at lectus urna duis convallis. Donec ultrices tincidunt arcu non sodales neque sodales ut. Donec adipiscing tristique risus nec feugiat in fermentum posuere. Sit amet volutpat consequat mauris nunc congue nisi. Est velit egestas dui id ornare arcu odio ut. Quis ipsum suspendisse ultrices gravida dictum fusce. Donec adipiscing tristique risus nec feugiat in fermentum posuere. Eu tincidunt tortor aliquam nulla facilisi cras. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Sed nisi lacus sed viverra tellus in. Auctor urna nunc id cursus metus. | |
| <br> | |
| <br> | |
| Quam pellentesque nec nam aliquam sem et tortor. Habitant morbi tristique senectus et. Lacus sed viverra tellus in hac habitasse platea. Elementum curabitur vitae nunc sed velit dignissim. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Accumsan tortor posuere ac ut. Dictum sit amet justo donec. Neque egestas congue quisque egestas. Sed vulputate odio ut enim blandit volutpat. Consequat id porta nibh venenatis cras sed. At erat pellentesque adipiscing commodo elit at. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Odio ut enim blandit volutpat maecenas. Scelerisque purus semper eget duis at. | |
| </p> | |
| <h2>Results of case study</h2> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque diam volutpat commodo sed egestas egestas. Mollis nunc sed id semper risus. Neque ornare aenean euismod elementum. Malesuada proin libero nunc consequat. Convallis aenean et tortor at risus. Tincidunt augue interdum velit euismod in pellentesque massa placerat. Purus in massa tempor nec feugiat nisl pretium. Mattis molestie a iaculis at. Feugiat sed lectus vestibulum mattis ullamcorper velit sed. Integer eget aliquet nibh praesent tristique magna. | |
| <br> | |
| <br> | |
| Nibh mauris cursus mattis molestie. Cursus vitae congue mauris rhoncus aenean. Porttitor lacus luctus accumsan tortor posuere ac ut. Aliquet nibh praesent tristique magna. Ut porttitor leo a diam sollicitudin tempor id eu nisl. Massa tempor nec feugiat nisl pretium fusce id velit ut. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Tellus orci ac auctor augue mauris augue neque gravida in. Ut sem viverra aliquet eget sit amet tellus cras adipiscing. Sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. Dictum varius duis at consectetur lorem donec. Interdum consectetur libero id faucibus nisl tincidunt. Eu lobortis elementum nibh tellus molestie. Eu mi bibendum neque egestas congue quisque egestas diam. Ultricies tristique nulla aliquet enim tortor at auctor urna. | |
| <h2>Future Plans / Changes</h2> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget sit amet tellus cras adipiscing. Mauris nunc congue nisi vitae suscipit tellus mauris. Ornare arcu odio ut sem nulla pharetra diam sit. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Vivamus arcu felis bibendum ut tristique. Blandit turpis cursus in hac habitasse platea dictumst quisque sagittis. Dui id ornare arcu odio ut sem. Nam libero justo laoreet sit amet cursus sit amet dictum. Nulla facilisi etiam dignissim diam quis. Consectetur a erat nam at lectus urna duis. | |
| <br> | |
| <br> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget sit amet tellus cras adipiscing. Mauris nunc congue nisi vitae suscipit tellus mauris. Ornare arcu odio ut sem nulla pharetra diam sit. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Vivamus arcu felis bibendum ut tristique. Blandit turpis cursus in hac habitasse platea dictumst quisque sagittis. Dui id ornare arcu odio ut sem. Nam libero justo laoreet sit amet cursus sit amet dictum. Nulla facilisi etiam dignissim diam quis. Consectetur a erat nam at lectus urna duis. | |
| </p> | |
| <footer> | |
| <p>Tags: {tag1,tag2,tag3} Author:</p> | |
| </footer> | |
| </article> | |
| </section> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| box-sizing: border-box; | |
| } | |
| p{ | |
| font-weight: 500; | |
| } | |
| header { | |
| background-color: #666; | |
| padding: 30px; | |
| text-align: center; | |
| font-size: 35px; | |
| color: white; | |
| } | |
| nav { | |
| float: left; | |
| width: 30%; | |
| background: #ccc; | |
| padding: 20px; | |
| } | |
| nav ul { | |
| list-style-type: none; | |
| padding: 0; | |
| } | |
| article { | |
| float: left; | |
| padding: 20px; | |
| width: 70%; | |
| background-color: #f1f1f1; | |
| } | |
| section:after { | |
| content: ""; | |
| display: table; | |
| clear: both; | |
| } | |
| footer { | |
| background-color: #777; | |
| padding: 10px; | |
| text-align: center; | |
| color: white; | |
| } | |
| .tdlr{ | |
| font-weight: bold; | |
| } | |
| @media (max-width: 600px) { | |
| nav, article { | |
| width: 100%; | |
| height: auto; | |
| } | |
| } | |
| .imgr { | |
| float: right; | |
| border-radius: 15px; | |
| } | |
| .imgb { | |
| float: left; | |
| } | |
| .tdlr{ | |
| font-size: 30px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment