A Pen by Abdullah Zafar

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Abdullah Zafar</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

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

  
</head>

<body>

  <div class="row">
  <div class="col-xs-2"></div>
  <div id="main" class="col-xs-8 well">
    <div>
      <div class="recipe well">
        <a onClick={this.handleClick} href="#">{this.state.name}</a>
      </div>
      <div class="ing-head well">
        <h4 class="text-center">Ingredients</h4>
        <hr/>
        <div class="ing-well well">
          {this.ingredient()}
        </div>
        <div class="text-left">
          <button class="btn btn-defualt btn-danger">Delete</button>
          <button class="btn btn-defualt btn-info">Edit</button>
        </div>
      </div>
  </div>
  <div class="col-xs-2"></div>
</div>


<div class="col-xs-2"></div>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Add a Recipe</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Add a Recipe</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label>Name:</label>
              <input type="text" placeholder="Recipe Name" class="form-control" id="Name">
            </div>
            <div class="form-group">
              <label>Ingredients:</label>
              <input type="text" placeholder="Enter Ingredients separated by Commas"  class="form-control" id="form-ingredients">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default btn-info" class="Save">Save</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/11abdullah11/a-pen-by-abdullah-zafar-MvOzGR */
#main{
  top:10vh;
}
.recipe{
  background-color:#ccffcc;
  margin-bottom:0px;
  padding:1.5%;
}
.ing-head{
  margin-top:-1px;
  background:#fff;
}
.Ing{
  padding:1.9%;
  border-bottom:1px solid #aaaaaa; 
}
.ing-well{
  padding:0px;
}
.btn-lg{
  margin-top:10vh;
}
.btn{
  margin-right:1%;
}

Comments