Header Ads

26 CSS Magazine Layouts

26 CSS Magazine Layouts

February 08, 2017 | 12 Minute Read


Collection of HTML and CSS magazine layouts. Demo and download code (*zip).



Demo Image: Magazine Layout
Magazine Layout (demo image)

Magazine Layout

HTML and CSS emulating a fashion magazine.
Made by Raisa Y
February 6, 2017
download demo and code



Demo Image: Magazine Layout
Magazine Layout (demo image)

Magazine Layout

Magazine layout with HTML and CSS.
Made by Adam Norris
January 31, 2017
download demo and code



Demo Image: Responsive Journal With CSS Grid
Responsive Journal With CSS Grid (demo image)

Responsive Journal With CSS Grid

HTML and CSS responsive magazine layout.
Made by Umberto Junior
January 30, 2017
download demo and code



Demo Image: Magazine Layout
Magazine Layout (demo image)

Magazine Layout

Magazine layout with HTML and CSS.
Made by Anastasia Lanz
January 28, 2017
download demo and code



Demo Image: Hero Effect–Magazine
Hero Effect–Magazine (demo image)

Hero Effect–Magazine

A hero image that uses height: 100vh to cover the entire screen for a magazine cover effect. When scrolled, it has a subtle animation similar to opening a magazine.
Made by Cameron Campbell
November 15, 2016
download demo and code



Demo Image: London Fashion Week // CSS Grid
London Fashion Week // CSS Grid (demo image)

London Fashion Week // CSS Grid

An example of an irregular grid based on a magazine layout.
Made by Brian Haferkamp
October 25, 2016
download demo and code



Demo Image: Luminous Magazine
Luminous Magazine (demo image)

Luminous Magazine

Another layout experiment.
Made by Bart Veneman
October 8, 2016
download demo and code



Demo Image: Article Layout
Article Layout (demo image)

Article Layout

Playing around with an article layout. Magazine/responsive.
Made by dominic
August 3, 2016
download demo and code



Demo Image: Magazine Layout
Magazine Layout (demo image)

Magazine Layout

6 brands for the summer - magazine layout with HTML and CSS.
Made by Bart Veneman
July 22, 2016
download demo and code



Demo Image: Magazine Layout - A Piece Of Pierce
Magazine Layout - A Piece Of Pierce (demo image)

Magazine Layout - A Piece Of Pierce

HTML and CSS magazine layout.
Made by Bart Veneman
July 21, 2016
download demo and code



Demo Image: Article For A Magazine
Article For A Magazine (demo image)

Article For A Magazine

This is a flat, modern and responsive article for a magazine.
Made by Yves
July 10, 2016
download demo and code



Demo Image: Magazine Article
Magazine Article (demo image)

Magazine Article

Magazine article with HTML and CSS.
Made by Patrick Edqvist
May 1, 2016
download demo and code



Demo Image: Food Magazine Template
Food Magazine Template (demo image)

Food Magazine Template

Responsive food magazine template with HTML, CSS and JavaScript.
Made by Riccardo Zanutta
April 26, 2016
download demo and code



Demo Image: Responsive Layout Magazine Style
Responsive Layout Magazine Style (demo image)

Responsive Layout Magazine Style

HTML and CSS responsive layout magazine style.
Made by Mark
April 23, 2016
download demo and code



Demo Image: Magazine Layout
Magazine Layout (demo image)

Magazine Layout

Magazine layout with HTML and CSS.
Made by Chris Baker
April 21, 2016
download demo and code



Demo Image: Magazine Template
Magazine Template (demo image)

Magazine Template

Magazine template with HTML, CSS and JavaScript.
Made by NOTBIGMUZZY
April 19, 2016
download demo and code



Demo Image: Magazine Layout Attempt #1
Magazine Layout Attempt #1 (demo image)

Magazine Layout Attempt #1

From "Gormet" magazine.
Made by Chris Coyier
January 13, 2016
download demo and code



Demo Image: Magazine Style Article Layout
Magazine Style Article Layout (demo image)

Magazine Style Article Layout

Magazine style article layout with a full bleed cover hero photo. Inspired by RL Mag.
Made by Sami Taberman
December 15, 2015
download demo and code



Demo Image: Newspaper Style Design
Newspaper Style Design (demo image)

Newspaper Style Design

Newspaper style design in HTML and CSS.
Made by Silke V
November 10, 2015
download demo and code



Demo Image: Magazine Layout
Magazine Layout (demo image)

Magazine Layout

A slick design for a magazine on tablets.
Made by Dan Andersson
October 29, 2016
download demo and code



Demo Image: Responsive Magazine Layout
Responsive Magazine Layout (demo image)

Responsive Magazine Layout

CSS grid layout module.
Made by Heather Buchel
October 26, 2015
download demo and code



Demo Image: Responsive Magazine Layout
Responsive Magazine Layout (demo image)

Responsive Magazine Layout

Magazine spread style tryouts with HTML and CSS.
Made by Mark
October 23, 2015
download demo and code



Demo Image: Another Magazine Layout
Another Magazine Layout (demo image)

Another Magazine Layout

Another magazine layout with HTML and CSS.
Made by Mark
October 20, 2015
download demo and code



Demo Image: Magazine Layout Responsive
Magazine Layout Responsive (demo image)

Magazine Layout Responsive

Responsive magazine layout with HTML and CSS.
Made by Mark
October 19, 2015
download demo and code



Demo Image: Magazine Layout Attempt #2
Magazine Layout Attempt #2 (demo image)

Magazine Layout Attempt #2

Magazine layout attempt #2 with HTML, CSS and JavaScript.
Made by Chris Coyier
October 10, 2015
download demo and code



Demo Image: Magazine Layout #2
Magazine Layout #2 (demo image)

Magazine Layout #2

Magazine layout #2 with HTML and CSS.
Made by Ricky Eckhardt
September 5, 2014
download demo and code


Nguồn : http://freefrontend.com

No comments:

Powered by Blogger.