@fortawesome/free-solid-svg-icons#faEnvelope JavaScript Examples

function TitleBar() {
    const closeWindow = () => {
        window.close();
    }

    return (
        <TitleBarDiv>
            <ButtonsDiv>
                <CloseButton onClick={closeWindow}>X</CloseButton>
            </ButtonsDiv>
            <TitleDiv>
                <a href='https://github.com/aavshr/aava.sh'>aava.sh</a>
            </TitleDiv>
            <LinksDiv>
                <a href="https://github.com/aavshr">
                    <FontAwesomeIcon icon={faGithub}/>
                </a>
                <a href="https://twitter.com/aav_shr">
                    <FontAwesomeIcon icon={faTwitter}/>
                </a>
                <a href="https://linkedin.com/in/aavshr">
                    <FontAwesomeIcon icon={faLinkedin}/>
                </a>
                <a href="mailto:[email protected]">
                    <FontAwesomeIcon icon={faEnvelope}/>
                </a>
            </LinksDiv>
        </TitleBarDiv>
    );
}

export default function TopBanner() {
  return (
    <div className="top-banner-container">
      <div className="row">
        <div className="col-lg-3">
          <FontAwesomeIcon icon={faPhone} className="top-banner-icon" />
          +0199999999
        </div>
        <div className="col-lg-3">
          <FontAwesomeIcon icon={faEnvelope} className="top-banner-icon" />
          [email protected]
        </div>
        <div className="col-lg-6">
          On sale now up to 50% off!
          <Link to="/shop" className="shop_now_link_top_banner">
            Shop now
          </Link>
        </div>
      </div>
    </div>
  );
}

GithubCard = ({ name, username, description, twitter, email, image, url, blog, location, from, repo }) => {
  return (
    <div>
      <div className="card">
        {image ? <div className="card-img-div">
          <img src={image} alt="Profile-img" className="card-img" />
        </div> : null}
        {name ? <h4 className="card-title">
          {name}
        </h4> : null}
        {username ? <p className="card-para">
          {'@' + username}
        </p> : null}
        {description ? <p className="card-para">
          {description}
        </p> : null}
        {location ? <p className="card-para">
          <FontAwesomeIcon icon={faMapMarkerAlt} style={{color:'#51ad28'}} /> {location}
        </p> : null}
        <p className="card-para">
          {url ? <Link to={url} className="btn">GitHub</Link> : null}
          {blog ? <Link to={blog} className="btn">Blog</Link> : null}
        </p>
        {repo ? <p className="card-para">
          {repo} Repositories
        </p> : null}
        {from ? <p className="card-para">
          Active since <span className="active-since">{moment(from).format("MMMM Do YYYY")}</span>
        </p> : null}
        {twitter ? <div style={{ margin: "5px 0 0 10px" }}>
            <a className="anchor" href={`https://twitter.com/${twitter}`}><FontAwesomeIcon icon={faTwitter} style={{color:'#377293'}} /></a>
        </div> : null}
        {email ? <div style={{ margin: "5px 0 0 15px" }}>
            <a className="anchor" href={`mailto:${email}`}><FontAwesomeIcon icon={faEnvelope} style={{color:'#377293'}} /></a>
        </div> : null}
      </div>
    </div>
    )
}

Footer = () => {
  return (
    <footer id="footer">
      <div className="flex-row-container flex-center small smallest">
        <div className="footer-links">
          <a href="https://github.com/philgresh/">
            <FontAwesomeIcon icon={faGithub} color="inherit" />
          </a>
          <a href="https://www.linkedin.com/in/philgresham">
            <FontAwesomeIcon icon={faLinkedin} color="inherit" />
          </a>
          <a href="https://gresham.dev">
            <FontAwesomeIcon icon={faHome} color="inherit" />
          </a>
          <EmailObfuscation>
            <FontAwesomeIcon icon={faEnvelope} color="inherit" />
          </EmailObfuscation>
          <a href="https://github.com/philgresh/signdocs">
            <FontAwesomeIcon icon={faCodeBranch} color="inherit" />
          </a>
        </div>
      </div>
    </footer>
  );
}

