Madison Square Market

In this example below you will see how to do a Madison Square Market with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 0319AM, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 0319AM ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Madison Square Market</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
  <head>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
  <link rel='stylesheet' href='style.css'/>
  </head>
  <body>
    <div class="header">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <h1>madison square market</h1>
          </div>
          <div class="pull-right">
            <ul>
              <li class="cart dropdown">
                <h3>cart &#x25BE;</h3>
                <ul class="dropdown-menu">
                  <li>View Cart</li>
                  <li>Saved Carts</li>
                </ul>
              </li>
              <li class="account dropdown">
                <h3>account &#x25BE;</h3>
                <ul class="dropdown-menu">
                  <li>View Account</li>
                  <li>Check Order Status</li>
                  <li>Sign in</li>
                </ul>
              </li>
              <li class="help dropdown">
                <h3>help &#x25BE;</h3>
                <ul class="dropdown-menu">
                  <li>FAQs</li>
                  <li>Return Policy</li>
                  <li>Shipping Info</li>
                </ul>
              </li>             
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="main">
    </div>

    <div class="supporting">
      <div class="container">
        <h2>recent arrivals</h2>
        <div class="row">
          <div class="col-md-4">
            <div class="thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/carrots.jpg">
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/cauliflower.jpg">
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/peppers.jpg">
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="supporting">
      <div class="container">
        <h2>popular produce</h2>
        <div class="row">
          <div class="col-md-4">
            <div class="thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/potatoes.jpg">
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/onions.jpg">
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/tomatoes.jpg">
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <div class="container">
        <h3>follow</h3>
        <ul>
          <li>Twitter</li>
          <li>Instagram</li>
        </ul>
      </div>
    </div>
    <script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
    <script src='script.js'></script>
  </body>
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/0319AM/madison-square-market-LjbQvX */
html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Montserrat', sans-serif;
}

.container {
  max-width: 1024px;
  margin: 0 auto;
}

/* Header */
.header {
  padding: 45px 0;
  background-color: #0074ff;
}

.header ul {
  list-style: none;
  padding: 0;
}

.header li {
  display: inline;
  line-height: 30px;
}

.header li + li {
  margin-left: 30px;
}

.header h1 {
  margin: 0;
  font-size: 20px;
  color: #fff;
}

.header h3 {
  color: #fff;
  font-size: 14px;
  display: inline-block;
  margin: 0;
  font-weight: normal;
  cursor: pointer;
}

.header .dropdown {
  position: relative;
}

.header .dropdown-menu {
  position: absolute;
  top: 20px;
  border-radius: 0;
}

.header .dropdown-menu li {
  display: block;
  margin: 0;
  padding: 3px 10px;
}

/* Main */
.main {
  background: url('https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/s1.jpg') no-repeat center center;
  background-size: cover;
  height: 400px;
  width: 100%;
}

/* Supporting */
.supporting {
  margin-bottom: 25px;
}

.supporting .thumbnail {
  padding: 0;
  border-radius: 0;
  border: 0;
}

.supporting h2 {
  color: #0074ff;
  font-size: 24px;
  font-weight: bold;
  margin: 30px 0;
  text-align: center;
}

/* Footer */
.footer {
  background-color: #0074ff;
  color: #fff;
  padding: 20px 0;
  text-align: center;
}

.footer h3 {
  margin: 24px 0;
  font-size: 24px;
  font-weight: bold;
}

.footer ul {
  padding: 0;
  list-style: none;
  margin-bottom: 20px;
}

.footer li {
  font-size: 16px;
}

@media (max-width: 1024px) { 
  .header h1 { 
    width: 100%; 
    text-align: center; 
  } 

  .pull-right { 
    float: none !important; 
    margin: 20px auto 0; 
    width: 225px;
  }
}


/*Downloaded from https://www.codeseek.co/0319AM/madison-square-market-LjbQvX */
$(document).ready(function() {
  $(".cart h3").click(function() {
    $(".cart .dropdown-menu").toggle();
    $(".account .dropdown-menu").hide();
    $(".help .dropdown-menu").hide();
    });
  $(".account h3").click(function() {
    $(".account .dropdown-menu").toggle();
    $(".cart .dropdown-menu").hide();
    $(".help .dropdown-menu").hide();
    });
  $(".help h3").click(function() {
    $(".help .dropdown-menu").toggle();
    $(".cart .dropdown-menu").hide();
    $(".account .dropdown-menu").hide();
    });
    

});

Comments