A Pen by Ken Lauguico

Developer
Ken Lauguico
Size
4,517 Kb
Views
12,144
  1. A Pen by Ken Lauguico Previews
  2. A Pen by Ken Lauguico HTML Codes
  3. A Pen by Ken Lauguico CSS Codes

How do I make an a pen by ken lauguico?

What is a a pen by ken lauguico? How do you make a a pen by ken lauguico? This script and codes were developed by Ken Lauguico on 22 December 2022, Thursday.

A Pen by Ken Lauguico Previews
IQ Test

A Pen by Ken Lauguico - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Ken Lauguico</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> <div class="contain" id="fullpage"> <div class="section title"> <p> How to </p> <h1> Make your </h1> <h2> plug-in air freshener </h2> <h1> last six months </h1> <blurb>The point of having an air freshener is for you and other people to think your place smells good once they arrive. Average lifespan of an air freshener oil usually averages at one month. The true problem here is wasting these oils when nobody is even home to smell it.</blurb> <p> Only have it turn on moments after we arrive home. </p> <img src="https://i.imgur.com/OT7MA7W.png" /> </div> <div class="section tools"> <p> Tools </p> <h1> What you'll need </h1> <h2> before we begin </h2> <item>WeMo Switch</item><item>IFTTT</item><item>Wall air freshener</item><item>WiFi</item><img src="https://i.imgur.com/dz7dDZ0.png" /> </div> <div class="section guide one"> <p> Setup </p> <h1> Configure your </h1> <h2> WeMo Switch </h2> <blurb>Setup your WeMo Switch with your local WiFi connection.</blurb><img src="https://i.imgur.com/bbnG1AP.png" /> </div> <div class="section guide two"> <p> Register </p> <h1> Configure your </h1> <h2> IFTTT account </h2> <blurb>Create an IFTTT and connect the WeMo channel</blurb> </div> <div class="section guide three"> <p> Recipe </p> <h1> Create a </h1> <h2> new recipe </h2> <blurb>Create a new recipe with the Date & Time and WeMo Switch channels</blurb> </div> <div class="section guide four"> <p> Timing </p> <h1> Configure your </h1> <h2> Date & Time channel </h2> <blurb>On average it takes maybe a good 15 minutes until you really start smelling the air freshener, so let's make sure it turns on 15 minutes before we arrive home!</blurb> </div> <div class="section guide four"> <h1> Wait </h1> <h2> for it... </h2> <blurb>The first few minutes of the fresh smell is probably all you'll need until you start forgetting about it, so we can set it to turn off 30 minutes after we arrive home.</blurb> </div> <div class="section guide final"> <p> Overall </p> <h1> Adjust according </h1> <h2> to weekends, too! </h2> <blurb>After a month, you'll notice that the oil levels have barely changed! Also, your bank account might seem a little higher than usual ;)</blurb> </div>
</div>
</body>
</html>

A Pen by Ken Lauguico - Script Codes CSS Codes

/* define variables */
/* main scss */
body { background-color: #e5e5e4;
}
body.fp-viewing-0 { background-position: center 0%;
}
body.fp-viewing-1 { background-position: center 50%;
}
body.fp-viewing-2 { background-position: center 100%;
}
#fullpage { margin: 0 auto;
}
h1, h2,
p, blurb, item { font-family: 'Roboto', sans-serif; font-size: 4em; max-width: 100%; padding: 0 15px; margin: 0 auto; height: 64px; overflow: hidden; line-height: 3.5; -webkit-transition: line-height 0.85s cubic-bezier(0.77, 0, 0.175, 1); transition: line-height 0.85s cubic-bezier(0.77, 0, 0.175, 1); z-index: 1;
}
h1 { font-weight: 100; -webkit-transition-delay: .3s; transition-delay: .3s;
}
h2 { margin-top: -6px; font-weight: 300; -webkit-transition-delay: .8s; transition-delay: .8s;
}
img { position: absolute; top: 0; bottom: 0; left: 0; right: -48%; margin: auto; opacity: 0.1; -webkit-transition: opacity .5s; transition: opacity .5s; z-index: 0;
}
img:hover { opacity: 0.9;
}
.section.active h1,
.section.active h2 { line-height: 0.8;
}
.section p, .section blurb { font-size: 1.5em; font-weight: 400; color: #9D9DA3; position: relative; margin: 0; padding: 0 0.8em;
}
.section item { color: white; font-size: 1.5em n; font-weight: 400; margin: 0 0.2em; background-color: black;
}
.section blurb { color: black; font-size: 1.2em; font-weight: 300; line-height: 1.3; padding: 0 !important; top: 0.7em; left: 0.7em;
}
/* define class properties*/
.contain { max-width: 950px;
}
.section { background-color: white; padding: 0 25% 0 4em;
}
A Pen by Ken Lauguico - Script Codes
A Pen by Ken Lauguico - Script Codes
Home Page Home
Developer Ken Lauguico
Username kenlauguico
Uploaded December 22, 2022
Rating 3
Size 4,517 Kb
Views 12,144
Do you need developer help for A Pen by Ken Lauguico?

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!

Ken Lauguico (kenlauguico) Script Codes
Name
Pure CSS Image Slider
Protoshow.js Demo
Animated Captions via data- Attribute
A Responsive Menu
Just an animated underline
Typing Simulator
Flat Email Form
Simple Dot Loader
Force Counter
Fourground Logo
Create amazing art & images 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!