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 |
Js-30-5 | 3,353 Kb |
Img responsive | 2,475 Kb |
A Pen by kenny chen | 4,088 Kb |
Piano | 5,064 Kb |
Quick-visual | 3,263 Kb |
Twitch vanilla | 4,760 Kb |
Paris | 9,968 Kb |
Twitch complete | 4,011 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 |
Atom | Bhlaird | 1,932 Kb |
Twitch Live Channels | Inkblotty | 4,956 Kb |
CSS only simple parallax scroll | Stanssongs | 3,708 Kb |
Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
IE flex collapse bug fix | Rowno | 2,678 Kb |
Twitch | SarahDunlap | 2,937 Kb |
Sass Radar | Jlong | 6,887 Kb |
Shop Talk logo made in CSS | Hugo | 19,368 Kb |
Clock Face Idea | Chrisburnell | 3,196 Kb |
Nested table email layout | Massimo-cassandro | 2,355 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!