.png) |
Social Media Wheel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Social media wheel</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style media="screen">
*{
margin: 0;
padding: 0;
}
body{
overflow: hidden;
}
.container{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
height: 100px;
width: 100px;
background: #002651;
text-align: center;
border-radius: 50%;
}
.fa-plus{
margin-top: 25px;
font-size: 50px;
display: block;
color: white;
cursor: pointer;
transition: .7s;
}
.menu_group{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100px;
width: 100px;
margin: auto;
background: #775ada;
border-color: #581b98;
border-radius: 50%;
z-index: -1;
transform: scale(0);
transition: .7s;
}
.menu_group a{
position: absolute;
display: inline-block;
font-size: 12px;
color: #364f6b;
}
a:hover{
color: #2c3e50;
}
a:nth-child(1){
top: 6px;
left: 45px;
}
a:nth-child(2){
top: 24px;
left: 77px;
}
a:nth-child(3){
top: 58px;
left: 76px;
}
a:nth-child(4){
top: 78px;
left: 42px;
}
a:nth-child(5){
top: 58px;
left: 10px;
}
a:nth-child(6){
top: 23px;
left: 12px;
}
img{
height: 15px;
}
</style>
</head>
<body>
<div class="container" onclick="expand()">
<i class="fa fa-plus" id="plus"></i>
</div>
<div class="menu_group" id="menu">
<a href="https://web.whatsapp.com/" target="_blank"><img src="https://img.icons8.com/color/48/000000/whatsapp.png"/></a>
<a href="https://www.instagram.com/" target="_blank"><img src="https://img.icons8.com/fluent/48/000000/instagram-new.png"/></a>
<a href="https://www.facebook.com/" target="_blank"><img src="https://img.icons8.com/officel/80/000000/facebook-circled.png"/></a>
<a href="https://www.google.com/intl/ne/gmail/about/" target="_blank"><img src="https://img.icons8.com/fluent/96/000000/gmail.png"/></a>
<a href="https://web.telegram.org/z/" target="_blank"><img src="https://img.icons8.com/color/96/000000/telegram-app.png"/></a>
<a href="https://www.google.com/" target="_blank"><img src="https://img.icons8.com/officel/80/000000/google-logo.png"/></a>
</div>
<script type="text/javascript">
var menu = document.getElementById('menu');
var plus = document.getElementById('plus');
var abc = 0;
function expand(){
if (abc == 0) {
menu.style.transform = "scale(3)";
plus.style.transform = "rotate(360deg)";
abc = 1;
}else{
menu.style.transform = "scale(0)";
plus.style.transform = "rotate(0deg)";
abc = 0;
}
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Social media wheel</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style media="screen">
*{
margin: 0;
padding: 0;
}
body{
overflow: hidden;
}
.container{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
height: 100px;
width: 100px;
background: #002651;
text-align: center;
border-radius: 50%;
}
.fa-plus{
margin-top: 25px;
font-size: 50px;
display: block;
color: white;
cursor: pointer;
transition: .7s;
}
.menu_group{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100px;
width: 100px;
margin: auto;
background: #775ada;
border-color: #581b98;
border-radius: 50%;
z-index: -1;
transform: scale(0);
transition: .7s;
}
.menu_group a{
position: absolute;
display: inline-block;
font-size: 12px;
color: #364f6b;
}
a:hover{
color: #2c3e50;
}
a:nth-child(1){
top: 6px;
left: 45px;
}
a:nth-child(2){
top: 24px;
left: 77px;
}
a:nth-child(3){
top: 58px;
left: 76px;
}
a:nth-child(4){
top: 78px;
left: 42px;
}
a:nth-child(5){
top: 58px;
left: 10px;
}
a:nth-child(6){
top: 23px;
left: 12px;
}
img{
height: 15px;
}
</style>
</head>
<body>
<div class="container" onclick="expand()">
<i class="fa fa-plus" id="plus"></i>
</div>
<div class="menu_group" id="menu">
<a href="https://web.whatsapp.com/" target="_blank"><img src="https://img.icons8.com/color/48/000000/whatsapp.png"/></a>
<a href="https://www.instagram.com/" target="_blank"><img src="https://img.icons8.com/fluent/48/000000/instagram-new.png"/></a>
<a href="https://www.facebook.com/" target="_blank"><img src="https://img.icons8.com/officel/80/000000/facebook-circled.png"/></a>
<a href="https://www.google.com/intl/ne/gmail/about/" target="_blank"><img src="https://img.icons8.com/fluent/96/000000/gmail.png"/></a>
<a href="https://web.telegram.org/z/" target="_blank"><img src="https://img.icons8.com/color/96/000000/telegram-app.png"/></a>
<a href="https://www.google.com/" target="_blank"><img src="https://img.icons8.com/officel/80/000000/google-logo.png"/></a>
</div>
<script type="text/javascript">
var menu = document.getElementById('menu');
var plus = document.getElementById('plus');
var abc = 0;
function expand(){
if (abc == 0) {
menu.style.transform = "scale(3)";
plus.style.transform = "rotate(360deg)";
abc = 1;
}else{
menu.style.transform = "scale(0)";
plus.style.transform = "rotate(0deg)";
abc = 0;
}
}
</script>
</body>
</html>
Comments
It’s good to come across a blog every once in a while that isn’t the same out of date rehashed information. Great read!
I’ve saved your site and I’m including your RSS feeds to
my Google account.
My website – Online casino korean
Here is my website … Augustus
of the posts I realized it’s new to me. Anyways,
I’m definitely happy I came across it and I’ll be book-marking it and checking back frequently!
comment but after I clicked submit my comment didn’t show up.
Grrrr… well I’m not writing all that over again.
Regardless, just wanted to say superb blog!
that I think I would never understand. It seems too complicated and extremely broad for me.
I am looking forward for your next post, I’ll try to get the hang of it!
add to my blog that automatically tweet my newest twitter
updates. I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have
some experience with something like this.
Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your
new updates.
points you’ve made.
points you’ve made.
Your website offered us with valuable info to work on. You
have done an impressive process and our entire community can be thankful to you.
I like what I see so now i’m following you.
Look forward to finding out about your web page again.
I do not know who you are but definitely you are going to a famous blogger if you are not already 😉 Cheers!
Visit my homepage :: 먹튀검증
break of day, because i enjoy to gain knowledge of more and more.
you made running a blog look easy. The entire look of your
website is magnificent, as smartly as the content
material!
and I find It really useful & it helped me out much.
I hope to give something back and aid others like you aided me.
such information in quality?
Take a look at my site 승인전화없는 토토사이트
Did you design this website yourself or did you hire someone to do it for you?
Plz reply as I’m looking to design my own blog and would like to find out where u got this from.
many thanks
Stop by my homepage; vegas casino online no deposit codes
choose?.I am trying to in finding things to enhance my site!I guess
its ok to make use of some of your ideas!!
My web site; casino online free to play
writers? I’m hoping to start my own blog soon but I’m a little lost on everything.
Would you suggest starting with a free platform like WordPress or go for a paid
option? There are so many choices out there that I’m completely
confused .. Any suggestions? Appreciate it!
but after browsing through a few of the posts I realized it’s new to me.
Anyhow, I’m certainly pleased I came across it and I’ll be book-marking it and checking back frequently!
I’ll be sure to bookmark it and return to read more of your useful info.
Thanks for the post. I’ll certainly comeback.