test('Should render component without crash', () => {
  const dom = <LteNotificationNavItem icon={faEnvelope} message={message} date={date} href={href} />;
  const { container } = render(dom, { wrapper: MemoryRouter });

  expect(container.querySelector('a').getAttribute('href')).toEqual('/default');
  expect(container.querySelector('svg').getAttribute('class')).toContain('fa-envelope');
  expect(container.querySelector('span').innerHTML).toEqual(message);
  expect(container.querySelector('p').innerHTML).toEqual(date);
});

demoData = [
  {
    id: 1,
    icon: faEnvelope,
    message: '4 new messages',
    date: '3 mins',
    href: '/notification/1',
  },
  {
    id: 2,
    icon: faUsers,
    message: '8 friend requests',
    date: '12 hours',
    href: '/notification/2',
  },
  {
    id: 3,
    icon: faFile,
    message: '3 new reports',
    date: '2 days',
    href: '/notification/3',
  },
]

export default function Links() {
  return (
    <ul className="list-group list-group-horizontal">
      <li className="list-group-item">
        <a
          href="mailto:[email protected]"
          target="_blank"
          rel="noreferrer"
          alt="email link"
        >
          <FontAwesomeIcon icon={faEnvelope} />
        </a>
      </li>
      <li className="list-group-item">
        <a
          href="https://github.com/yezz123"
          target="_blank"
          rel="noreferrer"
          alt="github link"
        >
          <FontAwesomeIcon icon={faGithub} />
        </a>
      </li>
      <li className="list-group-item">
        <a
          href="https://linkedin.com/in/yezz123"
          target="_blank"
          rel="noreferrer"
          alt="linkedin link"
        >
          <FontAwesomeIcon icon={faLinkedin} />
        </a>
      </li>
      <li className="list-group-item">
        <a
          href="https://twitter.com/THyasser1"
          target="_blank"
          rel="noreferrer"
          alt="twitter link"
        >
          <FontAwesomeIcon icon={faTwitter} />
        </a>
      </li>
    </ul>
  )
}

EnvelopIcon = makeFAIcon(faEnvelope)

library.add(fab, faEnvelope, faPaperclip, faExternalLinkAlt, faFire, faCross)

UserLinks = (props) => {
  const { config } = props;

  const getLinkIcons = (icon) => {
    switch (icon) {
      case 'faGithub':
        return <FontAwesomeIcon icon={faGithub} />;
      case 'faTwitter':
        return <FontAwesomeIcon icon={faTwitter} />;
      case 'faEnvelope':
        return <FontAwesomeIcon icon={faEnvelope} />;
      case 'faMedium':
        return <FontAwesomeIcon icon={faMedium} />;
      case 'faDev':
        return <FontAwesomeIcon icon={faDev} />;
    }
  };

  const getLinkElements = () => {
    const { userLinks } = config;
    return userLinks.map((link) => (
      <a
        href={link.url}
        target="_blank"
        rel="noopener noreferrer"
        key={link.label}
      >
        {getLinkIcons(link.iconClassName)}
        <div className="user-link-text">{link.label}</div>
      </a>
    ));
  };

  const { userLinks, siteRss } = config;
  if (!userLinks) {
    return null;
  }
  return (
    <div className="user-links">
      {getLinkElements()}
      <a href={siteRss} target="_blank" rel="noopener noreferrer">
        <FontAwesomeIcon icon={faRssSquare} />
        <div>RSS</div>
      </a>
    </div>
  );
}

