TOMATO

In this example below you will see how to do a TOMATO with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>TOMATO</title>
  <meta itemprop="name" content="美濃玉女小番茄開賣啦">
<meta itemprop="image" content="https://scontent.ftpe7-1.fna.fbcdn.net/v/t31.0-8/21743634_1828916163790787_5849228598710200451_o.jpg?oh=7a1bd14dd6666c11c9bcff92ddee0c63&oe=5A438590">
<meta itemprop="description" content="歡迎訂購~!">

<meta property="og:title" content="美濃玉女小番茄開賣啦" >
<meta property="og:url" content="https://codepen.io/PeiShin/pen/xXbLdg?editors=1000">
<meta property="og:image" content="https://scontent.ftpe7-1.fna.fbcdn.net/v/t31.0-8/21743634_1828916163790787_5849228598710200451_o.jpg?oh=7a1bd14dd6666c11c9bcff92ddee0c63&oe=5A438590">
<meta property="og:description" content="歡迎訂購~!" >
  
  <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://fonts.googleapis.com/css?family=Baloo+Bhaijaan'>

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

  
</head>

<body>

  
<div id="skrollr-body">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">    </span></button><a class="logo" href="#section_index">       
          <div class="w w1">T</div>
          <div class="tomato"> 
            <div class="circle">
              <div class="star">✬</div>
            </div>
          </div>
          <div class="w w2">M</div>
          <div class="w w3">A</div>
          <div class="w w4">T</div>
          <div class="tomato"> 
            <div class="circle">
              <div class="star">✬</div>
            </div>
          </div></a>
      </div>
      <div class="navbar-collapse collapse" id="navbar">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#section_index">首頁</a></li>
          <li><a href="#section_about">關於</a></li>
          <li><a href="#section_order">我要訂購</a></li>
        </ul>
      </div>
      <!-- /.nav-collapse-->
    </div>
  </nav>
  <section id="section_index"></section>
  <header class="jumbotron">
    <div class="container">
      <h1 data-0="transform: translateY(-30px)" data-500="transform: translateY(80px)">美濃玉女小番茄</h1>
      <h2 data-0="transform: translateY(-30px)" data-500="transform: translateY(80px)">開賣啦!</h2>
    </div>
  </header>
  <section id="section_about">
    <div class="container">
      <div class="row">
        <div class="col-sm-12" data-bottom-top="transform: translateY(-20px);opacity: 0" data-center="transform: translateY(0px);opacity: 1">
          <h1> 美濃玉女小番茄</h1>
          <hr/>
        </div>
        <div class="col-md-4 col-sm-6">
          <div class="img_wrap" data-bottom-top="transform: translateY(20px);opacity: 0" data-center="transform: translateY(40px);opacity: 1"><img class="img1" src="https://scontent.ftpe7-1.fna.fbcdn.net/v/t1.0-9/16730651_1357722077619040_1247388306061908638_n.jpg?oh=53c26523dcb5d966ad0f1ba654e124b2&amp;oe=5A52E19C" alt=""/></div>
          <h3 data-bottom-top="transform: translateY(20px);" data-center="transform: translateY(40px);">最用心的栽種</h3>
          <p data-bottom-top="transform: translateY(20px);" data-center="transform: translateY(40px);">經過農人細心呵護、小心照顧,用心栽培特優級小番茄,安全、高品質,不使用農藥、不噴退酸劑、不刻意施化肥追甜,保有番茄應有的微酸甘甜的風味。</p>
        </div>
        <div class="col-md-4 col-sm-6">
          <div class="img_wrap" data-bottom-top="transform: translateY(20px);opacity: 0" data-center="transform: translateY(40px);opacity: 1"><img class="img2" src="https://scontent.ftpe7-1.fna.fbcdn.net/v/t1.0-9/1907328_830969476960972_9048322226242872749_n.jpg?oh=11a28aef85697ac3e3c2138dd13c0b19&amp;oe=5A52A95C" alt=""/></div>
          <h3 data-bottom-top="transform: translateY(20px);" data-center="transform: translateY(40px);">最甜蜜的收穫</h3>
          <p data-bottom-top="transform: translateY(20px);" data-center="transform: translateY(40px);">玉女番茄薄薄的表皮難以包住飽滿多汁、紮實有彈性的果肉,一口咬下,番茄的甜汁在嘴裡暴漿蔓延,一顆接一顆,甜度約12-13度,真的甜的很涮嘴!</p>
        </div>
        <div class="col-md-4 col-sm-6">
          <div class="img_wrap" data-bottom-top="transform: translateY(20px);opacity: 0" data-center="transform: translateY(40px);opacity: 1"><img class="img3" src="https://scontent.ftpe7-1.fna.fbcdn.net/v/t1.0-9/16265822_458764724473117_8385696387475551233_n.jpg?oh=4810d8b125a96fb84804eaf9c03924c2&amp;oe=5A1370C4" alt=""/></div>
          <h3 data-bottom-top="transform: translateY(20px);" data-center="transform: translateY(40px);">最新鮮的保證</h3>
          <p data-bottom-top="transform: translateY(20px);" data-center="transform: translateY(40px);">玉女小番茄是下單後現摘直送的新鮮番茄,鮮摘隔日到貨交到您手上,讓您品嘗最新鮮的美味。人工嚴選高品質包裝,現在正是品嘗夯時節!</p>
        </div>
      </div>
    </div>
  </section><br/><br/>
  <section id="section_order">
    <div class="container">
      <h1 data-bottom-top="transform: translateY(-20px);opacity: 0" data-center="transform: translateY(0px);opacity: 1"> 我要訂購</h1>
      <hr/>
      <div class="order">
        <div class="mailcover"><img src="https://awiclass.monoame.com/img/webpic/w_mail_cover.svg" alt=""/></div>
        <div class="order_input">
          <form id="form_input">
            <label>訂貨人姓名:</label>
            <input type="text" placeholder="填入訂貨人姓名" title="訂貨人姓名" required="required" id="o_name1"/><br/>
            <label>訂貨人電話:</label>
            <input type="tel" pattern="[0-9].{6,10}" placeholder="填入訂貨人電話" title="訂貨人電話" required="required" id="o_phone1"/><br/>
            <label>欲訂購箱數:</label>
            <input type="number" placeholder="填入欲訂購番茄箱數" title="欲訂購番茄箱數" value="1" min="1" max="20" required="required" id="q1"/>
            <label id="price1">$ 600</label><br/>
            <label>收件人姓名:</label>
            <input type="text" placeholder="填入收件人姓名" title="收件人姓名" required="required" id="r_name1"/><br/>
            <label>收件人電話:</label>
            <input type="tel" pattern="[0-9].{6,10}" placeholder="填入收件人電話" title="收件人電話" required="required" id="r_phone1"/><br/>
            <label>收件人地址:</label>
            <input type="text" placeholder="填入收件人地址" title="收件人地址" required="required" id="address1"/><br/>
            <div class="sub">
              <input type="submit" value="提交"/>
            </div>
          </form>
        </div>
        <!--.col-md-6-->
      </div>
    </div>
    <div class="lightbox">
      <div class="dialog">
        <form id="order_form" action="https://script.google.com/macros/s/AKfycbzaVnil4Bv14SQiEGsbQ5Gfuf91gtqDMn2whCPUuQL6YBQS1Cym/exec" method="post">     
          <input type="hidden" name="method" value="write"/>
          <label>訂貨人姓名:</label>
          <input type="hidden" name="o_name" id="o_name"/>
          <label id="o_name2"></label><br/>
          <label>訂貨人電話:</label>
          <input type="hidden" name="o_phone" id="o_phone"/>
          <label id="o_phone2"></label><br/>
          <label>欲訂購箱數:</label>
          <input type="hidden" name="q" id="q"/>
          <label disabled="disabled" id="q2"></label><br/>
          <label>收件人姓名:</label>
          <input type="hidden" name="r_name" id="r_name"/>
          <label id="r_name2"></label><br/>
          <label>收件人電話:</label>
          <input type="hidden" name="r_phone" id="r_phone"/>
          <label id="r_phone2"></label><br/>
          <label>收件人地址:</label><br/>
          <input type="hidden" name="address" id="address"/>
          <textarea disabled="disabled" id="address2"></textarea><br/>
          <label class="red">總   價:</label>
          <input class="red" type="hidden" name="price" id="price"/>
          <label class="red" id="price2"></label><br/>
          <div class="sub"> 
            <input type="submit" value="確認" id="ok"/>
            <input type="button" value="取消" id="no"/>
          </div>
        </form>
      </div>
    </div>
    <div class="waiting">
      <div class="loading">       
        <div class="dot"> </div>
      </div>
      <div class="text">
        <div class="s1">載</div>
        <div class="s2">入</div>
        <div class="s3">中</div>
        <div class="s4">.</div>
        <div class="s5">.</div>
        <div class="s6">.  </div>
      </div>
    </div>
  </section>
  <footer id="footer"><a href="#section_index">
      <div class="logo">       
        <div class="w w1">T</div>
        <div class="tomato"> 
          <div class="circle">
            <div class="star">✬</div>
          </div>
        </div>
        <div class="w w2">M</div>
        <div class="w w3">A</div>
        <div class="w w4">T</div>
        <div class="tomato"> 
          <div class="circle">
            <div class="star">✬</div>
          </div>
        </div>
      </div></a></footer>
