Border Gradient

Developer
Amy Kapernick
Size
3,223 Kb
Views
38,456
  1. Border Gradient Previews
  2. Border Gradient HTML Codes
  3. Border Gradient CSS Codes

How do I make an border gradient?

What is a border gradient? How do you make a border gradient? This script and codes were developed by Amy Kapernick on 24 August 2022, Wednesday.

Border Gradient Previews
IQ Test

Border Gradient - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Border Gradient</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="home-blocks">	<div class="inner cf">	<div class="moduletable">	<h3>Subscribe</h3>
<div class="content cf">	<p>	Subscribe to get shareholder information delivered straight to your inbox.&nbsp;</p>
<form action="http://emarketing.dashdigital.com.au/t/j/s/xhydtr/" id="subForm" method="post">	<p>	<input id="fieldEmail" name="cm-xhydtr-xhydtr" placeholder="[email protected]" required="" type="email"></p>	<p>	<button class="button" type="submit">Submit</button></p>
</form>
<p>	<a href="/privacy.html" title="Privacy">Privacy Policy&nbsp;</a></p>
</div>	</div>	<div class="moduletable">	<h3>ASX Announcements</h3>
<div class="content cf">	</div>	</div>	<div class="moduletable share-price">
<div class="content cf">	<div class="moduletable asx-info">
<div class="content cf">	<p>	ASX Pricing</p>
</div>	</div>	<div class="moduletable asx-info">
<div class="content cf">	<p>	Commdity Price</p>
</div>	</div>	<div class="moduletable asx-info">
<div class="content cf">	<p>	Exchange Rate</p>
</div>	</div>	</div>	</div>	</div>	</div>
</body>
</html>

Border Gradient - Script Codes CSS Codes

* { margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
inner { width: 1210px;
}
.home-blocks { height: 380px; z-index: 10;
}
.home-blocks input { color: black; padding: 0 0 0 30px;
}
.home-blocks .moduletable { display: block; float: left; height: 320px; margin: 20px 0.49%; width: 30%; vertical-align: top;
}
.home-blocks .moduletable h3 { background: aqua; font-family: Arial; font-size: 24px; height: 70px; padding: 23px 0 23px 70px; text-transform: uppercase;
}
.home-blocks .moduletable .content { border: 1px solid black; height: 250px;
}
.home-blocks .moduletable .content button { background: #f9b745; border: none; color: white; font-family: Arial; font-size: 20px; height: 45px; line-height: 44.67px; padding: 0; width: 300px;
}
.home-blocks .moduletable:nth-child(3n+1) h3 { color: white; background-image: url(/images/banners/graphics/brown-polygon.png);
}
.home-blocks .moduletable:nth-child(3n+1) .content { padding: 5px 45px 20px;
}
.home-blocks .moduletable:nth-child(3n+1) .content p { font-family: Arial; font-size: 18px; margin: 15px 0 0;
}
.home-blocks .moduletable:nth-child(3n+1) .content form p { margin: 10px 0 0;
}
.home-blocks .moduletable:nth-child(3n+1) .content a { font-size: 12px;
}
.home-blocks .moduletable:nth-child(2n) h3 { color: black; background-image: url(/images/banners/graphics/yellow-polygon.png);
}
.home-blocks .moduletable:nth-child(2n) .content { background: #d7d7d7;
}
.home-blocks .share-price { margin: 20px 6px 0px;
}
.home-blocks .share-price .content { border: none; height: 320px;
}
.home-blocks .share-price .content .asx-info { background: #252525; border: none; height: 100px; margin: 0; width: 100%;
}
.home-blocks .share-price .content .asx-info .content { color: white; background: url(/images/banners/graphics/asx-price-border.png) center top/contain no-repeat; font-family: Arial; font-size: 20px; height: 100px; padding: 20px 25px 5px 50px; text-transform: uppercase;
}
.home-blocks .share-price .content .asx-info:nth-child(1) { height: 120px;
}
.home-blocks .share-price .content .asx-info:nth-child(1) .content { padding: 30px 25px 10px 50px;
}
.home-blocks .share-price .content .asx-info:nth-child(2) { background: #363636;
}
.home-blocks .share-price .content .asx-info:nth-child(2) .content { background: transparent;
}
Border Gradient - Script Codes
Border Gradient - Script Codes
Home Page Home
Developer Amy Kapernick
Username aimhigherwebdesign-amy
Uploaded August 24, 2022
Rating 3
Size 3,223 Kb
Views 38,456
Do you need developer help for Border Gradient?

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!

Amy Kapernick (aimhigherwebdesign-amy) Script Codes
Name
Portfolio Page
Email Signature
Developing Imaginative Layouts
Triangles
A Pen by Amy Kapernick
Search box with SVG icon
Enquire Now Button with SVG
Fancy table search
Playing with Flexbox
Corner Triangle
Create amazing video scripts 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!