function footer() {
  return (
    <footer>
      <nav className={componentStyles.footerNav}>
        <Connect className={componentStyles.connectLogo} alt={`Connect Logo`} />
        <div className={componentStyles.socials}>
          <a
            href="https://www.meetup.com/freeCodeCamp-Nashville/"
            aria-label="Meetup"
            rel="noopener noreferrer"
            target="_blank"
          >
            <FontAwesomeIcon icon={faMeetup} size="1x" color="#444444" />
          </a>
          <a
            href="https://discord.gg/cX9BkKrAPV"
            aria-label="Discord"
            rel="noopener noreferrer"
            target="_blank"
          >
            <FontAwesomeIcon icon={faDiscord} size="1x" color="#444444" />
          </a>
          <a
            href="https://nashdev.com/"
            aria-label="Slack"
            rel="noopener noreferrer"
            target="_blank"
          >
            <FontAwesomeIcon icon={faSlack} size="1x" color="#444444" />
          </a>
          <a
            href="https://github.com/nashvillefcc/"
            aria-label="GitHub"
            rel="noopener noreferrer"
            target="_blank"
          >
            <FontAwesomeIcon icon={faGithub} size="1x" color="#444444" />
          </a>
          <a
            href="https://twitter.com/nashvillefcc/"
            aria-label="Twitter"
            rel="noopener noreferrer"
            target="_blank"
          >
            <FontAwesomeIcon icon={faTwitter} size="1x" color="#444444" />
          </a>
          <a
            href="https://www.facebook.com/groups/free.code.camp.nashville/permalink/1479740658703738/"
            aria-label="Facebook"
            rel="noopener noreferrer"
            target="_blank"
          >
            <FontAwesomeIcon icon={faFacebook} size="1x" color="#444444" />
          </a>
        </div>
        <div className={componentStyles.emailAndCopyright}>
          <div>
            <a
              href="mailto:[email protected]"
              className={componentStyles.emailLink}
            >
              <FontAwesomeIcon icon={faEnvelope} size="2x" color="white" />
              <p className={componentStyles.emailName}>[email protected]</p>{' '}
              {/* This will change to something else once we setup a domain */}
            </a>
            <p>© 2021 FreeCodeCamp Nashville</p>
          </div>

          <a href="https://www.netlify.com">
            <img
              src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg"
              alt="Deploys by Netlify"
            />
          </a>
        </div>
      </nav>
    </footer>
  );
}

envelope = <FontAwesomeIcon icon={faEnvelope} size='2x' color='white' />

library.add(fab, faEnvelope, faPaperclip, faExternalLinkAlt, faFire, faCross)

ContactPage = () => {
  return (
    <Layout>
      <div className="contact-container page-body">
        <Helmet title={`Contact | ${config.siteTitle}`} />
        <h1>Contact</h1>
        <section>
          <h2 className="constact-no-underline">
            Thanks again for visiting my site, I hope you like it.
            <br />
            If you'd like to get in touch...
          </h2>
        </section>
        <section>
          <h2>
            Send me an email&nbsp;
            <FontAwesomeIcon icon={faEnvelope} />
          </h2>
          <p>
            If you'd like to say "hi" or want to talk, feel free to reach me at
            &nbsp;
            <a
              href="#mailgo"
              data-address="hellopaigen"
              data-domain="gmail.com"
            >
              hellopaigen&nbsp;@&nbsp;gmail.com
            </a>
            .
          </p>
        </section>
        <section>
          <h2>
            Follow me & chat on social media&nbsp;
            <FontAwesomeIcon icon={faTwitter} />
          </h2>
          <ul>
            <li>
              I'm on Twitter at&nbsp;
              <a
                href="https://twitter.com/pniedri"
                target="_blank"
                rel="noopener noreferrer"
              >
                @pniedri
              </a>
            </li>
            <li>
              I publish on&nbsp;
              <a
                href="https://paigen11.medium.com"
                target="_blank"
                rel="noopener noreferrer"
              >
                Medium
              </a>
              &nbsp;and&nbsp;
              <a
                href="https://dev.to/paigen11"
                target="_blank"
                rel="noopener noreferrer"
              >
                DEV
              </a>
              &nbsp;under @paigen11.
            </li>
            <li>
              And I've started sharing my IoT projects on&nbsp;
              <a
                href="https://www.hackster.io/paige-niedringhaus"
                target="_blank"
                rel="noopener noreferrer"
              >
                Hackster.io
              </a>
              &nbsp;too.
            </li>
          </ul>
        </section>
        <section>
          <h2>
            Check out my Github profile&nbsp;
            <FontAwesomeIcon icon={faGithub} />
          </h2>
          <p>
            All of the&nbsp;
            <a
              href="https://github.com/paigen11"
              target="_blank"
              rel="noopener noreferrer"
            >
              projects
            </a>
            &nbsp; I build for myself (mostly to learn new stuff) are open
            source, and I'm happy for people to fork them and put them to use.
          </p>
        </section>
        <section>
          <h2>
            Or subscribe to my Substack newsletter&nbsp;
            <FontAwesomeIcon icon={faRssSquare} />
          </h2>
          <p>
            I promise to never send spam, only useful emails about new articles
            I've written or links to talks I've given.
          </p>
          <br />
          <Subscribe />
          <br />
          <br />
          <p>Thanks and have a great day!</p>
        </section>
      </div>
    </Layout>
  );
}

