Lucro Assets

Developer
Alex Coven
Size
7,909 Kb
Views
22,264
  1. Lucro Assets Previews
  2. Lucro Assets HTML Codes
  3. Lucro Assets CSS Codes
  4. Lucro Assets JS Codes

How do I make an lucro assets?

What is a lucro assets? How do you make a lucro assets? This script and codes were developed by Alex Coven on 04 December 2022, Sunday.

Lucro Assets Previews
IQ Test

Lucro Assets - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Lucro Assets</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://fonts.googleapis.com/css?family=Roboto|Work+Sans:300,400,500,600" rel="stylesheet">
<!-- BLOG INTERIOR -->
<div id="hero"> <img src="https://images.unsplash.com/photo-1485346158292-127cc6655324?dpr=1&auto=format&fit=crop&w=1500&h=910&q=80&cs=tinysrgb&crop=">
</div>
<div class="container">
<h4>Typography</h4>
<h1>More Deals, <br> Less Modeling</h1>
<h2>Increase Deal Velocity</h2>
<h3>Real Estate Tech firm, <br> Lucro, joins Catapult Chicago</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat ipsum vitae efficitur scelerisque. Proin at viverra ligula. Praesent suscipit orci et nunc ornare accumsan. Mauris tincidunt scelerisque augue.</p>
</div>
<div class="container">
<h4>Buttons</h4>
<a class="button" href="#">Request a demo</a>
<a class="button purple" href="#">Speak with someone</a>
<a class="button green" href="#">Request a demo</a> <a class="button outlined blue" href="#">Read full story</a>
<a class="button outlined" href="#">Next Story</a>
<a class="button outlined" href="#">Prev Story</a>
</div>
<div class="container">
<h4>Elements</h4>
<h2>Increase Deal Velocity</h2>
<div class="seperator"></div>
<p>Lucros collaboration suite enables organizations to get more deals done faster. On the Lucro platform, every side of a deal is working off the same model, allowing conversations to be about the deal itself rather than calculations.</p>
<ul class="dots"> <li></li> <li></li> <li class="active"></li>
</ul>
</div>
<div class="container">
<ul class="logo-grid"> <li><img src="https://image.ibb.co/dJ0XxF/Colliers.png"></li> <li><img src="https://image.ibb.co/dJ0XxF/Colliers.png"></li> <li></li> <li><img src="https://image.ibb.co/dJ0XxF/Colliers.png"></li> <li><img src="https://image.ibb.co/dJ0XxF/Colliers.png"></li> <li></li> <li><img src="https://image.ibb.co/dJ0XxF/Colliers.png"></li> <li><img src="https://image.ibb.co/dJ0XxF/Colliers.png"></li> <li></li>
</ul>
</div>
<div class="plans-section"> <div class="container"> <div class="plan"> <div class="label"> <h4>Developers</h4> </div> <h2>$99.95</h2> <h4>per month</h4> <hr> <ul> <li>Up to 15 Deals Per Month</li> <li>Up To $50m In Deal Volume Per Month</li> <li>1 User</li> </ul> <a class="button" href="#">Start a free trial</a> </div> <div class="plan"> <div class="label"> <h4>Developers</h4> </div> <h2>$99.95</h2> <h4>per month</h4> <hr> <ul> <li>Up to 15 Deals Per Month</li> <li>Up To $50m In Deal Volume Per Month</li> <li>1 User</li> </ul> <a class="button" href="#">Start a free trial</a> </div> <div class="plan"> <div class="label"> <h4>Developers</h4> </div> <h2>$99.95</h2> <h4>per month</h4> <hr> <ul> <li>Up to 15 Deals Per Month</li> <li>Up To $50m In Deal Volume Per Month</li> <li>1 User</li> </ul> <a class="button" href="#">Start a free trial</a> </div> </div>
</div>
<div class="container">
<h4>Navigation</h4>
<ul class="navigation"> <li><a href="#">about</a></li> <li><a href="#">testimonials</a></li> <li><a href="#">pricing</a></li> <li><a href="#">contact</a></li> <li><a href="#">deal review</a></li> <li><a href="#">login</a></li> <li><a class="button outlined" href="#">sign up</a></li>
</ul>
</div>
<div class="container">
<h4>Mobile Menu</h4> <div id="hamburger"> <span></span> <span></span> <span></span> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Lucro Assets - Script Codes CSS Codes

