Sumome like subscription box

Developer
Collins Agbonghama
Size
2,770 Kb
Views
12,144
  1. Sumome like subscription box Previews
  2. Sumome like subscription box HTML Codes
  3. Sumome like subscription box CSS Codes

How do I make an sumome like subscription box?

What is a sumome like subscription box? How do you make a sumome like subscription box? This script and codes were developed by Collins Agbonghama on 18 November 2022, Friday.

Sumome like subscription box Previews
IQ Test

Sumome like subscription box - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sumome like subscription box</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Arimo'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="swp-baremetal-container"> <a class="swp-boxclose" id="boxclose"></a> <h2>Get a little acid in your inbox</h2> <div class="description"> <ul> <li>Free responsive email templates·</li> <li>Coding tips for troublesome email clients·</li> <li>Innovative, actionable email marketing, coding, and design ideas·</li> <li>Special offers that you won't ever find on our blogs·</li> </ul></div> <div class="optin-error">Invalid email</div> <form autocomplete="on"><input class="" type="email" value="" autofocus="" placeholder="Enter Email Here " name="email" required="" autocomplete="on"></form> <input type="submit" class="" value="Subscribe now"> <div class="swp-baremetal-disclaimer"><em>We promise not to spam you. You can unsubscribe at any time.</em></div>
</div>
</body>
</html>

Sumome like subscription box - Script Codes CSS Codes

.swp-baremetal-container {
background-color: #f0f0f0;
border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-moz-border-radius: 5px;
padding: 1.5em;
width: 100%; max-width: 600px; margin: auto;
}
.swp-baremetal-container h2 {
color: #222222 !important;
font-family: 'Arimo', sans-serif !important;
margin: 0 0 10px;
font-size: 24px;
font-weight: bold;
text-align: center;
}
.swp-baremetal-container .description {
color: #000000;
font-family: 'Source Sans Pro', sans-serif;
font-family: inherit;
font-weight: normal;
font-size: 16px;
line-height: 1.6;
margin-bottom: 20px;
text-rendering: optimizeLegibility;
}
.swp-baremetal-container li { list-style-type: disc;
}
.swp-baremetal-disclaimer { margin: 5px auto; text-align: center;
}
.swp-baremetal-container input[type="text"],
.swp-baremetal-container input[type="email"] {
-webkit-appearance: none;
-webkit-border-radius: 0;
border-radius: 0;
background-color: #fff;
font-family: inherit !important;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.75);
display: block;
font-size: 14px;
margin: 0 0 16px 0;
padding: 8px;
height: 37px;
width: 100%;
max-width: initial;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: -webkit-box-shadow 0.45s, border-color 0.45s ease-in-out;
-moz-transition: -moz-box-shadow 0.45s, border-color 0.45s ease-in-out;
transition: box-shadow 0.45s, border-color 0.45s ease-in-out;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
-o-transition: all 0.15s linear;
transition: all 0.15s linear;
font-size: 16px;
}
.swp-baremetal-container input[type="submit"] {
box-sizing: border-box;
background: #fe6011;
color: #ffffff;
border: none;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !important;
font-weight: normal;
line-height: normal;
letter-spacing: normal;
margin: 0 0 20px;
position: relative;
text-decoration: none;
text-align: center;
text-transform: uppercase;
text-shadow: none;
box-shadow: none;
width: auto;
height: auto;
min-width: initial;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: 0;
display: inline-block;
padding: 16px 32px 17px;
font-size: 16px;
background: #0073b7 !important;
border: none;
color: #fff;
-webkit-transition: background-color 1s;
-moz-transition: background-color 1s;
-o-transition: background-color 1s;
transition: background-color 1s;
width: 100%;
-webkit-border-radius: 3px;
border-radius: 3px;
margin-bottom: 0;
opacity: 1;
float: initial;
cursor: pointer;
font-weight: 600;
text-transform: none;
}
.swp-baremetal-container .optin-error {
display: block;
background: red;
color: white;
text-align: center;
padding: .2em;
margin: 0;
display: block;
width: 100%;
font-size: inherit;
box-sizing: border-box;
}
a.swp-boxclose{
float:right;
margin-top:-30px;
margin-right:-30px;
cursor:pointer;
color: #fff;
border: 1px solid #AEAEAE;
border-radius: 30px;
background: #605F61;
font-size: 31px;
font-weight: bold;
display: inline-block;
line-height: 0px;
padding: 11px 3px;
}
a.swp-boxclose:before {
content: "×";
}
Sumome like subscription box - Script Codes
Sumome like subscription box - Script Codes
Home Page Home
Developer Collins Agbonghama
Username collizo4sky
Uploaded November 18, 2022
Rating 3
Size 2,770 Kb
Views 12,144
Do you need developer help for Sumome like subscription box?

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!

Collins Agbonghama (collizo4sky) Script Codes
Name
Hex-Color code Validation
Make a form field required
Jquery modal demo
A Pen by Collins Agbonghama
Alpha-Numeric Character Validation field Validation
Phone-number form Validation
Twitter Username Validation
Client-side Email Validation
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!