A Pen by Oliver Turner

Developer
Oliver Turner
Size
3,010 Kb
Views
12,144
  1. A Pen by Oliver Turner Previews
  2. A Pen by Oliver Turner HTML Codes
  3. A Pen by Oliver Turner CSS Codes

How do I make an a pen by oliver turner?

What is a a pen by oliver turner? How do you make a a pen by oliver turner? This script and codes were developed by Oliver Turner on 28 November 2022, Monday.

A Pen by Oliver Turner Previews
IQ Test

A Pen by Oliver Turner - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Oliver Turner</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="demo"> <section class="choices" data-text="or"> <div class="choice"> <h2 class="choice__header">New to the Site?</h2> <div class="choice__body"> <p>Checking out as a guest is quick and easy</p> <button class="btn--action" data-workflow="guest">Guest</button> </div> </div> <div class="choice"> <h2 class="choice__header">Already Registered?</h2> <div class="choice__body"> <p>Sign in now for a faster checkout</p> <button class="btn--action" data-workflow="user">Sign in</button> </div> </div> </section>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

A Pen by Oliver Turner - Script Codes CSS Codes

* { box-sizing: border-box;
}
.title { font-weight: normal; font-size: 16px;
}
.title--mega { font-weight: inherit; font-size: 24px;
}
.title--large, .choice__header { font-weight: inherit; font-size: 18px;
}
.title--small { font-weight: inherit; font-size: 14px;
}
.btn, .btn--action { border: none; background: none; color: white;
}
.btn--action { padding: 10px; text-transform: uppercase; background: cornflowerblue;
}
.choices { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative;
}
.choices:after { content: attr(data-text); position: absolute; display: block; left: 50%; width: 50px; line-height: 50px; margin: -5px 0 0 -25px; border-radius: 50%; font-size: inherit; text-align: center; text-transform: uppercase; background: white;
}
.choice { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin: 0 10px; background: #f2f2f2;
}
.choice__header { position: relative; margin: 0; padding: 10px; text-align: center; background: #3b3b3b; color: white;
}
.choice__header:after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -8px; border-left: 16px inset transparent; border-right: 16px inset transparent; border-top: 8px solid #3b3b3b;
}
.choice__body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 10px;
}
.choice__body p { margin: 10px 0 0;
}
.demo { width: 960px; margin: 40px auto; font-size: 14px;
}
A Pen by Oliver Turner - Script Codes
A Pen by Oliver Turner - Script Codes
Home Page Home
Developer Oliver Turner
Username codedsignal
Uploaded November 28, 2022
Rating 3
Size 3,010 Kb
Views 12,144
Do you need developer help for A Pen by Oliver Turner?

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!

Oliver Turner (codedsignal) Script Codes
Name
Zero element responsive rainbow
Single-element 3d speech bubble
Off-canvas file upload
Responsive progress meter
Isometric projection using skew
The beauty of margin-top in a flex context
Observable Magic Gradient
Frosted glass background
Single element title decoration
Responsive, variable-width, centered, arrowed breadcrumbs
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!