Envelope Shape Skew

Developer
Ashley Sullivan
Size
4,400 Kb
Views
14,168
  1. Envelope Shape Skew Previews
  2. Envelope Shape Skew HTML Codes
  3. Envelope Shape Skew CSS Codes
  4. Envelope Shape Skew JS Codes

How do I make an envelope shape skew?

What is a envelope shape skew? How do you make a envelope shape skew? This script and codes were developed by Ashley Sullivan on 12 November 2022, Saturday.

Envelope Shape Skew Previews
IQ Test

Envelope Shape Skew - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Envelope Shape Skew</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="dy-modal"> <div class="content"> <div class="envelope"> <img src="https://d2c4yhy8r5mun3.cloudfront.net/assets/logos/bd-logotype-white-f1d9d9f58e6b2445495d28419a4b881e3c7f3de2bbdb0da002f6bc42437e5000.svg" alt="Brad's Deals logo" class="bd-logo"> </div> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 674 62" class="envelope-point"> <polygon class="cls-1" points="337 62 0 0 674 0 337 62"/> </svg> <p class="subhead">Enter your email below to access this exclusive deal</p> <h1>13 Bottles of Wine + 3 Gifts $90 Shipped</h1> <form id="dy-sign-up-form" name="dyForm"> <label for="dy-email" id="dy-email-label"> <span class="default">Email</span> <span class="error">Make sure your email address is entered correctly and try again.</span> </label> <input type="email" id="dy-email" name="dyEmail" placeholder="Email" /> <input type="submit" value="Sign Up" /> </form> <button id="dy-facebook-sign-up" class="facebook"> <svg class="fbook-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 54.5 45.1" style="enable-background:new 0 0 54.5 45.1;" xml:space="preserve"> <path class="bkg" d="M54.8,45.4H2.8c-1.5,0-2.8-1.2-2.8-2.8V2.8C0,1.3,1.2,0,2.8,0h52.1"/> <path class="logo" d="M33.7,15c0,0-1.8,0-2.5,0c-0.9,0-1.1,0.4-1.1,1.3c0,0.8,0,2.2,0,2.2h3.6l-0.3,3.9h-3.2v11.6h-4.6V22.4h-2.4 v-3.9h2.4c0,0,0-0.6,0-3.1c0-2.9,1.5-4.4,5-4.4c0.6,0,3.2,0,3.2,0V15L33.7,15z"/> </svg> <span class="btn-text">Sign up with Facebook</span> </button> <span id="dy-close-link" class="link close-link">No thanks, go to deal &raquo;</span> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Envelope Shape Skew - Script Codes CSS Codes

@import 'https://fonts.googleapis.com/css?family=Montserrat';
@import 'https://fonts.googleapis.com/css?family=Open+Sans';
.dy-modal { border: 10px solid rgba(255,255,255,0.7); height: 476px; width: 674px;
}
.content { background-color: #FFF; border: 10px solid #2B3336; box-sizing: border-box; height: 100%; overflow: hidden; position: relative; width: 100%;
}
.envelope { background-color: #2B3336; height: 62px; position: relative; width: 100%; background-clip:content-box; text-align: center;
}
.envelope-point { fill: #2b3336;
}
.bd-logo { height: auto; width: 168px; z-index: 1;
}
.subhead { color: #706B6B; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.2; margin: 20px 0 5px 0; text-align: center;
}
h1 { color: #333332; font-family: 'Monsterrat', Helvetica, Arial, sans-serif; font-size: 28px; font-weight: 500; margin: 0; text-align: center;
}
form { margin-top: 26px; text-align: center;
}
.default { overflow: hidden; position: absolute; left: -1000000px; top: auto; width: 1px;
}
label { margin-bottom: 5px; text-align: center;
}
input[type=text],
input[type=email] { border: 1px solid #D0D2D2; border-radius: 4px 0 0 4px; box-shadow: none; box-sizing: border-box; display: inline-block; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 16px; height: 53px; line-height: 1; margin: 0; padding: 0; width: 475px;
}
/* Styling for the placeholder copy, yes it has to be separated out like this */
input::-webkit-input-placeholder { color: #706B6B; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 16px; padding-left: 15px;
}
input:-moz-placeholder { color: #706B6B; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 16px; padding-left: 15px;
}
input::-moz-placeholder { color: #706B6B; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 16px; padding-left: 15px;
}
input:-ms-input-placeholder { color: #706B6B; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 16px; padding-left: 15px;
}
input[type=submit] { background-color: #97B93D; border: 0; border-radius: 0 4px 4px 0; color: #fff; font-family: 'Monsterrat', Helvetica, Arial, sans-serif; font-size: 14px; height: 52px; line-height: 1; margin: 0 0 0 -125px; padding: 0; text-transform: uppercase; width: 125px;
}
.facebook { margin: 22px auto 0 auto; display: block; border-radius: 4px; border: 1px solid #D0D2D2; background-color: #fff; height: 52px; width: 400px; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; color: #706B6B;
}
/* SVG Styling */
.fbook-icon { width: 61px; float: left; margin: -2px 0 0 -6px;
}
.fbook-icon .bkg { fill: #3B5998;
}
.fbook-icon .logo { fill: #FFFFFF;
}
.btn-text { display: inline-block; margin-top: 12px;
}
.close-link { color: #246B7B; display: block; font-family: 'Open Sans', Helvetica, Arial, sans-serif; margin-top: 10px; text-align: center;
}
/* Mobile Styles */
@media screen and (max-width: 768px) { .dy-fixed { position: fixed; } .dy-act-overlay { left: 0 !important; margin: 0 !important; top: 0 !important; } .dy-lb-close { top: 4px; right: 4px; } .dy-modal { border: 0; height: 100vh; width: 100vw; } .content {border: 0;} .envelope {height: 15%;} .bd-logo {margin-top: 4%;} .subhead, h1 { padding: 0 5%; } h1 {font-size: 24px;} .error { margin: 0 auto 5px auto; width: 90%; } input[type=text], input[type=email], input[type=submit] { border-radius: 4px; display: block; margin: 10px auto 0 auto; width: 90%; } .facebook {width: 90%;} .fbook-icon { width: 20%; margin: -2px 0 0 -4.5%; }
}
/* iPhone 5 styles */
@media screen and (max-width: 320px) { .subhead { margin-top: 10px; } h1 { font-size: 20px; } form { margin-top: 15px; } .fbook-icon { width: 26%; margin: -2px 0 0 -5.5%; }
}

