CSS Layouts | Bypeople

deals

premiumpacks & css layouts (52 items)

A collection of CSS layouts focused on different purposes, coming from portfolio and Pinterest to Metro and personal blogs.

freebies

Debucsser is a simple CSS debugging tool made to be unobtrusive in your workflow. Simply hold CTRL and move your mouse around to see the dimensions...

Debucsser is a simple CSS debugging tool made to be unobtrusive in your workflow. Simply hold CTRL and move your mouse around to see the dimensions in px and apply an outline class to every hovered element. You can also have the possibility to specify a custom class I want to apply to different elements without the need to comment and uncomment the CSS files.

This is a stunning parallax hero header with a scroll overlay action over the title. It uses PUG HTML to set and easily organize the containers, tw...

This is a stunning parallax hero header with a scroll overlay action over the title. It uses PUG HTML to set and easily organize the containers, two for front and background images and another for setting up the title to be overlayed. It also implements CSS for styling and positioning the layers and makes use of JavaScript for the on-Scroll actions. Created by CodePen user Filip Vitas.

A simple SVG morphing transition created with Anime.js. The button action showcases a fluid transition that ends with the transformation of the con...

A simple SVG morphing transition created with Anime.js. The button action showcases a fluid transition that ends with the transformation of the container and reveals the subjacent information. It is Styled with SCSS and structured with basic HTML where the SVG elements are placed. Created by CodePen user Paolo Duzioni.

Hundreds Of Web UI Design Elements & Content Blocks For Sketch, Photoshop & Figma: Bootstrap Grids, Portfolios, Headers, Footers, Pricing Tables, F...

Hundreds Of Web UI Design Elements & Content Blocks For Sketch, Photoshop & Figma: Bootstrap Grids, Portfolios, Headers, Footers, Pricing Tables, Features, & More, Only $25

A resume template design with interactive features. Created to be showcased as a complement or section in a website portfolio. It is structured usi...

A resume template design with interactive features. Created to be showcased as a complement or section in a website portfolio. It is structured using HTML, styled with SCSS, and interactivity with jQuery. Created by CodePen user Naomi Weatherford.

CSS recreation of a print layout from The Intelligent Lifestyle Magazine booklet, nice and useful snippet of a great looking grid layout created by...

CSS recreation of a print layout from The Intelligent Lifestyle Magazine booklet, nice and useful snippet of a great looking grid layout created by codepen user Jules Forrest.

Recreation of a print layout from The Intelligent Lifestyle Magazine book, using pure CSS. Snippet by Codepen user Jules Forrest, it features a pur...

Recreation of a print layout from The Intelligent Lifestyle Magazine book, using pure CSS. Snippet by Codepen user Jules Forrest, it features a pure CSS grid layout with smooth color transition animations on mouse hover.

280 Instagram Masks in PSD Format, easy usage, including a tutorial of the process. Delivered in different categories. Normally priced $60, for a l...

280 Instagram Masks in PSD Format, easy usage, including a tutorial of the process. Delivered in different categories. Normally priced $60, for a limited-time only $9 USD!

A responsive skeuomorph book layout made in CSS by codepen user Erin E. Sullivan, this book layout comes in packed with fun features to discover. I...

A responsive skeuomorph book layout made in CSS by codepen user Erin E. Sullivan, this book layout comes in packed with fun features to discover. It is lightweight and easy to work with. Snippet completely free for use!

A compelling layout for a microblogging site made in CSS and HTML. This microblog layout can be used in websites and also as a responsive email tem...

A compelling layout for a microblogging site made in CSS and HTML. This microblog layout can be used in websites and also as a responsive email template. It has a top menu, big transitional slider, favorite and share buttons, and content area.

A purely CSS crafted Masonry layout including 3 columns featuring images as well. This CSS layout includes a nice hover-highlighting effect on each...

A purely CSS crafted Masonry layout including 3 columns featuring images as well. This CSS layout includes a nice hover-highlighting effect on each title adding great style to them.

