Dultmeier Sales

when in doubt
<code/> it out
color: #222;
font-size: 48px;
$('.code').addClass('arrow');
<div class="code"> </> </div>
</>
Mobile First Design
Mobile First Design
Car Wash
Agricultural
Industrial
Lawn & Turf
Deice
Petrolium
Carpet
Car Wash
Agricultural
Industrial
Lawn & Turf
Deice
Petrolium
Carpet

animated hamburger

Divider

HTML

<div class="header-divider-container">
        <h2 class="header-divider">Divider</h2>
</div>

see all CSS

CSS

.header-divider-container {
width: 100%;
margin: 0 auto;
line-height: 70px; }

h2 {
color: #19d;
font-family: Roboto;
font-size: 35px;
position: relative;
overflow: hidden; }

.header-divider::before {
content: "";
width: 150px;
height: 6px;
display: inline-block;
transform-origin: bottom right;
transform: skew(40deg,0);
position: absolute;
left: 0;
bottom: 0px;
background: #19d; }

.header-divider::after {
content: "";
width: 100%;
margin-left: 157px;
height: 6px;
transform-origin: bottom right;
transform: skew(40deg,0);
position: absolute;
left: 0;
bottom: 0;
border-left: 1px solid #ddd;
border-bottom: 1px solid #ddd; }

Divider

HTML
CSS

Another Divider

HTML

<div class="header-divider-container">
        <h2 class="another-header-divider">Another Divider</h2>
</div>

see all CSS

CSS

.header-divider-container {
width: 100%;
margin: 0 auto;
line-height: 70px; }

h2 {
color: #19d;
font-family: Roboto;
font-size: 35px;
position: relative;
overflow: hidden; }

.another-header-divider::before {
content: "";
width: 150px;
height: 1px;
display: inline-block;
position: absolute;
left: 0;
bottom: 0;
background: #19d; }

.another-header-divider::after {
content: "";
width: 100%;
margin-left: 150px;
height: 1px;
position: absolute;
left: 0;
bottom: 0;
background: #ddd; }

Please dont crush me!
mistakes are opportunities to sharpen your strength, always push forward
Schematic
Manufacturer
N
A
V
N
V
Cross-Platform Challenge
custom scrollbar
Window   ✓
Mac      ✓
jquery
sticky header

sticky header

image enlarger

image enlarger

Car Wash

Agricultural

Industrial

Lawn

Deice

Petroleum

D
I
V
I
S
I
O
N
C
I
R
C
L
E
Low-fi Design
Lo-fi Design
My Account
logging in is easier and quicker, also more options available for returning customers
Navigation

navigating is more effective along with cool sliding animations

Navigation

navigating is more effective along with cool sliding animation

Hi-fi Design
Hi-fi Design

Code around and find out

Yo, hit that front camera on the iMac 

<!-- Look alike Apple Logo Pure CSS. I don't own this logo -->
 <div class="ninh-apple-logo">
   <div class="ninh-apple-logo-left"></div>
   <div class="ninh-apple-logo-right"></div>
</div>

<style>
.ninh-apple-logo {
display: flex;
transform: translate(50%,50%);
transform-origin: right;
right: 49%;
bottom: 10px;
position: absolute;
cursor: pointer;
}
.ninh-apple-logo-left {
position: relative;
width: 90px;
height: 110px;
background: #30bb7c;
transform: rotate(-20deg);
border-radius: 100px 100px 0px 80px;
}
.ninh-apple-logo-right {
position: relative;
width: 90px;
height: 110px;
background: #30bb7c;
transform: rotate(20deg) scale(-1);
border-radius: 80px 0px 100px 100px;
left: -58px;
}
.ninh-apple-logo-left:before {
content: "";
width: 40px;
height: 40px;
background: #30bb7c;
display: block;
position: relative;
transform: rotate(10deg);
top: -33px;
right: -85px;
border-radius: 100px 0px;
}
.ninh-apple-logo-right:before {
content: "";
width: 50px;
height: 50px;
background: #e9f8ff;
display: block;
border-radius: 60px;
position: relative;
right: 20px;
top: 60px;
}
</style>
keep calm
and
code on
reminder apple = on/off
• exit
• minimize
• maximize
That's all for now!