Share Your Profile

Developer
Matt Litherland
Size
3,387 Kb
Views
46,552
  1. Share Your Profile Previews
  2. Share Your Profile HTML Codes
  3. Share Your Profile CSS Codes
  4. Share Your Profile JS Codes

How do I make an share your profile?

Quick SASS rebound pen of this dribbble shot by this awesome guy - make sure to follow his work!. What is a share your profile? How do you make a share your profile? This script and codes were developed by Matt Litherland on 03 August 2022, Wednesday.

Share Your Profile Previews
IQ Test

Share Your Profile - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Share Your Profile</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="social"> <span>Share your profile</span> <div class="social-links"> <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-link" aria-hidden="true"></i></a> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Share Your Profile - Script Codes CSS Codes

@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
html, body { text-align: center; height: 100%;
}
body { background-color: #f9faff; background-image: url(http://i.imgur.com/LlVxfFq.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center;
}
.wrapper { display: flex; width: 100%; height: 100%; align-items: center;
}
*, div, span { box-sizing: border-box;
}
.social { display: flex; align-items: center; position: relative; width: 300px; height: 70px; font-size: 18px; font-weight: 700; box-shadow: inset 0 0 0 2px #dbe3ea; border-radius: 50px; color: #9aa9b5; background: #fff; overflow: hidden; margin: auto; transition: box-shadow .2s ease-out;
}
.social span, .social div { margin: auto;
}
.social .social-links { display: flex; align-items: center; position: absolute; top: 0; left: 0; background: rgba(62, 130, 251, 0); width: 100%; height: 100%; padding: 0 30px; transition: all .25s ease;
}
.social .social-links a { margin: auto; background: #fff; color: #3e82fb; width: 40px; height: 40px; border-radius: 20px; line-height: 40px; font-size: 15px; transform: translate3d(0, 60px, 0); transition: all .2s;
}
.social .social-links a:hover { background: #89b3fd; color: #fff;
}
.social:hover { box-shadow: inset 0 0 0 2px #dbe3ea, 0 1rem 20px rgba(62, 130, 251, 0.2);
}
.social:hover .social-links { background: #3e82fb;
}
.social:hover .social-links > a { animation: elastic .5s ease-out forwards 0s;
}
.social:hover .social-links > a:nth-child(2) { animation-delay: 0.05s;
}
.social:hover .social-links > a:nth-child(3) { animation-delay: 0.1s;
}
.social:hover .social-links > a:nth-child(4) { animation-delay: 0.15s;
}
.social:hover .social-links > a:nth-child(5) { animation-delay: 0.2s;
}
@keyframes elastic { 0% { transform: translate3d(0, 60px, 0); } 40% { transform: translate3d(0, -5px, 0); } 70% { transform: translate3d(0, 5px, 0); } 100% { transform: translate3d(0, 0, 0); }
}

Share Your Profile - Script Codes JS Codes

//
// Twitter: @mattsince87
//
Share Your Profile - Script Codes
Share Your Profile - Script Codes
Home Page Home
Developer Matt Litherland
Username mattsince87
Uploaded August 03, 2022
Rating 4.5
Size 3,387 Kb
Views 46,552
Do you need developer help for Share Your Profile?

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!

Matt Litherland (mattsince87) Script Codes
Name
Gradient over Google Maps
Google Inspired CSS Preloader
Animated CSS3 Mobile Phone
Ultimate Pop-Out Menu
Animated SVG Path
Responsive Flat UI Kit
Slick Two Part Form
Flat Origami Article
SVG Firework Animation
Smooth Anchor Scrolling
Create amazing Facebook ads 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!