Sonar profile pic

Developer
Tiberiu Raducea
Size
4,370 Kb
Views
22,264
  1. Sonar profile pic Previews
  2. Sonar profile pic HTML Codes
  3. Sonar profile pic CSS Codes
  4. Sonar profile pic JS Codes

How do I make an sonar profile pic?

2014 @Lukyvj | http://lucasbonomi.comForked from LukyVJ's Pen Sonar profile pic.. What is a sonar profile pic? How do you make a sonar profile pic? This script and codes were developed by Tiberiu Raducea on 25 September 2022, Sunday.

Sonar profile pic Previews
IQ Test

Sonar profile pic - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sonar profile pic</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="controls"> <ul> <li><a href="#">White</a></li> <li><a href="#">Red</a></li> <li><a href="#">Green</a></li> <li><a href="#">Blue</a></li> </ul>
</div>
<div class="content"> <div class="aura"> <div class="dot"></div> </div>
</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>

Sonar profile pic - Script Codes CSS Codes

/* The version of Bourbon used in this Pen was 4.* */
@import "bourbon";
//Vars
$size: 10em;
$c-1:#34495e;
$c-a:#ecf0f1; //Color controls
$c-b:#7f8c8d;
//Aura colors
$c-2:#e74c3c; // Red
$c-3:#2ecc71; // Green
$c-4:#3498db; // Blue
@mixin reset { width:100%; height:100%; margin:0; padding:0;
}
@mixin high{ -webkit-font-smoothing:antialiased; @include box-sizing(border-box); font-weight:300; line-height:24px; letter-spacing:.02em;
}
*{ @include high();
}
.dot { height:10px;
position:relative; top:50%; left:50%; margin-left:-5px; margin-top:-5px; width:10px;	background: #fff;	border-radius:50%;
}
html,body{ @include reset();
}
body{ font-family:helvetica,sans serif; background:$c-1;
}
.aura{ width:$size; height:$size; @include transform(scale(1)); border-radius:100%; margin:25% auto; @include animation(border 2s linear infinite, appear .6s ease); img{ display:block; width:$size; border-radius:100%; height:$size; position:relative; z-index:1; } &:before{ content:''; display:block; width:$size*1.1; height:$size*1.1; border-radius:100%; position:absolute; z-index:0; margin:-.25em; @include animation(growNfade 5s linear infinite); //If no color class border:.1em solid rgba(white,1); } &.red{ &:before{ border:.1em solid $c-2; } } &.blue{ &:before{ border:.1em solid $c-4; } } &.green{ &:before{ border:.1em solid $c-3; } }
}
//Animation
// keyframes mixin
@mixin keyframes($name) { @-webkit-keyframes #{$name} { @content; }
@-moz-keyframes #{$name} { @content;
}
@-ms-keyframes #{$name} { @content;
}
@keyframes #{$name} { @content;
}
}
// use of keyframes mixin
@include keyframes(growNfade) { 0% { opacity:1 } 50% { @include transform(scale(3)); opacity:1 } 100% { @include transform(scale(6)); opacity:0 }
}
@include keyframes(appear) { 0% { @include transform(scale(0)) } 75% { @include transform(scale(1.1)) } 100% { @include transform(scale(1)); }
}
@include keyframes(border) { 0% { border:.2em solid $c-2; } 50% { border:none; } 100% { border:none; }
}
//Controls
ul{ list-style:none; overflow:hidden; width:300px; float:left; padding:0; border-radius:4px; margin:0 1em; position:fixed; top:1em; li{ display:inline-block; float:left; padding:0 .4em; height:2.6em; width:25%; text-align:center; border-right:1px solid rgba(black,.2); @include box-shadow(inset 0 .1em 0 rgba(black,.4),inset 0 -.1em .5em rgba(white,.2)); opacity:.9; background:$c-a; &:hover{opacity:1} &:nth-child(2){ background:$c-2; a{color:#fff} } &:nth-child(3){ background:$c-3; a{color:#fff} } &:nth-child(4){ background:$c-4; a{color:#fff} } &:last-child{ border-right:0; } a{ color:$c-b; display:block; width:100%; height:100%; float:left; text-decoration:none; line-height:2.5; } }
}
//Generic styles
body{ background:$c-1;
}

Sonar profile pic - Script Codes JS Codes

$(document).ready(function(){
console.log('hello'); var items = $('ul li'); items.each(function(){ var $this = $(this); $this.on('mouseover',function(){ var $this = $(this), color = $this.find('a').text(), color = color.toLowerCase(); $('.aura').attr('class','aura '+ color); }); });
});
Sonar profile pic - Script Codes
Sonar profile pic - Script Codes
Home Page Home
Developer Tiberiu Raducea
Username tyberiu88
Uploaded September 25, 2022
Rating 3
Size 4,370 Kb
Views 22,264
Do you need developer help for Sonar profile pic?

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!

Tiberiu Raducea (tyberiu88) Script Codes
Name
Technical difficulties
Wedding loader
Fancy title
Slider with Navigation slider - slick
Sticky button bottom header
Option toggle CSS only
Very basic mobile menu with foundation 6
Add to Basket like a boss
Under Maintenance
Under Maintenance
Create amazing blog posts 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!