SarahElson

.button{
   padding: 10px 20px;
   border: none;
   border-radius: 10px;
   margin: 0 10px;
}
.primary{
   composes:button;
   background: linear-gradient(91.88deg,#2c57f3 .88%,#a506d8 98.71%);
   color: white;

SarahElson

import React from 'react'
import styles from './Button.module.css'


export default function Button({text,type}) {
 return (
   <button className={styles.button + " " + styles[type]}>{text}</button>
 )
}

SarahElson

.links{
   display: flex;
   flex-direction: row;
   list-style-type: none;
}
.link{
   margin: 0 10px;
}
.anchor{
   text-decoration: none;

SarahElson

import React from 'react'
import styles from './NavLinks.module.css'


const links = ['Platform','Resources','Enterprizes','Developers','Pricing']


export default function NavLinks() {
 return (
       <ul className={styles.links}>

SarahElson

import React from 'react'
import styles from './NavLinks.module.css'


const links = ['Platform','Resources','Enterprizes','Developers','Pricing']


export default function NavLinks() {
 return (
       <ul className={styles.links}>

SarahElson

.navbar{
   display: flex;
   flex-direction: row;
   height: 10vh;
   padding:0 5rem;
   justify-content: space-between;
   align-items: center;
   position: absolute;
   top: 0;
   left: 0;

SarahElson

.app{
   min-height: 100vh;
   background-color: #fafafa;
   width: 100%;
   position: relative;
}

SarahElson

import styles from './App.module.css'
import HeroSection from './components/HeroSection/HeroSection';
import Navbar from './components/Navbar/Navbar';


function App() {
 return (
   <div className={styles.app}>
     <Navbar />
     <HeroSection />

SarahElson

//Import the styles in a JavaScript file
import styles from './Card.module.css'




//use it as an object
<div class={styles.card}>
 {/* Code related to card */}
</div>

SarahElson

.card{
   /* Styles related to the card */
}