Social Media Elements

Developer
Don Page
Size
2,745 Kb
Views
44,528
  1. Social Media Elements Previews
  2. Social Media Elements HTML Codes
  3. Social Media Elements CSS Codes

How do I make an social media elements?

Periodic table style.. What is a social media elements? How do you make a social media elements? This script and codes were developed by Don Page on 18 July 2022, Monday.

Social Media Elements Previews
IQ Test

Social Media Elements - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Social Media Elements</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class="elements-wrapper"> <h1> Social Media Elements</h1> <a id="twitter" class="element"> <p class="e-id">23</p> <h2 class="e-name">t</h2> <p class="e-fname">Twitter</p> <p class="e-anumber">127.00</p> </a> <a id="github" class="element"> <p class="e-id">9</p> <h2 class="e-name">g</h2> <p class="e-fname">Github</p> <p class="e-anumber">91.23</p> </a> <a id="codepen" class="element"> <p class="e-id">20</p> <h2 class="e-name">c</h2> <p class="e-fname">Codepen</p> <p class="e-anumber">24.03</p> </a> <a id="facebook" class="element"> <p class="e-id">24</p> <h2 class="e-name">f</h2> <p class="e-fname">Facebook</p> <p class="e-anumber">51.9961</p> </a> <a id="dribble" class="element"> <p class="e-id">57</p> <h2 class="e-name">d</h2> <p class="e-fname">Dribbble</p> <p class="e-anumber">23.7</p> </a> </div>
</body>
</body>
</html>

Social Media Elements - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700);
* { margin: 0; padding: 0; border: 0; outline: 0;
}
body { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; width: 100%; height: 100%; background-color: #171717; color: white;
}
h1 { text-align: center;
}
.elements-wrapper { width: 899px; margin: 0 auto; height: 100%;
}
.elements-wrapper #twitter { -webkit-transition: all .4s ease; transition: all .4s ease; color: #197171;
}
.elements-wrapper #twitter:hover { -webkit-transition: all .4s ease; transition: all .4s ease; color: white; background-color: #197171;
}
.elements-wrapper #github { -webkit-transition: all .4s ease; transition: all .4s ease; color: #ff8c59;
}
.elements-wrapper #github:hover { -webkit-transition: all .4s ease; transition: all .4s ease; color: white; background-color: #ff8c59;
}
.elements-wrapper #codepen { -webkit-transition: all .4s ease; transition: all .4s ease; color: #bf4440;
}
.elements-wrapper #codepen:hover { -webkit-transition: all .4s ease; transition: all .4s ease; color: white; background-color: #bf4440;
}
.elements-wrapper #facebook { -webkit-transition: all .4s ease; transition: all .4s ease; color: #3732bf;
}
.elements-wrapper #facebook:hover { -webkit-transition: all .4s ease; transition: all .4s ease; color: white; background-color: #3732bf;
}
.elements-wrapper #dribble { -webkit-transition: all .4s ease; transition: all .4s ease; color: #CF6DA4;
}
.elements-wrapper #dribble:hover { -webkit-transition: all .4s ease; transition: all .4s ease; color: white; background-color: #CF6DA4;
}
.element { margin-top: 40px; display: inline-block; border: 2px solid white; height: 200px; width: 172px;
}
.e-id { padding: 3px; text-align: right;
}
.e-name { font-size: 79px; margin-top: 20px;
}
.e-fname, .e-anumber, .e-name { text-align: center;
}
.e-fname { margin-top: 10px; font-size: 19px;
}
.e-anumber { font-size: 9px;
}
Social Media Elements - Script Codes
Social Media Elements - Script Codes
Home Page Home
Developer Don Page
Username DonPage
Uploaded July 18, 2022
Rating 3
Size 2,745 Kb
Views 44,528
Do you need developer help for Social Media Elements?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Don Page (DonPage) Script Codes
Name
Angular Pen Embed
Uncheck box with angular
Ember Basics
Edit Profile with Angular
FadeIn
WordBreaks
A Different Type of Gallery
Off Canvas Nav
HTML5 SVG Animations
A Pen by Don Page
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!