Lilli

Developer
Fred Hawk
Size
6,117 Kb
Views
14,168
  1. Lilli Previews
  2. Lilli HTML Codes
  3. Lilli CSS Codes
  4. Lilli JS Codes

How do I make an lilli?

What is a lilli? How do you make a lilli? This script and codes were developed by Fred Hawk on 14 November 2022, Monday.

Lilli Previews
IQ Test

Lilli - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Lilli</title> <link href='https://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"> <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" id="logo" href="#home"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 400 400" xml:space="preserve" class="logo"><g fill="#fff"><path d="M186.742 12s-29.207 55.5-38.775 75.5c0 0-23.165 37.5-5.036 67.5 0 0 25.683 38 33.237 84.5l21.15.5s9.064-52 32.732-83.5c0 0 21.15-28.5-5.54-71 0 0-31.725-60.5-37.768-73.5z"/><path d="M204 239.43s7.52-65.748 75.696-84.32c0 0 57.147-12.546 73.69 46.678 0 0 9.023 42.16-42.11 56.212 0 0 10.528-40.654-27.57-49.688 0 0-31.08-7.528-61.66 31.62L204 239.43zM62.655 259S2.243 241.907 25.21 186.608c0 0 18.473-44.24 74.89-29.66 0 0 58.417 16.087 69.9 82.446l-18.973 1.005s-26.96-41.224-63.408-31.17c0 0-32.454 7.54-24.965 49.77zM178.287 287h17.436l.67 10.693s7.543 4.846 10.56 14.536c0 0 3.856 14.367 8.047 19.045 0 0-9.053.67-15.423-11.528 0 0 .502 12.7-4.024 20.55L187.003 355l-9.388-14.7s-4.526-5.014-3.52-20.718c0 0-3.522 12.195-16.095 11.86 0 0 7.376-8.52 9.724-19.547 0 0 1.173-7.35 9.387-14.034l1.177-10.86zM142.485 246l87.757.142s8.343 1.286.167 3.858l-87.924-.142s-7.842-1.857 0-3.858zM143.485 277l87.757.142s8.343 1.286.167 3.858l-87.924-.142s-7.842-1.857 0-3.858zM144.68 256.026h84.305s8.013-.853 8.013 7.157c0 0 .333 6.817-7.18 6.817l-84.97-.17s-7.846.34-7.846-6.988c0 0-.334-6.815 7.68-6.816z"/></g></svg>Salong LEC</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#home">Hem<span class="sr-only">(current)</span></a></li> <li><a href="#about">Om Lilli Costa</a></li> <li><a href="#contact">Kontakt</a></li> <li><a href="https://www.timecenter.se/lillicosta/" target="_blank">Boka tid</a></li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav>
</header>
<section class="home" id="home"> <div class="row"> <div class="col-sm-6 text-center"> <div class="fleur"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 400 300" xml:space="preserve" class="logo"><g fill="#fff"><path d="M186.742 12s-29.207 55.5-38.775 75.5c0 0-23.165 37.5-5.036 67.5 0 0 25.683 38 33.237 84.5l21.15.5s9.064-52 32.732-83.5c0 0 21.15-28.5-5.54-71 0 0-31.725-60.5-37.768-73.5z"/><path d="M204 239.43s7.52-65.748 75.696-84.32c0 0 57.147-12.546 73.69 46.678 0 0 9.023 42.16-42.11 56.212 0 0 10.528-40.654-27.57-49.688 0 0-31.08-7.528-61.66 31.62L204 239.43zM62.655 259S2.243 241.907 25.21 186.608c0 0 18.473-44.24 74.89-29.66 0 0 58.417 16.087 69.9 82.446l-18.973 1.005s-26.96-41.224-63.408-31.17c0 0-32.454 7.54-24.965 49.77zM178.287 287h17.436l.67 10.693s7.543 4.846 10.56 14.536c0 0 3.856 14.367 8.047 19.045 0 0-9.053.67-15.423-11.528 0 0 .502 12.7-4.024 20.55L187.003 355l-9.388-14.7s-4.526-5.014-3.52-20.718c0 0-3.522 12.195-16.095 11.86 0 0 7.376-8.52 9.724-19.547 0 0 1.173-7.35 9.387-14.034l1.177-10.86zM142.485 246l87.757.142s8.343 1.286.167 3.858l-87.924-.142s-7.842-1.857 0-3.858zM143.485 277l87.757.142s8.343 1.286.167 3.858l-87.924-.142s-7.842-1.857 0-3.858zM144.68 256.026h84.305s8.013-.853 8.013 7.157c0 0 .333 6.817-7.18 6.817l-84.97-.17s-7.846.34-7.846-6.988c0 0-.334-6.815 7.68-6.816z"/></g></svg> </div> <h1>Välkommen till Salong LEC</h1> <h2>Frisör Lilli Costa</h2> <p><i class="fa fa-mobile" aria-hidden="true"></i> +46(0)70 913 03 34 | <a href="https://maps.here.com/directions/mix/mylocation/Salong-LEC:56.04662,12.70104?map=56.04662,12.67632,12,normal&fb_locale=sv_SE&x=ep" target="_blank"><i class="fa fa-map-marker" aria-hidden="true"></i></a> Bergaliden 11 | 252 23 Helsingborg</p> <button type="button" class="btn btn-warning boka"><a href="https://www.timecenter.se/lillicosta/" target="_blank">Boka tid</a></button> </div> <div class="col-sm-6 text-center"> <h3>Öppet Tider</h3> <p>Måndag stängt</br> Tisdag 12.00-16.00</br> Onsdag 12.00-18.30</br> Torsdag 12.00-18.30</br> Fredag 12.00-18.30</br> Lördag 11.00-15.00</br> Söndag stängt</br> </p> <div class="row"> <div class="col-md-8 col-md-offset-2"> <p>Vid önskemål av andra tider skicka sms till 070 913 03 34 eller meddelande via <a href="https://www.facebook.com/nubbisen/" target="_blank"><i class="fa fa-facebook-square" aria-hidden="true"></i> Facebook</a></p> <p>Prisinfo o behandlingsalternativ finns på <buttontype="button" class="btn btn-warning boka"><a href="https://www.timecenter.se/lillicosta/" target="_blank" class="special-link">Time Center</a></button></p> </div> </div> </div>
</section>
<section class="about" id="about"> <div class="row"> <div class="col-sm-6 text-center module"> <h1>Om Frisör Lilli Costa</h1> <img class="face" src="https://67.media.tumblr.com/4d4fe99edd9eb1bc057de461d7ce33b8/tumblr_o6pjn966Zf1v60ddvo1_400.jpg" alt="Lilli Costa" /> <div class="row"> <div class="col-md-8 col-md-offset-2"> <h3>Tidigare erfarenhet</h3> <p>Tidigare egen verksamhet hos bl a Känsla Hairdressing och Hår Companiet</p> <h3>Utbildning</h3> <p>Frisörelev på Rosdahls Salonger 1986-89</p> </div> </div> </div> <div class="col-sm-6 text-center module"> <h2>Produkter</h2> <div class="row produkter"> <div class="col-md-6 text-center"> <h3>Pro Cortexx</h3> <img class="producter" src="https://65.media.tumblr.com/1caec2e8184d46521aba10ff036ec0c4/tumblr_o6plg1gyay1v60ddvo3_250.jpg" alt="Pro Cortexx" /> </div> <div class="col-md-4 text-center"> <h3>Nashi</h3> <img class="producter" src="https://67.media.tumblr.com/37c3b33694c5758795e3147794c9eb1f/tumblr_o6plg1gyay1v60ddvo2_500.jpg" alt="Nashi" /> </div> <div class="col-md-4 text-center"> <h3>Vision HairCare</h3> <img class="producter" src="https://66.media.tumblr.com/ff1807bd13d082fe914f86880b7f00f8/tumblr_o6plg1gyay1v60ddvo4_1280.jpg" alt="Vision HairCare" /> </div> </div> </div> </div>
</section>
<footer class="contact" id="contact"> <h1 class="text-center">Kontakt</h1> <div class="row"> <div class="col-sm-6 text-center module"> <h3>Kontaktuppgifter</h3> <p><i class="fa fa-mobile" aria-hidden="true"></i> +46(0)70 913 03 34</p> <p><a href="https://maps.here.com/directions/mix/mylocation/Salong-LEC:56.04662,12.70104?map=56.04662,12.67632,12,normal&fb_locale=sv_SE&x=ep" target="_blank"><i class="fa fa-map-marker" aria-hidden="true"></i></a> Bergaliden 11</p> <p>252 23 Helsingborg</p> <p><a href="https://www.facebook.com/nubbisen/" target="_blank"><i class="fa fa-facebook-square" aria-hidden="true"></i> Facebook</a></p> </div> <div class="col-sm-6 text-center module"> <h3>Öppet Tider</h3> <p>Måndag stängt</br> Tisdag 12.00-16.00</br> Onsdag 12.00-18.30</br> Torsdag 12.00-18.30</br> Fredag 12.00-18.30</br> Lördag 11.00-15.00</br> Söndag stängt</br> </p> <div class="row"> <div class="col-md-8 col-md-offset-2"> <p>Vid önskemål av andra tider skicka sms till 070 913 03 34 eller meddelande via <a href="https://www.facebook.com/nubbisen/" target="_blank"><i class="fa fa-facebook-square" aria-hidden="true"></i> Facebook</a></p> </div> </div> </div> </div> <div class="row"> <div class="col-sm-6 col-sm-offset-3 col-md-8 col-md-offset-2 text-center module"> <p>Ledig hyrstol finns. Kontakta Lilli via meddelande på <a href="https://www.facebook.com/nubbisen/" target="_blank"><i class="fa fa-facebook-square" aria-hidden="true"></i> Facebook</a></p> <p>Prisinfo o behandlingsalternativ finns på <buttontype="button" class="btn btn-warning boka"><a href="https://www.timecenter.se/lillicosta/" target="_blank" class="special-link">Time Center</a></button></p> </div> </div>
</footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Lilli - Script Codes CSS Codes

