# Essential Stuff

## Html import links

Google font

``` html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&family=Rubik:wght@400;500;600;700&family=Shadows+Into+Light&display=swap"
  rel="stylesheet">
```

Ionicon

``` html
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
```

---

## Colors

``` css
--rich-black-fogra-29: hsl(210, 26%, 7%);
--champagne-pink_20: hsla(23, 61%, 86%, 0.2);
--independence_30: hsla(245, 17%, 29%, 0.3);
--gray-x-11-gray: hsl(0, 0%, 73%);
--champagne-pink: hsl(23, 61%, 86%);
--spanish-gray: hsl(0, 0%, 60%);
--sonic-silver: hsl(0, 0%, 47%);
--deep-saffron: hsl(32, 100%, 59%);
--dark-orange: hsl(28, 100%, 58%);
--desert-sand: hsl(23, 49%, 82%);
--isabelline: hsl(38, 44%, 96%);
--gainsboro: hsl(0, 0%, 87%);
--tangerine: hsl(31, 84%, 50%);
--cinnabar: hsl(3, 90%, 55%);
--black_95: hsla(0, 0%, 0%, 0.95);
--cultured: hsl(0, 0%, 93%);
--white: hsl(0, 0%, 100%);
--black: hsl(0, 0%, 0%);
--onyx: hsl(0, 0%, 27%);
```

## Typography

``` css
--ff-shadows-into-light: 'Shadows Into Light', cursive;
--ff-roboto: 'Roboto', sans-serif;
--ff-rubik: 'Rubik', sans-serif;

--fs-1: 3.2rem;
--fs-2: 2.2rem;
--fs-3: 1.8rem;
--fs-4: 1.4rem;
--fs-5: 1.2rem;

--fw-500: 500;
--fw-600: 600;
--fw-700: 700;
```

## Spacing

``` css
--section-padding: 60px;
```

## Shadow

``` css
--shadow-1: 0 1px 4px hsla(0, 0%, 0%, 0.2);
--shadow-2: 0 1px 2px hsla(0, 0%, 0%, 0.2);
```

## Transition

``` css
--transition-1: 0.25s ease;
--transition-2: 0.5s ease;
```

## Clip path

``` css
--clip-path-1: polygon(0 40%, 100% 0%, 100% 100%, 0 100%);
--clip-path-2: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
```