13,000+ Unique PowerPoint & Keynote Slides, 86 Best Selling Templates, Print Ready (A4 + Letter), Smart Objects, Vector Shapes, 160 Color Schemes, ...

13,000+ Unique PowerPoint & Keynote Slides, 86 Best Selling Templates, Print Ready (A4 + Letter), Smart Objects, Vector Shapes, 160 Color Schemes, Icon Fonts, 16:9 Aspect Ratio, Intros, Maps, Infographics, Tables, Calendars, Charts, and Much More! Get it for Only $19 (99% Off)

A material layout built with CSS and JavaScript that resembles the Google Play Music website. It is semi-functional: you'll find some actionable bu...

A material layout built with CSS and JavaScript that resembles the Google Play Music website. It is semi-functional: you'll find some actionable buttons like the menu on the upper left corner, the tabs, the search and the user options on the upper right. However, you can modify the code to add extra features and improve it.

An interesting snippet featuring a CSS masonry layout using flexbox that showcases some effects over some boxes like a pulse, focus, and a box that...

An interesting snippet featuring a CSS masonry layout using flexbox that showcases some effects over some boxes like a pulse, focus, and a box that flips around. Moreover, resizing the window it is shown its responsiveness.

An amazing illustration performed in pure CSS featuring a 3D multi-layer composition that is animated and interactive with the mouse as it tilts to...

An amazing illustration performed in pure CSS featuring a 3D multi-layer composition that is animated and interactive with the mouse as it tilts to always be facing the cursor.

A brand new bundle of 33 fonts in a wide variety of styles, weights & multilanguage support, normally priced $490 if purchased individually, Only $...

A brand new bundle of 33 fonts in a wide variety of styles, weights & multilanguage support, normally priced $490 if purchased individually, Only $19 for a limited-time

A responsive CSS layout that features several columns that seem to shine as you hover over them, and expand to the whole viewport with their respec...

A responsive CSS layout that features several columns that seem to shine as you hover over them, and expand to the whole viewport with their respective content as you click on them.

Spotify artist page design pretty similar to the original one, in dark tones and a highly visual interface in JavaScript.

Spotify artist page design pretty similar to the original one, in dark tones and a highly visual interface in JavaScript.

An useful article about the best and more practical coding methods to achieve the known and trending masonry layout. It explains how to build the l...

An useful article about the best and more practical coding methods to achieve the known and trending masonry layout. It explains how to build the layout withou using anything else but CSS, specifically Flexbox.

Massive Vector Avatar Generator Pack, Over 11,000 Assets For Creating Unique Characters, Avatars, and Mascots in Ai and PSD Formats. Contains Human...

Massive Vector Avatar Generator Pack, Over 11,000 Assets For Creating Unique Characters, Avatars, and Mascots in Ai and PSD Formats. Contains Human, Monster, and Robot Assets Completely Made in Vector Shapes, Get It For Just $29 (91% Off)

An effortless Sass framework that allows you to create layouts with simple and clean semantic commands reducing to zero the amount of litter in you...

An effortless Sass framework that allows you to create layouts with simple and clean semantic commands reducing to zero the amount of litter in your code.

A fully CSS crafted static responsive grid that features native drag-n-drop, resizing, on-the-fly settings, custom columns and sizes, multiple cont...

A fully CSS crafted static responsive grid that features native drag-n-drop, resizing, on-the-fly settings, custom columns and sizes, multiple containers, and more.

A nice navigation layout displaying a simple menu icon. Once clicked, a side menu with colorful icons appears. The layout also has some effects for...

A nice navigation layout displaying a simple menu icon. Once clicked, a side menu with colorful icons appears. The layout also has some effects for screen transition. It was made with CSS and JavaScript by Codepen user Ettrics.

2880+ Vector Ornamental Drop Cap Lettering Designs Including Celtic, Gothic, Illuminated Manuscript, Gravure, And Many More Styles! Foil Effects fo...

