Create a Hero Image

in Tutorials on 01 May 2020

sell  html  css  hero


Hero Image
Make a positive first impression by adding a Hero Image at the top of your page. Can be a good way to add a personal touch that immediately builds credibility and trust for your brand.


The CSS:
.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  width: 100%;
  height: 50vh;
  overflow: hidden;
  background-size: cover;
  background: linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 37%, rgba(0,0,0,0.65) 100%), url(https://images.unsplash.com/photo-1588025382430-be7f3a952791?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2148&q=80) no-repeat center center scroll;
}

.hero a {
  color: #fff;
}

.hero h1 {
  font-style: normal;
  font-weight: bold;
  color: #eee;
  font-size: 8vmin;
  letter-spacing: 0.03em;
  line-height: 1;
  margin-bottom: 20px;
}

.hero p {
  font-style: normal;
  color: #eee;
  font-size: 1.2rem;
  text-align: center;
  letter-spacing: 0.03em;
  line-height: 1;
  margin-bottom: 40px;
  padding: 20px;
}

.hero-button {
  background: transparent;
  border-radius: 5px;
  border: 1px solid #ffffff;
  display: inline-block;
  padding: 0.75rem 1.5rem;
  margin: 0;
  text-decoration: none;
  color: #ffffff;
  font-size: 1.2rem;
  text-align: center;
  -webkit-appearance: none;
  -moz-appearance: none;
}

The HTML:
<div class="hero">
  <h1>Simple Machines Forum</h1>
  <p>With a commitment to quality content for the SMF community, we craft premium SMF themes for the popular free software Simple Machines Forum and dedicated to provide useful tutorials, web development, resources, insightful articles and creative inspiration.</p>
    <div class="hero-button"><a href="#">Learn More</a></div>
</div>

You could add the css code at the very end into your css file or add everything into a html top block


Inspiration: How To Create a Hero Image
Image Credit: https://unsplash.com/



idesignSMF Team
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF.com and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.

idesignSMF.com | SimpleMachines.org



0 Comments


rocket_launch

Professional & Impressive. We provide top quality free SMF themes with awesome support.