A Pen by Arvind natarajan

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Arvind natarajan</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <nav class="navbar navbar-default navbar-fixed-top responsive">
  <div class="container-fluid">
    <div class="navbar-brand">FoodSearch</div>
    <div class="navbar-form hidden-xs">
      <input type="text" class="navbar-right"></input>
    </div>
  </div>
</nav>

<div class="container-fluid">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="row">
          <div class="card text-left">
            <div class="row top-content">
              <div class="col-lg-4 col-md-4 col-xs-6 pull-left"><img class="img-responsive" src="https://4.bp.blogspot.com/-LbSSH-UhPu0/U6T9Dz7vyAI/AAAAAAABPdk/JBQqJsER7GA/s1600/IMG_2711.jpg">
                </img>
              </div>

              <div class="col-lg-4 col-md-4 col-xs-4">
                <div class="card-detail">
                  <h3><b>Cuisines</b></h3>
                  <ul class="list-unstyled">
                    <h4>
          <li>Continental</li>
          <li>Italian</li>
          <li>Cafe</li>
          <li>Desserts</li>
        </ul></h4>
                </div>
              </div>
              <div class=" col-xs-5 visible-xs">
                <h4><b>Location</b></h4>
                <h4> Anna Nagar</h4></div>
              <div class="col-lg-4 hidden-xs">
                <div class="card-detail">
                  <h3><b>Address</b></h3>
                  <h4>
      <address><b>Pantry d'or</b><br>21/11, J Block,<br> 6th Avenue Main Road,<br> Anna Nagar East,<br> Chennai</address></h4></div>
              </div>
            </div>
            <div class="pull-right rating">5.0</div>
            <h4 class="cost text-left"><b>Cost for two: </b>Rs.600</h4>
            <hr>
            <div class="tx">
              <h3><b>Pantry d'or</b><h3>
  </div>
  </div> <!--card-->
    </div>
      </div>
       <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="row">
          <div class="card card-block text-left">
            <div class="row top-content">  
              <div class="col-lg-4 col-md-4 col-xs-6 pull-left"><img class="img-responsive" src="https://4.bp.blogspot.com/-LbSSH-UhPu0/U6T9Dz7vyAI/AAAAAAABPdk/JBQqJsER7GA/s1600/IMG_2711.jpg">
                </img>
              </div>
              
              <div class="col-lg-4 col-md-4 col-xs-4">
                <div class="card-detail">
                  <h3><b>Cuisines</b></h3>
              <ul class="list-unstyled">
                <h4>
          <li>American</li>
          <li>Burger</li>
        </ul></h4>
            </div>
          </div>
          <div class=" col-xs-5 visible-xs">
            <h4><u><b>Location</b></u></h4>
            <h4> Anna Nagar East</h4></div>
          <div class="col-lg-4 hidden-xs">
            <div class="card-detail">
              <h3><b>Address</b></h3>
              <h4>
      <address><strong>Brick house bistro</strong><br>No.9, S-Block,<br> 6th Avenue, <br> Main road<br>Anna Nagar East,<br> Chennai</address></h4></div>
          </div>
        </div>
        <div class="pull-right rating">5.0</div>
        <h4 class="cost text-left"><b>Cost for two: </b>Rs.600</h4>
        <hr>
        <div class="tx">
          <h3><b>Brick House Bistro</b><h3>
  </div>
  </div> <!--card-->
    </div>
         </div> </div>
       <div class="row"><div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="row">
          <div class="card text-left">
            <div class="row top-content">  
              <div class="col-lg-4 col-md-4 col-xs-6 pull-left"><img class="img-responsive" src="https://4.bp.blogspot.com/-LbSSH-UhPu0/U6T9Dz7vyAI/AAAAAAABPdk/JBQqJsER7GA/s1600/IMG_2711.jpg">
                </img>
              </div>
              
              <div class="col-lg-4 col-md-4 col-xs-4">
                <div class="card-detail">
                  <h3><b>Cuisines</b></h3>
          <ul class="list-unstyled">
            <h4>
          <li>Ice Cream</li>
        </ul></h4>
        </div>
      </div>
      <div class=" col-xs-5 visible-xs">
        <h4><b>Location</b></h4>
        <h4> Anna Nagar East</h4></div>
      <div class="col-lg-4 hidden-xs">
        <div class="card-detail">
          <h3><b>Address</b></h3>
          <h4>
      <address><b>Cream Stone</b>Y 222, Kimberly Towers,<br> 2nd Avenue,<br> Near Ayyapan Temple,<br>Anna Nagar East,<br> Chennai</address></h4></div>
      </div>
    </div>
    <div class="pull-right rating">5.0</div>
    <h4 class="cost text-left"><b>Cost for two: </b>Rs.350</h4>
    <hr>
    <div class="tx">
      <h3><b>Cream Stone</b><h3>
  </div>
  </div> <!--card-->
    </div>
         </div>
       <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="row">
          <div class="card card-block text-left">
            <div class="row top-content">  
              <div class="col-lg-4 col-md-4 col-xs-6 pull-left"><img class="img-responsive" src="https://4.bp.blogspot.com/-LbSSH-UhPu0/U6T9Dz7vyAI/AAAAAAABPdk/JBQqJsER7GA/s1600/IMG_2711.jpg">
                </img>
              </div>
              
              <div class="col-lg-4 col-md-4 col-xs-4">
                <div class="card-detail">
                  <h3><b>Cuisines</b></h3>
      <ul class="list-unstyled">
        <h4>
          <li>Italian</li>
          <li>Mexican</li>
        </ul></h4>
    </div>
  </div>
  <div class=" col-xs-5 visible-xs">
    <h4><u><b>Location</b></u></h4>
    <h4> Anna Nagar East</h4></div>
  <div class="col-lg-4 hidden-xs">
    <div class="card-detail">
      <h3><b>Address</b></h3>
      <h4>
      <address><strong>Little Italy</strong><br>E-50, 17th Cross Street,<br> Near Spencers Daily,<br> Besant Nagar,<br> Chennai</address></h4></div>
  </div>
