Responsive web design

About this template

nico:rewede by Nicolás Ibáñez is a responsive web design licensed under CC BY-SA 4.0

If you want to use it on your website, include the following HTML code in it, for example in its footer:

<span xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/">This site uses <a property="dct:title" rel="cc:attributionURL" target="_blank" href="https://nicolasim.com/template/">nico:rewede</a>, a responsive web design by <a property="cc:attributionName" rel="cc:attributionURL dct:creator" target="_blank" href="https://nicolasim.com/">Nicolás Ibáñez</a>, licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-SA 4.0 <img style="display:inline;height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"><img style="display:inline;height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"><img style="display:inline;height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg?ref=chooser-v1"></a></span>

This code will result in:

If you want to adapt or build upon it, include the following text at the beginning of your CSS:

/*
Adapted from nico:rewede (https://nicolasim.com/template/),
a responsive web design by Nicolás Ibáñez and licensed under CC BY-SA 4.0
(https://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1)

Consequently, this CSS file is also licensed under CC BY-SA 4.0
*/

Common html elements

Paragraphs & links

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan velit a justo pulvinar, in gravida metus ultricies. Aenean imperdiet tellus nec dolor pretium, a lacinia lectus sollicitudin. Nam ullamcorper dictum eros non luctus. In interdum, urna sed tempus volutpat, velit lacus egestas mauris, ac laoreet dolor est nec erat. Phasellus sed imperdiet eros. Aliquam tincidunt augue enim, at iaculis orci tempor non. Duis elit ligula, venenatis vel mollis ac, tempus et tortor. Nam tristique vestibulum congue. Phasellus porta ornare ex. Maecenas leo dui, dignissim efficitur mattis vel, tempus eget lectus. Cras eleifend urna quis eleifend cursus. Sed sollicitudin feugiat lectus, at porta lectus porttitor eu.

Pellentesque ornare erat at magna finibus luctus. Vestibulum convallis volutpat tellus sit amet aliquam. Quisque sed orci at orci mattis maximus. Praesent condimentum velit leo, nec vulputate dui dapibus sed. Mauris eu elementum est. Proin aliquet, massa in venenatis ullamcorper, nulla sem gravida ante, Pvel sagittis arcu turpis vel tellus. Fusce ac ipsum enim.

Headers

H1: Header 1

H2: Header 2

H3: Header 3

H4: Header 4

Lists

Ordered list

1. Nullam pellentesque maximus semper. Proin interdum, enim non volutpat pulvinar, orci tortor interdum nunc, et imperdiet eros ligula et risus. Ut tortor mauris, varius in magna eu, volutpat egestas ipsum. Aliquam et ullamcorper purus, id consectetur dolor.
2. Curabitur a lectus convallis, tristique ligula non, maximus erat. Suspendisse id justo tortor. Ut tempor elementum tortor quis pretium. Morbi consectetur justo nec sapien euismod, blandit imperdiet metus viverra.
3. Donec dignissim turpis elit, nec tincidunt libero sagittis in. Nam sit amet luctus lorem, quis condimentum ipsum.

Unordered list

• Interdum et malesuada fames ac ante ipsum primis in faucibus.
• In sit amet congue neque. Aenean ac nisl vitae purus sagittis rhoncus.
• Donec lorem turpis, commodo sed interdum nec, pharetra a metus.
• Nulla ultricies, nunc ut iaculis malesuada, turpis nibh scelerisque dui, ac ornare risus dolor eget mi.

Tables

Forms

Text inputs

Small

Medium

Default

Expanded
Disabled

Radio buttons

Red
Green
Blue
Magenta (disabled)

Checkboxes

I have a bike
I have a car
I have a boat
I have a plane (disabled)

Select input

Choose a color: Red Green Blue

Textarea

File input

Select a file:

Content styles

Buttons

Different ways to use buttons, all with the same styles:

<button></button>
<a class="button"></a>
<div class="button"></div>
<input type="button" />
<input type="submit" />
<input type="reset" />

Types

Button Submit Reset

States

Enabled Selected Disabled

Sizes

Auto (default) Small Medium Large Expanded

Buttons bar

Box

Code

Lorem ipsum dolor sit amet consectetur adipiscing, elit potenti lectus urna orci, class aptent hac condimentum arcu. Pulvinar nascetur nec tristique posuere tempor metus cubilia ante rutrum pharetra vehicula maecenas pretium: System.out.println("Hello, World");, consequat quam in cursus odio dignissim vulputate suscipit fames litora mauris. Nulla quam volutpat penatibus lobortis inceptos duis malesuada sociis, congue suspendisse torquent molestie nascetur velit mauris, neque ullamcorper montes dapibus aliquet dictumst quisque.

public class HelloWorld {
    public static void main(String[] args) {
        // Prints "Hello, World" in the terminal window.
        System.out.println("Hello, World");
    }
}

Quote

Media

Single image

Single video (iframe)

Single video (video tag)

Media grid