index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  
  <title>Frontend Mentor | Clipboard landing page</title>
  <link rel="stylesheet" href="./Sass/main.css">
</head>
<body>
  <header>
    <section>
      <img class="logo" src="./images/logo.svg" alt="Company Logo">
    </section>
    <div class="head">
      <h1>A history of everything you copy</h1>
      <h2>
        Clipboard allows you to track and organize everything you 
        copy. Instantly <br> access your clipboard on all your devices.
      </h2>
    </div>
    <div class="btn">
      <a href="#"><button class="iOS"><span>Download for iOS</span></button></a>
      <a href="#"><button class="Mac"><span>Download for Mac</span></button></a>
    </div>
  </header>
  <main>
    <section id="sec1">
      <h2>Keep track of your snippets</h2>
      <p>Clipboard instantly stores any item you copy in the cloud, 
        meaning you can access <br>your snippets immediately on all your devices. Our Mac and iOS apps will help you  <br> organize everything.
      </p>
    </section>
    <section id="sec2">
      <div class="computer-img">
        <img src="./images/image-computer.png" alt="Computer">
      </div>
      <div class="feature">
        <div class="option">
          <h3>Quick Search</h3>
          <p>Easily search your snippets by content, <br> category, web address, application, and more.</p>
        </div>
        <br>
        <div class="option">
          <h3>iCloud Sync</h3>
          <p>Instantly saves and syncs snippets across all <br> your devices.</p>
        </div>
        <br>
        <div class="option">
          <h3>Complete History</h3>
          <p>Retrieve any snippets from the first moment<br> you started using the app.</p>
        </div>
      </div>
    </section>
    <section id="sec3">
      <h2>Access Clipboard Anywhere</h2>
      <p>Whether you’re on the go, or at your computer, you can access all your Clipboard <br>
        snippets in a few simple clicks.
      </p>
      <div class="devices-img">
        <img src="./images/image-devices.png" alt="devices">
      </div>
    </section>
    <section id="sec4">
      <h2>Supercharge your workflow</h2>
      <p>We’ve got the tools to boost your productivity.</p>
      <div class="more-feature">
        <div class="list">
          <img src="./images/icon-blacklist.svg" alt="blacklist">
          <h3>Create blacklists</h3>
          <p>Ensure sensitive information never makes its <br> way to your clipboard  by excluding certain <br> sources.</p>
        </div>
        <div class="list">
          <img src="./images/icon-text.svg" alt="plain text">
          <h3>Plain text snippets</h3>
          <p>Remove unwanted formatting from copied text <br> for a consistent look.</p>
        </div>
        <div class="list">
          <img src="./images/icon-preview.svg" alt="preview">
          <h3>Sneak preview</h3>
          <p>Quick preview of all snippets on your Clipboard <br> for easy access.</p>
        </div>
      </div>
      <div class="companies">
        <img src="./images/logo-google.png" alt="google">
        <img src="./images/logo-ibm.png" alt="ibm">
        <img src="./images/logo-microsoft.png" alt="microsoft">
        <img src="./images/logo-hp.png" alt="hp">
        <img src="./images/logo-vector-graphics.png" alt="vector graphics">
      </div>
    </section>
    <section id="sec5">
      <h2>Clipboard for iOS and Mac OS</h2>
      <p>Available for free on the App Store. Download for Mac or iOS, sync with iCloud 
        and <br> you’re ready to start adding to your clipboard.
      </p>
      <div class="btn">
        <a href="#"><button class="iOS"><span>Download for iOS</span></button></a>
        <a href="#"><button class="Mac"><span>Download for Mac</span></button></a>
      </div>
    </section>
  </main>
  <footer>
    <div class="logo">
      <img src="./images/logo.svg" alt="logo">
    </div>
    <div class="content">
      <div class="data">
        <a href="#"><p>FAQs</p></a>
        <a href="#"><p>Contact Us</p></a>
      </div>
      <div class="data">
        <a href="#"><p>Privacy Policy </p></a>
        <a href="#"><p> Press Kit</p></a>
      </div>
      <div class="data">
        <a href="#"><p>Install Guide</p></a>
      </div>
    </div>
    <div class="social">
      <a href="https://www.facebook.com/profile.php?id=100042703085911"><img src="./images/icon-facebook.svg" alt="facebook"></a>
      <a href="https://twitter.com/DevRath57659120"><img src="./images/icon-twitter.svg" alt="twitter"></a>
      <a href="https://www.instagram.com/imarjunrathore12345/"><img src="./images/icon-instagram.svg" alt="instagram"></a>
    </div>
  </footer>
</body>
</html>


<!-- <p class="attribution">
  Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
  Coded by <a href="#">Your Name Here</a>.
</p> -->