From 67c3d905b16325220a77fba340f43afb3856a1f9 Mon Sep 17 00:00:00 2001 From: Brad Traversy Date: Thu, 29 Oct 2020 10:42:14 -0400 Subject: [PATCH] Social links widget --- social-links/index.html | 39 +++++++++++++++ social-links/script.js | 7 +++ social-links/style.css | 102 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 148 insertions(+) create mode 100644 social-links/index.html create mode 100644 social-links/script.js create mode 100644 social-links/style.css diff --git a/social-links/index.html b/social-links/index.html new file mode 100644 index 0000000..ac73829 --- /dev/null +++ b/social-links/index.html @@ -0,0 +1,39 @@ + + + + + + + + Social Links + + +
+ + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/social-links/script.js b/social-links/script.js new file mode 100644 index 0000000..1758aea --- /dev/null +++ b/social-links/script.js @@ -0,0 +1,7 @@ +const container = document.getElementById('container') +const open = document.getElementById('open') +const close = document.getElementById('close') + +open.addEventListener('click', () => container.classList.add('open')) + +close.addEventListener('click', () => container.classList.remove('open')) \ No newline at end of file diff --git a/social-links/style.css b/social-links/style.css new file mode 100644 index 0000000..a30958c --- /dev/null +++ b/social-links/style.css @@ -0,0 +1,102 @@ +@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); + +* { + box-sizing: border-box; +} + +body { + background-color: #e0e0e0; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + margin: 0; +} + +.container { + background-color: #fff; + border-radius: 50px; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + position: relative; + transition: 0.4s ease; + height: 70px; + width: 70px; +} + +.container.open { + width: 350px; +} + +.container .open-btn { + position: absolute; + top: 0; + left: 0; + + background-image: linear-gradient( + 110.1deg, + rgba(241, 115, 30, 1) 18.9%, + rgba(231, 29, 54, 1) 90.7% + ); + color: #fff; + cursor: pointer; + border: 0; + border-radius: 50%; + font-size: 26px; + display: flex; + align-items: center; + justify-content: center; + padding: 0; + height: 70px; + width: 70px; + z-index: 100; +} + +.container.open .open-btn { + display: none; +} + +.container a { + background-color: #fff; + border-radius: 50%; + font-size: 26px; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 0; + left: 0; + margin: 10px; + height: 50px; + width: 50px; + text-decoration: none; + opacity: 0; +} + +.container.open a { + position: static; + opacity: 1; + transition: 0.4s ease; +} + +.container a.ytb { + background-color: #ff0000; +} +.container a.twt { + background-color: #1da1f2; +} +.container a.x { + background-color: #282c37; +} +.container a.lin { + background-color: #007bb5; +} +.container a.ins { + background-color: #c32aa3; +} + +.container a i { + color: #fff; +}