</div>
<div class="pull-right rating">5.0</div>
<h4 class="cost text-left"><b>Cost for two: </b>Rs.1300</h4>
<hr>
<div class="tx">
  <h3><b>Litle Italy</b><h3>
  </div>
  </div> <!--card-->
    </div>
         </div>   </div>
    </div> 
  </div>
  </div>  
    
<div id="footer" class="hidden-xs navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
  <ul class="list-inline">
    <li><a href="#"> <h5>About</h5></a></li>
    <li><a href="#"> <h5>Contact</h5></a></li>
  </ul>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/Arvin6/a-pen-by-arvind-natarajan-QdaGdZ */
* {
  font-family: Roboto;
  box-sizing: border-box;
}

.navbar {
  color: #000;
  background: #00BFA5;
}

a:link {
  color: #FFF;
}

.tx {
  text-align: center;
  padding: 3%;
}

.card {
  background: #E0F2F1;
  margin: 1%;
  padding: 2%;
  border-radius: 3%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

.navbar-default .navbar-brand {
  color: #FFF;
}

.top-content {
  height: 230px;
}

hr {
  margin: 1%;
  height: 4px;
  background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;
  border: 0;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.5);
}

.rating {
  font-size: 2em;
  padding: 1%;
  display: inline-block;
  background: #2979FF;
  color: #FFF;
  border-radius: 50%;
}

h3,h4 {
  margin: 0;
}

address {
  overflow: hidden;
}

body {
  padding: 5% 0 5% 0;
}

h3 {
  color: #00BFA5;
}

.cost {
  text-align: left;
}

@media screen and (max-width:780px) {
  body {
    margin-top: 10%;
  }
  .rating {
    float: left !important;
    font-size: 1em;
  }
  .cost {
    text-align: right;
  }
  .navbar{
    position:absolute;
  }
  h3,h4 {
    font-size: 1em;
  }
  .top-content {
    height: 140px;
  }
  .tx {
    width: inherit;
    padding: 0;
  }
}

/*Downloaded from https://www.codeseek.co/Arvin6/a-pen-by-arvind-natarajan-QdaGdZ */
$(document).ready(function(){
  var rating_colors={
 0:"#F50057",1:"#FFC400",2:"#76FF03"
}
});

Comments