body { text-rendering: optimizeLegibility; -webkit-font-feature-settings: "liga"; -ms-font-feature-settings: "liga"; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.container { max-width: 1440px; margin: 0 auto; display: block; margin: 60px;
}
.container .button { margin-right: 20px; margin-bottom: 20px;
}
.container h4 { margin-bottom: 20px;
}
h1 { font-size: 75px; font-family: 'Work Sans', sans-serif; font-weight: 300; letter-spacing: -0.04em; color: #163057; line-height: 0.95em; margin-bottom: 0.25em;
}
h2 { font-size: 60px; font-family: 'Work Sans', sans-serif; font-weight: 300; letter-spacing: -0.04em; color: #163057; line-height: 0.95em; margin-bottom: 0.4em;
}
h3 { font-size: 40px; font-family: 'Work Sans', sans-serif; font-weight: 300; letter-spacing: -0.04em; color: #163057; line-height: 0.95em; margin-bottom: 0.4em;
}
h4 { font-size: 12px; font-family: 'Work Sans', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: #1d96eb;
}
p { font-size: 16px; font-family: 'Roboto', sans-serif; font-weight: normal; letter-spacing: 0.025em; line-height: 1.5em; color: #a6acb7; max-width: 600px;
}
ul.navigation { background: #163057; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -ms-flex-line-pack: center; align-content: center;
}
ul.navigation li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
ul.navigation li:hover a { color: #1d96eb;
}
ul.navigation li:hover:last-child { box-shadow: none; background-color: transparent;
}
ul.navigation li a { text-align: center; padding: 20px; font-size: 10px; text-decoration: none; font-family: 'Work Sans', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: white; -webkit-transition: color 350ms ease-in-out; transition: color 350ms ease-in-out;
}
ul.navigation li a.button { font-size: 10px; color: white; border-color: #1d96eb; margin: 20px; -webkit-transition: background 350ms ease-in-out; transition: background 350ms ease-in-out;
}
ul.navigation li a.button:hover { background: #1d96eb;
}
#hamburger { height: 35px; width: 35px; cursor: pointer; background: #163057; padding: 20px;
}
#hamburger span { width: 100%; display: block; height: 2px; background: #fff; opacity: 1; -webkit-transition: -webkit-transform 350ms ease-in-out, opacity 350ms ease-in-out, width 350ms ease-in-out; -webkit-transition: opacity 350ms ease-in-out, width 350ms ease-in-out, -webkit-transform 350ms ease-in-out; transition: opacity 350ms ease-in-out, width 350ms ease-in-out, -webkit-transform 350ms ease-in-out; transition: transform 350ms ease-in-out, opacity 350ms ease-in-out, width 350ms ease-in-out; transition: transform 350ms ease-in-out, opacity 350ms ease-in-out, width 350ms ease-in-out, -webkit-transform 350ms ease-in-out;
}
#hamburger span:nth-child(1) { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 120ms; transition-delay: 120ms;
}
#hamburger span:nth-child(2) { -webkit-transform: translateY(13px); transform: translateY(13px); -webkit-transition-delay: 120ms; transition-delay: 120ms; margin: 0 auto;
}
#hamburger span:nth-child(3) { -webkit-transform: translateY(26px); transform: translateY(26px); -webkit-transition-delay: 120ms; transition-delay: 120ms;
}
html.open #hamburger span:first-child { -webkit-transition-delay: 150ms; transition-delay: 150ms; -webkit-transform: translateY(14px) rotate(135deg); transform: translateY(14px) rotate(135deg);
}
html.open #hamburger span:nth-child(2) { -webkit-transition-delay: 150ms; transition-delay: 150ms; width: 0;
}
html.open #hamburger span:last-child { -webkit-transition-delay: 150ms; transition-delay: 150ms; -webkit-transform: translateY(10px) rotate(-135deg); transform: translateY(10px) rotate(-135deg);
}
#hero { position: relative; height: 30em; overflow: hidden;
}
#hero img { min-width: 100%; min-height: 100%; -webkit-filter: grayscale(100%) saturate(100%) contrast(110%); filter: grayscale(100%) saturate(100%) contrast(110%);
}
#hero:before, #hero:after { content: ''; width: 100%; height: 100%; display: block; color: #fff; position: absolute; bottom: 0; left: 0; z-index: 20; mix-blend-mode: multiply;
}
#hero:before { /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(29, 150, 235, 0.9) 0%, rgba(22, 48, 87, 0.9) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(29, 150, 235, 0.9) 0%, rgba(22, 48, 87, 0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e61d96eb', endColorstr='#e6163057', GradientType=1 ); /* IE6-9 */
}
#hero:after { /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(29, 150, 235, 0.9) 0%, rgba(22, 48, 87, 0.9) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(29, 150, 235, 0.9) 0%, rgba(22, 48, 87, 0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e61d96eb', endColorstr='#e6163057', GradientType=0 ); /* IE6-9 */
}
a.button { display: inline-block; font-size: 12px; font-family: 'Work Sans', sans-serif; font-weight: 600; text-decoration: none; text-transform: uppercase; letter-spacing: 2px; color: #fff; text-align: center; border-radius: 4px; padding: 18px 25px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15); background: #1d96eb; /* Old browsers */ /* FF3.6-15 */ background: -webkit-linear-gradient(left, #1d96eb 0%, #4cacef 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #1d96eb 0%, #4cacef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$gradient-color, endColorstr=lighten($gradient-color, 10%), GradientType=1 ); /* IE6-9 */ -webkit-transition: box-shadow 350ms ease-in-out, opacity 350ms ease-in-out; transition: box-shadow 350ms ease-in-out, opacity 350ms ease-in-out;
}
a.button:hover { box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25); opacity: 0.9;
}
a.button.purple { display: inline-block; font-size: 12px; font-family: 'Work Sans', sans-serif; font-weight: 600; text-decoration: none; text-transform: uppercase; letter-spacing: 2px; color: #fff; text-align: center; border-radius: 4px; padding: 18px 25px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15); background: #1d96eb; /* Old browsers */ /* FF3.6-15 */ background: -webkit-linear-gradient(left, #a984ce 0%, #c3a8dd 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #a984ce 0%, #c3a8dd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$gradient-color, endColorstr=lighten($gradient-color, 10%), GradientType=1 ); /* IE6-9 */ -webkit-transition: box-shadow 350ms ease-in-out, opacity 350ms ease-in-out; transition: box-shadow 350ms ease-in-out, opacity 350ms ease-in-out;
}
a.button.purple:hover { box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25); opacity: 0.9;
}
a.button.green { display: inline-block; font-size: 12px; font-family: 'Work Sans', sans-serif; font-weight: 600; text-decoration: none; text-transform: uppercase; letter-spacing: 2px; color: #fff; text-align: center; border-radius: 4px; padding: 18px 25px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15); background: #1d96eb; /* Old browsers */ /* FF3.6-15 */ background: -webkit-linear-gradient(left, #60b839 0%, #7ccb59 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #60b839 0%, #7ccb59 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$gradient-color, endColorstr=lighten($gradient-color, 10%), GradientType=1 ); /* IE6-9 */ -webkit-transition: box-shadow 350ms ease-in-out, opacity 350ms ease-in-out; transition: box-shadow 350ms ease-in-out, opacity 350ms ease-in-out;
}
a.button.green:hover { box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25); opacity: 0.9;
}
a.button.outlined { display: inline-block; font-size: 12px; font-family: 'Work Sans', sans-serif; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 2px; color: #163057; text-align: center; border-radius: 4px; padding: 18px 25px; box-shadow: 0 0 0 transparent; background: transparent; border: 1px solid rgba(22, 48, 87, 0.2); -webkit-transition: box-shadow 350ms ease-in-out, border 250ms ease-in-out, color 350ms ease-in-out; transition: box-shadow 350ms ease-in-out, border 250ms ease-in-out, color 350ms ease-in-out;
}
a.button.outlined:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); border: 1px solid rgba(22, 48, 87, 0);
}
a.button.outlined.blue { display: inline-block; font-size: 12px; font-family: 'Work Sans', sans-serif; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 2px; color: #163057; text-align: center; border-radius: 4px; padding: 18px 25px; box-shadow: 0 0 0 transparent; background: transparent; border: 1px solid rgba(22, 48, 87, 0.2); -webkit-transition: box-shadow 350ms ease-in-out, border 250ms ease-in-out, color 350ms ease-in-out; transition: box-shadow 350ms ease-in-out, border 250ms ease-in-out, color 350ms ease-in-out; border-color: #1d96eb; color: #1d96eb;
}
a.button.outlined.blue:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); border: 1px solid rgba(22, 48, 87, 0);
}
a.button.outlined.blue:hover { color: #163057;
}
.seperator { background: #1d96eb; /* Old browsers */ /* FF3.6-15 */ background: -webkit-linear-gradient(left, #1d96eb 0%, #4cacef 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #1d96eb 0%, #4cacef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$gradient-color, endColorstr=lighten($gradient-color, 10%), GradientType=1 ); /* IE6-9 */ width: 100px; height: 2px; margin: 1.4em 0px;
}
ul.logo-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: 600px;
}
ul.logo-grid li { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-flex: 1; -ms-flex: 1 32%; flex: 1 32%; background: white; margin: 2.5px; width: 100%; height: 6em; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); -webkit-transition: box-shadow 350ms ease-in-out, -webkit-transform 350ms ease-in-out; transition: box-shadow 350ms ease-in-out, -webkit-transform 350ms ease-in-out; transition: box-shadow 350ms ease-in-out, transform 350ms ease-in-out; transition: box-shadow 350ms ease-in-out, transform 350ms ease-in-out, -webkit-transform 350ms ease-in-out; -webkit-transform: scale(1); transform: scale(1);
}
ul.logo-grid li:nth-child(1), ul.logo-grid li:nth-child(4), ul.logo-grid li:nth-child(7) { margin-left: 0;
}
ul.logo-grid li:nth-child(3), ul.logo-grid li:nth-child(6), ul.logo-grid li:nth-child(9) { margin-right: 0;
}
ul.logo-grid li img { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; max-width: 100px; min-width: 50%; margin: 0 auto; display: block; padding: 25px;
}
ul.logo-grid li:hover { box-shadow: 0 4px 40px rgba(0, 0, 0, 0.15);
}
.plans-section { background: #1d96eb; /* Old browsers */ /* FF3.6-15 */ background: -webkit-linear-gradient(left, #163057 0%, #204680 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #163057 0%, #204680 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$gradient-color, endColorstr=lighten($gradient-color, 10%), GradientType=1 ); /* IE6-9 */
}
.plans-section .container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-line-pack: center; align-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 60px 20px; margin: 0;
}
.plans-section .container .plan { max-width: 310px; margin: 10px; -webkit-box-flex: 1; -ms-flex: 1 32%; flex: 1 32%; display: -webkit-box; display: -ms-flexbox; display: flex; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: #fff; width: 100%; border-radius: 4px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); -webkit-transition: box-shadow 350ms ease-in-out, -webkit-transform 350ms ease-in-out; transition: box-shadow 350ms ease-in-out, -webkit-transform 350ms ease-in-out; transition: box-shadow 350ms ease-in-out, transform 350ms ease-in-out; transition: box-shadow 350ms ease-in-out, transform 350ms ease-in-out, -webkit-transform 350ms ease-in-out;
}
.plans-section .container .plan:hover { -webkit-transform: scale(1.02); transform: scale(1.02); box-shadow: 0 4px 40px rgba(0, 0, 0, 0.15);
}
.plans-section .container .plan .label { border-radius: 4px 4px 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #1d96eb; /* Old browsers */ /* FF3.6-15 */ background: -webkit-linear-gradient(left, #1d96eb 0%, #4cacef 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #1d96eb 0%, #4cacef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$gradient-color, endColorstr=lighten($gradient-color, 10%), GradientType=1 ); /* IE6-9 */
}
.plans-section .container .plan .label h4 { color: #fff; text-align: center; width: 100%; margin: 20px auto;
}
.plans-section .container .plan h2 { margin: 35px auto 15px auto;
}
.plans-section .container .plan h4 { margin: 0 auto 30px auto;
}
.plans-section .container .plan hr { width: 100%; border-width: 0; border-top: 1px solid rgba(22, 48, 87, 0.2);
}
.plans-section .container .plan ul { margin-top: 20px;
}
.plans-section .container .plan ul li { font-size: 14px; font-family: 'Roboto', sans-serif; font-weight: normal; letter-spacing: 0.025em; line-height: 2em; color: #a6acb7; max-width: 600px;
}
.plans-section .container .plan ul li:before { content: ''; opacity: 0.95; width: 8px; height: 8px; background-size: cover; background-repeat: no-repeat; background-image: url("http://www.pngall.com/wp-content/uploads/2016/04/Hexagon-PNG-Picture-180x180.png"); margin-right: 7px; display: inline-block;
}
.plans-section .container .plan a.button { max-width: 180px; margin: 40px auto 50px auto;
}
.plans-section .container .plan:first-child { margin-left: 0;
}
.plans-section .container .plan:last-child { margin-right: 0;
}
ul.dots { margin: 20px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; max-width: 70px;
}
ul.dots li { display: inline-block; height: 8px; width: 8px; border-radius: 50%; border: 1px solid #a6acb7; background: white; -webkit-transition: -webkit-transform 350ms ease-in-out, background 350ms ease-in-out, border-color 350ms ease-in-out; -webkit-transition: background 350ms ease-in-out, border-color 350ms ease-in-out, -webkit-transform 350ms ease-in-out; transition: background 350ms ease-in-out, border-color 350ms ease-in-out, -webkit-transform 350ms ease-in-out; transition: transform 350ms ease-in-out, background 350ms ease-in-out, border-color 350ms ease-in-out; transition: transform 350ms ease-in-out, background 350ms ease-in-out, border-color 350ms ease-in-out, -webkit-transform 350ms ease-in-out; cursor: pointer;
}
ul.dots li:hover { background: #1d96eb; border-color: white; -webkit-transform: scale(1.5); transform: scale(1.5);
}
ul.dots li:hover ~ li { border: 1px solid #a6acb7; background: white; -webkit-transform: scale(1); transform: scale(1);
}
ul.dots li.active { background: #1d96eb; border-color: white; -webkit-transform: scale(1.5); transform: scale(1.5);
}

Lucro Assets - Script Codes JS Codes

document.querySelector('#hamburger').addEventListener('click', (e) => { document.querySelector('html').classList.toggle('open'); });
Lucro Assets - Script Codes
Lucro Assets - Script Codes
Home Page Home
Developer Alex Coven
Username alcoven
Uploaded December 04, 2022
Rating 3
Size 7,909 Kb
Views 22,264
Do you need developer help for Lucro Assets?

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!

Alex Coven (alcoven) Script Codes
Name
Atomic Hamburger Menu CSS
CSS Heart to X WIP
A Pen by Alex Coven
Check it off
Hover triangle wipe css
Material More Button CSS
Charging Battery CSS
Word randomize and replace.
Squid Swimming Spinning SVG Animation
Atom Menu SVG Animation
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!