Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                 

  <title>Common Syrian Dishes</title>
      
           <div id="heading">Common Syrian Dishes</div id>

<p>Syrian cuisine a rich varied cuisine derives from the Syrian diversified nature, regions and cities every city and region of Syria has what distinguishes it from the cuisine.</p>
<p>Here you can take alook to the most famous recipes and you would be soo lucky if you could taste them..... </p>
 <!-- Slideshow container -->
<div class="slideshow-container">

  <!-- Full-width images with number and caption text -->
  <div class="mySlides fade">
    <div class="numbertext">1 / 6</div>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0oGZnYnkbrQ2jvDxchiOjU6AF0sHiB2IKjJtBy1E5iA-GfpANjQ" style="width:100%">
    <div class="text">FALAFEL</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 6</div>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSH39Zd9UO8EiOKob18k2cCt9HW9i7XVg8qtj4uJYDHuFKpr2_Puw" style="width:100%">
    <div class="text">Mahashi</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 6</div>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQkXm4unWCt6AYghmZm0JrxsrQcljK0eVJKdxypoA_ya7uywy045Q" style="width:100%">
    <div class="text">kibbeh mashwieh</div>
  </div>
    <div class="mySlides fade">
    <div class="numbertext">4 / 6</div>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0_16lyHEfCG4Qg3S5KXPeXVt5-D4JTcLXcTZ66w_OTY8yCCZgIQ" style="width:100%">
    <div class="text">Yalanjeh</div>
  </div>
 <div class="mySlides fade">
    <div class="numbertext">5/6</div>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-2-ZvnYmRb0SzocFaNxX-b1Y9y-2dWn8GAM79bqAfBqA26yIFdw" style="width:100%">
    <div class="text">FATTOSH</div>
  </div>
   <div class="mySlides fade">
    <div class="numbertext">6/6</div>
    <img src=" https://www.shoutabkhin.wassfat.com/wp-content/uploads/2018/06/%D8%B7%D8%B1%D9%8A%D9%82%D8%A9_%D8%B9%D9%85%D9%84_%D9%81%D8%AA%D8%A9_%D8%A7%D9%84%D9%81%D8%AA%D8%A9_%D8%A7%D9%84%D9%84%D8%A8%D9%86_%D9%84%D8%A8%D9%86_%D8%B2%D8%A8%D8%A7%D8%AF%D9%8A_%D8%B4%D9%88_%D8%B7%D8%A7%D8%A8%D8%AE%D9%8A%D9%86_%D8%A7%D9%84%D9%8A%D9%88%D9%85-848x477.jpg" style="width:100%">
    <div class="text">FATTEH</div>
  </div>

  
  <!-- Next and previous buttons -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>

<!-- The dots/circles -->
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
    <span class="dot" onclick="currentSlide(4)"></span> 
  <span class="dot" onclick="currentSlide(5)"></span> 
    <span class="dot" onclick="currentSlide(6)"></span> 
</div>



<body>

  <p>Now let's figure out some simple dishes which I'm sure it will get your favour when you try them ,,,,,</p>
  
        <button id='button '>Tabouli Salad</button>
         <button id='button '>Eggplant Mutabal</button> 
        <button id='button '>Chicken Shawarma</button>
  
