Cake
How do I make an cake?
What is a cake? How do you make a cake? This script and codes were developed by Kenny Chen on 31 October 2022, Monday.
Cake - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>cake</title> <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://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top navbar-top at_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="navbar-brand" href="#header_index">logo</a> </div> <div class="navbar-collapse collapse" id="navbar"> <ul class="nav navbar-nav navbar-right"> <li><a href="#section_about">About</a></li> <li class="active"><a href="#section_works">Product</a></li> <li><a href="#section_contact">Contact</a></li> <li><i class="fa fa-cart-arrow-down"></i><i class="fa fa-facebook-official"></i><i class="fa fa-instagram"></i></li> <li><a href="#">LOG IN</a></li> <li><a href="#">SIGN UP</a></li> </ul> </div> </div>
</nav>
<div class="box"></div>
<section class="debug" id="new"> <div class="container"> <div class="row"> <h2>最新消息</h2> </div> </div> <div class="slider-wr"> <div class="slider"> <div class="slide"> <div class="img-responsive"><img src="https://d24pyncn3hxs0c.cloudfront.net/sites/default/files/styles/uc_product_full/public/Black-forest-cake-1-2-Kg-A.jpg?itok=ZVi4AuEJ" alt=""/></div> <div class="texts"> <h4 class="title">蛋糕</h4> <p class="content">新品上市囉!!!</p> </div> </div> <div class="slide"> <div class="img-responsive"><img src="https://www.bbcgoodfood.com/sites/default/files/styles/recipe/public/recipe_images/recipe-image-legacy-id--364199_12.jpg?itok=SQT-JZQw" alt=""/></div> <div class="texts"> <h4 class="title">蛋糕</h4> <p class="content">新品上市囉!!!</p> </div> </div> <div class="slide"> <div class="img-responsive"><img src="https://www.bbcgoodfood.com/sites/default/files/styles/recipe/public/recipe_images/recipe-image-legacy-id--890489_11.jpg?itok=T6tXYo-W" alt=""/></div> <div class="texts"> <h4 class="title">蛋糕</h4> <p class="content">新品上市囉!!!</p> </div> </div> <div class="slide"> <div class="img-responsive"><img src="https://www.bbcgoodfood.com/sites/default/files/styles/category_retina/public/date-banana-rum-loaf_0.jpg?itok=4Uv9zqku" alt=""/></div> <div class="texts"> <h4 class="title">蛋糕</h4> <p class="content">新品上市囉!!!</p> </div> </div> <div class="slide"> <div class="img-responsive"><img src="https://www.bbcgoodfood.com/sites/default/files/styles/category_retina/public/recipe-collections/collection-image/2013/05/pimms-cake.jpg?itok=NPn4Sfqf" alt=""/></div> <div class="texts"> <h4 class="title">蛋糕</h4> <p class="content">新品上市囉!!!</p> </div> </div> </div> </div>
</section><br/><br/><br/><br/>
<section id="text"> <div class="container"> <p class="wow fadeInLeftBig">why can it be so delicious?</p> </div>
</section>
<section class="debug" id="ingredient"> <div class="container"> <div class="row"> <h2 class="wow fadeInUp">嚴選食材</h2> </div> <div class="row"> <div class="col-sm-4 i_work"> <h4 class="wow fadeInLeft"><span><img class="l" src="https://www.bacostreet.com.tw/Content/images/hr_left.png"/></span>雞蛋<span><img class="r" src="https://www.bacostreet.com.tw/Content/images/hr_right.png"/></span></h4> <div class="imgbox wow bounce"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSDnRrbhhSSQt6ZlSDl2hCDzp0pKKpjGscDMUg0YXmiFAT2smT2" alt=""/></div> <p class="wow fadeInRight"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis tempore architecto, ab.</p> </div> <div class="col-sm-4 i_work"> <h4 class="wow fadeInLeft"><span><img class="l" src="https://www.bacostreet.com.tw/Content/images/hr_left.png"/></span>牛奶<span><img class="r" src="https://www.bacostreet.com.tw/Content/images/hr_right.png"/></span></h4> <div class="imgbox wow bounce"><img src="https://s-media-cache-ak0.pinimg.com/564x/16/ed/d9/16edd986a106e7e3d0bd5d7daa53c586.jpg" alt=""/></div> <p class="wow fadeInRight"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis tempore architecto, ab.</p> </div> <div class="col-sm-4 i_work"> <h4 class="wow fadeInLeft"><span><img class="l" src="https://www.bacostreet.com.tw/Content/images/hr_left.png"/></span>麵粉<span><img class="r" src="https://www.bacostreet.com.tw/Content/images/hr_right.png"/></span></h4> <div class="imgbox wow bounce"><img src="http://logo.chuangyimao.com/uploads/logo/20141223/141223030428913fce3c8e.jpg" alt=""/></div> <p class="wow fadeInRight"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis tempore architecto, ab.</p> </div> </div> <div class="row"> <div class="col-sm-4 i_work"> <h4 class="wow slideInUp"><span><img class="l" src="https://www.bacostreet.com.tw/Content/images/hr_left.png"/></span>奶油<span><img class="r" src="https://www.bacostreet.com.tw/Content/images/hr_right.png"/></span></h4> <div class="imgbox wow flipInX"><img src="https://pbs.twimg.com/profile_images/2369095658/Butter_Logo-FA.jpg" alt=""/></div> <p class="wow fadeInLeft"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis tempore architecto, ab.</p> </div> <div class="col-sm-4 i_work"> <h4 class="wow slideInUp"><span><img class="l" src="https://www.bacostreet.com.tw/Content/images/hr_left.png"/></span>蜂蜜<span><img class="r" src="https://www.bacostreet.com.tw/Content/images/hr_right.png"/></span></h4> <div class="imgbox wow flipInX"><img src="https://s-media-cache-ak0.pinimg.com/736x/4d/c6/b2/4dc6b231a2a779229c288dc7d9e42c4d.jpg" alt=""/></div> <p class="wow fadeInLeft"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis tempore architecto, ab.</p> </div> <div class="col-sm-4 i_work"> <h4 class="wow slideInUp"><span><img class="l" src="https://www.bacostreet.com.tw/Content/images/hr_left.png"/></span>巧克力<span><img class="r" src="https://www.bacostreet.com.tw/Content/images/hr_right.png"/></span></h4> <div class="imgbox wow flipInX"><img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/03/kenz-best-chocolate-logo-designer-free.png" alt=""/></div> <p class="wow fadeInLeft"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis tempore architecto, ab.</p> </div> </div> </div>
</section>
<footer class="jumbotron"> <div class="container"> <h4 class="center">©2017 All Rights Reserved S&K</h4> <hr/> <div class="row"> <div class="col-sm-6"> <div class="col-sm-7 col-sm-offset-6"> <p><i class="fa fa-phone-square"></i><span>0976-123-456</span></p> </div> <div class="col-sm-7 col-sm-offset-6"> <p><i class="fa fa-envelope-o"></i><span>[email protected]</span></p> </div> </div> <div class="col-sm-6"> <div class="col-sm-7 col-sm-offset-2"> <p><span class="privacy">Privacy</span></p> </div> <div class="col-sm-7 col-sm-offset-2"> <p><i class="fa fa-facebook-official"></i><span>like</span><i class="spare fa fa-facebook-official"></i><span>share</span></p> </div> </div> </div> </div>
</footer> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.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/wow/1.1.2/wow.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Cake - Script Codes CSS Codes
@charset "UTF-8";
* { font-family: 微軟正黑體;
}
body { background-color: black; margin: 0; padding: 0; overflow-x: hidden;
}
.navbar-default .navbar-nav > .active { font-weight: bold; background: transparent;
}
.navbar-default .navbar-nav > .active > a { color: #aaa; background: transparent;
}
.navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #777; background: transparent;
}
nav.navbar { font-weight: bold; -webkit-transition: 0.5s; transition: 0.5s; padding-top: 20px;
}
nav.navbar a { color: #777 !important;
}
nav.navbar a:hover { color: #aaa !important;
}
nav.navbar i { font-size: 25px; margin-top: 10px; margin-left: 8px; color: #777; cursor: pointer;
}
nav.navbar i:hover { color: #aaa;
}
nav.navbar.at_top { background-color: transparent;
}
nav.navbar.at_top i { color: #aaa;
}
nav.navbar.at_top i:hover { color: #777;
}
nav.navbar.at_top a { color: #aaa;
}
nav.navbar.at_top a:hover { color: #777;
}
.box { height: 750px; border: solid 1px white;
}
section#new { margin-top: 80px; text-align: center; margin-bottom: 150px;
}
.slider-wr { width: 80%; padding: 50px 8px; margin: 20px auto; box-sizing: border-box;
}
.slide { position: relative; padding: 0 8px; box-sizing: border-box; cursor: pointer;
}
.slide:before { content: ""; opacity: 0; display: block; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 5; transition: 0.5s;
}
.slide:hover:before, .slide:hover .texts { opacity: 1; transition: 0.5s;
}
.slide .texts { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); opacity: 0; color: #fff; z-index: 6;
}
.slide .img-responsive { max-width: 100%; height: 0; padding-bottom: 95%; overflow: hidden;
}
.slide .img-responsive img { max-width: 100%; transform: scale(1); transition: all 1s ease-out; opacity: 0.5;
}
.slide.slick-center img { transform: scale(1.1); transition: all 1s ease-out; opacity: 1;
}
.slick-prev:before, .slick-next:before { color: grey;
}
section#text { margin-bottom: 230px; text-align: center;
}
section#text p { font-size: 40px; color: #666666;
}
section#ingredient { text-align: center;
}
section#ingredient .i_work { margin-top: 30px;
}
section#ingredient .i_work .imgbox { width: 150px; height: 140px; margin: 0 auto; overflow: hidden;
}
section#ingredient .i_work .imgbox img { height: 100%;
}
section#ingredient .i_work h4 { font-weight: bold;
}
section#ingredient .i_work .l, section#ingredient .i_work .r { width: 70px;
}
section#ingredient .i_work p { margin-top: 10px; font-size: 18px;
}
footer.jumbotron { margin-top: 130px; color: #eee; background-color: #36b4a7; margin-bottom: 0px;
}
footer.jumbotron .center { text-align: center;
}
footer.jumbotron hr { border: solid 2px rgba(0, 0, 0, 0.4); width: 550px; margin: 30px auto;
}
footer.jumbotron i { width: 20px;
}
footer.jumbotron span { margin-left: 5px;
}
footer.jumbotron .privacy { margin-left: -2px;
}
footer.jumbotron .spare { margin-left: 20px;
}
Cake - Script Codes JS Codes
new WOW().init(); $('.slider').slick({ centerMode: true, centerPadding: '30%', slidesToShow: 1, speed: 1000, autoplay: true, dots: true });
$(window).scroll(function(e){ if ($(window).scrollTop()<=0) $(".navbar,.explore").addClass("at_top"); else $(".navbar,.explore").removeClass("at_top");
});
Developer | Kenny Chen |
Username | kennyname |
Uploaded | October 31, 2022 |
Rating | 3 |
Size | 7,220 Kb |
Views | 10,120 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Img responsive | 2,475 Kb |
Paris | 9,968 Kb |
Quick-visual | 3,263 Kb |
A Pen by kenny chen | 4,088 Kb |
Piano | 5,064 Kb |
Twitch complete | 4,011 Kb |
Js-30-5 | 3,353 Kb |
Twitch vanilla | 4,760 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Elephants Full screen site | Orrinward | 3,981 Kb |
A Pen by tugce | Ecgutcnkr | 4,197 Kb |
Filtering with shuffle.js | Deyand | 2,712 Kb |
Fixed with using Calc | Tomleo | 2,542 Kb |
Firefox Breakout Guide | Quincysoeliman | 2,576 Kb |
Buttons for autumn | Nikazawila | 1,795 Kb |
Slides-07-1 POSITION | Exhtml | 1,909 Kb |
BSP Dungeon Generation | Xgundam05 | 5,326 Kb |
Virtual vinyl | Davidpanik | 3,474 Kb |
The CodePen Logo | Kindofone | 4,259 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!