search

tongshen9095 / JobRecommendation

0 stars 0 forks source link

html-css example #14

Open tongshen9095 opened 4 years ago

tongshen9095 commented 4 years ago 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Job Recommendation">
  <meta name="author" content="Your Name">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
  <title>Job Recommendation Final</title>
</head>
<body>

  <header class="top-header">
    <nav class="top-nav">
      <a href="#">Home</a>
      <a href="#">Contact</a>
      <a href="#">About</a>
    </nav>
    <span id="welcome-msg"></span>
    <i id="avatar" class="avatar fa fa-user fa-2x"></i>
  </header>

  <div class="container">
    <header>
      <p>
        <span>Job</span>
        <br /> Recommendation
      </p>
    </header>

    <section class="main-section">

      <aside id="item-nav">
        <div class="nav-icon">
          <i class="fa fa-sitemap fa-2x"></i>
        </div>
        <nav class="main-nav">
          <a href="#" id="nearby-btn" class="main-nav-btn active">
            <i class="fa fa-map-marker"></i> Nearby
          </a>
          <a href="#" id="fav-btn" class="main-nav-btn">
            <i class="fa fa-heart"></i> My Favorites
          </a>
          <a href="#" id="recommend-btn" class="main-nav-btn">
            <i class="fa fa-thumbs-up"></i> Recommendation
          </a>
        </nav>
      </aside>

      <ul id="item-list">
        <li class="item">
          <img alt="job image" src="https://jobs.github.com/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBcVZXIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--c2771689af44c596d7935ae1de19a193ac678333/f470d99d-33e6-44f5-ac37-d1237f0a00d1" />
          <div>
            <a class="item-name" href="#">Job</a>
            <p class="item-category">Senior Software Engineer</p>
            <div class="stars">
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
            </div>
          </div>
          <p class="item-address">699 Calderon Ave<br/>Mountain View<br/> CA</p>
          <div class="fav-link">
            <i class="fa fa-heart"></i>
          </div>
        </li>
      </ul>
    </section>
  </div>
  <!-- footer -->
  <footer>
    <p class="title">What We Do</p>
    <p>"Help you find the best job around."</p>
    <ul>
      <li>
        <p><i class="fa fa-map-o fa-2x"></i></p>
        <p>LaiOffer office, CA</p>
      </li>
      <li>
        <p><i class="fa fa-envelope-o fa-2x"></i></p>
        <p>info@laioffer.com</p>
      </li>
      <li>
        <p><i class="fa fa-phone fa-2x"></i></p>
        <p>+1 800 123 456</p>
      </li>
    </ul>
  </footer>
</body>
</html>
tongshen9095 commented 4 years ago
Screen Shot 2020-07-30 at 8 06 38 PM
tongshen9095 commented 4 years ago

inline and block elements

Screen Shot 2020-07-30 at 8 21 18 PM Screen Shot 2020-07-30 at 8 21 31 PM