مشروع html مفتوح المصدر للمطاعم او الشيف لعرض كافة الاطباق او الماكولات _ Flip Menu Gallery

 اليوم في درسنا هذا سوف اقدم لكم هدية مشروع مفتوح المصدرحيث يمكن الاستفادة منه في تهيئة او اعطاءك فكرة حول كيفية انشاء موقع للمطاعم والية عمل او شرح الاطباق مع امكانية الاختياروقد يكون هذا المشروع لمن هو طباخ او لبرنامج تلفزيوني عن الطبخ 

البـــدايـــة

التعريف:

من الممكن إختصار تعريف البرمجيات المفتوحة المصدر، بأنها البرمجيات التي تحقق الشروط التالية:- حرية إعادة توزيع البرنامج.

- توفر النص المصدري للبرنامج، وحرية توزيع النص المصدري.

- حرية إنتاج برمجيات مشتقة أو معدلة من البرنامج الأصلي، وحرية توزيعها تحت نفس الترخيص للبرمجيات الأصلي.

- من الممكن أن يمنع الترخيص توزيع النص المصدري للنسخ المعدلة على شرط السماح بتوزيع ملفات التي تحتوي على التعديلات بجانب النص الأصلي.

- عدم وجود أي تمييز في الترخيص لأي مجموعة أو أشخاص.

- عدم وجود أي تحديد لمجالات إستخدام البرنامج.

- الحقوق الموجودة في الترخيص يجب أن تعطى لكل من يتم توزيع البرنامج إليه.

هذه المييزات الأساسية لأي ترخيص من الممكن أن يطلق عليه ترخيص مفتوح المصدر.

تثبيــت الكود

نقوم بإنشاء ملف HTML يحتوي على

