A Pen by Aurer

Developer
Aurer
Size
3,919 Kb
Views
38,456
  1. A Pen by Aurer Previews
  2. A Pen by Aurer HTML Codes
  3. A Pen by Aurer CSS Codes

How do I make an a pen by aurer?

What is a a pen by aurer? How do you make a a pen by aurer? This script and codes were developed by Aurer on 03 August 2022, Wednesday.

A Pen by Aurer Previews
IQ Test

A Pen by Aurer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Aurer</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <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(http://fonts.googleapis.com/css?family=Lato:100,400);
* { box-sizing: border-box;
}
body { font-family: "Lato", sans-serif;
}
h1 { font-weight: lighter; color: #EC3701; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); text-align: center; margin: 16px 0 24px; font-size: 3em;
}
section { padding: 1em;
}
.options { width: 300px; position: fixed; top: 0; left: 0; bottom: 0; background: #213746; background-image: linear-gradient(-179deg, #213746 0%, #182833 100%);
}
.output { position: fixed; top: 0; right: 0; left: 300px; bottom: 0; overflow: auto; background: #354B5B; background-image: linear-gradient(-179deg, #567286 0%, #354B5B 100%); text-align: center;
}
.screenshot { box-shadow: 0 3px 20px rgba(0, 0, 0, 0.4); display: inline-block; margin: 0 2em 2em 0; vertical-align: top;
}
.screenshot img { display: block; max-width: 100%;
}
form input[type=text] { padding: .7em; width: 100%; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; background: #15242D; color: #eee;
}
form label { color: #ccc;
}
form .field { margin: 0 0 1.5em;
}
form button { float: right;
}
.btn { padding: .6em 1.8em; font-size: .9em; box-sizing: border-box; display: inline-block; text-decoration: none; text-align: center; line-height: 1.1; margin: 0 .2em; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.15); color: #ccc; background: rgba(255, 255, 255, 0.07); transition: background .2s;
}
.btn:hover,
.btn:focus { color: #fff; cursor: pointer; background: rgba(255, 255, 255, 0.2); outline: none;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section class="options"> <div class="row"> <h1>S</h1>	<form class="shot">	<div class="field">	<input type="text" id="in-url" name="url" placeholder="URL e.g. google.com">	</div> <div class="field">	<input type="checkbox" name="refresh" value="true" id="in-refresh"> <label for="in-refresh">Force Refresh</label>	<button class="btn" type="submit" name="fetch" value="true">Render</button> </div>	</form> </div>
</section>
<section class="output"> <div class="row"> <div class="screenshot"> <img src="//placehold.it/320x568/" /> </div> <div class="screenshot"> <img src="//placehold.it/600x1024/" /> </div> <div class="screenshot"> <img src="//placehold.it/1024x768/" /> </div> <div class="screenshot"> <img src="//placehold.it/1280x800/" /> </div> </div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

A Pen by Aurer - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Lato:100,400);
* { box-sizing: border-box;
}
body { font-family: "Lato", sans-serif;
}
h1 { font-weight: lighter; color: #EC3701; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); text-align: center; margin: 16px 0 24px; font-size: 3em;
}
section { padding: 1em;
}
.options { width: 300px; position: fixed; top: 0; left: 0; bottom: 0; background: #213746; background-image: linear-gradient(-179deg, #213746 0%, #182833 100%);
}
.output { position: fixed; top: 0; right: 0; left: 300px; bottom: 0; overflow: auto; background: #354B5B; background-image: linear-gradient(-179deg, #567286 0%, #354B5B 100%); text-align: center;
}
.screenshot { box-shadow: 0 3px 20px rgba(0, 0, 0, 0.4); display: inline-block; margin: 0 2em 2em 0; vertical-align: top;
}
.screenshot img { display: block; max-width: 100%;
}
form input[type=text] { padding: .7em; width: 100%; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; background: #15242D; color: #eee;
}
form label { color: #ccc;
}
form .field { margin: 0 0 1.5em;
}
form button { float: right;
}
.btn { padding: .6em 1.8em; font-size: .9em; box-sizing: border-box; display: inline-block; text-decoration: none; text-align: center; line-height: 1.1; margin: 0 .2em; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.15); color: #ccc; background: rgba(255, 255, 255, 0.07); transition: background .2s;
}
.btn:hover,
.btn:focus { color: #fff; cursor: pointer; background: rgba(255, 255, 255, 0.2); outline: none;
}
A Pen by Aurer - Script Codes
A Pen by Aurer - Script Codes
Home Page Home
Developer Aurer
Username aurer
Uploaded August 03, 2022
Rating 3
Size 3,919 Kb
Views 38,456
Do you need developer help for A Pen by Aurer?

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!

Aurer (aurer) Script Codes
Name
CSS cube experiment
Squished forms mockup
Letter fountain
Fixed banners and parallax backgrounds
Webkit CSS Scrollbars
Collapsible menu using CSS transitions
Update manager experimental UI
Tomcat chrome extension UI
SVG Loading icons
Learning canvas drawing
Create amazing blog posts 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!