Hello developers, today in this blog, you'll learn to create a Hero Section with Social Media Icons using HTML & CSS.
A hero section is a full-screen section that consists of a background image, video, illustrations, or animations, with some text and a button which will redirect to the linked page. The hero section is a website design term that is used to describe an oversized banner image at the top of a website that usually extends full width. A hero section should consist of a title, a short description, a high-quality image or video, and a link to direct the user to the other page. Hero images are used to catch the visitor's attention and draw them into reading the article on the page.
The Social Icons and buttons enable your website visitors and content viewers to easily share your content with their social media connections and networks. The social media icons can be used on your website, to share your content with others.
In this blog (Hero Section with Social Media Icons) on the webpage, there is an image that covers the whole page and attracts the user. This page consists of some buttons like view our blog on the center and login and signup on the top right of the webpage. There are also some social media icons like Github, Twitter, Facebook and, Instagram, which are used to share the content. You can create an amazing hero section for your webpage.
The source code of this Hero Section with Social Media Icons is given below, if you want the source code of this program, you can copy it. You can use this Hero Section with Social Media Icons with your creativity and can take this project to the next level.
Hero Section with Social Media Icons [Source Code]
To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.full{
width: 100%;
height: 100vh;
background-image: url("https://cdn.pixabay.com/photo/2017/05/07/19/32/strawberry-2293337_960_720.jpg");
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
span{
font-size: 50px;
font-family: 'Courgette', cursive;
color: white;
cursor: pointer;
float: left;
padding: 30px 0 0 50px;
}
button{
color: #fbfcfd;
padding: 10px 25px;
background: transparent;
border: 1px solid #fff;
border-radius: 20px;
outline: none;
cursor: pointer;
}
button:hover{
background: #fbfcfd;
color: #000;
}
.navbar button{
float: right;
margin-top: 30px;
margin-right: 55px;
}
.content{
color: #fbfcfd;
position: absolute;
top: 50%;
left: 8%;
transform: translateY(-50%);
z-index: 2;
}
h1{
font-size: 80px;
margin: 10px 0 30px;
line-height: 80px;
}
small{
font-size: 25px;
}
.side-bar{
width: 50px;
height: 100vh;
background: #fbfcfd;
position: absolute;
right: 0;
top: 0;
}
.fa-bars{
display: block;
width: 100px;
margin: 40px 15px auto;
cursor: pointer;
font-size: 25px;
color: #000;
}
.social-links i, .useful-links i{
width: 25px;
margin: 5px auto;
cursor: pointer;
color: #000;
font-size: 25px;
}
.social-links{
width: 50px;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Thank you for reading our blog. If you face any problem in creating this Hero Section with Social Media Icons using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team