Green and Healthy Rebranding

Developer
Gunnar Guddal
Size
4,337 Kb
Views
8,096
  1. Green and Healthy Rebranding Previews
  2. Green and Healthy Rebranding HTML Codes
  3. Green and Healthy Rebranding CSS Codes

How do I make an green and healthy rebranding?

What is a green and healthy rebranding? How do you make a green and healthy rebranding? This script and codes were developed by Gunnar Guddal on 06 January 2023, Friday.

Green and Healthy Rebranding Previews
IQ Test

Green and Healthy Rebranding - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Green and Healthy Rebranding</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='main'> <div class='headers'> <h1 class='header'>Heading 1</h1> <h2 class='header'>Heading 2</h2> <h3 class='header'>Heading 3</h3> <h4 class='header'>Heading 4</h4> </div> <div class='light'> <h3>Paragraph on Light Background</h3> <p> Paragraph on light background. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in congue tellus. Maecenas id ex nec leo porta ultrices. Vestibulum eget lectus porttitor. <a>Link</a> </p> <button>Button</button> </div> <div class='dark'> <h3>Paragraph on Dark Background</h3> <p> Paragraph on dark background. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in congue tellus. Maecenas id ex nec leo porta ultrices. Vestibulum eget lectus porttitor. <a>Link</a> </p> <button>Button</button> </div> <div class='products'> <div class='product'> <div class='imgwrapper'> <img src='http://alternasweets.com/media/com_hikashop/upload/thumbnails/150x150/alternasweets-bbq-1.jpg'> </div> <div class='info'> <p class='price'>$7.00</p> <h3>Another Product</h3> <p class='desc'>Description. This is why it is a great product. You should buy it.</p> <button>Buy Now</button> </div> </div> <div class='product'> <div class='imgwrapper'> <img src='http://alternasweets.com/media/com_hikashop/upload/thumbnails/150x150/alternasweets-ketchup-1.jpg'> </div> <div class='info'> <p class='price'>$43.00</p> <h3>A Product</h3> <p class='desc'>Description. This is why it's great. You should buy it because excellent reasons.</p> <button>Buy Now</button> </div> </div> <div class='product'> <div class='imgwrapper'> <img src='http://alternasweets.com/media/com_hikashop/upload/thumbnails/150x150/alternasweets-ketchup-6.jpg'> </div> <div class='info'> <p class='price'>$47.00</p> <h3>The Product</h3> <p class='desc'>Description. This is why this product is great. You should buy it because it's cool.</p> <button>Buy Now</button> </div> </div> <div class='product'> <div class='imgwrapper'> <img src='http://alternasweets.com/media/com_hikashop/upload/thumbnails/150x150/alternasweets-bbq-6.jpg'> </div> <div class='info'> <p class='price'>$47.00</p> <h3>The Product</h3> <p class='desc'>Description. This is why this product is great. You should buy it because it's cool.</p> <button>Buy Now</button> </div> </div> <div class='form'> <h2>Form</h2> <div class='row'> <p>Username</p> <input type='text'> </div> <div class='row'> <p>Password</p> <input type='text'> </div> <div class='row'> <p>Remember Me</p> <input type='checkbox'> </div> <button>Login</button> </div> <div class='form'> <h2>Register</h2> <div class='row'> <p>Name</p> <input type='text'> </div> <div class='row'> <p>Username</p> <input type='text'> </div> <div class='row'> <p>Email</p> <input type='text'> </div> <div class='row'> <p>Confirm Email</p> <input type='text'> </div> <div class='row'> <p>Password</p> <input type='text'> </div> <div class='row'> <p>Verify Password</p> <input type='text'> </div> <h3>Address</h3> <div class='row'> <p>First Name</p> <input type='text'> </div> <div class='row'> <p>Last Name</p> <input type='text'> </div> <div class='row'> <p>Address</p> <input type='text'> </div> <div class='row'> <p>City</p> <input type='text'> </div> <div class='row'> <p>Post Code</p> <input type='text'> </div> <div class='row'> <p>State</p> <input type='text'> </div> <div class='row'> <p>Country</p> <input type='text'> </div> <p>Fields marked with an asterisk (*) are required.</p> <button>Register</button> </div> <div class='footer'> <p> Copyright 2016 <a href='www.nautilusbaydesign.com' target='blank'> Nautilus Bay Web Design </a> </p> </div> </div>
</div>
</body>
</html>