render() {
    const onClick = this.props.onClick;
    const { north, south, east, west } = this.props.directions || {};

    const mapButtonClass = this.props.showMapTooltip
      ? "map-button animated"
      : "map-button";
    const pokeButtonClass = this.state.showPokeOptions
      ? "poke-button focused"
      : "poke-button";

    const room = this.props.currentRoom.room;
    const audio = this.props.rooms[room].audio;
    const roomType = this.props.rooms[room].type;
    const events = this.props.events;
    const users = _.flatten(Object.values(this.props.users));

    const handleClickMap = () => this.props.handleOpenModal("map");
    const handleClickEvents = () => this.props.handleOpenModal("events");
    const handleClickEmail = () => this.props.handleOpenModal("email");

    return (
      <div className="navigation-container">
        <div className="column settings-container">
          <div className="map-button-container">
            {this.props.showMapButton && !this.props.hideSettings && (
              <button
                className={mapButtonClass}
                title={Config.tooltips.map}
                disabled={false}
                onClick={handleClickMap}
              >
                <FontAwesomeIcon icon={faMap} />
              </button>
            )}
            {/* {this.props.showMapTooltip &&
                            <div className="map-tooltip">you have unlocked the party map!</div>
                        } */}
          </div>
          <div className="events-button-container">
            {events && events.length > 0 && !this.props.hideSettings && (
              <button
                className="events-button"
                title={Config.tooltips.events}
                onClick={handleClickEvents}
              >
                <FontAwesomeIcon icon={faCalendar} />
              </button>
            )}
          </div>
          <div className="email-button-container">
            {Config.moderation &&
              !_.isEmpty(Config.moderation.moderatorEmails) && (
                <button
                  className="email-button"
                  title={Config.tooltips.moderator}
                  onClick={handleClickEmail}
                >
                  <FontAwesomeIcon icon={faEnvelope} />
                </button>
              )}
          </div>
          {roomType.toUpperCase() === "CHATSTREAM" &&
          this.props.currentRoom.entered &&
          !this.props.hideSettings ? (
            <div className="chat-button-container">
              <button
                className={mapButtonClass}
                title={Config.tooltips.chat}
                disabled={false}
                onClick={() =>
                  this.setState({ hideChat: !this.state.hideChat })
                }
              >
                <FontAwesomeIcon icon={faCommentAlt} />
              </button>
            </div>
          ) : null}
          <div className="poke-button-container">
            {Config.poke &&
              this.props.isPokingUnlocked &&
              !this.props.hideSettings && (
                <button
                  className={pokeButtonClass}
                  title={Config.tooltips.poke}
                  onClick={this.handleClickPokeButton.bind(this)}
                >
                  <FontAwesomeIcon icon={Config.poke.fontAwesomeIcon} />
                </button>
              )}
            {this.state.showPokeOptions && (
              <PokeOptions
                users={users}
                handlePoke={this.handlePoke.bind(this)}
              />
            )}
          </div>
          <div className="audio-button-container">
            {audio && (
              <AudioPlayer
                src={audio.path}
                autoPlay={audio.autoPlay}
                hide={audio.hideControls}
                onChange={this.handleAudioChanged.bind(this)}
              ></AudioPlayer>
            )}
          </div>
        </div>
        <div className="column">
          <button
            className="west"
            disabled={!west}
            onClick={() => onClick(west)}
          >
            <FontAwesomeIcon icon={faArrowLeft} />
            <span className="navigation-room-name">
              {_.get(this.props.rooms[west], "name")}
            </span>
          </button>
        </div>
        <div className="column">
          <button
            className="north"
            disabled={!north}
            onClick={() => onClick(north)}
          >
            <FontAwesomeIcon icon={faArrowUp} />
            <span className="navigation-room-name">
              {_.get(this.props.rooms[north], "name")}
            </span>
          </button>
          <button
            className="south"
            disabled={!south}
            onClick={() => onClick(south)}
          >
            <FontAwesomeIcon icon={faArrowDown} />
            <span className="navigation-room-name">
              {_.get(this.props.rooms[south], "name")}
            </span>
          </button>
        </div>
        <div className="column">
          <button
            className="east"
            disabled={!east}
            onClick={() => onClick(east)}
          >
            <FontAwesomeIcon icon={faArrowRight} />
            <span className="navigation-room-name">
              {_.get(this.props.rooms[east], "name")}
            </span>
          </button>
        </div>
        <div className="column column-avatar">
          <div className="puck-wrapper">
            <img
              src={
                Config.avatars[this.props.user.avatar.type].images[
                  this.props.user.avatar.color
                ]
              }
            />
          </div>
        </div>
      </div>
    );
  }