2880+ Vector Ornamental Drop Cap Lettering Designs Including Celtic, Gothic, Illuminated Manuscript, Gravure, And Many More Styles! Foil Effects for Illustrator & Photoshop, As Well As Paper Textures & Mockups Included, Get This Bundle For Just $14! (95% Off)

A simple snippet with animations showing a mockup of a responsive layout made with LESS. It displays a tablet mockup turning into a smartphone layo...

A simple snippet with animations showing a mockup of a responsive layout made with LESS. It displays a tablet mockup turning into a smartphone layout. It was created by Nick Eli and can be modified to fit a presentation or showcase.

CSStyle is a fashionable way for styling sites with simplicity and usability in mind. You can achieve this by applying a set of SASS mixins making ...

CSStyle is a fashionable way for styling sites with simplicity and usability in mind. You can achieve this by applying a set of SASS mixins making the CSS readable and semantically accurate.

Pure is a set of CSS modules that are responsive and lightweight, fitting any web project with neat design elements. It also has mobile devices in ...

Pure is a set of CSS modules that are responsive and lightweight, fitting any web project with neat design elements. It also has mobile devices in mind, letting you create responsive environments quickly and effortlessly.

40 Premium WordPress Plugins to Revamp Your Website! SEO Optimizing, Campaign Management, Quality Leads Generation & Capture, Page Building, Social...

40 Premium WordPress Plugins to Revamp Your Website! SEO Optimizing, Campaign Management, Quality Leads Generation & Capture, Page Building, Social Conversion Boosting, Mobile Optimizing, Browser Graphical Editors, Opt-In Content Delivery, and so much more! Only 19$!

This is a supremely useful tool that will generate column layouts including footer, header and menu. You can set the measurements by either pixels ...

This is a supremely useful tool that will generate column layouts including footer, header and menu. You can set the measurements by either pixels or percentages. The inclusion of sidebars can also be controlled. Take a look and create the right foundation for your project. It was created by Generate It!

A semi-responsive tabbed navigation concept (it has trouble with the smallest sizes) that puts your content right under the spotlight thanks to a v...

A semi-responsive tabbed navigation concept (it has trouble with the smallest sizes) that puts your content right under the spotlight thanks to a very minimal layout. You can place a big image as the header while the body of the text is displayed with just one column. You can use the navigation menu to jump from one part of the website to the other, making this perfect for one-page sites.

A code experiment created by Gabe Rose is a basic template with a fixed bar that can work as an option menu. The design is completed with space for...

A code experiment created by Gabe Rose is a basic template with a fixed bar that can work as an option menu. The design is completed with space for texts and different areas for images. It is responsive, and it was built on HTML, CSS and a little JavaScript.

Responsive HTML Professional Email Templates Bundle: Mail Chimp & Email Platforms Full Compatibility, Litmus Tested, Layered PSD & Sketch Files, As...

Responsive HTML Professional Email Templates Bundle: Mail Chimp & Email Platforms Full Compatibility, Litmus Tested, Layered PSD & Sketch Files, Assets Worth $106 for Just $29 (73% Discount)

This code snippet is about creating a blog post layout, including the regular sidebar located on the left. Also, we can add a picture and quotation...

This code snippet is about creating a blog post layout, including the regular sidebar located on the left. Also, we can add a picture and quotation to make the post a little more dynamic. Developed in HTML, CSS and JavaScript, created by Emily Brophy.

This tutorial is about creating a horizontal website layout with individually scrollable content panels, including responsive behaviour for smaller...

This tutorial is about creating a horizontal website layout with individually scrollable content panels, including responsive behaviour for smaller screens. Additionally, we'll add a content panel that will animate when clicked or selected. The challenge is to deal with different viewport sizes, adapting the layout to the multiple screen sizes.

A simple responsive layout jQuery plugin with fancy page transitions that show four flexible boxes. When clicking on a box, it will expand to full ...