Green and Healthy Rebranding - Script Codes CSS Codes

body{ font-family: 'Open Sans', sans-serif;
}
.main{ width:95%; margin:auto; display:block; float:none; max-width:1000px; display:flex; flex-wrap:wrap;
}
h1{ color:#339900; font-weight:900; font-size:42px;
}
h2, h3{ color: #2B6F26;
}
.dark h2, .dark h3{ color: #339900; font-weight:300;
}
h2{ font-weight:300; font-size:32px;
}
h3{ font-weight:400;
}
h4{ color:#555;
}
.headers{ flex:100%; width:100%;
}
.header{ display:inline-block; padding-right:20px;
}
.dark, .light{ flex:0 1 48%; padding:5%; margin:1%; box-sizing:border-box;
}
.light{ background:#fafafa; border-bottom:2px solid #2B6F26;
}
.dark{ background:#444; color:#fff; border-bottom:2px solid #339900;
}
a, .dark a:hover{ color: #2B6F26; cursor:pointer;
}
a:hover, .dark a{ color:#339900; cursor:pointer;
}
button{ border:2px solid #2B6F26; display:inline-block; background:none; padding:10px 30px; margin:10px 10px; border-radius:4px; font-size:14px; cursor:pointer; transition:all 0.2s ease;
}
button:hover{ padding:10px 40px; margin:10px 0px;
}
button:active{ color:#aaa!important;
}
.dark button{ color:#fff; border-color: #339900;
}
.dark > *:first-child, .light > *:first-child{ margin-top:0px;
}
.dark > *:last-child, .light > *:last-child{ margin-bottom:0px;
}
.products{ background:#fff; padding:10px; margin:20px 0px; display:flex; flex-wrap:wrap; justify-content:space-around; flex:100%;
}
.product{ width:45%; min-width:400px; margin:2%; padding: 0px 5px; box-sizing:border-box; background:#fff; border-bottom:2px solid #2B6F26; flex: 0 1 400px; display:flex;
}
.product .imgwrapper.wide,
.product .imgwrapper{ flex:none; width:200px;
}
.product img{ height:120px; width:auto; margin:60px auto; float:none; display:block;
}
.product .info{ padding:5px 0px; overflow:none;
}
.product .price{ float:right; line-height:28px; font-weight:600; padding-left:10px;
}
.product { margin-top:0px;
}
.form{ flex:48%; box-sizing:border-box; background:#eee; padding:10px 20px; margin:1%;
}
.row{ width:100%;
}
input{ display:inline-block; padding:5px 10px; border:none; border-bottom:2px solid #2B6F26; width:200px;
}
input[type='checkbox'],
input[type='radio']{ font-size: 16px; position: relative; border:none; display: inline-block; line-height: 1em; margin: 0; padding: 0; width: 1.2em; height: 1.2em; vertical-align: text-top; background:#fff; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; -webkit-box-shadow: none; box-shadow: none; -webkit-border-radius: 0px; border-radius: 0px; border-bottom:2px solid #2B6F26;
}
input[type=checkbox]:checked::after { position: absolute; content: ''; left: 15%; top: -10%; height: 40%; width: 90%; border-bottom: 2px solid #444; border-left: 2px solid #444; -webkit-box-shadow: -1px 1px 0 rgba(0,0,0,0.8); box-shadow: -1px 1px 0 rgba(0,0,0,0.8); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);
}
.row p{ display:inline-block; width:150px;
}
.form button{ background:#fafafa;
}
.footer{ flex:100%;
}
Green and Healthy Rebranding - Script Codes
Green and Healthy Rebranding - Script Codes
Home Page Home
Developer Gunnar Guddal
Username thegunnar
Uploaded January 06, 2023
Rating 3
Size 4,337 Kb
Views 8,096
Do you need developer help for Green and Healthy Rebranding?

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!

Gunnar Guddal (thegunnar) Script Codes
Name
Video Landing Page Skeleton
Neon Signs
Simple Landing Page 1.1
Marketplace - Products
Flex Image Grid with Titles
Product Slider
Landing Page 1.1
Pure CSS Clipping Shape
Generic Landing Page Skeleton
Marketplace - Recipes
Create amazing Facebook ads 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!