html, body { width: auto !important; overflow-x: hidden !important;
}
.navbar { background-color: #6A4E42; border: none;
}
.navbar-default .navbar-nav > li > a { color: white;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #562C22;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover { color: #A55634; background-color: #D6B89E;
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover { color: #A55634; background-color: #D79774;
}
.navbar-default .navbar-toggle { border-color: #A55634;
}
.navbar-default .navbar-toggle .icon-bar { background-color: white;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { background-color: #A55634;
}
#logo { font-family: 'Tangerine', cursive; font-size: 40px; font-weight: bold; color: white;
}
.home { padding: 50px 0; color: white; font-size: 1.4em;
}
@media (max-width: 768px) { .home { background-image: url("https://67.media.tumblr.com/25ae8278f86056e8f8eaa7673c071547/tumblr_o6pg89mxI01v60ddvo2_1280.jpg"); background-repeat: no-repeat; background-size: cover; }
}
@media (min-width: 769px) { .home { padding-top: 20%; height: 100vh; background-image: url("https://66.media.tumblr.com/b62fdaa31321ff081e8b58ec1eec4bca/tumblr_o6pfhqQgOo1v60ddvo2_1280.jpg"); background-repeat: no-repeat; background-size: cover; }
}
.fleur { margin-top: 30px;
}
.boka { background-color: #A55634; border-color: #A55634;
}
.boka > a { font-size: 1.2em; color: white;
}
@media (min-width: 769px) { .tider { padding-top: 50px; }
}
.about { padding-top: 30px; padding-bottom: 30px; background-color: #F2E7C7;
}
@media (max-width: 768px) { .about { font-size: 1.4em; }
}
@media (min-width: 769px) { .about { font-size: 1.5em; }
}
.face { width: 150px; border-radius: 50%; border: 5px solid #D6B89E;
}
.producter { max-width: 250px; max-height: 250px; -o-object-fit: contain; object-fit: contain;
}
.produkter { overflow: hidden;
}
.contact { padding-top: 30px; padding-bottom: 30px; background-color: #533D32; color: white;
}
@media (max-width: 768px) { .contact { font-size: 1.4em; }
}
@media (min-width: 769px) { .contact { font-size: 1.5em; }
}
.fa { font-size: 1.5em;
}
.come-in { -webkit-transform: translateY(150px); transform: translateY(150px); -webkit-animation: come-in 0.8s ease forwards; animation: come-in 0.8s ease forwards;
}
.already-visible { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation: none; animation: none;
}
@-webkit-keyframes come-in { to { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes come-in { to { -webkit-transform: translateY(0); transform: translateY(0); }
}

Lilli - Script Codes JS Codes

(function($) { $.fn.visible = function(partial) { var $t = $(this), $w = $(window), viewTop = $w.scrollTop(), viewBottom = viewTop + $w.height(), _top = $t.offset().top, _bottom = _top + $t.height(), compareTop = partial === true ? _bottom : _top, compareBottom = partial === true ? _top : _bottom; return ((compareBottom <= viewBottom) && (compareTop >= viewTop)); };
})(jQuery);
var win = $(window);
var allMods = $(".module");
allMods.each(function(i, el) { var el = $(el); if (el.visible(true)) { el.addClass("already-visible"); }
});
win.scroll(function(event) { allMods.each(function(i, el) { var el = $(el); if (el.visible(true)) { el.addClass("come-in"); } });
});
Lilli - Script Codes
Lilli - Script Codes
Home Page Home
Developer Fred Hawk
Username osycon
Uploaded November 14, 2022
Rating 3
Size 6,117 Kb
Views 14,168
Do you need developer help for Lilli?

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!

Fred Hawk (osycon) Script Codes
Name
Weekly UI - Become a member
Weekly UI - Invisionapp Sign up
Camper News
Weekly UI - Dropbox Hero Component
Weekly UI - Mobile design sketches
Weekly UI - Airbnb Footer Component
Portfolio example FCC
Weekly UI - ToDo mobile design
Calcul
A Pen by Fred Hawk
Create amazing sales emails 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!