A simple responsive layout jQuery plugin with fancy page transitions that show four flexible boxes. When clicking on a box, it will expand to full screen, and the others will scale down and fade out. When closing the current view, it will move back to the initial position while the other boxes come back up again. Another type of page transition can be seen on the works section where we will show a portfolio item by sliding in a panel from the bottom. The current view gets scaled down and disappears in the back.

Ultimate Data Analysis Courses Bundle: Lifetime Subscription, 200+ Courses on SQL, NoSQL, Big Data, SAS, Business Intelligence & Analytics, Data Sc...

Ultimate Data Analysis Courses Bundle: Lifetime Subscription, 200+ Courses on SQL, NoSQL, Big Data, SAS, Business Intelligence & Analytics, Data Science, and Much More, PLUS All Future Releases! Only $19! (96% Off)

Here's a cool tutorial on how to create a full screen vertical slider, including some pretty smooth animations and lovely icons which, of course, c...

Here's a cool tutorial on how to create a full screen vertical slider, including some pretty smooth animations and lovely icons which, of course, can be replaced with whatever you need. Article and code written by the skillful Mary Lou for the team of Codrops.

A CSS layout system that's both lightweight and fluid. It aims to reduce the need for classes on individual units, making it a bit less messy and m...

A CSS layout system that's both lightweight and fluid. It aims to reduce the need for classes on individual units, making it a bit less messy and more fun to implement responsive layouts. The tool also offers extensibility options, in order to customize it to fit your own needs.

The bad-boy is a fluid layout ready for responsive implementations. It contains equal height content and sidebar blocks, making the use of table-ba...

The bad-boy is a fluid layout ready for responsive implementations. It contains equal height content and sidebar blocks, making the use of table-based designs a breeze. This code snippet was based on a project the author had developed recently. It contains all the elements you'd expect from a basic layout.

A complete watercolor pack with the trendiest designs and assets, including textured backgrounds, shapes, stylish wedding flowers, plants and gree...

A complete watercolor pack with the trendiest designs and assets, including textured backgrounds, shapes, stylish wedding flowers, plants and greenery, gems, crystals and minerals, plant vector line art, decorative horns, antlers and arrows, and much more! Only $14!

A simple HTML5 template using LESS. The author, Codepen's user darylsutor, used it as a playground to test out the code and use an HTML5 layout. It...

A simple HTML5 template using LESS. The author, Codepen's user darylsutor, used it as a playground to test out the code and use an HTML5 layout. It has the regular blog components like a menu, the content container, a sidebar, and a simple footer.

This is an example of how Flexbox could be used for website templates. Small squares fit the screen for the user, regardless its size, which could ...

This is an example of how Flexbox could be used for website templates. Small squares fit the screen for the user, regardless its size, which could contain various options. It was developed using HTML and CSS, but there is a small amount of jQuery to allow the navigation to be closed and re-opened. This code snippet was written by Josh Parrett.

A beautifully simple navigation concept basing itself on what is basically a vertical, full-page slider. The idea is to have various buttons which ...

A beautifully simple navigation concept basing itself on what is basically a vertical, full-page slider. The idea is to have various buttons which display a giant icon when clicked, as well as a different background color. This design is also very fit to work with touch devices.

75+ Fonts Typographic Toolbox, Only $19! OTF, TTF, WOFF & WOFF 2 Formats, OpenType Features, Multilanguage Support

75+ Fonts Typographic Toolbox, Only $19! OTF, TTF, WOFF & WOFF 2 Formats, OpenType Features, Multilanguage Support

This is a simple code snippet made by Chris Coyier, in order to form a basic blog post view. It was created with SCSS and HTML and brings a menu, a...

This is a simple code snippet made by Chris Coyier, in order to form a basic blog post view. It was created with SCSS and HTML and brings a menu, a post container and the definite highlight: A 3D button that animates quite smoothly when clicked. It can be used for submit forms of blog entries.

Here we have a nice flat user interface, mainly developed for mobile platforms. It features four buttons, divided into a full screen checkered patt...

