Skip to content

Blog template (concept) is inspired by stylish science fiction magazines of the 80-90s.

License

Notifications You must be signed in to change notification settings

agilie/science-fiction-magazines-blog

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Check this project on Dribbble.

License

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:

Open Sans Righteous

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

Tatiana Kushnir

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