</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>
<script src='https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/PeiShin/tomato-xXbLdg */
@charset "UTF-8";
#skrollr-body {
  float: left;
  width: 100%;
  height: 100%;
}

* {
  font-family: "Baloo Bhaijaan", 微軟正黑體;
  position: relative;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: bold;
}

button.navbar-toggle.collapsed {
  transition: 1s;
  margin-top: 30px;
}

ul.nav.navbar-nav.navbar-right li {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 5px;
  font-weight: 600;
  font-size: 18px;
}
ul.nav.navbar-nav.navbar-right li a:hover {
  transition: 0.5s;
  color: #e97815;
}

.navbar-header a, #footer a {
  color: transparent;
  text-decoration: none;
}

.logo {
  z-index: 5;
  font-size: 60px;
  cursor: pointer;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.logo:hover .w, .logo:hover .circle {
  animation: ani_logo 1s 1;
}
.logo:hover .star {
  transform: rotate(360deg);
}

@keyframes ani_logo {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.8) rotate(10deg);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes spin2 {
  0% {
    box-shadow: 0 0 0 #d03d30, 0 0 0 #d03d30, 0 0 0 #d03d30, 0 0 0 #d03d30, 0 0 0 #d03d30, 0 0 0 #d03d30, 0 0 0 #d03d30, 0 0 0 #d03d30;
  }
  50% {
    transform: rotate(-180deg);
  }
  25%, 75% {
    box-shadow: 52px 0 0 #d03d30, -52px 0 0 #d03d30, 0 52px 0 #d03d30, 0 -52px 0 #d03d30, 38px -38px 0 #d03d30, 38px 38px 0 #d03d30, -38px -38px 0 #d03d30, -38px 38px 0 #d03d30;
    background: transparent;
  }
  100% {
    transform: rotate(-360deg);
    box-shadow: 0 0 0 #d03d30, 0 0 0 #d03d30, 0 0 0 #d03d30, 0 0 0 #d03d30, 0 0 0 #d03d30, 0 0 0 #d03d30, 0 0 0 #d03d30, 0 0 0 #d03d30;
  }
}
@keyframes jump {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0px);
  }
}
.w {
  display: inline-block;
  line-height: 60px;
  margin-right: -20px;
  margin-left: 20px;
  color: #e97815;
  transition: 1s;
}