Here we have a nice flat user interface, mainly developed for mobile platforms. It features four buttons, divided into a full screen checkered pattern with animated icons. It was created with HTML, CSS and JavaScript. You can easily change the colors that conform the grid.

Clément Guillou from Codepen created this interesting concept for a portfolio, displayed in a useful responsive layout, using CSS and JavaScript. I...

Clément Guillou from Codepen created this interesting concept for a portfolio, displayed in a useful responsive layout, using CSS and JavaScript. It was mostly designed so photographers, illustrators and all kinds of visual artists can showcase their work in a mobile-friendly environment.

459 Photorealistic Objects, Only $15! 4 Scene Creators in 1 (Top View) Includes Backgrounds & Textures, Premade Scenes, Smart Layers.

459 Photorealistic Objects, Only $15! 4 Scene Creators in 1 (Top View) Includes Backgrounds & Textures, Premade Scenes, Smart Layers.

This code snippet created with CSS, HTML and JavaScript helps you make a nice lateral menu for your website or blog. It makes clever use of icons i...

This code snippet created with CSS, HTML and JavaScript helps you make a nice lateral menu for your website or blog. It makes clever use of icons in order to fit more options for the user. After clicking a button, an animation will bring another menu with more in-depth selections. The rest of the website is also a nice experiment that you can use as a template.

This code snippet provides and effective way to display a responsive website that will rearrange content in a way that keeps the most important mat...

This code snippet provides and effective way to display a responsive website that will rearrange content in a way that keeps the most important material on top, gradually putting all the section in their correct order. Less important content also occupies a lower amount of space, letting you display various elements in the same line.

Here we have a set of UI elements made in HTML and LESS. This free download includes menus, search bars, login forms, sidebar menus, headings, text...

Here we have a set of UI elements made in HTML and LESS. This free download includes menus, search bars, login forms, sidebar menus, headings, texts, images (with different styles) and a bunch of buttons. Everything comes in three different colors and with nice hover effects.

Massive 7k+ Icons Collection, Ai, Sketch, & EPS File Formats, Extended Commercial License, 4 Best Selling Bundles in 1 for Just $29!

Massive 7k+ Icons Collection, Ai, Sketch, & EPS File Formats, Extended Commercial License, 4 Best Selling Bundles in 1 for Just $29!

A clean responsive layout created by CodePen user cirox. It features a cool set of divisors that will look great on any device and will show your i...

A clean responsive layout created by CodePen user cirox. It features a cool set of divisors that will look great on any device and will show your information in a clean and professional way. You can put a logo, footer and, of course, the main content right on this layout.

A complete set of patterns and modules for responsive design projects. There's a bit of everything here and for any occasion, featuring image grids...

A complete set of patterns and modules for responsive design projects. There's a bit of everything here and for any occasion, featuring image grids, tables, elements for video, navigation, layouts and much, much more. You are also able to submit your own patterns to the collection.

This is a very useful CSS-only show and hide button created by Gene Locklin. It makes clever use of a checkbox in order to expand and collapse a pi...

This is a very useful CSS-only show and hide button created by Gene Locklin. It makes clever use of a checkbox in order to expand and collapse a piece of content, making the design more space-efficient. Created with pure CSS by Gene Locklin from CSS Deck.

100+ Watercolor Landscape Illustrations, Only $19! Vector Files Ai & EPS, Optimized for Print & Digital Projects, Vibrant Hues & Rich Saturation.

100+ Watercolor Landscape Illustrations, Only $19! Vector Files Ai & EPS, Optimized for Print & Digital Projects, Vibrant Hues & Rich Saturation.

A neat HTML and CSS template with a very simple layout. A big image takes over the top of the design while the rest contains nothing but plain text...

A neat HTML and CSS template with a very simple layout. A big image takes over the top of the design while the rest contains nothing but plain text, over a minimal white background. A stripped-down and effective look, ideal to keep content under the spotlight, without any distractions.