Footer = () => {
  return (
    <React.Fragment>
      <footer className={style["footer"]}>
        <div className={style["footer-addr"]}>
        <img src={images} alt="img" height="60px" width="260px" />
          <address>
            <div style={{color:"#da6d28"}}><b>MAILING ADDRESS </b></div>
            <i className="fas fa-map-marker-alt"></i> 123 Anywhere St., Any City, State, Country 12345
            <br />
          </address>
          <div style={{color:"#da6d28"}}><b>EMAIL ADDRESS </b></div>
            [email protected]
            
        </div>
        <ul className={style["footer-nav"]}>
          <li className={style["nav-item"]}>
            <h2 className={style["nav-title"]}>NAVIGATION</h2>

            <ul className={style["nav-ul"]}>
              <li>
                <Link to="/">About Us</Link>
              </li>

              <li>
                <Link to="/">Contact</Link>
              </li>

              <li>
                <Link to="/">Event</Link>
              </li>

              <li>
                <Link to="/faqs">FAQs</Link>
              </li>
            </ul>
          </li>

          <li className={style["nav-item"]}>
            <h2 className={style["nav-title"]}>OTHER</h2>

            <ul className={style["nav-ul"]}>
              <li>
                <Link to="/">Privacy Policy</Link>
              </li>

              <li>
                <Link to="/">Terms of Use</Link>
              </li>

              <li>
                <Link to="/">Code of Conduct</Link>
              </li>
            </ul>
          </li>
          <li className={style["nav-item"]}>
            <h2 className={style["nav-title"]}>SOCIAL</h2>
            <ul className={style["nav-ul"]}>
              <li>Be sure to give us a follow on the below social links</li>
            </ul>
            <div className={`col ${style["col"]}`}>
              <ul className={style["social"]}>
                <li>
                  <a
                    href="https://www.facebook.com/Girlscript"
                    target="_blank"
                    rel="noopener noreferrer"
                  ><FontAwesomeIcon icon={faFacebook} size="lg" style={{ color: "#fff" }}/>
                  </a>
                </li>
                <li>
                  <a
                    href="https://twitter.com/girlscript1"
                    target="_blank"
                    rel="noopener noreferrer"
                  ><FontAwesomeIcon icon={faTwitter} size="lg" style={{ color: "#fff" }}/>
                  </a>
                </li>
                <li>
                  <a
                    href="mailto:[email protected]"
                    target="_blank"
                    rel="noopener noreferrer"
                  ><FontAwesomeIcon icon={faEnvelope} size="lg" style={{ color: "#fff" }}/>
                  </a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
        <div className={style["footer-dash"]}>
          <div className={style["footer-text"]}> 
            <p>
              <b>Made with <FontAwesomeIcon icon={faHeart} style={{ color: "#DB3328" }}/> by
              GirlScript Community</b>
            </p>
          </div>
        </div>
      </footer>
    </React.Fragment>
  );
}

