nico:rewede
A responsive web design
nico:rewede
A responsive web design

# 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

🔆 Light 🌓 Dark 🔽 Download

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:

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

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

Movies
Title | Director | Year
--- | --- | ---
Blade Runner | Ridley Scott | 1982
Pulp Fiction | Quentin Tarantino | 1994
Schindler's List | Steven Spielberg | 1993
Spirited Away | Hayao Miyazaki | 2001

## 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:

### 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

### States

### Sizes

### Buttons bar

Button 1
Button 2
Button 3
Button 4

## Box

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, 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.

Lorem ipsum dolor sit amet consectetur adipiscing

## 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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec est mauris.
Lorem ipsum dolor sit amet

## Media

### Single image

### Single video (iframe)

VIDEO: https://nicolasim.com/template/videos/video1.mp4

### Single video (video tag)

VIDEO: https://nicolasim.com/template/videos/video2.mp4

### Media grid

VIDEO: https://nicolasim.com/template/videos/video1.mp4
VIDEO: https://nicolasim.com/template/videos/video2.mp4