Cafe Lakulaku

Developer

Size

3,580 Kb

Views

10,120

Cafe Lakulaku Previews
Cafe Lakulaku HTML Codes
Cafe Lakulaku CSS Codes
Cafe Lakulaku JS Codes

How do I make an cafe lakulaku?

What is a cafe lakulaku? How do you make a cafe lakulaku? This script and codes were developed by Esambino Wei Cheng Hsieh on 07 January 2023, Saturday.

Cafe Lakulaku Previews

Cafe Lakulaku - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cafe Lakulaku</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700');
* { margin:0px; padding:0px; text-align:center;
}
img { width: 180px; height: 320px;
}
html, body{ height:100%; font-family: 'Open Sans Condensed', sans-serif; background: #000;
}
h2, h4 { letter-spacing:4px; text-align:center; text-transform:uppercase;
}
h2 { font-weight:300; font-size:2.5em; padding-top:1em; color: #CCC;
}
h2:hover { color: white; cursor: pointer;
}
h4 { font-weight:300; padding:2em; color: #666;
}
h5 { letter-spacing:3px; font-weight:300; color: #CCC;
}
.range { -webkit-box-sizing:border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width:900px; margin:0 auto 5em auto; padding: 0em;
}
.box { position: relative; width: 180px; height: 0px; left: 7.5%; margin: 0.5%; padding-bottom: 353px; float: left; opacity: 0.65;
}
.flip,
.bar { position: absolute;
}
.flip { top:0px; left:0px; width:100%; height:100%; overflow:hidden; background:rgba(255,255,255,0.5); cursor: pointer; -webkit-animation:flipout 0.5s ease forwards; -moz-animation: flipout 0.5s ease forwards; -o-animation: flipout 0.5s ease forwards; animation: flipout 0.5s ease forwards;
}
.bar { bottom:0px; left:0px; width:100%; background: white;
}
.bar h3 { font-size:1.5rem; font-weight:300; text-transform:uppercase; letter-spacing:3px;
}
.box:hover { opacity: 1;
}
.box:hover > .flip { background: rgba(255,255,255,0.8); -webkit-animation:flipin 0.5s ease forwards; -moz-animation: flipin 0.5s ease forwards; -o-animation: flipin 0.5s ease forwards; animation: flipin 0.5s ease forwards;
}
@-webkit-keyframes flipout { 0% {-webkit-transform: translate(0px, 0px) scale(1);} 30% {-webkit-transform: translate(0px, -30px) scale(0.98);} 100% {-webkit-transform: translate(0px, 0px) scale(0.9);}
}
@-o-keyframes flipout { 0% {-o-transform: translate(0px, 0px) scale(1);} 30% {-o-transform: translate(0px, -30px) scale(0.98);} 100% {-o-transform: translate(0px, 0px) scale(0.9);}
}
@-moz-keyframes flipout { 0% {-moz-transform: translate(0px, 0px) scale(1);} 30% {-moz-transform: translate(0px, -30px) scale(0.98);} 100% {-moz-transform: translate(0px, 0px) scale(0.9);}
}
@keyframes flipout { 0% {transform: translate(0px, 0px) scale(1);} 30% {transform: translate(0px, -30px) scale(0.98);} 100% {transform: translate(0px, 0px) scale(0.9);}
}
@-webkit-keyframes flipin { 0% {-webkit-transform: translate(0px, 0px) scale(0.9);} 30% {-webkit-transform: translate(0px, -30px) scale(0.98);} 100% {-webkit-transform: translate(0px, 0px) scale(1);}
}
@-o-keyframes flipin { 0% {-o-transform: translate(0px, 0px) scale(0.9);} 30% {-o-transform: translate(0px, -30px) scale(0.98);} 100% {-o-transform: translate(0px, 0px) scale(1);}
}
@-moz-keyframes flipin { 0% {-moz-transform: translate(0px, 0px) scale(0.9);} 30% {-moz-transform: translate(0px, -30px) scale(0.98);} 100% {-moz-transform: translate(0px, 0px) scale(1);}
}
@keyframes flipin { 0% {transform: translate(0px, 0px) scale(0.9);} 30% {transform: translate(0px, -30px) scale(0.98);} 100% {transform: translate(0px, 0px) scale(1);}
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h2> Cafe Lakulaku </h2>
<h4> Now We Rise & We Are Everywhere </h4>
<article class="range"> <section class="box"> <figure class="flip"> <a href="https://www.facebook.com/cafelakulaku" target="_blank"><img src="https://2.bp.blogspot.com/-ywv6LaSnjgE/Uh9GGzWaFbI/AAAAAAAAA64/fLVMc7_xFAU/s1600/where.jpg" /></a> <figcaption class="bar"> <h3>Home</h3> </figcaption> </figure> </section> <section class="box"> <figure class="flip"> <img src="https://2.bp.blogspot.com/-lNmcHj4MqOM/Uh9GFylK6vI/AAAAAAAAA6g/v3JuP6rfWKU/s1600/coffee.jpg" /> <figcaption class="bar"> <h3>Coffee</h3> </figcaption> </figure> </section> <section class="box"> <figure class="flip"> <img src="https://1.bp.blogspot.com/-BfbEpyEtmgk/Uh9GGNwLN6I/AAAAAAAAA6k/gxHsPPGjIcc/s1600/cake.jpg" /> <figcaption class="bar"> <h3>Cake</h3> </figcaption> </figure> </section> <section class="box"> <figure class="flip"> <img src="https://2.bp.blogspot.com/-XD5AjJLD0Qs/Uh9GGA_yXQI/AAAAAAAAA6s/uZNjG-XOAYw/s1600/contact.jpg" /> <figcaption class="bar"> <h3>Contact</h3> </figcaption> </figure> </section>
</article>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br> <h5> @ Wei-Cheng Hsieh </h5><br><br> <script src="js/index.js"></script>
</body>
</html>

Cafe Lakulaku - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700');
* { margin:0px; padding:0px; text-align:center;
}
img { width: 180px; height: 320px;
}
html, body{ height:100%; font-family: 'Open Sans Condensed', sans-serif; background: #000;
}
h2, h4 { letter-spacing:4px; text-align:center; text-transform:uppercase;
}
h2 { font-weight:300; font-size:2.5em; padding-top:1em; color: #CCC;
}
h2:hover { color: white; cursor: pointer;
}
h4 { font-weight:300; padding:2em; color: #666;
}
h5 { letter-spacing:3px; font-weight:300; color: #CCC;
}
.range { -webkit-box-sizing:border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width:900px; margin:0 auto 5em auto; padding: 0em;
}
.box { position: relative; width: 180px; height: 0px; left: 7.5%; margin: 0.5%; padding-bottom: 353px; float: left; opacity: 0.65;
}
.flip,
.bar { position: absolute;
}
.flip { top:0px; left:0px; width:100%; height:100%; overflow:hidden; background:rgba(255,255,255,0.5); cursor: pointer; -webkit-animation:flipout 0.5s ease forwards; -moz-animation: flipout 0.5s ease forwards; -o-animation: flipout 0.5s ease forwards; animation: flipout 0.5s ease forwards;
}
.bar { bottom:0px; left:0px; width:100%; background: white;
}
.bar h3 { font-size:1.5rem; font-weight:300; text-transform:uppercase; letter-spacing:3px;
}
.box:hover { opacity: 1;
}
.box:hover > .flip { background: rgba(255,255,255,0.8); -webkit-animation:flipin 0.5s ease forwards; -moz-animation: flipin 0.5s ease forwards; -o-animation: flipin 0.5s ease forwards; animation: flipin 0.5s ease forwards;
}
@-webkit-keyframes flipout { 0% {-webkit-transform: translate(0px, 0px) scale(1);} 30% {-webkit-transform: translate(0px, -30px) scale(0.98);} 100% {-webkit-transform: translate(0px, 0px) scale(0.9);}
}
@-o-keyframes flipout { 0% {-o-transform: translate(0px, 0px) scale(1);} 30% {-o-transform: translate(0px, -30px) scale(0.98);} 100% {-o-transform: translate(0px, 0px) scale(0.9);}
}
@-moz-keyframes flipout { 0% {-moz-transform: translate(0px, 0px) scale(1);} 30% {-moz-transform: translate(0px, -30px) scale(0.98);} 100% {-moz-transform: translate(0px, 0px) scale(0.9);}
}
@keyframes flipout { 0% {transform: translate(0px, 0px) scale(1);} 30% {transform: translate(0px, -30px) scale(0.98);} 100% {transform: translate(0px, 0px) scale(0.9);}
}
@-webkit-keyframes flipin { 0% {-webkit-transform: translate(0px, 0px) scale(0.9);} 30% {-webkit-transform: translate(0px, -30px) scale(0.98);} 100% {-webkit-transform: translate(0px, 0px) scale(1);}
}
@-o-keyframes flipin { 0% {-o-transform: translate(0px, 0px) scale(0.9);} 30% {-o-transform: translate(0px, -30px) scale(0.98);} 100% {-o-transform: translate(0px, 0px) scale(1);}
}
@-moz-keyframes flipin { 0% {-moz-transform: translate(0px, 0px) scale(0.9);} 30% {-moz-transform: translate(0px, -30px) scale(0.98);} 100% {-moz-transform: translate(0px, 0px) scale(1);}
}
@keyframes flipin { 0% {transform: translate(0px, 0px) scale(0.9);} 30% {transform: translate(0px, -30px) scale(0.98);} 100% {transform: translate(0px, 0px) scale(1);}
}

Cafe Lakulaku - Script Codes JS Codes

/* https://www.facebook.com/cafelakulaku */

Home Page	Home
Developer	Esambino Wei Cheng Hsieh
Username	Esambino
Uploaded	January 07, 2023
Rating	3
Size	3,580 Kb
Views	10,120

Do you need developer help for Cafe Lakulaku?

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!

Esambino Wei Cheng Hsieh (Esambino) Script Codes

Name	Size
0000	3,281 Kb
CSS3 Latte Art Logo	2,036 Kb
CSS3 Navigation practice	2,125 Kb
CSS3 Slider Practice	2,640 Kb
Slap	1,927 Kb
Apple iPhone 5s style scrolling	5,971 Kb
My three.js practice	3,203 Kb
Tribute to Rorschach	29,121 Kb
Addthis_button	1,691 Kb
My first Timeline	3,128 Kb

Create amazing video scripts with AI!

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!

Similar Scripts & Codes

Name	Username	Size
Toggle Time	Petebot	5,345 Kb
Three js	Paulq	2,353 Kb
Pure CSS Torch Light	Juliendargelos	2,727 Kb
Hovers with popups	Zacharyolson	2,380 Kb
Angular Route	Arun_v606	1,837 Kb
Headroom.js demo	WickyNilliams	3,982 Kb
HTML5 Breakout	Jaysalvat	4,873 Kb
Material design - button rainbow circle	Kunukn	3,652 Kb
Apex Calculator	Michaelwnelson	2,370 Kb
Vue.js	Thommyboy02	1,506 Kb

Do you want hide your ip address?

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!