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

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

--light-steel-blue: hsl(218, 33%, 77%);
--royal-blue-light: hsl(225, 68%, 53%);
--flickr-blue_30: hsla(225, 68%, 53%, 0.3);
--carolina-blue: hsl(201, 92%, 47%);
--oxford-blue-1: hsl(218, 70%, 18%);
--oxford-blue-2: hsl(217, 100%, 12%);
--oxford-blue-3: hsl(218, 71%, 11%);
--gainsboro_50: hsla(0, 0%, 85%, 0.5);
--lavender-web: hsl(225, 67%, 91%);
--sonic-silver: hsl(0, 0%, 47%);
--light-gray: hsl(0, 0%, 84%);
--cultured: hsl(0, 0%, 97%);
--black_10: hsla(0, 0%, 0%, 0.1);
--black_8: hsla(0, 0%, 0%, 0.08);
--white: hsl(0, 0%, 100%);
--black: hsl(0, 0%, 0%);
--jet: hsl(0, 0%, 20%);

Gradient color

--gradient: linear-gradient( 90deg, var(--carolina-blue) 0%, var(--royal-blue-light) 100%);

Typography

--ff-roboto: "Roboto", sans-serif;
--ff-poppins: "Poppins", sans-serif;

--fs-1: 4rem;
--fs-2: 3.6rem;
--fs-3: 3.2rem;
--fs-4: 2.4rem;
--fs-5: 2.2rem;
--fs-6: 1.8rem;
--fs-7: 1.6rem;

--fw-800: 800;
--fw-700: 700;
--fw-600: 600;
--fw-500: 500;

Spacing

--section-padding: 120px;

Shadow

--shadow-1: 4px 4px 15px var(--black_10);
--shadow-2: 0 10px 15px var(--black_10);
--shadow-3: 0px 20px 60px var(--black_8);
--shadow-4: 0px 10px 30px var(--flickr-blue_30);
--shadow-5: 0px 2px 60px 0px var(--black_10);

Border Radius

--radius-6: 6px;
--radius-4: 4px;

Transition

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