.w1 {
  margin-left: -20px;
}

.circle {
  width: 36px;
  height: 36px;
  border: solid 8px #d03d30;
  border-radius: 100%;
  box-sizing: border-box;
  display: flex;
  margin-left: 22px;
  margin-right: -20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.star {
  width: 26px;
  height: 26px;
  font-size: 26px;
  font-weight: 800;
  line-height: 26px;
  color: #4e7c66;
  transition: 1s;
}

header.jumbotron {
  text-align: center;
  background-image: url("https://scontent.ftpe7-1.fna.fbcdn.net/v/t31.0-8/21743634_1828916163790787_5849228598710200451_o.jpg?oh=7a1bd14dd6666c11c9bcff92ddee0c63&oe=5A438590");
  background-size: cover;
  background-attachment: fixed;
  margin-bottom: 0px;
}
header.jumbotron .container {
  color: white;
  padding: 200px 0px;
}
header.jumbotron hr {
  max-width: 50px;
  border: solid 2px #f2ae72;
}
header.jumbotron h4 {
  color: rgba(255, 255, 255, 0.8);
}

section {
  padding: 50px 0px;
}

section#section_about img {
  width: 100%;
  height: 100%;
}
section#section_about .img_wrap {
  height: 250px;
  overflow: hidden;
}
section#section_about .img3 {
  width: 200%;
  height: 200%;
  transform: translate(-30%, -20%);
}

