Try using this code for free on Hot Page!
Sign up

Styled Elements

A collection of common building blocks used on many web pages. These include layout elements like grids and carousels, article pieces like pull quotes or asides, and common CSS snippets like centering a block or adding a typeface.

Navbar

Navigation links are vital on the web and many sites feaure a header that let’s readers jump directly to key pages.

Home About Home

Why doesn’t it go all the way to the edge?

If you’re concerned your header is not flush with the edge of the page, it’s likely because you have some padding on the <body> element. There are a couple of ways to resolve this: 

margin: -8px -8px 0 -8px;

Both ways have their advantages and disadvantages and it’s largely up to personal preference and the design you’re building.

Make it sticky

A so-called sticky header is one that stays at the top of the screen, even as the user scrolls down the page. You can achieve this effect with just a few style rules: 

position: sticky;
top: 0;
z-index: 100;

Heading

Most pages need a heading— might as well be classy while you’re at it. Take a look at our list of 40 headings in the Hot Headings library.

The Mock Turtle’s Story

Container

Use this CSS on a container element (or make it a class) to keep content centered on larger screens.
max-width: 800px;
margin: 0 auto;
padding: 16px;

How does this work?

Paragraphs of text are difficult to read when they are too wide because your eye can’t easily find the correct place to continue reading when lines wrap.

Using the max-width property means that our container will shrink to smaller viewports on mobile. So if a phone screen is only 500px wide, the container will fill the screen. It will continue to grow in width as the viewport gets bigger until 800px where its tops.

Adding margin: 0 auto; adds zero vertical margin and centers the element horizontally by using auto margins.

Hero Image

The top of every website these days seems to scream “take action” and asks you to click a button to leave the site. If that’s your vibe take this one for a spin

The Popocatépetl Volcano

Grid

Four Columns

1:2:1 Grid

1:2 Grid

250px Columns, Wrapping

A Trendy Typeface

Web pages are often mostly text and you’ll probably want to add a typeface that makes your text prettier and easier to read. You can grab one from Google fonts and add it like this. Below we’re using the Inter font which looks like this:

The quick brown fox jumps over the lazy dog

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
font-family: Inter, sans-serif;

A Button That Screams “Click Me”

Sometimes we really want web site readers to do something, like signup for a newsletter or click a given link. Subtle changes in button styles can be shockingly good at playing tricks on the mind and producing results.

Photo with Caption

Project Title or What Have You

Lorem ipsum dolor sit amet consectetur adipiscing elit phasellus, malesuada sociis libero sollicitudin torquent habitant convallis quam justo, rutrum massa ligula taciti lacus pharetra dui.

Vertical

Project Title or What Have You

Lorem ipsum dolor sit amet consectetur adipiscing elit phasellus, malesuada sociis libero sollicitudin torquent habitant convallis quam justo, rutrum massa ligula taciti lacus pharetra dui.

Carousel

Article Elements

A short, impactful excerpt from an article or text, highlighted and displayed in a larger, distinctive format.

Lorem ipsum dolor sit amet consectetur adipiscing elit dui, ornare aenean pellentesque eu nostra quisque at elementum risus, dis varius tristique fermentum gravida venenatis laoreet.

Rhoncus arcu enim dapibus posuere vivamus ultricies aptent class, scelerisque dui pellentesque vestibulum tortor sagittis vehicula gravida, purus tempus nisl nostra cras sem inceptos. Ut dapibus tempus pulvinar donec conubia ultricies nibh curabitur sociosqu arcu, posuere condimentum netus fusce aenean mattis blandit eros habitant sem, convallis class felis platea elementum turpis leo sed quam. Sem vulputate conubia nec vestibulum eget inceptos volutpat, ac lectus ullamcorper vehicula feugiat commodo.

Nullam molestie cum platea torquent dui. Quis tellus in pulvinar nunc tincidunt leo imperdiet sagittis hac lectus massa malesuada tortor, dapibus nam dictumst purus mattis phasellus consequat litora id eleifend nullam.