With this useful code snippet, you will be able to create a minimal layout that allows you to show and hide a sidebar at the press of a button, usi...

With this useful code snippet, you will be able to create a minimal layout that allows you to show and hide a sidebar at the press of a button, using a smooth animation. You can apply a slightly different background color to the sidebar so it's easier to identify.

This design brings us a very common RWD pattern that shows header, image and content just like a simple one-column blog. It's a clean layout that h...

This design brings us a very common RWD pattern that shows header, image and content just like a simple one-column blog. It's a clean layout that has been created with a mobile-first approach to ensure the material can be accessed from any device. Written in CSS by Brenna O'Brien.

500 Logo Mockups For $15! 3k Resolution, 115 Categories. Extended Commercial License!

500 Logo Mockups For $15! 3k Resolution, 115 Categories. Extended Commercial License!

A responsive HTML5 and CSS3 design for any blog. It has the regular elements of a website such as a header, menus, featured post frame, content wid...

A responsive HTML5 and CSS3 design for any blog. It has the regular elements of a website such as a header, menus, featured post frame, content widgets and more. Images and links have nice hover effects. The containers have simple shadows and the layout comes in a minimal style. You can always grab the code and modify it, for free.

A coded version of the Windows 8 interface using SASS and JavaScript, created by Ashley Taylor. It includes nice animations and hover effects that ...

A coded version of the Windows 8 interface using SASS and JavaScript, created by Ashley Taylor. It includes nice animations and hover effects that bring the design to life. Some blocks also serve as mini widgets, offering search and app options right away.

This is another version of the Windows 8 Metro UI made entirely in CSS and HTML. It has a very nice style, making thorough use of strong colors and...

This is another version of the Windows 8 Metro UI made entirely in CSS and HTML. It has a very nice style, making thorough use of strong colors and icon fonts, with the effects slightly off the mark. Also, it is not yet entirely functional, lacking interactivity. However, it can be added with JavaScript or jQuery.

3049 Flat Icons, Ai, SVG & PNG Formats, Only $19! 24 Icon Categories, Pixel Perfect Designs, Commercial Use License!

3049 Flat Icons, Ai, SVG & PNG Formats, Only $19! 24 Icon Categories, Pixel Perfect Designs, Commercial Use License!

Sara Soueidan has recreated these icon animations seen on Windows 8′s dashboard by taking advantage of the CSS3 3D transform property. These animat...

Sara Soueidan has recreated these icon animations seen on Windows 8′s dashboard by taking advantage of the CSS3 3D transform property. These animations make tiles slide in various directions, do flips, turns, color variations, half sliding and more. It uses beautiful flat icons and follows the famous Metro style from Microsoft.

Complete website layouts are not that common when they come coded right away, particularly in this type of platform. However, this code snippet has...

Complete website layouts are not that common when they come coded right away, particularly in this type of platform. However, this code snippet has just that, a full simple website using HTML, CSS and JavaScript to achieve a flat, straight to the point kind of look. Created by Rick Butterfield.

The uber-famous Pinterest grid layout is recreated using nothing but CSS. Apart from images and text, there are additional elements added such as h...

The uber-famous Pinterest grid layout is recreated using nothing but CSS. Apart from images and text, there are additional elements added such as hover effects, animations and frames. Go ahead and get the code to give your next project a classy, familiar feel.

6300+ Material Design Icons, Only $14! Vector Files Ai & SVG, Extended License, 24+ Industries From Web Design Icons to Medical, Education, & Multi...

6300+ Material Design Icons, Only $14! Vector Files Ai & SVG, Extended License, 24+ Industries From Web Design Icons to Medical, Education, & Multimedia Icons.

This article will show us a tutorial on how to create a completely responsive layout with super smooth transitions. The idea is to have some button...

This article will show us a tutorial on how to create a completely responsive layout with super smooth transitions. The idea is to have some buttons on the bottom that will animate the whole page and show different content through a smooth scrolling effect.