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=Barlow:wght@600;700&family=Open+Sans:wght@400;500;700&family=Poppins:wght@400;600&display=swap"
  rel="stylesheet">

Ionicon

<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

---

Colors

--cadet-blue-crayola: hsl(240, 10%, 70%);
--gold-web-golden: hsl(50, 100%, 54%);
--vivid-sky-blue: hsl(196, 84%, 63%);
--midnight-blue: hsl(231, 83%, 25%);
--minion-yellow: hsl(50, 100%, 64%);
--independence: hsl(225, 24%, 27%);
--orange-soda: hsl(7, 96%, 61%);
--space-cadet: hsl(243, 23%, 18%);
--fiery-rose: hsl(353, 83%, 65%);
--klein-blue: hsl(230, 80%, 39%);
--bluetiful: hsl(222, 88%, 55%);
--glaucous: hsl(230, 52%, 63%);
--manatee: hsl(254, 7%, 65%);
--rufous: hsl(2, 85%, 35%);
--black: hsl(0, 0%, 0%);
--white: hsl(0, 0%, 100%);

Typography

--ff-open-sans: 'Open Sans', sans-serif;
--ff-barlow: 'Barlow', sans-serif;
--ff-poppins: 'Poppins', sans-serif;

--fs-1: 3.5rem;
--fs-2: 3rem;
--fs-3: 2.4rem;
--fs-4: 2rem;
--fs-5: 1.8rem;
--fs-6: 1.3rem;

--fw-600: 600;
--fw-700: 700;

Border Radius

--radius-5: 5px;
--radius-10: 10px;
--radius-15: 15px;
--radius-20: 20px;

Spacing

--section-padding: 60px;

Shadow

--shadow: 0 -5px 10px var(--manatee);

Transition

--transition-1: 0.05s ease;
--transition-2: 0.25s ease;
--cubic-out: cubic-bezier(0.33, 0.85, 0.56, 1.02);