<!-- first Recipe-->


  
      <article id="TABOULI SALAD">
      <h1> TABOULI SALAD</h1>
        <p>Tabouli salad or Tabbouleh is a simple salad of very finely chopped vegetables, lots of fresh parsley and bulgur wheat, all tossed with lime juice and olive oil, See the tips below.</p>
      <img src="https://img.taste.com.au/i8tDICQo/w643-h428-cfill-q90/taste/2016/11/super-easy-tabbouleh-82002-1.jpeg"
       Title = "No one can say no to tabouli" width = 500 />
      

      <h2> Ingredients</h2>
        <p> let us go shopping to bring what we need for this recipe.........</p>
      <ul>
        <li><input type="checkbox" name="item1" value="bulger" > 1/2 cup fine bulgur"</li>
       <li><input type="checkbox" name="item2" value="oil" >3 tablespoons olive oil</li>
       <li><input type="checkbox" name="item3" value="water" >1 cup boiling-hot water</li>
       <li><input type="checkbox" name="item4" value="parsly" >2 cups finely chopped fresh flat-leaf parsley (from 3 bunches)</li>
       <li><input type="checkbox" name="item5" value="mint" >1/2 cup finely chopped fresh mint</li>
       <li><input type="checkbox" name="item6" value="tomatoe" >2 medium tomatoes, cut into 1/4-inch pieces</li>
       <li><input type="checkbox" name="item7" value="lemon" >3 tablespoons fresh lemon juice</li>
       <li><input type="checkbox" name="item8" value="salt" >3/4 teaspoon salt</li>
       <li><input type="checkbox" name="item9" value="pepper" >1/4 teaspoon black pepper</li>
      
      </ul>
      <h2> Preparation </h2>
          <ul>        
     <li>Stir together bulgur and 1 tablespoon oil in a heatproof bowl. Pour boiling water over, then cover bowl tightly with plastic wrap and let stand 15 minutes. Drain in a sieve, pressing on bulgur to remove any excess liquid.
    <li>Transfer bulgur to a bowl and toss with remaining ingredients, including 2 tablespoons oil, until combined well.
 
  </ul>
<h2> Enjoy :) </h2>
  </article>

<!-- Second Recipe-->
<article id = "Cold Appetizer">
  <h1>Eggplant Mutabal Recipe</h1> 
   <p>  Mutabal is a smoky Middle Eastern dip made with eggplant. This is a beautiful, creamy dip and is a wonderful way to use eggplant.It would be the perfect healthy snack!</p>
  <img src="http://static.ounousa.com/Content/ResizedImages/582/386/outside/161205094356430.jpg"
       Title = "It could be the delicious dip you've taste ever!!" width = 500 />
      <h2> Ingredients</h2>
      <p> let us go shopping to bring what we need for this recipe.........</p>
      <ul>
        <li><input type="checkbox" name="item1" value="eggplant" >3 large eggplant</li>
        <li><input type="checkbox" name="item1" value="garlic" >1 large clove garlic, grated or finely minced</li>
        <li><input type="checkbox" name="item1" value="lemon" >1 lemon, juiced</li>
        <li><input type="checkbox" name="item1" value="Tahini" >2 Tbsp Tahini</li>
        <li><input type="checkbox" name="item1" value="salt" >sea salt</li>
        <li><input type="checkbox" name="item1" value="oil" >olive oil </li>
      </ul>
      <h2> Procedures </h2>
      
        <li>Preheat the oven to 180C/350F/gas 4.</li>
        <li>On a chopping board, cut the aubergines in half lengthways.</li>
        <li>Score the flesh sides in a crisscross pattern, making sure you don’t cut through the skins.</li>
        <li>Drizzle with 2 tablespoons olive oil, then toss to coat.</li>
        <li>Arrange on a baking tray, flesh-side facing up, then bake in the oven for around 45 minutes, or until soft.</li>
       <li>Using oven gloves, remove the aubergine from the oven, then leave aside to cool.</li>
       <li>Peel and roughly chop the garlic, then place in a food processor.</li>
       <li>Add the tahini, 2 tablespoons extra virgin olive oil and the aubergine, discarding the skin.</li>
      <li>Cut the lemons in half. Squeeze in the juice, using your fingers to catch any pips.</li>
      <li>Have a taste and add a tiny pinch of salt and pepper, if you think you think it needs it.</li>
   
    <p> Recommend to serve cold with hot flatbread ,,, dont forget to share with your family & friends . </p>