export default function Footer() {
  const date = new Date();
  const dateyear = date.getFullYear();
  return (
    <div className="main-footer">
      <div className="main-footer-container">
        <div className="main-footer-content">
          <div className="row">
            <div className="col-lg-4">
              <h2>Clayma store</h2>
              <p>
                We are providing high quality services with 100% satisfaction
                guarantee.
              </p>
              <div className="main-footer-payment">
                <ul>
                  <li>
                    <a href="/">
                      <img
                        src={AmericanexpressCardIcon}
                        alt="americaExpress"
                      />
                    </a>
                  </li>
                  <li>
                    <a href="/">
                      <img src={CirrusCardIcon}
                       alt="CirrusCardIcon" />
                    </a>
                  </li>
                  <li>
                    <a href="/">
                      <img
                        src={MaterCardCardIcon}
                        alt="MaterCardCardIcon"
                      />
                    </a>
                  </li>
                  <li>
                    <a href="/">
                      <img src={PaypalCardIcon} 
                      alt="PaypalCardIcon" />
                    </a>
                  </li>
                  <li>
                    <a href="/">
                      <img src={VisaCardIcon} alt="VisaCardIcon" />
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <div className="col-lg-4">
              <h2>Contact us</h2>
              <h5>
                <FontAwesomeIcon icon={faMapMarker} className="footer-icons" />
                Empire Road, Somewhere , on Earth
              </h5>
              <h5>
                <FontAwesomeIcon icon={faPhone} className="footer-icons" />{" "}
                +2111 555 555 54
              </h5>
              <h5>
                <FontAwesomeIcon icon={faEnvelope} className="footer-icons" />{" "}
                [email protected]
              </h5>
              <h5>
                <FontAwesomeIcon icon={faGlobe} className="footer-icons" />{" "}
                www.claymastore.com
              </h5>

              <h3> Customer Care</h3>

              <h5>
                <FontAwesomeIcon icon={faClock} className="footer-icons" /> Mon.
                - Fri. 8am to 5pm
              </h5>
              <h5>
                <FontAwesomeIcon icon={faClock} className="footer-icons" /> Sat.
                8am to 11am
              </h5>
              <h5>
                <FontAwesomeIcon icon={faClock} className="footer-icons" /> Sun.
                <span> Closed</span>
              </h5>
            </div>
            <div className="col-lg-4">
              <h2>My Account</h2>
              <h5>Shopping Cart</h5>
              <h5>My Account</h5>
              <h5>Checkout</h5>
              <h5>Delivery</h5>
              <h5>Your Orders</h5>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col-lg-12 main-footer-copyright">
            <p>Copyright &copy; {dateyear}. All Right reserved.</p>
            <hr />
          </div>
        </div>
      </div>
    </div>
  );
}