<h1 class="title">Flip Menu. Clickable/Responsive/Pure CSS</h1>
  <p class="creds">Created by <a target="_blank" href="https://twitter.com/fornyhucker">fornyhucker</a></p>
  <div class="flip-menu">
   <section class="flip-item-wrap">
    <img class="fake-image" src="http://lorempixel.com/500/500/food/1" alt=""><!-- this image will add height to parent element -->
    <input type="checkbox" class="flipper" id="a">
    <label for="a" class="flip-item">
     <figure class="front"><img src="http://lorempixel.com/500/500/food/1" alt=""></img></figure>
        <figure class="back">
         <img src="http://lorempixel.com/g/500/500/food/1" alt=""></img>
         <div class="flip-item-desc">
          <h4 class="flip-item-title">Lorem ipsum dolor</h4>
          <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
         </div>
        </figure>
    </label>
   </section>
   <section class="flip-item-wrap">
    <img class="fake-image" src="http://lorempixel.com/500/500/food/1" alt=""><!-- this image will add height to parent element -->
    <input type="checkbox" class="flipper" id="b">
    <label for="b" class="flip-item">
        <figure class="front"><img src="http://lorempixel.com/500/500/food/2" alt=""></img></figure>
        <figure class="back">
         <img src="http://lorempixel.com/g/500/500/food/2" alt=""></img>
         <div class="flip-item-desc">
          <h4 class="flip-item-title">Lorem ipsum dolor</h4>
          <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
         </div>
        </figure>
    </label>
   </section>
   <section class="flip-item-wrap">
    <img class="fake-image" src="http://lorempixel.com/500/500/food/1" alt=""><!-- this image will add height to parent element -->
    <input type="checkbox" class="flipper" id="c">
    <label for="c" class="flip-item">
        <figure class="front"><img src="http://lorempixel.com/500/500/food/3" alt=""></img></figure>
        <figure class="back">
         <img src="http://lorempixel.com/g/500/500/food/3" alt=""></img>
         <div class="flip-item-desc">
          <h4 class="flip-item-title">Lorem ipsum dolor</h4>
          <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
         </div>
        </figure>
    </label>
   </section>
   <section class="flip-item-wrap">
    <img class="fake-image" src="http://lorempixel.com/500/500/food/1" alt=""><!-- this image will add height to parent element -->
    <input type="checkbox" class="flipper" id="d">
    <label for="d" class="flip-item">
        <figure class="front"><img src="http://lorempixel.com/500/500/food/4" alt=""></img></figure>
        <figure class="back">
         <img src="http://lorempixel.com/g/500/500/food/4" alt=""></img>
         <div class="flip-item-desc">
          <h4 class="flip-item-title">Lorem ipsum dolor</h4>
          <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
         </div>
        </figure>
    </label>
   </section>
   <section class="flip-item-wrap">
    <img class="fake-image" src="http://lorempixel.com/500/500/food/1" alt=""><!-- this image will add height to parent element -->
    <input type="checkbox" class="flipper" id="e">
    <label for="e" class="flip-item">
        <figure class="front"><img src="http://lorempixel.com/500/500/food/5" alt=""></img></figure>
        <figure class="back">
         <img src="http://lorempixel.com/g/500/500/food/5" alt=""></img>
         <div class="flip-item-desc">
          <h4 class="flip-item-title">Lorem ipsum dolor</h4>
          <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
         </div>
        </figure>
    </label>
   </section>
   <section class="flip-item-wrap">
    <img class="fake-image" src="http://lorempixel.com/500/500/food/1" alt=""><!-- this image will add height to parent element -->
    <input type="checkbox" class="flipper" id="f">
    <label for="f" class="flip-item">
        <figure class="front"><img src="http://lorempixel.com/500/500/food/6" alt=""></img></figure>
        <figure class="back">
         <img src="http://lorempixel.com/g/500/500/food/6" alt=""></img>
         <div class="flip-item-desc">
          <h4 class="flip-item-title">Lorem ipsum dolor</h4>
          <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
         </div>
        </figure>
    </label>
   </section>
   <section class="flip-item-wrap">
    <img class="fake-image" src="http://lorempixel.com/500/500/food/1" alt=""><!-- this image will add height to parent element -->
    <input type="checkbox" class="flipper" id="g">
    <label for="g" class="flip-item">
        <figure class="front"><img src="http://lorempixel.com/500/500/food/7" alt=""></img></figure>
        <figure class="back">
         <img src="http://lorempixel.com/g/500/500/food/7" alt=""></img>
         <div class="flip-item-desc">
          <h4 class="flip-item-title">Lorem ipsum dolor</h4>
          <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
         </div>
        </figure>
    </label>
   </section>
   <section class="flip-item-wrap">
    <img class="fake-image" src="http://lorempixel.com/500/500/food/1" alt=""><!-- this image will add height to parent element -->
    <input type="checkbox" class="flipper" id="h">
    <label for="h" class="flip-item">
        <figure class="front"><img src="http://lorempixel.com/500/500/food/8" alt=""></img></figure>
        <figure class="back">
         <img src="http://lorempixel.com/g/500/500/food/8" alt=""></img>
         <div class="flip-item-desc">
          <h4 class="flip-item-title">Lorem ipsum dolor</h4>
          <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
         </div>
        </figure>
    </label>
   </section>
   <section class="flip-item-wrap">
    <img class="fake-image" src="http://lorempixel.com/500/500/food/1" alt=""><!-- this image will add height to parent element -->
    <input type="checkbox" class="flipper" id="j">
    <label for="j" class="flip-item">
        <figure class="front"><img src="http://lorempixel.com/500/500/food/9" alt=""></img></figure>
        <figure class="back">
         <img src="http://lorempixel.com/g/500/500/food/9" alt=""></img>
         <div class="flip-item-desc">
          <h4 class="flip-item-title">Lorem ipsum dolor</h4>
          <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
         </div>
        </figure>
    </label>
   </section>
   <section class="flip-item-wrap">
    <img class="fake-image" src="http://lorempixel.com/500/500/food/1" alt=""><!-- this image will add height to parent element -->
    <input type="checkbox" class="flipper" id="k">
    <label for="k" class="flip-item">
        <figure class="front"><img src="http://lorempixel.com/500/500/food/10" alt=""></img></figure>
        <figure class="back">
         <img src="http://lorempixel.com/g/500/500/food/10" alt=""></img>
         <div class="flip-item-desc">
          <h4 class="flip-item-title">Lorem ipsum dolor</h4>
          <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
         </div>
        </figure>
    </label>
   </section>
   <section class="flip-item-wrap">
    <img class="fake-image" src="http://lorempixel.com/500/500/food/1" alt=""><!-- this image will add height to parent element -->
    <input type="checkbox" class="flipper" id="l">
    <label for="l" class="flip-item">
        <figure class="front"><img src="http://lorempixel.com/500/500/food/1" alt=""></img></figure>
        <figure class="back">
         <img src="http://lorempixel.com/g/500/500/food/1" alt=""></img>
         <div class="flip-item-desc">
          <h4 class="flip-item-title">Lorem ipsum dolor</h4>
          <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
         </div>
        </figure>
    </label>
   </section>
   <section class="flip-item-wrap">
    <img class="fake-image" src="http://lorempixel.com/500/500/food/1" alt=""><!-- this image will add height to parent element -->
    <input type="checkbox" class="flipper" id="m">
    <label for="m" class="flip-item">
        <figure class="front"><img src="http://lorempixel.com/500/500/food/2" alt=""></img></figure>
        <figure class="back">
         <img src="http://lorempixel.com/g/500/500/food/2" alt=""></img>
         <div class="flip-item-desc">
          <h4 class="flip-item-title">Lorem ipsum dolor</h4>
          <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum posuere turpis lacus.</p>
         </div>
        </figure>
    </label>
   </section>
  </div>