#section_order {
  background-color: #3a5d4c;
  padding: 30px;
  width: 100%;
  position: relative;
}
#section_order h1 {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
#section_order .order {
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#section_order .order .mailcover {
  display: none;
}
#section_order .order .order_input {
  background-color: #ececec;
  padding: 20px;
  width: 70%;
  min-width: 230px;
  max-width: 460px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}
#section_order .order .order_input input {
  margin-bottom: 10px;
  width: 100%;
  border: 2px solid #000;
}
#section_order .order .order_input .sub {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
}
#section_order .order .order_input input[type='number'] {
  width: 20%;
}
#section_order .order .order_input #price1 {
  color: #d96459;
  margin-left: 10px;
  font-size: 16px;
  font-weight: 600;
}
#section_order .order .order_input input[type='submit'] {
  width: 100px;
  padding: 5px;
  border: 2px solid #000;
  background-color: #e7cb39;
  color: #3a5d4c;
  border-radius: 5px;
}
#section_order .order .order_input input[type='submit']:hover {
  background-color: #e97815;
  color: white;
}
#section_order .lightbox {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}
#section_order .lightbox .dialog {
  background-color: #ececec;
  padding: 20px;
  width: 70%;
  min-width: 230px;
  max-width: 460px;
  letter-spacing: 0.08em;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
  border-radius: 5px;
}
#section_order .lightbox .dialog label {
  margin: 7px 0px;
  display: inline-block;
  font-weight: 600;
  font-size: 14px;
}
#section_order .lightbox .dialog textarea {
  background-color: #ececec;
  color: black;
  border: none;
  font-weight: 600;
  width: 100%;
  resize: none;
  margin: 0px;
  overflow: hidden;
}
#section_order .lightbox .dialog .red {
  color: red;
}
#section_order .lightbox .dialog .sub {
  display: flex;
  justify-content: center;
  align-items: center;
}
#section_order .lightbox .dialog .sub input {
  margin: 10px 15px 0px 15px;
  padding: 5px 12px;
  border: 2px solid #000;
  background-color: rgba(255, 255, 0, 0.3);
  letter-spacing: 0.2em;
  font-weight: 600;
  border-radius: 5px;
}
#section_order .lightbox .dialog .sub #ok {
  background-color: green;
  color: white;
}
#section_order .lightbox .dialog .sub #ok:hover {
  transform: scale(1.2);
}
#section_order .lightbox .dialog .sub #no {
  background-color: #e09100;
  color: white;
}
#section_order .lightbox .dialog .sub #no:hover {
  transform: scale(1.2);
}
#section_order .waiting {
  display: none;
  background-color: orange;
  padding: 20px;
  position: absolute;
  height: 100%;
  width: 100%;
  margin: 0;
  top: 0;
  left: 0;
}
#section_order .waiting .loading {
  background-color: white;
  height: 300px;
  width: 250px;
  border-radius: 5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#section_order .waiting .dot {
  position: absolute;
  top: 90px;
  left: 110px;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background: white;
  animation: spin2 3s 0s infinite both;
}
#section_order .waiting .text {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#section_order .waiting .text .s1, #section_order .waiting .text .s2, #section_order .waiting .text .s3, #section_order .waiting .text .s4, #section_order .waiting .text .s5, #section_order .waiting .text .s6 {
  display: inline-block;
  animation: jump 1.2s infinite;
  color: #006700;
  font-size: 16px;
  font-weight: 600;
}
#section_order .waiting .text .s1 {
  animation-delay: 0.2s;
}
#section_order .waiting .text .s2 {
  animation-delay: 0.4s;
}
#section_order .waiting .text .s3 {
  animation-delay: 0.6s;
}
#section_order .waiting .text .s4 {
  animation-delay: 0.8s;
}
#section_order .waiting .text .s5 {
  animation-delay: 1s;
}
#section_order .waiting .text .s6 {
  animation-delay: 1.2s;
}

