bluehost

Sunday, 15 August 2021

How To Add Social Media channels Into Your HTML Website

contact me:



The href=" " is where you put your  channel links like if your you tube channel link is 'UC2PEw' ; you have to copy-paste it there.

You also need to paste an icon links in your coding area to ensure that, they are uploaded into your site.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font
-awesome/4.7.0/css/font-awesome.min.css" />

Paste the link between the head tangs

If you are using external CSS style-sheet ;make sure to use the right link to connect the CSS and HTML


<link rel="stylesheet" href="index.css">
The HTML coding;
<div class="Social">

<!-- Add font awesome icons -->
<a href="https://www.youtube.com/channel/UC7oVVWRPEw"
target="blank" class="fa fa-youtube"></a>
<a href="https://pin.it/1gTSr5H" target="blank"
class="fa fa-pinterest"></a>
<a href="https://www.facebook.com/meyermachapython.9"
target="blank" class="fa fa-facebook"></a>
<a href="https://twitter.com/"johnjoy target="blank"
class="fa fa-twitter"></a>
<a href="#" target="blank" class="fa fa-linkedin"></a>
<a href="mailto:meyechas@gmail.com? subject=subject text">
<img src="email.jpeg" width="25" height="25"></a>
</div>



The CSS coding;

.fa:hover {
opacity: 0.9;
}

.fa-linkedin {
/* background: white; */
color: rgb(69, 123, 238);
}

.fa-pinterest {
/* background: #cb2027; */
color: rgb(206, 46, 46);
}

.fa-instagram {
/* background: #ff5700; */
color: rgb(240, 161, 161);
}

.fa-facebook {
color: rgb(52, 77, 223)
}

.fa-twitter {
color: rgb(66, 105, 233);
}

.fa-youtube {
color: rgb(207, 37, 37);
}

.fa {
padding: 20px;
font-size: 40px;
width: 60px;
text-decoration: none;
margin: 5px 8px;
/* display: inline-block; */
}

Thank you for your time.

No comments:

Post a Comment

React vs Angular; Front-End Web Development

Angular and React  are two of the most popular Javascript tools for front-end development. React is a Javascript created by Meta...