ثم نقوم بانشاء ملف css لاضافة تنسيقات css




body{
    margin:0;
    font: 14px Helvetica, Arial, serif;
   }
   .title {
     text-align: center;
     color: #333;
     font-size: 1.6em;
   }
   .creds {
     text-align: center;
     color: #666;
     font-size: 0.85em;
   }
   .creds a {
     color: #000;
     text-decoration: none;
     border-bottom: 1px dotted #000;
   }
   .flip-menu{
   margin: 30px 0 0;
   }
   .flip-item-wrap{
   width: 25%;
      height: auto;
      float: left;
   position:relative;
   -webkit-perspective:800px;
      -moz-perspective:800px;
       -ms-perspective:800px;
        -o-perspective:800px;
           perspective:800px;
   }
   @media screen and (min-width: 1280px) {
    .flip-item-wrap{
    width: 16.6%;
    }
   }
   @media screen and (max-width: 979px) {
    .flip-item-wrap{
    width: 33.3%;
    }
   }
   @media screen and (max-width: 639px) {
    .flip-item-wrap{
    width: 50%;
    }
   }
   @media screen and (max-width: 379px) {
    .flip-item-wrap{
    width: 100%;
    }
   }
   .flip-item-wrap img{
   width:100%;
   height:auto;
   display:block;
   margin:0;
   }
   .flip-item-wrap input{
   display: none;
   }
   .flip-item-wrap .fake-image{
   visibility: hidden;
   }
   .flip-item{
   display: block;
   width:100%;
   height:100%;
   float:left;
   position:absolute;
   top:0;
   left:0;
   cursor:pointer;
   color:#fff;
   -webkit-transform-style:preserve-3d;
      -moz-transform-style:preserve-3d;
       -ms-transform-style:preserve-3d;
        -o-transform-style:preserve-3d;
           transform-style:preserve-3d;
   -webkit-transition:-webkit-transform 1s;
      -moz-transition:   -moz-transform 1s;
        -o-transition:     -o-transform 1s;
           transition:        transform 1s;
   }
   .flip-item figure{
   display:block;
   position:absolute;
   width:100%;
   height:100%;
   margin:0;
   -webkit-backface-visibility:hidden;
      -moz-backface-visibility:hidden;
       -ms-backface-visibility:hidden;
        -o-backface-visibility:hidden;
           backface-visibility:hidden;
   }
   .flip-item .back{
   width:100%;
   display:block;
   margin:0;
   -webkit-transform:rotateY( 180deg );
      -moz-transform:rotateY( 180deg );
       -ms-transform:rotateY( 180deg );
        -o-transform:rotateY( 180deg );
           transform:rotateY( 180deg );
   }
   .flipper:checked + .flip-item{
   -webkit-transform:rotateY( 180deg );
      -moz-transform:rotateY( 180deg );
       -ms-transform:rotateY( 180deg );
        -o-transform:rotateY( 180deg );
           transform:rotateY( 180deg );
   }
   .flip-item-desc{
   background: rgba(0,0,0,0.2);
   width:90%;
   height:90%;
   padding:5%;
   position:absolute;
   top: 0;
   left: 0;
   text-shadow:1px 2px 1px rgba(0,0,0,0.9);
   overflow:hidden;
   }
   .flip-item-title{
   font-size: 1.5em;
   margin: 1em 0 0.8em;
   }

النــهاية

 عند تطبيق المشروع سيكون كما في الصورة 

ترجمة - وبتصرّف - لفصل «fornyhucker» من كتاب Dive Into HTML5 لمؤلفه fornyhucker