Profile background and color changer prototype for CodeHive

Developer
Michael Lee
Size
6,454 Kb
Views
6,072
  1. Profile background and color changer prototype for CodeHive Previews
  2. Profile background and color changer prototype for CodeHive HTML Codes
  3. Profile background and color changer prototype for CodeHive CSS Codes
  4. Profile background and color changer prototype for CodeHive JS Codes

How do I make an profile background and color changer prototype for codehive?

This is a quick prototype for the profiles view on CodeHive. Change the text and background color by using the drop icon in the top right.. What is a profile background and color changer prototype for codehive? How do you make a profile background and color changer prototype for codehive? This script and codes were developed by Michael Lee on 14 January 2023, Saturday.

Profile background and color changer prototype for CodeHive Previews
IQ Test

Profile background and color changer prototype for CodeHive - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Profile background and color changer prototype for CodeHive</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .profile-bg-sea,
.profile-container[data-profile-bg="sea"] { background: -webkit-linear-gradient(#57d9d1, #5fd9ae); background: linear-gradient(#57d9d1, #5fd9ae);
}
.profile-bg-sunset,
.profile-container[data-profile-bg="sunset"] { background: -webkit-linear-gradient(#edcca5, #ed659f); background: linear-gradient(#edcca5, #ed659f);
}
.profile-bg-royale,
.profile-container[data-profile-bg="royale"] { background: -webkit-linear-gradient(#5856d6, #c644fc); background: linear-gradient(#5856d6, #c644fc);
}
h1, p { margin-top: 0; margin-bottom: 1.5rem;
}
.profile-container { color: #FFF; padding-top: 2.25rem; padding-bottom: 2.25rem; position: relative; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease;
}
.profile { width: 35rem; margin-left: auto; margin-right: auto; text-align: center;
}
.profile-avatar { display: inline-block; max-width: 100px; border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; border: 10px solid rgba(0, 0, 0, 0.2); vertical-align: middle;
}
.profile-names { display: inline-block; vertical-align: middle; margin-left: 1rem; text-align: left;
}
.profile-name { font-weight: 300; margin-bottom: 0;
}
.profile-bio { line-height: 1.5rem; margin-top: 1rem;
}
.profile-changer { display: none; position: absolute; top: 0.75rem; right: 0.75rem; cursor: pointer;
}
@media screen and (min-width: 46.8em) { .profile-changer { display: block; }
}
.profile-changer-holder { position: absolute; top: 0px; right: 0px;
}
.profile-changer-trigger { text-align: center; line-height: 2rem; border: 1px solid #FFF; height: 2rem; width: 2rem; border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; z-index: 50; color: #FFF;
}
.profile-changer-texts { position: absolute; top: 0px; right: 0px; height: 2rem; width: 2rem;
}
.profile-text { line-height: 2rem; opacity: 0; right: 0; position: absolute; text-align: center; border: 1px solid #FFF; color: #FFF; cursor: pointer; height: 2rem; width: 2rem; border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease;
}
.profile-text-black { background: #333;
}
.profile-text-white { background: #FFF; color: #333;
}
.profile-container[data-profile-text="white"] .profile-text-white { border-color: #338EDA;
}
.profile-container[data-profile-text="black"] .profile-text-black { border-color: #338EDA;
}
.profile-changer-bgs { position: absolute; top: 0px; right: 0px; height: 2rem; width: 2rem;
}
.profile-bg { opacity: 0; line-height: 2rem; text-align: center; top: 0; position: absolute; border: 1px solid #FFF; color: #FFF; cursor: pointer; height: 2rem; width: 2rem; border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease;
}
.profile-container[data-profile-bg="sea"] .profile-bg-sea { border-color: #338EDA;
}
.profile-container[data-profile-bg="sunset"] .profile-bg-sunset { border-color: #338EDA;
}
.profile-container[data-profile-bg="royale"] .profile-bg-royale { border-color: #338EDA;
}
.profile-text-color-white,
.profile-container[data-profile-text="white"] { color: #FFF;
}
.profile-text-color-white a,
.profile-container[data-profile-text="white"] a { color: #FFF;
}
.profile-text-color-black,
.profile-container[data-profile-text="black"] { color: #333;
}
.profile-text-color-black a,
.profile-container[data-profile-text="black"] a { color: #333;
}
.note { background: #D8D8D8; width: 350px; padding: 1.5rem; border-bottom-left-radius: 2px; border-top-left-radius: 2px; border-bottom-right-radius: 2px; border-top-right-radius: 2px; position: absolute; bottom: 0.75rem; left: 0.75rem;
}
.note a { color: #338EDA;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="profile-container" data-profile-text="white" data-profile-bg="sea"> <div class="profile-changer"> <div class="profile-changer-trigger"> <span class="ion-waterdrop"></span> </div> <div class="profile-changer-holder"> <div class="profile-changer-texts"> <div class="profile-text profile-text-black">t</div> <div class="profile-text profile-text-white">t</div> </div> <div class="profile-changer-bgs"> <div class="profile-bg profile-bg-sea"><span class="ion-paintbucket"></span></div> <div class="profile-bg profile-bg-sunset"><span class="ion-paintbucket"></span></div> <div class="profile-bg profile-bg-royale"><span class="ion-paintbucket"></span></div> </div> </div> </div> <div class="profile"> <img class="profile-avatar" src="//s3-us-west-2.amazonaws.com/s.cdpn.io/33381/profile/profile-512_1.jpg" alt="User Avatar of Michael Lee"> <div class="profile-names"> <h1 class="profile-name">Michael Lee</h1> <div class="profile-handle">@michaellee</div> </div> <div class="profile-bio"> I like eating pizza and writing code.<br>On the weekends I like taking my pet turtle out for walks. </div> </div>
</div>
<div class="note">This is a quick prototype for the profiles view on CodeHive. Change the text and background color by using the drop icon in the top right.<br /><br /> Live version will be up soon at <a href="https://www.codehive.io" target="_blank">codehive.io</a>.</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Profile background and color changer prototype for CodeHive - Script Codes CSS Codes

.profile-bg-sea,
.profile-container[data-profile-bg="sea"] { background: -webkit-linear-gradient(#57d9d1, #5fd9ae); background: linear-gradient(#57d9d1, #5fd9ae);
}
.profile-bg-sunset,
.profile-container[data-profile-bg="sunset"] { background: -webkit-linear-gradient(#edcca5, #ed659f); background: linear-gradient(#edcca5, #ed659f);
}
.profile-bg-royale,
.profile-container[data-profile-bg="royale"] { background: -webkit-linear-gradient(#5856d6, #c644fc); background: linear-gradient(#5856d6, #c644fc);
}
h1, p { margin-top: 0; margin-bottom: 1.5rem;
}
.profile-container { color: #FFF; padding-top: 2.25rem; padding-bottom: 2.25rem; position: relative; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease;
}
.profile { width: 35rem; margin-left: auto; margin-right: auto; text-align: center;
}
.profile-avatar { display: inline-block; max-width: 100px; border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; border: 10px solid rgba(0, 0, 0, 0.2); vertical-align: middle;
}
.profile-names { display: inline-block; vertical-align: middle; margin-left: 1rem; text-align: left;
}
.profile-name { font-weight: 300; margin-bottom: 0;
}
.profile-bio { line-height: 1.5rem; margin-top: 1rem;
}
.profile-changer { display: none; position: absolute; top: 0.75rem; right: 0.75rem; cursor: pointer;
}
@media screen and (min-width: 46.8em) { .profile-changer { display: block; }
}
.profile-changer-holder { position: absolute; top: 0px; right: 0px;
}
.profile-changer-trigger { text-align: center; line-height: 2rem; border: 1px solid #FFF; height: 2rem; width: 2rem; border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; z-index: 50; color: #FFF;
}
.profile-changer-texts { position: absolute; top: 0px; right: 0px; height: 2rem; width: 2rem;
}
.profile-text { line-height: 2rem; opacity: 0; right: 0; position: absolute; text-align: center; border: 1px solid #FFF; color: #FFF; cursor: pointer; height: 2rem; width: 2rem; border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease;
}
.profile-text-black { background: #333;
}
.profile-text-white { background: #FFF; color: #333;
}
.profile-container[data-profile-text="white"] .profile-text-white { border-color: #338EDA;
}
.profile-container[data-profile-text="black"] .profile-text-black { border-color: #338EDA;
}
.profile-changer-bgs { position: absolute; top: 0px; right: 0px; height: 2rem; width: 2rem;
}
.profile-bg { opacity: 0; line-height: 2rem; text-align: center; top: 0; position: absolute; border: 1px solid #FFF; color: #FFF; cursor: pointer; height: 2rem; width: 2rem; border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease;
}
.profile-container[data-profile-bg="sea"] .profile-bg-sea { border-color: #338EDA;
}
.profile-container[data-profile-bg="sunset"] .profile-bg-sunset { border-color: #338EDA;
}
.profile-container[data-profile-bg="royale"] .profile-bg-royale { border-color: #338EDA;
}
.profile-text-color-white,
.profile-container[data-profile-text="white"] { color: #FFF;
}
.profile-text-color-white a,
.profile-container[data-profile-text="white"] a { color: #FFF;
}
.profile-text-color-black,
.profile-container[data-profile-text="black"] { color: #333;
}
.profile-text-color-black a,
.profile-container[data-profile-text="black"] a { color: #333;
}
.note { background: #D8D8D8; width: 350px; padding: 1.5rem; border-bottom-left-radius: 2px; border-top-left-radius: 2px; border-bottom-right-radius: 2px; border-top-right-radius: 2px; position: absolute; bottom: 0.75rem; left: 0.75rem;
}
.note a { color: #338EDA;
}

Profile background and color changer prototype for CodeHive - Script Codes JS Codes

(function() { var bgClose, bgSlide, textClose, textSlide; $('.profile-changer-trigger').on('click', function() { if ($('.profile-changer').hasClass('profile-changer-is-open')) { textClose(); bgClose(); return $('.profile-changer').removeClass('profile-changer-is-open'); } else { textSlide(); bgSlide(); return $('.profile-changer').addClass('profile-changer-is-open'); } }); $('.profile-text').on('click', function() { var currentTextColor, profile, textColor; profile = $('.profile-container'); textColor = $(this); currentTextColor = profile.data('profile-text'); if (textColor.hasClass('profile-text-black')) { profile.attr('data-profile-text', 'black'); } if (textColor.hasClass('profile-text-white')) { return profile.attr('data-profile-text', 'white'); } }); $('.profile-bg').on('click', function() { var bgColor, currentTextColor, profile; profile = $('.profile-container'); bgColor = $(this); currentTextColor = profile.data('profile-text'); if (bgColor.hasClass('profile-bg-sea')) { profile.attr('data-profile-bg', 'sea'); } if (bgColor.hasClass('profile-bg-sunset')) { profile.attr('data-profile-bg', 'sunset'); } if (bgColor.hasClass('profile-bg-royale')) { return profile.attr('data-profile-bg', 'royale'); } }); textSlide = function() { return $('.profile-text').each(function(i) { var space; space = (i + 1) * 45; return $(this).css({ right: space, opacity: 1 }); }); }; bgSlide = function() { return $('.profile-bg').each(function(i) { var space; space = (i + 1) * 45; return $(this).css({ top: space, opacity: 1 }); }); }; textClose = function() { return $('.profile-text').each(function(i) { return $(this).css({ right: 0, opacity: 0 }); }); }; bgClose = function() { return $('.profile-bg').each(function(i) { return $(this).css({ top: 0, opacity: 0 }); }); };
}).call(this);
Profile background and color changer prototype for CodeHive - Script Codes
Profile background and color changer prototype for CodeHive - Script Codes
Home Page Home
Developer Michael Lee
Username michaellee
Uploaded January 14, 2023
Rating 4
Size 6,454 Kb
Views 6,072
Do you need developer help for Profile background and color changer prototype for CodeHive?

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!

Michael Lee (michaellee) Script Codes
Name
Rotating Button
Hidden Social Media Share Buttons
X Mobile Menu
Axe the Hamburger, Hail the Tab Bar
Responsive C3.js chart
Reveal password toggle
Page Animation
Breathing Giphy Logo
Pure CSS Ruby Illustration
Animated CSS Poly Drop
Create amazing sales emails 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!