Jumbotron ~ Call To Action
Introduction:
The jumbotron can be used as a hero section as a header on web pages. It is fully customiseable and usually appears with a heading, paragraphy and a call to action, then either with or without an image in the background.
Usage:
This should be used to highlight something in the page usually something toward the top of a page and might be used rather than a header or hero image.
Jumbotron Component:
Hi I'm Mollie
Im A Junior UX And UI Designer, and Im Studing At Southampton Solent University. Feel Free To Checkout My Work Click Below To Find.
View My Recent Work
<div id="Jumbotron">
<h1 style="color:white;"> Hi I'm Mollie </h1>
<h2 style="color:white; padding-left: 100px; padding-bottom: 10px; "> Im A Junior UX And UI Designer,
and Im Studing At Southampton Solent University.
Feel Free To Checkout My Work Click Below
To Find.</h2> <br/>
<a href="#" id="Jumbobtn"> View My Recent Work </a>
</div>
#Jumbotron {
background: linear-gradient(133deg, #800040 0%, #C04848 100%);
height: 300px;
width: auto;
padding: 40px;
}
#Jumbobtn {
text-decoration: none;
color: Black;
font-size: 1.3em;
border: 4px solid white;
background-color: white;
opacity: 0.5;
height: 250px;
width: 350px;
margin: 100px;
border-radius: 5px;
}