"layout food"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'> <header> <section class="navbar"> <div class="wrapper dropdown"> <div class="brand"> <a href=""><img src="https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/logo.png" alt="logo"></a> <button onclick="toggle_visibility('menu_toggle')" id="menu_button">Menu</button> </div> <nav> <a href="">Home</a> <a href="">Menu</a> <a href="">Pages</a> <a href="">Delivery</a> <a href="">News</a> <a href="">Features</a> <a href="">Table Booking</a> </nav> <nav id="menu_toggle"> <a href="">Home</a> <a href="">Menu</a> <a href="">Pages</a> <a href="">Delivery</a> <a href="">News</a> <a href="">Features</a> <a href="">Table Booking</a> </nav> </div> </section> <div class="wrapper"> <section> <h1>Foody Love</h1> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.</p> <button>Click here</button> </section> </div> </header> <section class="about"> <div class="wrapper"> <section> <img src="https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/about-pic-1.jpg" alt=""> <img src="https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/about-pic-1.jpg" alt=""> </section> <section> <h4>About us</h4> <h3>WE ARE TASTY</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p> <p>Dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesettingdard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting</p> <button>Click here</button> </section> </div> </section> <section class="recipes"> <div class="wrapper"> <section> <img src="https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/recipies-pic.jpg" alt=""> <div> <h4>Special Recipes</h4> <h3>Taste of Precious</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p> <p>Dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesettingdard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting</p> <button>Click here</button> </div> </section> </div> </section> <section class="experience"> <div class="wrapper"> <h4>Delightful</h4> <h3>Experience</h3> <section> <div> <section> <p> Italian Source <br> Mushroom </p> <p>$12</p> <button>Click here</button> </section> </div> <div> <section> <p> Italian Source <br> Mushroom </p> <p>$12</p> <button>Click here</button> </section> </div> <div> <section> <p> Italian Source <br> Mushroom </p> <p>$12</p> <button>Click here</button> </section> </div> <div> <section> <p> Italian Source <br> Mushroom </p> <p>$12</p> <button>Click here</button> </section> </div> <div> <section> <p> Italian Source <br> Mushroom </p> <p>$12</p> <button>Click here</button> </section> </div> <div> <section> <p> Italian Source <br> Mushroom </p> <p>$12</p> <button>Click here</button> </section> </div> <div> <section> <p> Italian Source <br> Mushroom </p> <p>$12</p> <button>Click here</button> </section> </div> <div> <section> <p> Italian Source <br> Mushroom </p> <p>$12</p> <button>Click here</button> </section> </div> </section> </div> </section> <section class="menu"> <div class="wrapper"> <h4>Amazing</h4> <h3>Delicious</h3> <section> <img src="https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/menu-drink-pic-1.jpg" alt=""> <table> <thead> <tr> <th>Drinks</th> <th></th> </tr> </thead> <tbody> <tr> <td><img src="https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/menu-list-pic.jpg" alt=""><span>Tuna Roast Source</span></td> <td>$24.5</td> </tr> <tr> <td><img src="https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/menu-list-pic.jpg" alt=""><span>Tuna Roast Source</span></td> <td>$24.5</td> </tr> <tr> <td><img src="https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/menu-list-pic.jpg" alt=""><span>Tuna Roast Source</span></td> <td>$24.5</td> </tr> <tr> <td><img src="https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/menu-list-pic.jpg" alt=""><span>Tuna Roast Source</span></td> <td>$24.5</td> </tr> <tr> <td><img src="https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/menu-list-pic.jpg" alt=""><span>Tuna Roast Source</span></td> <td>$24.5</td> </tr> </tbody> </table> </section> <section> <img src="https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/menu-coures-pic.jpg" alt=""> <table> <thead> <tr> <th>Main course</th> <th></th> </tr> </thead> <tbody> <tr> <td><img src="https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/menu-list-pic.jpg" alt=""><span>Tuna Roast Source</span></td> <td>$24.5</td> </tr> <tr> <td><img src="https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/menu-list-pic.jpg" alt=""><span>Tuna Roast Source</span></td> <td>$24.5</td> </tr> <tr> <td><img src="https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/menu-list-pic.jpg" alt=""><span>Tuna Roast Source</span></td> <td>$24.5</td> </tr> <tr> <td><img src="https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/menu-list-pic.jpg" alt=""><span>Tuna Roast Source</span></td> <td>$24.5</td> </tr> <tr> <td><img src="https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/menu-list-pic.jpg" alt=""><span>Tuna Roast Source</span></td> <td>$24.5</td> </tr> </tbody> </table> </section> <section> <img src="https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/menu-desert-pic.jpg" alt=""> <table> <thead> <tr> <th>Desserts</th> <th></th> </tr> </thead> <tbody> <tr> <td><img src="https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/menu-list-pic.jpg" alt=""><span>Tuna Roast Source</span></td> <td>$24.5</td> </tr> <tr> <td><img src="https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/menu-list-pic.jpg" alt=""><span>Tuna Roast Source</span></td> <td>$24.5</td> </tr> <tr> <td><img src="https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/menu-list-pic.jpg" alt=""><span>Tuna Roast Source</span></td> <td>$24.5</td> </tr> <tr> <td><img src="https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/menu-list-pic.jpg" alt=""><span>Tuna Roast Source</span></td> <td>$24.5</td> </tr> <tr> <td><img src="https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/menu-list-pic.jpg" alt=""><span>Tuna Roast Source</span></td> <td>$24.5</td> </tr> </tbody> </table> </section> </div> </section> <section class="mobile"> <div class="wrapper"> <img src="https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/mobile-phone.png" alt=""> <section> <h4>Happy to Announce</h4> <p>Mobile App</p> <p>is Available in every OS platform.</p> <div> <a href=""><img src="https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/google-play.png" alt=""></a> <a href=""><img src="https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/app-store.png" alt=""></a> </div> </section> </div> </section> <footer> <div class="wrapper"> <section> <h4>Take it easy with location</h4> <div> <p>112-Legere ancillae vix ne. <br> Te elit putent propriae eum, <br> aliquip nominati</p> <br> <p> phone: 00 000 000 <br> Email: support@templatemela.com</p> </div> <nav> <a href=""><i class="fa fa-2x fa-facebook"></i></a> <a href=""><i class="fa fa-2x fa-google-plus"></i></a> <a href=""><i class="fa fa-2x fa-twitter"></i></a> <a href=""><i class="fa fa-2x fa-linkedin"></i></a> <a href=""><i class="fa fa-2x fa-pinterest-p"></i></a> <a href=""> <i class="fa fa-2x fa-youtube-square"></i></a> <a href=""><i class="fa fa-2x fa-whatsapp"></i></a> <a href=""><i class="fa fa-2x fa-instagram"></i></a> </nav> </section> <section> <h4>Working Hours</h4> <div> <p>Monday To Friday</p> <br> <p>8:00am to 10:00pm(Breakfast) <br> 11:00am to 10:00pm(Lunch/Diner)</p> <br> <p> Saturday & Sunday</p> <br> <p> 10:00am to 11:00pm(Brunch) <br> 11:00am to 12:00pm(Lunch/Dinner)</p> </div> </section> <section> <h4>Feedback form</h4> <form action=""> <div> <input type="text" placeholder="Name"> <input type="email" placeholder="Email"> <input type="tel" placeholder="Phone"> <textarea name="message" id="" cols="" rows="" placeholder="Message"></textarea> </div> <input type="submit"> </form> </section> </div> </footer>
img, legend { border: 0 } legend, td, th { padding: 0 } .fa-ul>li, sub, sup { position: relative } .about, .menu, .mobile, .recipes, footer, header { background-size: cover } .mobile .wrapper section, .recipes .wrapper section div, footer .wrapper>section div, header>.wrapper section { -webkit-box-orient: vertical; -webkit-box-direction: normal } html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100% } body { margin: 0 } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block } audio, canvas, progress, video { display: inline-block; vertical-align: baseline } audio:not([controls]) { display: none; height: 0 } [hidden], template { display: none } .fa, .fa-stack { display: inline-block } a { background-color: transparent } a:active, a:hover { outline: 0 } abbr[title] { border-bottom: 1px dotted } b, optgroup, strong { font-weight: 700 } dfn { font-style: italic } h1 { font-size: 2em; margin: .67em 0 } mark { background: #ff0; color: #000 } small { font-size: 80% } sub, sup { font-size: 75%; line-height: 0; vertical-align: baseline } sup { top: -.5em } sub { bottom: -.25em } svg:not(:root) { overflow: hidden } figure { margin: 1em 40px } hr { box-sizing: content-box; height: 0 } pre, textarea { overflow: auto } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0 } button { overflow: visible } .about .wrapper, .experience .wrapper, .menu .wrapper, .mobile .wrapper, .recipes .wrapper, footer .wrapper, header .navbar .wrapper, header>.wrapper { overflow: hidden; max-width: 1200px } button, select { text-transform: none } input[type=reset], button, html input[type=button], input[type=submit] { -webkit-appearance: button; cursor: pointer } button[disabled], html input[disabled] { cursor: default } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0 } input { line-height: normal } input[type=checkbox], input[type=radio] { box-sizing: border-box; padding: 0 } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { height: auto } input[type=search] { -webkit-appearance: textfield; box-sizing: content-box } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none } fieldset { border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em } .fa.fa-pull-left, .fa.pull-left { margin-right: .3em } legend {} table { border-collapse: collapse; border-spacing: 0 } header { background-image: url(https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/main-banner-bg.jpg) } header .navbar { background-color: rgba(0, 0, 0, .5) } header .navbar .wrapper { margin: 0 auto; color: #2b2b2b; font-family: "Times New Roman", Times, Baskerville, Georgia, serif; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding-top: 20px; padding-bottom: 20px } @media (min-width:1024px) { header .navbar .wrapper { width: 100% } } @media (min-width:800px) and (max-width:1023px) { header .navbar .wrapper { width: 100%; padding-top: 50px; padding-bottom: 50px } } @media (max-width:799px) { header .navbar .wrapper { width: 100%; padding-top: 30px; padding-bottom: 30px } } header .navbar .wrapper .brand #menu_button { display: none } @media (min-width:800px) and (max-width:1023px) { header .navbar .wrapper { padding-top: 10px; padding-bottom: 5px } } @media (max-width:799px) { header .navbar .wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } header .navbar .wrapper .brand { width: 90%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch } header .navbar .wrapper .brand #menu_button { width: 150px; border-radius: 5px; display: block; height: auto; background-color: transparent; border: 2px solid #e7a331; color: #fff; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 2em } header .navbar .wrapper .brand #menu_button:hover { color: #e7a331 } } header .navbar .wrapper #menu_toggle { display: none; margin-top: 30px } header .navbar .wrapper #menu_toggle a { width: 210px; margin: 5px 0; text-align: center } header .navbar .wrapper #menu_toggle a:hover { border: 2px solid #e7a331; border-radius: 5px } header .navbar .wrapper nav { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; float: right; width: 65% } header .navbar .wrapper nav a { color: #fff; text-decoration: none; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 1.2em } @media (max-width:799px) { header .navbar .wrapper nav { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; display: none } header .navbar .wrapper nav a { display: inline-block; padding: 10px; font-size: 2em } } header .navbar .wrapper nav a:last-of-type { padding: 10px; background-color: transparent; border: 2px solid #e7a331; border-radius: 5px; color: #fff } header .navbar .wrapper nav a:hover { color: #e7a331 } header>.wrapper { margin: 0 auto; padding-top: 100px; padding-bottom: 100px; color: #2b2b2b; font-family: "Times New Roman", Times, Baskerville, Georgia, serif } @media (min-width:1024px) { header>.wrapper { width: 100% } } @media (min-width:800px) and (max-width:1023px) { header>.wrapper { width: 100%; padding-top: 50px; padding-bottom: 50px } } @media (max-width:799px) { header>.wrapper { width: 100%; padding-top: 30px; padding-bottom: 30px } } header>.wrapper section { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; width: 80%; margin: 0 auto } header>.wrapper section h1 { margin: 0; color: #fff; text-align: center; font-family: Pacifico, cursive; font-size: 7rem; font-weight: 300 } .about .wrapper, header>.wrapper section button, header>.wrapper section p { font-family: "Times New Roman", Times, Baskerville, Georgia, serif } header>.wrapper section p { color: #fff; text-align: center; font-size: 1.8em } header>.wrapper section button { width: 150px; height: 45px; border-radius: 5px; color: #fff; display: block; margin: 0 auto; background-color: transparent; border: 2px solid #fff } header>.wrapper section button:hover { color: #e7a331; border-color: #e7a331 } .about { background-image: url(https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/about-banner-bg.jpg) } .about .wrapper { margin: 0 auto; padding-top: 100px; color: #2b2b2b; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 200px } @media (min-width:1024px) { .about .wrapper { width: 100% } } @media (min-width:800px) and (max-width:1023px) { .about .wrapper { width: 100%; padding-top: 50px; padding-bottom: 50px } } @media (max-width:799px) { .about .wrapper { width: 100%; padding-top: 30px; padding-bottom: 30px } .about .wrapper section:nth-of-type(1) { display: none } } .about .wrapper section:nth-of-type(1) { position: relative; width: 35% } .experience .wrapper section, .recipes .wrapper section div { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox } .about .wrapper section:nth-of-type(1) img { position: absolute; width: 350px; height: 290px; border: 5px solid #fff } @media (min-width:800px) and (max-width:1023px) { .about .wrapper section:nth-of-type(1) img { width: 300px; height: 250px } } .about .wrapper section:nth-of-type(1) img:nth-of-type(1) { margin-top: 30px; margin-left: 25px; -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } .about .wrapper section:nth-of-type(1) img:nth-of-type(2) { margin-top: 20px; margin-left: 45px } .about .wrapper section:nth-of-type(2) { width: 58% } @media (max-width:799px) { .about .wrapper section:nth-of-type(2) { width: 90%; margin: 0 auto } } .about .wrapper section:nth-of-type(2) h4 { margin: 0; font-family: Pacifico, cursive; font-size: 2.1em; font-weight: 300; color: #2b2b2b; text-align: left } .about .wrapper section:nth-of-type(2) button, .about .wrapper section:nth-of-type(2) h3, .recipes .wrapper { font-family: "Times New Roman", Times, Baskerville, Georgia, serif } .about .wrapper section:nth-of-type(2) h3 { margin: 0; text-transform: uppercase; font-size: 2.5em; font-weight: 500; color: #2b2b2b; text-align: left } .about .wrapper section:nth-of-type(2) button { width: 150px; height: 45px; background-color: #e7a331; border: none; border-radius: 5px; color: #fff } .recipes { background-image: url(https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/recipies-banner-bg.jpg) } .recipes .wrapper { margin: 0 auto; padding-top: 100px; padding-bottom: 100px; color: #2b2b2b } @media (min-width:1024px) { .recipes .wrapper { width: 100% } } @media (min-width:800px) and (max-width:1023px) { .recipes .wrapper { width: 100%; padding-top: 50px; padding-bottom: 50px } } .recipes .wrapper section { position: relative; height: 560px } @media (min-width:800px) and (max-width:1023px) { .recipes .wrapper section { height: auto } } @media (max-width:799px) { .recipes .wrapper { width: 100%; padding-top: 30px; padding-bottom: 30px } .recipes .wrapper section { height: auto } } .recipes .wrapper section div { display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: absolute; width: 36%; height: 80%; top: 10%; padding: 0 5%; background-color: #fff } @media (min-width:800px) and (max-width:1023px) { .recipes .wrapper section div { position: relative; width: 80%; height: auto; margin: 0 auto; padding: 2% 5% 4% } .recipes .wrapper section img { display: none } } @media (max-width:799px) { .recipes .wrapper section div { position: relative; width: 80%; height: auto; margin: 0 auto; padding: 2% 5% 4% } .recipes .wrapper section img { display: none } } .recipes .wrapper section div h4 { margin: 0; font-family: Pacifico, cursive; font-size: 2.1em; font-weight: 300; color: #2b2b2b; text-align: left } .experience .wrapper, .experience .wrapper h3, .recipes .wrapper section div button, .recipes .wrapper section div h3 { font-family: "Times New Roman", Times, Baskerville, Georgia, serif } .recipes .wrapper section div h3 { margin: 0; text-transform: uppercase; font-size: 2.5em; font-weight: 500; color: #2b2b2b; text-align: left } .recipes .wrapper section div button { width: 150px; height: 45px; background-color: #e7a331; border: none; border-radius: 5px; color: #fff } .recipes .wrapper section img { position: absolute; right: 0; width: 58%; height: 100%; -o-object-fit: cover; object-fit: cover } .experience .wrapper { margin: 0 auto; padding-top: 100px; padding-bottom: 100px; color: #2b2b2b } @media (min-width:1024px) { .experience .wrapper { width: 100% } } @media (min-width:800px) and (max-width:1023px) { .experience .wrapper { width: 100%; padding-top: 50px; padding-bottom: 50px } } @media (max-width:799px) { .experience .wrapper { width: 100%; padding-top: 30px; padding-bottom: 30px } } .experience .wrapper h4 { margin: 0; text-align: center; font-family: Pacifico, cursive; font-size: 2.1em; font-weight: 300; color: #2b2b2b } .experience .wrapper h3 { margin: 0; text-align: center; text-transform: uppercase; font-size: 2.5em; font-weight: 500; color: #2b2b2b } .experience .wrapper section div section button, .experience .wrapper section div section p { color: #fff; font-family: "Times New Roman", Times, Baskerville, Georgia, serif } .experience .wrapper section { display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap } .experience .wrapper section div { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 25%; height: 300px; margin-top: 60px; background-size: cover; background-position: center } @media (max-width:799px) { .experience .wrapper section div { width: 50% } } .experience .wrapper section div:nth-of-type(1) { background-image: url(https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/expirience-pic-1.jpg) } .experience .wrapper section div:nth-of-type(2) { background-image: url(https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/expirience-pic-2.jpg) } .experience .wrapper section div:nth-of-type(3) { background-image: url(https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/expirience-pic-3.jpg) } .experience .wrapper section div:nth-of-type(4) { background-image: url(https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/expirience-pic-4.jpg) } .experience .wrapper section div:nth-of-type(5) { background-image: url(https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/expirience-pic-5.jpg) } .experience .wrapper section div:nth-of-type(6) { background-image: url(https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/expirience-pic-6.jpg) } .experience .wrapper section div:nth-of-type(7) { background-image: url(https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/expirience-pic-7.jpg) } .experience .wrapper section div:nth-of-type(8) { background-image: url(https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/expirience-pic-8.jpg) } .experience .wrapper section div:hover>section { visibility: visible } .experience .wrapper section div section { visibility: hidden; -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; height: 80%; margin: auto; padding: 0 15px; background-color: rgba(0, 0, 0, .7) } .experience .wrapper section div section p { margin: 0; text-align: center; text-transform: uppercase; font-size: 1.5em } .experience .wrapper section div section p:nth-of-type(2) { font-size: 3em } .experience .wrapper section div section button { background-color: #e7a331; border: none; border-radius: 5px; width: 90px; height: 30px } .menu { background-image: url(https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/menu-banner-bg.jpg) } .menu .wrapper { margin: 0 auto; padding-top: 100px; padding-bottom: 100px; color: #2b2b2b; font-family: "Times New Roman", Times, Baskerville, Georgia, serif } .menu .wrapper h3, .menu .wrapper h4 { margin: 0; color: #fff; text-align: center } @media (min-width:1024px) { .menu .wrapper { width: 100% } } @media (min-width:800px) and (max-width:1023px) { .menu .wrapper { width: 100%; padding-top: 50px; padding-bottom: 50px } } .menu .wrapper h4 { font-family: Pacifico, cursive; font-size: 2.1em; font-weight: 300 } .menu .wrapper h3 { text-transform: uppercase; font-family: "Times New Roman", Times, Baskerville, Georgia, serif; font-size: 2.5em; font-weight: 500 } .menu .wrapper section { position: relative; height: 540px; margin-top: 60px } @media (min-width:800px) and (max-width:1023px) { .menu .wrapper section { height: auto } .menu .wrapper section>img { display: none } } @media (max-width:799px) { .menu .wrapper { width: 100%; padding-top: 30px; padding-bottom: 30px } .menu .wrapper section { height: auto } .menu .wrapper section>img { display: none } } .menu .wrapper section:nth-of-type(2)>img { right: 0 } .menu .wrapper section:nth-of-type(2)>table { left: 0 } .menu .wrapper section>img { position: absolute; width: 57%; height: 100%; -o-object-fit: cover; object-fit: cover } .menu .wrapper section>table { position: absolute; width: 52%; height: 80%; top: 10%; right: 0; background-color: #fff } @media (min-width:800px) and (max-width:1023px) { .menu .wrapper section>table { position: relative; width: 90%; height: auto; margin: 0 auto } } @media (max-width:799px) { .menu .wrapper section>table { position: relative; width: 90%; height: auto; margin: 0 auto } } .menu .wrapper section>table thead th { margin: 0 0 0 40px; font-family: Pacifico, cursive; font-size: 2.1em; font-weight: 300; display: inline-block; color: #2b2b2b; text-align: left } .menu .wrapper section>table tbody tr { border-top: 1px dashed #2b2b2b } .menu .wrapper section>table tbody tr td { font-size: 1.3em } .menu .wrapper section>table tbody tr td img { float: left; margin-left: 40px } .menu .wrapper section>table tbody tr td span { display: inline-block; margin-top: 15px; margin-left: 10px } .mobile .wrapper, .mobile .wrapper section { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox } .mobile { background-image: url(https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/mobile-banner-bg.jpg) } .mobile .wrapper { margin: 0 auto; padding-top: 100px; padding-bottom: 100px; color: #2b2b2b; font-family: "Times New Roman", Times, Baskerville, Georgia, serif; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } @media (min-width:800px) and (max-width:1023px) { .mobile .wrapper { width: 100%; padding-top: 50px; padding-bottom: 50px } } .mobile .wrapper img { display: block; margin: 0 auto } @media (max-width:799px) { .mobile .wrapper { width: 100%; padding-top: 30px; padding-bottom: 30px; display: block } .mobile .wrapper img { display: none } } .mobile .wrapper section { display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; margin: 0 auto } .mobile .wrapper section h4 { margin: 0 0 30px; color: #fff; text-align: center; font-family: Pacifico, cursive; font-size: 2.1em; font-weight: 300 } .mobile .wrapper section p, footer .wrapper { font-family: "Times New Roman", Times, Baskerville, Georgia, serif } .mobile .wrapper section p { color: #fff; line-height: 30px; text-transform: uppercase; font-size: 1.9em; letter-spacing: .1px } @media (max-width:799px) { .mobile .wrapper section { width: 100%; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center } .mobile .wrapper section p { font-size: 1em } } .mobile .wrapper section p:nth-of-type(1) { margin: 0; font-size: 6em } .mobile .wrapper section div { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; width: 100% } @media (max-width:799px) { .mobile .wrapper section p:nth-of-type(1) { font-size: 3em } .mobile .wrapper section div { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .mobile .wrapper section div a img { display: block; margin-top: 10px } } footer .wrapper, footer .wrapper>section div { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox } footer { background-image: url(https://bytebucket.org/consatanos/pen-picture/raw/3c0be7f1f1ea380d9165eb09d5c0f1ec921448f2/f-r/img/footer-banner-bg.jpg) } footer .wrapper { margin: 0 auto; padding-top: 100px; padding-bottom: 100px; color: #2b2b2b; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } @media (min-width:1024px) { .mobile .wrapper, footer .wrapper { width: 100% } } @media (min-width:800px) and (max-width:1023px) { footer .wrapper { width: 100%; padding-top: 50px; padding-bottom: 50px } } @media (max-width:799px) { footer .wrapper { width: 100%; padding-top: 30px; padding-bottom: 30px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } } footer .wrapper>section:nth-of-type(1) { width: 30% } @media (max-width:799px) { footer .wrapper>section:nth-of-type(1) { width: 100%; margin-bottom: 40px } footer .wrapper>section:nth-of-type(1) nav { width: 70%; margin: 0 auto } } footer .wrapper>section:nth-of-type(2) { width: 25% } @media (max-width:799px) { footer .wrapper>section:nth-of-type(2) { width: 100% } } footer .wrapper>section:nth-of-type(3) { width: 35% } footer .wrapper>section:nth-of-type(3) h4 { text-align: left } @media (max-width:799px) { footer .wrapper>section:nth-of-type(3) { width: 100% } footer .wrapper>section:nth-of-type(3) h4 { text-align: center } footer .wrapper>section:nth-of-type(3) form div { height: auto; margin: 0 auto } footer .wrapper>section:nth-of-type(3) form div input, footer .wrapper>section:nth-of-type(3) form div textarea { width: 95% } footer .wrapper>section:nth-of-type(3) form input[type=submit] { display: block; margin-left: 5%; margin-top: 10px } } footer .wrapper>section h4 { margin: 0; color: #fff; text-align: center; font-family: Pacifico, cursive; font-weight: 300; line-height: 45px; font-size: 1.9em } @media (min-width:800px) and (max-width:1023px) { footer .wrapper>section h4 { height: 85px } } footer .wrapper>section div { display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 280px } footer .wrapper>section div p { margin: 0 auto; color: #fff; text-align: center } footer .wrapper>section nav { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around } footer .wrapper>section nav a { color: #e7a331 } footer .wrapper>section form>div { display: block; width: 90%; height: 280px } footer .wrapper>section form>div input, footer .wrapper>section form>div textarea { width: 100%; margin-top: 10px; padding: 9px; background-color: #323232; border: none; border-radius: 5px; color: #9a9a9a } footer .wrapper>section form>div textarea { height: 100px; resize: none } footer .wrapper>section input[type=submit] { width: 150px; height: 45px; background-color: #e7a331; border: none; border-radius: 5px; color: #fff; font-family: "Times New Roman", Times, Baskerville, Georgia, serif }
function toggle_visibility(id){ var e = document.getElementById(id); if(e.style.display == 'flex') e.style.display = 'none'; else e.style.display = 'flex'; }

Related: See More


Questions / Comments: