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.

demo

The CSS:

Code Select Expand

.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:

Code Select Expand

<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/

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.

demo

The CSS:

Code Select Expand

.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:

Code Select Expand

<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/

Create a Custom Menu for SMF

How to center images...

Add images to the menu

Create Social Icons with a CSS Sprite

Create a simple carousel with jQuery