Envelope Shape Skew - Script Codes JS Codes

document.body.classList.add('dy-fixed');
(function() { var showCloseLink = ${showCloseText}; var signUpForm = document.getElementById('dy-sign-up-form'); var facebookButton = document.getElementById('dy-facebook-sign-up'); // var googleButton = document.getElementById('dy-google-sign-up'); var closeText = document.getElementById('dy-close-link'); signUpForm.addEventListener('submit', handleSignUpFormSubmit); facebookButton.addEventListener('click', handleFacebookButtonClick); // googleButton.addEventListener('click', handleGoogleButtonClick); closeText.addEventListener('click', handleCloseTextClick); function handleSignUpFormSubmit(e) { e.preventDefault(); var email = e.target.elements['dy-email'].value; console.log('Sign Up Form Submitted: ', email); if (validateEmail(email)) { Coreg.signUp({ email: email, medium: '${medium}' }).done(handleSignUpSuccess) .fail(handleSignUpFailure); } else { // TODO: Invalid email state console.log('Email is not valid'); } } function handleFacebookButtonClick(e) { e.preventDefault(); console.log('Facebook button clicked', e); Coreg.facebookLogin() .done(handleSignUpSuccess) .fail(handleSignUpFailure); } function handleGoogleButtonClick(e) { e.preventDefault(); console.log('Google button clicked', e); } function handleCloseTextClick(e) { e.preventDefault(); console.log('Closing via close link', e); closeModal(); } function handleSignUpSuccess(result) { console.log('Sign Up Success!', result); closeModal(); } function handleSignUpFailure(result) { if (result.errors && result.errors === 'User already exists.') { console.log('Duplicate User', result); } else { // TODO: What happens when the user cancels the facebook login? // Do not close the modal, just leave it // TODO: What happens when there is a user services error? // Do we want to close the modal still? console.log('Something else went wrong:', result.errors); } closeModal(); } function validateEmail(email) { // TODO: Implement validation if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(dyForm.dyEmail.value)) { return (true); }; var errorMessage = document.getElementById('dy-email-label'); errorMessage.classList.add('error'); return (false); // return email; } function closeModal() { console.log('Close Modal'); signUpForm.removeEventListener('submit', handleSignUpFormSubmit); facebookButton.removeEventListener('click', handleFacebookButtonClick); closeText.removeEventListener('click', handleCloseTextClick); // googleButton.removeEventListener('click', handleGoogleButtonClick); $dy('.dy-act-overlay').trigger('close'); }
})();
Envelope Shape Skew - Script Codes
Envelope Shape Skew - Script Codes
Home Page Home
Developer Ashley Sullivan
Username anSullivan12
Uploaded November 12, 2022
Rating 3
Size 4,400 Kb
Views 14,168
Do you need developer help for Envelope Shape Skew?

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!

Ashley Sullivan (anSullivan12) Script Codes
Name
Facebook svg
CB - Rugs Super
CB - Organization Super
Flexible ellipses
Double Collapsible container
Striped backgrounds
Continuous image border
CB - Decor Super
Phone svg
A Pen by Ashley Sullivan
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!