Code Monkey home page Code Monkey logo

cssadvanced's Introduction

Code.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Design Gallery</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <style>
    body {
      background-color: #f5f5f5;
    }
    .navbar {
      background-color: #333;
    }
    .navbar-brand, .navbar-nav .nav-link {
      color: #fff;
    }
    .navbar-brand:hover, .navbar-nav .nav-link:hover {
      color: #ddd;
    }
    .btn-pink {
      background-color: #ff4081;
      color: #fff;
    }
    .gallery-header {
      margin-top: 5px;
      margin-bottom: 5px;
      text-align: center;
    }
    .gallery-header h1 {
      display: inline-block;
    }
    .gallery-header .btn {
      float: right;
    }
    .card {
      margin-bottom: 10px;
      border: none;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .card-body {
      padding: 1rem;
    }
    .card-title {
      font-size: 1.1rem;
      margin-bottom: 0.1rem;
    }
    .card-footer {
      background-color: transparent;
      border-top: none;
      padding-top: 0;
    }
    .card-footer .author-info {
      display: flex;
      align-items: center;
    }
    .card-footer img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .card-footer .author-name {
      font-weight: bold;
      margin-right: 2px;
    }
    .card-footer .author-status {
      color: #777;
      font-size: 0.9rem;
    }
    .card-footer .stats {
      margin-left: auto;
      display: flex;
      align-items: center;
    }
    .card-footer .stats .stat-item {
      margin-left: 10px;
      font-size: 0.9rem;
      color: #777;
    }
    .card-footer .stats .stat-item i {
      margin-right: 2px;
    }
    .dropdown .dropdown-toggle {
      color: #000;
    }
    .dropdowns {
      display: flex;
      justify-content: center;
      margin-bottom: 10px;
    }
    .dropdowns .dropdown {
      margin: 0 1px;
    }
  </style>
</head>
<body>
  <nav class="navbar navbar-expand-lg">
    <a class="navbar-brand" href="#">Dribbble</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Shots</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Designers</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Teams</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Community</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Jobs</a>
        </li>
      </ul>
    </div>
  </nav>

  <div class="container">
    <div class="gallery-header">
      <h1>What are you working on? Dribbble is show and tell for designers.</h1>
      <button class="btn btn-pink">Learn more</button>
      <button class="btn btn-primary">Sign up</button>
    </div>
    <div class="dropdowns">
      <div class="dropdown">
        <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Popular
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">Popular</a>
          <a class="dropdown-item" href="#">Newest</a>
        </div>
      </div>
      <div class="dropdown">
        <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Shots
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
          <a class="dropdown-item" href="#">Shots</a>
          <a class="dropdown-item" href="#">Projects</a>
        </div>
      </div>
      <div class="dropdown">
        <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Now
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
          <a class="dropdown-item" href="#">Now</a>
          <a class="dropdown-item" href="#">Week</a>
          <a class="dropdown-item" href="#">Month</a>
        </div>
      </div>
    </div>

    <div class="row">
        
      <div class="col-md-3 col-sm-6">
        <div class="card">
          <img src="d3-1.jpg" class="card-img-top" alt="Design Preview">
          <div class="card-body">
            <h5 class="card-title">Plainthing Studio</h5>
            <div class="card-text">
              <button class="btn btn-light"><i class="far fa-bookmark"></i></button>
              <button class="btn btn-light"><i class="far fa-heart"></i></button>
            </div>
          </div>
          <div class="card-footer">
            <div class="author-info">
              <img src="f5 - Copy.jpg" alt="Author">
              <div>
                <div class="author-status">PRO</div>
              </div>
            </div>
            <div class="stats">
              <div class="stat-item"><i class="fas fa-heart"></i> 122</div>
              <div class="stat-item"><i class="fas fa-eye"></i> 29.8k</div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-3 col-sm-6">
        <div class="card">
          <img src="d3-2.png" class="card-img-top" alt="Design Preview">
          <div class="card-body">
            <h5 class="card-title">Vedant Hedge</h5>
            <div class="card-text">
              <button class="btn btn-light"><i class="far fa-bookmark"></i></button>
              <button class="btn btn-light"><i class="far fa-heart"></i></button>
            </div>
          </div>
          <div class="card-footer">
            <div class="author-info">
              <img src="f4.jpg" alt="Author">
              <div>
                <div class="author-status">PRO</div>
              </div>
            </div>
            <div class="stats">
              <div class="stat-item"><i class="fas fa-heart"></i> 150</div>
              <div class="stat-item"><i class="fas fa-eye"></i> 10.5k</div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-3 col-sm-6">
        <div class="card">
          <img src="d3-3.png" class="card-img-top" alt="Design Preview">
          <div class="card-body">
            <h5 class="card-title">One week wonders</h5>
            <div class="card-text">
              <button class="btn btn-light"><i class="far fa-bookmark"></i></button>
              <button class="btn btn-light"><i class="far fa-heart"></i></button>
            </div>
          </div>
          <div class="card-footer">
            <div class="author-info">
              <img src="f3.jpg" alt="Author">
              <div>
                <div class="author-status">PRO</div>
              </div>
            </div>
            <div class="stats">
              <div class="stat-item"><i class="fas fa-heart"></i> 150</div>
              <div class="stat-item"><i class="fas fa-eye"></i> 10.5k</div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-3 col-sm-6">
        <div class="card">
          <img src="d3-4.jpg" class="card-img-top" alt="Design Preview">
          <div class="card-body">
            <h5 class="card-title">Emotion Tracker</h5>
            <div class="card-text">
              <button class="btn btn-light"><i class="far fa-bookmark"></i></button>
              <button class="btn btn-light"><i class="far fa-heart"></i></button>
            </div>
          </div>
          <div class="card-footer">
            <div class="author-info">
              <img src="f2.jpg" alt="Author">
              <div>
                <div class="author-status">PRO</div>
              </div>
            </div>
            <div class="stats">
              <div class="stat-item"><i class="fas fa-heart"></i> 150</div>
              <div class="stat-item"><i class="fas fa-eye"></i> 10.5k</div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-3 col-sm-6">
        <div class="card">
          <img src="d3-5.png" class="card-img-top" alt="Design Preview">
          <div class="card-body">
            <h5 class="card-title">Fire Fighters</h5>
            <div class="card-text">
              <button class="btn btn-light"><i class="far fa-bookmark"></i></button>
              <button class="btn btn-light"><i class="far fa-heart"></i></button>
            </div>
          </div>
          <div class="card-footer">
            <div class="author-info">
              <img src="f1 - Copy.jpg" alt="Author">
              <div>
                <div class="author-status">PRO</div>
              </div>
            </div>
            <div class="stats">
              <div class="stat-item"><i class="fas fa-heart"></i> 150</div>
              <div class="stat-item"><i class="fas fa-eye"></i> 10.5k</div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-3 col-sm-6">
        <div class="card">
          <img src="d3-6.jpg" class="card-img-top" alt="Design Preview">
          <div class="card-body">
            <h5 class="card-title">Fire or DumsterFire</h5>
            <div class="card-text">
              <button class="btn btn-light"><i class="far fa-bookmark"></i></button>
              <button class="btn btn-light"><i class="far fa-heart"></i></button>
            </div>
          </div>
          <div class="card-footer">
            <div class="author-info">
              <img src="f6 - Copy.jpg" alt="Author">
              <div>
                <div class="author-status">PRO</div>
              </div>
            </div>
            <div class="stats">
              <div class="stat-item"><i class="fas fa-heart"></i> 150</div>
              <div class="stat-item"><i class="fas fa-eye"></i> 10.5k</div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-3 col-sm-6">
        <div class="card">
          <img src="d3-7.png" class="card-img-top" alt="Design Preview">
          <div class="card-body">
            <h5 class="card-title">Howdy</h5>
            <div class="card-text">
              <button class="btn btn-light"><i class="far fa-bookmark"></i></button>
              <button class="btn btn-light"><i class="far fa-heart"></i></button>
            </div>
          </div>
          <div class="card-footer">
            <div class="author-info">
              <img src="f5 - Copy.jpg" alt="Author">
              <div>
                <div class="author-status">PRO</div>
              </div>
            </div>
            <div class="stats">
              <div class="stat-item"><i class="fas fa-heart"></i> 150</div>
              <div class="stat-item"><i class="fas fa-eye"></i> 10.5k</div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-3 col-sm-5">
        <div class="card">
          <img src="d3-8.png" class="card-img-top" alt="Design Preview">
          <div class="card-body">
            <h5 class="card-title">Hermit Hermes</h5>
            <div class="card-text">
              <button class="btn btn-light"><i class="far fa-bookmark"></i></button>
              <button class="btn btn-light"><i class="far fa-heart"></i></button>
            </div>
          </div>
          <div class="card-footer">
            <div class="author-info">
              <img src="f4.jpg" alt="Author">
              <div>
                <div class="author-status">PRO</div>
              </div>
            </div>
            <div class="stats">
              <div class="stat-item"><i class="fas fa-heart"></i> 150</div>
              <div class="stat-item"><i class="fas fa-eye"></i> 10.5k</div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-3 col-sm-6">
      <div class="card">
        <img src="id3-9.jpg" class="card-img-top" alt="Design Preview">
        <div class="card-body">
          <h5 class="card-title">Simms Fishing Apparel Design</h5>
          <div class="card-text">
            <button class="btn btn-light"><i class="far fa-bookmark"></i></button>
            <button class="btn btn-light"><i class="far fa-heart"></i></button>
          </div>
        </div>
        <div class="card-footer">
          <div class="author-info">
            <img src="f3.jpg" alt="Author">
            <div>
              <div class="author-status">PRO</div>
            </div>
          </div>
          <div class="stats">
            <div class="stat-item"><i class="fas fa-heart"></i> 150</div>
            <div class="stat-item"><i class="fas fa-eye"></i> 10.5k</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6">
      <div class="card">
        <img src="d3-10.png" class="card-img-top" alt="Design Preview">
        <div class="card-body">
          <h5 class="card-title">The Archer</h5>
          <div class="card-text">
            <button class="btn btn-light"><i class="far fa-bookmark"></i></button>
            <button class="btn btn-light"><i class="far fa-heart"></i></button>
          </div>
        </div>
        <div class="card-footer">
          <div class="author-info">
            <img src="f2.jpg" alt="Author">
            <div>
              <div class="author-status">PRO</div>
            </div>
          </div>
          <div class="stats">
            <div class="stat-item"><i class="fas fa-heart"></i> 150</div>
            <div class="stat-item"><i class="fas fa-eye"></i> 10.5k</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6">
      <div class="card">
        <img src="d3-11.jpg" class="card-img-top" alt="Design Preview">
        <div class="card-body">
          <h5 class="card-title">Coric Design</h5>
          <div class="card-text">
            <button class="btn btn-light"><i class="far fa-bookmark"></i></button>
            <button class="btn btn-light"><i class="far fa-heart"></i></button>
          </div>
        </div>
        <div class="card-footer">
          <div class="author-info">
            <img src="f1 - Copy.jpg" alt="Author">
            <div>
              <div class="author-status">PRO</div>
            </div>
          </div>
          <div class="stats">
            <div class="stat-item"><i class="fas fa-heart"></i> 150</div>
            <div class="stat-item"><i class="fas fa-eye"></i> 10.5k</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6">
      <div class="card">
        <img src="image12.jpg" class="card-img-top" alt="Design Preview">
        <div class="card-body">
          <h5 class="card-title">Coric Design</h5>
          <div class="card-text">
            <button class="btn btn-light"><i class="far fa-bookmark"></i></button>
            <button class="btn btn-light"><i class="far fa-heart"></i></button>
          </div>
        </div>
        <div class="card-footer">
          <div class="author-info">
            <img src="author12.jpg" alt="Author">
            <div>
              <div class="author-status">PRO</div>
            </div>
          </div>
          <div class="stats">
            <div class="stat-item"><i class="fas fa-heart"></i> 150</div>
            <div class="stat-item"><i class="fas fa-eye"></i> 10.5k</div>
          </div>
        </div>
      </div>
    </div>
    

    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

output

o1

cssadvanced's People

Contributors

nanditha121 avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.