style-guide.md

Essential Stuff

Html import links

Google font

<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=Oswald:wght@400;500;600;700&family=Rubik:wght@300,400;700&display=swap"
  rel="stylesheet">

Flaticon

<link rel="stylesheet" href="assets/css/flaticon.min.css">

Ionicon

<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

--rich-black-fogra-39_50: hsla(0, 0%, 5%, 0.5);
--rich-black-fogra-39: hsl(0, 0%, 5%);
--indian-yellow_10: hsla(36, 61%, 58%, 0.1);
--indian-yellow: hsl(36, 61%, 58%);
--harvest-gold: hsl(36, 66%, 53%);
--eerie-black-1: hsl(0, 0%, 14%);
--eerie-black-2: hsl(0, 0%, 12%);
--eerie-black-2_85: hsla(0, 0%, 12%, 0.85);
--eerie-black-3: hsl(0, 0%, 8%);
--sonic-silver: hsl(0, 0%, 44%);
--davys-gray: hsl(210, 9%, 31%);
--light-gray: hsl(0, 0%, 80%);
--platinum: hsl(0, 0%, 91%);
--black_30: hsla(0, 0%, 0%, 0.3);
--white_10: hsla(0, 0%, 100%, 0.1);
--white_30: hsla(0, 0%, 100%, 0.3 );
--white_50: hsla(0, 0%, 100%, 0.5);
--white: hsl(0, 0%, 100%);
--jet: hsl(0, 0%, 21%);

Typography

--ff-oswald : 'Oswald', sans-serif;
--ff-rubik: 'Rubik', sans-serif;

--fs-40: 4rem;
--fs-30: 3rem;
--fs-24: 2.4rem;
--fs-18: 1.8rem;
--fs-14: 1.4rem;
--fs-13: 1.3rem;

--fw-300: 300;
--fw-500: 500;
--fw-600: 600;
--fw-700: 700;

Spacing

--section-padding: 80px;

Shadow

--shadow-1: 10px 0 60px hsla(0, 0%, 15%, 0.07);
--shadow-2: 10px 0 60px hsla(0, 0%, 15%, 0.1);

Border Radius

--radius-5: 5px;
--radius-8: 8px;

Transition

--transition-1: 0.25s ease;
--transition-2: 0.5s ease;
--cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);