Check this project on Dribbble.
Science Fiction Magazines blog HTML Template
Hi, guys!
We’re happy to share with you our Science Fiction Magazines Blog template that can be used as a spectacular blog concept. When creating this template, we were inspired by the stylish science fiction magazines of the 80s-90s.
How to use?
Our template uses the following fonts:
Connecting the main css and fonts in <head>:
<link href="https://fonts.googleapis.com/css?family=Righteous" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet"><!--main css-->
<link rel="stylesheet" href="css/style.css"> Please make sure that you are using the latest version of the third party libraries: jQuery, dotdotdot
Description
Science Fiction Magazines Blog template consists of 3 logical elements: header, content section, footer. The header contains the main navigation elements used as paging. And no matter how this template is created (through CMS or the web framework), you can easily customize the navigation to the previous and next articles by using the following blocks:
<!-- previous page -->
<nav class="navigation-block left">...</nav><!-- next page -->
<nav class="navigation-block right">...</nav>There is also the main menu in the header, where you can place any links to external resources, or create additional pages on the example of the basic blog page.
The content section should contain an image; it's specified by the template. And whatever image you upload, the maximum allowed size for the template is 700px high and 510px wide. Article-image-preview is the class used to wrap the image
The content section also uses the "slides-counter" block that provides a user with information about the number of articles and identifies the current page number. It could be applicable if you want to use the carousel in Science Fiction Magazines Blog template.
The footer contains navigation unit and allows you to return to the last article.
In contrast to the "slides-counter" block, the "slider-indicators" block located at the bottom of the page gives a visual representation of which page you are on. To identify the active page, use the class "active" for the td tag.
In order to customize the template, we recommend to use the "site.js" file for scripts and "style.css" - for the stylesheet.
Demo
https://agilie.github.io/science-fiction-magazines-blog/
Troubleshooting
Problems? Check the Issues block to find the solution or create an new issue that we will fix asap. Feel free to contribute.
Author
This template is open-sourced by Agilie Team [email protected]
Contributors
Contact us
If you have any questions, suggestions or just need a help with web or mobile development, please email us at [email protected]. You can ask us anything from basic to complex questions.
We will continue publishing new open-source projects. Stay with us, more updates will follow!
License
The MIT License (MIT) Copyright © 2017 Agilie Team