render() {
    return (
      <StaticQuery
        query={graphql`
          query footerTitleQuery {
            site {
              siteMetadata {
                title
              }
            }
          }
        `}
        render={data => (
          <>
            <footer>
              <div className="container py-4">
                <div className="row justify-content-center mt-2">
                  <ul className="list-style-none">
                    <li className="list-inline-item ml-2">
                      <Link
                        to="header"
                        className="link"
                        smooth={true}
                        role="button"
                        aria-label="To the top"
                      >
                        <FontAwesomeIcon icon={faArrowUp} />
                      </Link>
                    </li>
                    <li className="list-inline-item mr-4" alt="site title">
                      &copy; {new Date().getFullYear()}{" "}
                      <a href="/">{data.site.siteMetadata.title}.</a>
                    </li>
                    <li className="list-inline-item mr-3">
                      <a
                        href="mailto:[email protected]"
                        target="_blank"
                        rel="noreferrer"
                        alt="email"
                      >
                        <FontAwesomeIcon icon={faEnvelope} />
                      </a>
                    </li>
                    <li className="list-inline-item mr-3">
                      <a
                        href="https://github.com/yezz123"
                        target="_blank"
                        rel="noreferrer"
                        alt="github"
                      >
                        <FontAwesomeIcon icon={faGithub} />
                      </a>
                    </li>
                    <li className="list-inline-item mr-3">
                      <a
                        href="https://www.linkedin.com/in/yezz123/"
                        target="_blank"
                        rel="noreferrer"
                        alt="linkedin link"
                      >
                        <FontAwesomeIcon icon={faLinkedin} />
                      </a>
                    </li>
                    <li className="list-inline-item mr-1">
                      <a
                        href="https://twitter.com/THyasser1"
                        target="_blank"
                        rel="noreferrer"
                        alt="twitter link"
                      >
                        <FontAwesomeIcon icon={faTwitter} />
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </footer>
          </>
        )}
      ></StaticQuery>
    )
  }

//FUCNTIONAL COMPONENT

function Footer() {
  return (
    <div className="footer">
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-6 col-sm-3">
            <h5>Links</h5>
            <br />
            <ul className="list-unstyled">
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/aboutus">About</Link>
              </li>

              <li>
                <Link to="/privacy">Privacy Policy</Link>
              </li>
              <li>
                <Link to="/terms">Terms of Service</Link>
              </li>
            </ul>
          </div>
          <div className="col-12 col-sm-3 contactUs">
            <h5>Contact Us</h5>
            <br />
            <div>
              <FontAwesomeIcon icon={faEnvelope} size="md" /> :{' '}
              <a href="mailto:[email protected]">
                [email protected]
              </a>
            </div>
            <a href="https://forms.gle/cL9ECdGDf6njYhV66" target="_blank">
              Feedback
            </a>
          </div>

          <div className="col-12 col-sm-3">
            <div>
              <h5>Follow Us</h5>
              <br />
              <a
                target="_blank"
                className="social_media"
                href="https://www.facebook.com/practicewithcodedigger"
              >
                <FontAwesomeIcon icon={faFacebook} size="2x" />
              </a>
              <a
                target="_blank"
                className="social_media"
                href="https://www.linkedin.com/company/codedigger"
              >
                <FontAwesomeIcon icon={faLinkedin} size="2x" />
              </a>
              <a
                target="_blank"
                className="social_media"
                href="https://github.com/Code-dig-ger"
              >
                <FontAwesomeIcon icon={faGithub} size="2x" />
              </a>
              <a
                target="_blank"
                className="social_media"
                href="https://www.youtube.com/channel/UCY5XRYpEGKT9cpzZmfWvh6A"
              >
                <FontAwesomeIcon icon={faYoutube} size="2x" />
              </a>
            </div>
          </div>
        </div>
        <div className="row justify-content-center">
          <div className="col-auto">
            <p>© Copyright Codedigger 2021</p>
          </div>
        </div>
      </div>
    </div>
  )
}