Building an idea using HTML CSS JS - Day 10

Today's day 10 Goal is to Put author contact links with styling in css file, improvements to code in my project backupcal.

HTML

1. How to create Div with class links in html?

1. Write the following code.

<div class="links">
        <div class="twitter"></div>
        <div class="github"></div>
        <div class="hashnode"></div>
</div>

2. How to get LinkedIn icon into HTML?

1. Write the following code to include opensource ionicons link.

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

3. How to use the <a></a> tag to include link?

1. Write the following code.

<a href="#domain address">
<ion-icon class="linkedin" name="logo-linkedin"></ion-icon>
</a>

4. How to get the link open in new tab upon clicking?

1. Write the following code.

<a href="#domain address" target="_blank">

5. How to get an icon from an SVG code?

1. Go to a site copy the SVG code and paste it in html file.

 <svg xmlns="http://www.w3.org/2000/svg" 
width="1em" height="1em"
viewBox="0 0 512 512">
<path d="M35.19 171.1C-11.72 217.1-11.72 294 35.19 340.9L171.1 476.8C217.1 523.7 294 523.7 340.9 476.8L476.8 340.9C523.7 294 523.7 217.1 476.8 171.1L340.9 35.19C294-11.72 217.1-11.72 171.1 35.19L35.19 171.1zM315.5 315.5C282.6 348.3 229.4 348.3 196.6 315.5C163.7 282.6 163.7 229.4 196.6 196.6C229.4 163.7 282.6 163.7 315.5 196.6C348.3 229.4 348.3 282.6 315.5 315.5z"/>
</svg>

CSS

1. how to change position property of icon in CSS?

1. Write the following code.

top: 30em;
left: 80em;

2. How to increase size of the icon?

1. Write the following code.

transform: scale(1.5);

3. how to give gradient background to the icon?

1. Write the following code.

backdrop-filter: blur(15px) saturate(180%);
-webkit-backdrop-filter: blur(15px) saturate(180%);
background-color: rgba(255, 255, 255, 0.75);
opacity: 0.1;

JavaScript

-

Conclusion

1. Creating Div with class links in html.

2. Getting LinkedIn icon into HTML.

3. <a></a> tag to include link.

4. link open in new tab upon clicking.

5. icon from an SVG code.

6. Change position property of icon in CSS.

7. Increase size of the icon.

8. Give gradient background to the icon.

My Code:

Author: Dheeraj.y