<h2> The taste will take you to the faaaar !</h2>
</article> 
<hr>
<!-- 3rd Recipe-->
<article id= "main dish">
  <h1>Chicken shawarma</h1> 
   <p> Enjoy the taste of this delicious, traditional, street food dish </p> 
  <p> This Chicken Shawarma recipe is going to knock your heart ! Just a handful of every day spices makes an incredible Chicken Shawarma marinade that infuses the chicken with exotic Middle Eastern flavours. </p>
  <img src="https://img-global.cpcdn.com/009_recipes/127147/751x532cq70/photo.jpg"  Title = "The smell when this is cooking is insane!!!" width = 500 />
      <h2> Ingredients</h2>
      <p> let us go shopping to bring what we need for this recipe.........</p>
      <ul>
        <li><input type="checkbox" name="item1" value="chicken" > 8-12 chicken thigh fillets, skinned</li>
        <li><input type="checkbox" name="item2" value="lemon" >2 lemons, juice only</li>
        <li><input type="checkbox" name="item3" value="oil" > 50ml/2fl of olive oil</li>
        <li><input type="checkbox" name="item4" value="garlic" > 4 garlic cloves, crushed
          <li><input type="checkbox" name="item5" value="seasons" > 1 tsp from each of ground cumin, ground coriander, sweet smoked paprika</li>
        <li><input type="checkbox" name="item6" value="cinnamon" > ½ tsp ground cinnamon </li>
        <li><input type="checkbox" name="item7" value="chilli powder" > ½ tsp cayenne or red chilli powder </li>
        <li><input type="checkbox" name="item8" value="bay leaves" > 2 bay leaves, crushed </li>
        <li><input type="checkbox" name="item9" value="salt,pepper" > salt and freshly ground black pepper</li>
        </li>
      </ul>
      <h2> Preparation </h2>
      <ol>
        <li>Put the chicken thighs in a large food bag or bowl and season well. Whisk the lemon juice and oil together then add the garlic, spices and bay leaves. Mix thoroughly and pour over the chicken, rubbing in using your hands. If you prefer to keep your hands clean and you are using a bag, seal it first, then massage from the outside.</li>
        <li> Leave to marinade in the fridge, covered for at least 2 hours, but preferably overnight. Allow the chicken to come to room temperature before cooking.</li>
        <li> To cook the chicken, heat a grill or griddle pan and scrape off any excess marinade from the chicken. Over a medium heat, grill or griddle the chicken, turning frequently, for around 20-25 minutes, or until cooked through. Remove from the barbecue and leave to rest for a few minutes, before slicing up and serving .</li>

 <p>Shawarma usually served as a sandwich with Saj or white bread with pickled cucumber & special souce.</p>    
        </ol>
      <h2>Sooo yummy,,,,You can't stop eating </h2>
  
<h2> Do you feel hungry?!</h2>
</article> 
        
    </body>


              
            
!

CSS

              
                body{
  background-color: #FEFFF1;
  font-family: Comic Sans MS
   
}

#heading{
  background: #FFF8DC;
  color:#C9085C;
  text-align:center;
  margin: 50px;
  font-family: Comic Sans MS;

   font-size: 40px
   
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
    display: none;
}
 


/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

h1 {
  background: #C9085C;
  color:white;
  text-align:center;
  font-family: Comic Sans MS;
  font-size: 30px
  border-radius:40px
}

article {
  margin: 50px;   
}

h2 {
  color: #D11A6A; 
}

img {
  border-radius: 30px
}

button {
  background: #71EEBF;
  padding: 20px;
  border-radius: 10px;
  color:gray;
  font-size: 30px;
 justify-content: center;;
  font-family: Comic Sans MS
   
}
li{
color:black

}
u1{
  color:black
}
p{
  color:black
    
}
.article{
    display: none;
}

              
            
!

JS

              
                var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1} 
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none"; 
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block"; 
  dots[slideIndex-1].className += " active";
}


              
            
!
999px

Console