#footer {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8efc1;
  height: 180px;
}


/*Downloaded from https://www.codeseek.co/PeiShin/tomato-xXbLdg */
var s = skrollr.init();

$('#q1').change(function() {
    var n= $('#q1').val();
    var p= 600;
    $('#price1').text('$ ' + n*p);      
});

$('#no').click(
  function(){
    $('.lightbox').css('display', 'none');
  } 
)
  
$("#order_form").submit(function(e)
{
    $('.waiting').css('display', 'flex').complete(function(){
    //var postData = $(this).serializeArray();
    var formURL = "https://script.google.com/macros/s/AKfycbzaVnil4Bv14SQiEGsbQ5Gfuf91gtqDMn2whCPUuQL6YBQS1Cym/exec;"
    $.ajax(
    {
        dataType: 'jsonp',
        url : formURL,
        type: "POST",
        data: {
          "method": "write",
          "o_name": o_name,
          "o_phone": o_phone,
          "r_name": r_name,
          "r_phone": r_phone,
          "q": q,
          "address": address,
          "price": price
        }
    });
    e.preventDefault(); //STOP default action
    e.unbind(); //unbind. to stop multiple form submit.
    });
});
$("#form_input").submit(function(e)
{   
  $('.lightbox').css('display', 'flex');
  $('#o_name').val($('#o_name1').val());
  $('#o_name2').text($('#o_name1').val());  
  $('#o_phone').val($('#o_phone1').val());
  $('#o_phone2').text($('#o_phone1').val());
  $('#q').val($('#q1').val());
  $('#q2').text($('#q1').val());
  $('#price').val($('#price1').text());
  $('#price2').text($('#price1').text());
  $('#r_name').val($('#r_name1').val());
  $('#r_name2').text($('#r_name1').val());
  $('#r_phone').val($('#r_phone1').val());
  $('#r_phone2').text($('#r_phone1').val());
  $('#address').val($('#address1').val());
  $('#address2').val($('#address1').val());
  e.preventDefault();
  e.unbind(); 
});

// $("#order_form").submit(function(e)
// {
//     //var postData = $(this).serializeArray();
//     var formURL = "https://script.google.com/macros/s/AKfycbzaVnil4Bv14SQiEGsbQ5Gfuf91gtqDMn2whCPUuQL6YBQS1Cym/exec";
    
//     $.ajax(
//     {
//         dataType: 'jsonp',
//         url : formURL,
//         type: "POST",
//         data: {
//           "method": "write",
//           "o_name": o_name,
//           "o_phone": o_phone,
//           "r_name": r_name,
//           "r_phone": r_phone,
//           "q": q,
//           "address": address
//         },
//         success:function(data, textStatus, jqXHR) 
//         {
//             alert("ya");
//         },
//         error: function(jqXHR, textStatus, errorThrown) 
//         {
//             alert(JSON.stringify(jqXHR) + JSON.stringify(textStatus) + JSON.stringify(errorThrown));    
//         }
//     });
//     e.preventDefault(); //STOP default action
//     e.unbind(); //unbind. to stop multiple form submit.
// });

Comments