Mobile Friendly Fanfiction Layout

This is a header box, I reccomend using it with either images or put the notes/other info on your fics in here or even navigation.

This is a very basic and simple layout mostly intended for posting fanfiction or other written works!

I highly reccomend you customise this page, play around with colours and fonts until you get something you like! I suggest looking around Htmlcolorcodes to help you find colours.

This code uses the B and I tags for basic bolding & italics in your writing, while using the strong and em tags for fancier text. Please keep this in mind when you are formatting your text for HTML.

If want to place any images on the page you will need the additional style="max-width:100% to allow it to be mobile responsive :)

Please do not delete the credit link back to me!!! If you need any assitance, please contact me via tumblr

Text styling preveiws.

H1

H2

H3

strong

Links

Code!

CSS
Place this either in your style.css file or between style tags.

body { background-color: #E5E4E2; color: #36454F; font-family: Verdana; } .title { width: 100%; border: 1px; border-style: solid; border-color: #A9A9A9; background-color: #A9A9A9; overflow: visible; margin-bottom: 10px; } a { text-decoration: underline; text-decoration-style: double; color: #6e7294; } b { text-decoration: none; color: #36454F; } strong { text-decoration: none; color: #818589; font-family: Courier New; background-color: #36454F; } i { text-decoration: none; color: #36454F; } em { text-decoration: none; color: #818589; font-family: Courier New; } h1,h2,h3 { color: #594a65; font-family: Copperplate; background-color: #C0C0C0; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #A9A9A9; } ::-webkit-scrollbar-thumb { background: #36454F; } ::-webkit-scrollbar-thumb:hover { background: #818589; }

HTML
Place this in your html file.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>YOUR PAGE TITLE HERE</title> <link href="/style.css" rel="stylesheet" type="text/css" media="all">  <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <center><div class="title"><h1>Mobile Friendly Fanfiction Layout</h1> <img src="https://placehold.co/600x400/png" style="max-width:100%"> <p>This is a header box, I reccomend using it with either images or put the notes/other info on your fics in here or even navigation. </div> This is a very basic and simple layout mostly intended for posting fanfiction or other written works! <p>I highly reccomend you customise this page, play around with colours and fonts until you get something you like! I suggest looking around <a href="htmlcolorcodes.com">Htmlcolorcodes</a> to help you find colours. <p>This code uses the <b>B</b> and <i>I</i> tags for basic bolding & italics in your writing, while using the <strong>strong</strong> and <em>em</em> tags for fancier text. Please keep this in mind when you are formatting your text for HTML. <p>If want to place any images on the page you will need the additional <b>style="max-width:100%</b> to allow it to be mobile responsive :) <p>Please do not delete the credit link back to me!!! If you need any assitance, please contact me via <a href="https://summertrapped.tumblr.com">tumblr</a> <p>Text styling preveiws. <p><h1>H1</h1> <p><h2>H2</h2> <p><h3>H3</h3> <p><b>B</b> <p><i>I</i> <p><strong>strong</strong> <p><em>EM</em> <p><a href="">Links</a> <h2>Credits</h2> ❥Coding by <a href="https://summerkaptilo.neocities.org">Summer Kaptilo</a> </center> </body> </html>

Credits

❥Coding by Summer Kaptilo