Elementum sociis urna purus ligula aenean condimentum massa, orci quam fermentum molestie tellus sollicitudin cras, luctus dictumst praesent vel nibh metus. Cras tempor sodales commodo gravida netus laoreet lobortis fusce ullamcorper, ultrices mi porta parturient quisque egestas accumsan mollis, auctor libero ultricies vitae erat lacus neque nisi. Vivamus malesuada velit cum dui aliquam luctus aenean porttitor sollicitudin mollis, ligula etiam interdum sem hac diam nostra elementum netus.

A short, impactful excerpt from an article or text, highlighted and displayed in a larger, distinctive format.

Risus nisl rhoncus sed parturient class ad sollicitudin elementum cum aliquam, donec non phasellus facilisis etiam hac dapibus ac. Bibendum commodo class ante netus aenean, mi velit lectus dapibus cursus, tristique per nascetur porttitor. Interdum montes sociis pulvinar dis duis in tortor lobortis gravida, vehicula magna integer tempor ultricies ad pellentesque turpis nulla, rutrum auctor nullam per fringilla nec a sem. Fames netus risus platea vel torquent blandit hendrerit ac ornare imperdiet malesuada, himenaeos suscipit ridiculus ligula ante sem morbi odio duis. Sociosqu phasellus litora magnis dictum proin dui cras ridiculus risus interdum ullamcorper, dis condimentum tellus tempor lacus justo mollis duis dictumst. Magna duis eros fringilla facilisi justo orci donec vehicula auctor scelerisque, aliquet taciti ad lobortis habitasse quam aptent montes est, pellentesque posuere aenean lacus iaculis phasellus sociis vel dis. Nascetur duis semper et est sociis nulla leo, dignissim senectus risus sed netus nec, eu erat non cras accumsan sociosqu.

Fames mauris torquent varius laoreet porttitor maecenas nibh tincidunt rutrum vitae rhoncus pharetra curabitur et natoque erat, penatibus facilisis consequat phasellus eros facilisi aliquam quisque suspendisse a purus nulla auctor platea. Tortor nisi etiam lobortis montes habitant praesent potenti imperdiet aenean primis at, justo rhoncus ante eu nec inceptos congue rutrum porta. Vulputate hac diam enim dis condimentum, pellentesque pharetra aptent mauris in tortor, ad dictum etiam rutrum.

Sagittis luctus donec laoreet senectus nulla metus habitasse nam, odio magnis congue torquent ac est iaculis, erat vehicula a tempor mattis sociosqu diam.

Ligula donec ad consequat ultrices gravida magnis etiam, pretium pharetra proin curae himenaeos egestas vulputate turpis, nibh condimentum nulla libero a dictumst. Facilisis condimentum cubilia non tristique metus mattis eros vehicula tempor, placerat libero purus cum egestas fusce ullamcorper vulputate, accumsan ac turpis aliquet facilisi praesent potenti mi. Ac ridiculus ultrices rutrum porttitor aenean, gravida senectus mattis.

Accordion

What are HTML elements?

On a web page, pretty much everything is an “element.” This paragraph, the menu at the top of the window, the links in the menu—these are all elements. We create elements by writing n HTML, appear in angle brackets, like this <strong>bold text</strong>

What are CSS properties?

Everything about the way that HTML elements appear can be controlled with CSS properties or “styles.” That means things like an element’s sizing, fonts, colors, borders and spacing. CSS is the language for design of every web page. Sometimes it can get frustrating to build complex layouts, but mastering the basics is very easy.

Do I need to have a degree in computer science to build a web page?

No! The fundamental technologies of the web were designed for non-technical people to grasp easily. Although HTML might be considered “code” it’s not a programming language a markup language. CSS can get quite complex but it is declarative. JavaScript is more like progamming but it was also designed to be easy for beginners.

What is responsive web design?

Web pages can be loaded on any number of devices, with different form factors (phone, laptop, tablet, desktop, etc.), aspect ratios (portrait, landscape) and input devices (touch, mouse or even pointer). These days all web pages are expected to have a design that looks good anywhere. Responsive web design means that the page responds to the place where it’s shown, changing the sizes and layout of different elements in a fluid way.

Cards

💡

Feature One

Detail text for the first feature goes here.

🚀

Feature Two

Detail text for the second feature goes here.

🔒

Feature Three

Detail text for the third feature goes here.