careers.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=, initial-scale=1.0" />
    <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=Lexend+Deca&family=Space+Mono:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./scss/../css/style_3.min.css" />
    <title>Careers</title>
  </head>
  <body>
    <header class="header">
      <div class="container">
        <nav class="nav">
          <nav class="nav__logo">
            <img src="images/scoot.svg" alt="" class="nav__logo" />
          </nav>
          <ul class="nav__ul">
            <li class="nav__ul_li">
              <a href="about.html" class="nav__ul_li-link">About</a>
            </li>
            <li class="nav__ul_li">
              <a href="locations.html" class="nav__ul_li-link">Location</a>
            </li>
            <li class="nav__ul_li">
              <a href="careers.html" class="nav__ul_li-link">Careers</a>
            </li>
          </ul>
          <button class="nav__btn">Get Scootin</button>
        </nav>
      </div>
      <div class="header__about">
        <div class="container">
          <h1 class="header__about_h1">Careers</h1>
        </div>
      </div>
    </header>
    <!-- =========INTRO SECTION START========== -->
    <section class="intro">
      <div class="container">
<section class="wrapper">
  <div class="container">
    <div class="wrapper__block">
      <div class="wrapper__block--grid">
          <h3>Mobility for the  digital era</h3>
          <p>Getting around should be simple (and even fun!) for <br> everyone. We embrace technology to provide
              low cost, smart <br> access to scooters at your fingertips.</p>
      </div>
      <div class="wrapper__block--grid">
          <img src="./images/Bitmap-carera.svg" alt="">
      </div>
  </div>
  </div>
</section>


        <!-- <div class="wrapper1">
          <div class="wrapper1__title">
            <h2 class="wrapper1__title_h2">Mobility for the digital era</h2>
            <p class="wrapper1__title_p">
              Getting around should be simple (and even fun!) for everyone. We
              embrace technology to provide low cost, smart access to scooters
              at your fingertips.
            </p>
            <button class="wrapper1__title_btn">Say Hello</button>
          </div>

          <div class="wrapper1__img">
        <img src="./images/Bitmap-carera.svg" alt="">
          </div>
        </div> -->
        <!-- =======Wrapper2==== -->
        <div class="wrapper3">
          <h1 class="wrapper3__h1">Our values</h1>
          <div class="wrapper3__img">
            <img src="./images/Group 11.png" alt="" class="" />
            <img src="./images/Group 24.png" alt="" class="" />
            <img src="./images/Group 12.png" alt="" class="" />
          </div>
          <div class="wrapper3__card">
            <div class="wrapper3__text">
              <h3 class="wrapper3__text_h3">Our tech</h3>
              <p class="wrapper3__text_p">
                We’re using cutting edge technology to drive accessible urban
                transportation forward. Our fully electric scooters are a joy to
                ride!
              </p>
            </div>

            <div class="wrapper3__text">
              <h3 class="wrapper3__text_h3">Our integrity</h3>
              <p class="wrapper3__text_p">
                We are fully committed to deliver a great yet safe, sustainable
                micro-mobility experience in every city we serve.
              </p>
            </div>

            <div class="wrapper3__text">
              <h3 class="wrapper3__text_h3">Our community</h3>
              <p class="wrapper3__text_p">
                We support every community we serve. All workers are paid a
                living wage based on their location and are Scoot employees.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- =========HERO SECTION START========== -->
    <section class="hero">
      <div class="container">
        <!-- ======1====== -->
        <div class="hero__card">
          <div class="hero__card_title">
            <h3 class="hero__card_title-h3">General Manager</h3>
            <p class="hero__card_title-p">Jakarta, Indonesia</p>
          </div>
          <button class="hero__card_btn">Apply</button>
        </div>

        <!-- ======2====== -->
        <div class="hero__card">
          <div class="hero__card_title">
            <h3 class="hero__card_title-h3">UI/UX Designer</h3>
            <p class="hero__card_title-p">Yokohama, Japan</p>
          </div>
          <button class="hero__card_btn">Apply</button>
        </div>
        <!-- ======3====== -->
        <div class="hero__card"> 
          <div class="hero__card_title">
            <h3 class="hero__card_title-h3">Blog Content Copywriter</h3>
            <p class="hero__card_title-p">New York, United States</p>
          </div>
          <button class="hero__card_btn">Apply</button>
        </div>
        <!-- ======4====== -->
        <div class="hero__card">
          <div class="hero__card_title">
            <h3 class="hero__card_title-h3">Graphic Designer</h3>
            <p class="hero__card_title-p">New York, United States</p>
          </div>
          <button class="hero__card_btn">Apply</button>
        </div>
        <!-- ======5====== -->
        <div class="hero__card">
          <div class="hero__card_title">
            <h3 class="hero__card_title-h3">Fleet Supervisor</h3>
            <p class="hero__card_title-p">Jakarta, Indonesia</p>
          </div>
          <button class="hero__card_btn">Apply</button>
        </div>
        <!-- ======6====== -->
        <div class="hero__card">
          <div class="hero__card_title">
            <h3 class="hero__card_title-h3">UX Analyst</h3>
            <p class="hero__card_title-p">London, United Kingdom</p>
          </div>
          <button class="hero__card_btn">Apply</button>
        </div>
      </div>
    </section>

    <!-- ===========FOOTER START=========== -->

    <footer class="footer">
      <div class="footer__block1">
        <div class="container">
          <h2 class="footer__block1_h2">Sign up and Scoot off today</h2>
          <div class="footer__block1_wrapper">
            <div class="footer__block1_apple">
              <img
                src="./images//Group 28.png"
                alt=""
                class="footer__block1_apple"
              />
            </div>

            <div class="footer__block1_google">
              <img
                src="./images/Group 29.png"
                alt=""
                class="footer__block1_google"
              />
            </div>
          </div>
        </div>
      </div>

      <div class="footer__block2">
        <div class="container">
          <div class="footer__block_wrapper">
            <img src="./images/scoot.svg" alt="" class="footer__block2_img" />
            <ul class="footer__block2_ul">
              <li class="footer__block2_ul-li">
                <a href="#" class="footer__block2_link">About</a>
              </li>
              <li class="footer__block2_ul-li">
                <a href="#" class="footer__block2_link">Location</a>
              </li>
              <li class="footer__block2_ul-li">
                <a href="#" class="footer__block2_link">Careers</a>
              </li>
            </ul>
          </div>
          <div class="footer__block2_wrapper2">
            <img
              src="./images/Path.png"
              alt=""
              class="footer__block2_facebook"
            />

            <img
              src="./images/twitter.png"
              alt=""
              class="footer__block2_twitter"
            />
            <img src="./images/insta.png" alt="" class="footer__block2_insta" />
          </div>
        </div>
      </div>
    </footer>
  </body>
</html>