charts with rounded div on mask - javascript

I wanted to achieve this bar charts displays under the rounded circle as per the attached image.
I am able to display the bar charts but not able to bring the rounded/circle div on top of the charts or bring the charts inside the circle so, that charts will display within circle. I have attached the code.
Any help would be appreciated.
$(function() {
$("#bars li .bar").each( function( key, bar ) {
var percentage = $(this).data('percentage');
$(this).animate({
'height' : percentage + '%'
}, 1000);
});
});
#import url(https://fonts.googleapis.com/css?family=Roboto:400+700);
body {
background: #30303A;
font-family: Roboto;
}
#chart {
width: 250px;
height: 200px;
margin: 30px auto 0;
display: block;
}
#chart #numbers {
width: 50px;
height: 100%;
margin: 0;
padding: 0;
display: inline-block;
float: left;
}
#chart #numbers li {
text-align: right;
padding-right: 1em;
list-style: none;
height: 29px;
border-bottom: 1px solid #444;
position: relative;
bottom: 30px;
}
#chart #numbers li:last-child {
height: 30px;
}
#chart #numbers li span {
color: #eee;
position: absolute;
bottom: 0;
right: 10px;
}
#chart #bars {
display: inline-block;
background: rgba(0, 0, 0, 0.2);
width: 200px;
height: 200px;
padding: 0;
margin: 0;
box-shadow: 0 0 0 1px #444;
}
#chart #bars li {
display: table-cell;
width: 100px;
height: 200px;
margin: 0;
text-align: center;
position: relative;
}
#chart #bars li .bar {
display: block;
width: 70px;
margin-left: 15px;
background: #49E;
position: absolute;
bottom: 0;
z-index: 1;
}
#chart #bars li .bar:before {
color: white;
content: attr(data-percentage) '%';
position: relative;
bottom: 25px;
}
#chart #bars li .bar:hover {
background: #5AE;
cursor: pointer;
}
#chart #bars li span {
color: #eee;
width: 100%;
position: absolute;
bottom: -3em;
left: 0;
text-align: center;
}
#chart #bars li .bar.bar-1 {
background: #cd9581 ;
}
#chart #bars li .bar.bar-2 {
background: #002f54 ;
}
#chart #bars li .bar.bar-3 {
background: #f5e0b8 ;
}
#mask {
border: 1px solid #fff;
border-radius: 50%;
background: #fff;
position: absolute;
z-index: 0;
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chart">
<div id="mask">
<ul id="bars">
<li><div data-percentage="56" class="bar bar-1"></div><span>Russian Federation</span></li>
<li><div data-percentage="33" class="bar bar-2"></div><span>All 50 countries</span></li>
</ul>
</div>
</div>


Here, the shape of this looks like the one in your picture , I hope this is useful for you
Removed margin-left:15px; from #chart #bars li .bar , added overflow:hidden; to #mask and added width:100%; to #chart #bars li .bar.bar-1 and #chart #bars li .bar.bar-2
$(function() {
$("#bars li .bar").each( function( key, bar ) {
var percentage = $(this).data('percentage');
$(this).animate({
'height' : percentage + '%'
}, 1000);
});
});
#import url(https://fonts.googleapis.com/css?family=Roboto:400+700);
body {
background: #30303A;
font-family: Roboto;
}
#chart {
width: 250px;
height: 200px;
margin: 30px auto 0;
display: block;
}
#chart #numbers {
width: 50px;
height: 100%;
margin: 0;
padding: 0;
display: inline-block;
float: left;
}
#chart #numbers li {
text-align: right;
padding-right: 1em;
list-style: none;
height: 29px;
border-bottom: 1px solid #444;
position: relative;
bottom: 30px;
}
#chart #numbers li:last-child {
height: 30px;
}
#chart #numbers li span {
color: #eee;
position: absolute;
bottom: 0;
right: 10px;
}
#chart #bars {
display: inline-block;
background: rgba(0, 0, 0, 0.2);
width: 200px;
height: 200px;
padding: 0;
margin: 0;
box-shadow: 0 0 0 1px #444;
}
#chart #bars li {
display: table-cell;
width: 100px;
height: 200px;
margin: 0;
text-align: center;
position: relative;
}
#chart #bars li .bar {
display: block;
width: 70px;
background: #49E;
position: absolute;
bottom: 0;
z-index: 1;
}
#chart #bars li .bar:before {
color: white;
content: attr(data-percentage) '%';
position: relative;
bottom: 25px;
}
#chart #bars li .bar:hover {
background: #5AE;
cursor: pointer;
}
#chart #bars li span {
color: #eee;
width: 100%;
position: absolute;
bottom: -3em;
left: 0;
text-align: center;
}
#chart #bars li .bar.bar-1 {
background: #cd9581 ;
width:100%;
}
#chart #bars li .bar.bar-2 {
background: #002f54 ;
width:100%;
}
#chart #bars li .bar.bar-3 {
background: #f5e0b8 ;
}
#mask {
overflow:hidden;
border: 1px solid #fff;
border-radius: 50%;
background: #fff;
position: absolute;
z-index: 0;
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chart">
<div id="mask">
<ul id="bars">
<li><div data-percentage="56" class="bar bar-1"></div><span>Russian Federation</span></li>
<li><div data-percentage="33" class="bar bar-2"></div><span>All 50 countries</span></li>
</ul>
</div>
</div>


Add overflow: hidden; to #mask

Related

Links in footer wont display inline

I'm trying to put some links in a footer next to each other, separated by the character "|". But I have a navbar whose styles interferes with the footer's links.
I need something like this :
This is my code (it doesn't display perfectly, but you get the gist):
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
/*background-color: #e0eafc;*/
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 50px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.favcolorcontainer {
border: 2px solid black;
border-radius: 4px;
width: auto;
padding: 5px;
background: white;
display: inline-flex;
}
.colorpicker {
border:none;
background: white;
display: inline-flex;
}
.favcolor {
font-family: verdana;
margin-top: 3px;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav {
float: right;
margin-right: 20px;
}
.desktop-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
display: block;
color: white;
}
.desktop-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav li {
float: left;
list-style: none;
}
.menu-button {
display: block;
margin: 15px;
font-size:25px;
cursor:pointer;
color:white
}
.menu-button:hover {
cursor: pointer;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
<html>
<head>
<title>Home</title>
<link rel="icon" type="image/x-icon" href="https://imgur.com/dFEoiLv">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="https://imgur.com/JntIYPP" width="150px" title="Aeron" alt="logo" class="header-logo">
<ul class="desktop-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Demo</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
<li><span class="menu-button" onclick="openNav()">☰</span></li>
</ul>
<div id="mySidenav" class="sidenav">
×
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron Corporation</p>
About Us
<p>|</p>
Policy
<p>|</p>
Contact Us
</footer>
<button onclick="topFunction()" id="return" title="Return To Top">^</button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mySidenav").style.width = "25%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
As you can see the links aren't displaying inline. How can I fix this?

Wrap the links in a div with a class (I gave it footer-links) and give it the following styles:
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
/*background-color: #e0eafc;*/
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 50px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.favcolorcontainer {
border: 2px solid black;
border-radius: 4px;
width: auto;
padding: 5px;
background: white;
display: inline-flex;
}
.colorpicker {
border:none;
background: white;
display: inline-flex;
}
.favcolor {
font-family: verdana;
margin-top: 3px;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav {
float: right;
margin-right: 20px;
}
.desktop-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
display: block;
color: white;
}
.desktop-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav li {
float: left;
list-style: none;
}
.menu-button {
display: block;
margin: 15px;
font-size:25px;
cursor:pointer;
color:white
}
.menu-button:hover {
cursor: pointer;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
.footer-links p {
margin: 0;
}
<html>
<head>
<title>Home</title>
<link rel="icon" type="image/x-icon" href="https://imgur.com/dFEoiLv">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="https://imgur.com/JntIYPP" width="150px" title="Aeron" alt="logo" class="header-logo">
<ul class="desktop-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Demo</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
<li><span class="menu-button" onclick="openNav()">☰</span></li>
</ul>
<div id="mySidenav" class="sidenav">
×
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron Corporation</p>
<div class="footer-links">
About Us
<p>|</p>
Policy
<p>|</p>
Contact Us
</div>
</footer>
<button onclick="topFunction()" id="return" title="Return To Top">^</button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mySidenav").style.width = "25%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>

Managing shipment progress bar in percentage using HTML CSS JS

I have the below code where I am trying to show the shipment progress. I want such that I want to show place B point based on how much distance is covered. For example : If 70% of total distance is completed, progress bar will show PLACE B point on 70% of the width of total progress bar.
Could you please help, whatever I tried it is breaking the whole thing, yes I am noob. Please help.
.progress {
list-style: none;
margin: 0;
padding: 0;
display: table;
table-layout: fixed;
width: 100%;
color: #849397;
}
.progress > li {
position: relative;
display: table-cell;
text-align: center;
font-size: 0.8em;
}
.progress > li:before {
content: '';
display: block;
margin: 0 auto;
background: #dfe3e4;
width: 3em;
height: 3em;
text-align: center;
margin-bottom: 0.25em;
line-height: 3em;
border-radius: 100%;
position: relative;
z-index: 1000;
}
.progress > li:after {
content: "";
position: absolute;
display: block;
background: #dfe3e4;
width: 100%;
height: 0.5em;
top: 1.25em;
left: 50%;
margin-left: 1.5em\9;
z-index: -1;
}
.progress > li:last-child:after {
display: none;
}
.progress > li.is-complete {
color: #2ecc71;
}
.progress > li.is-complete:before, .progress > li.is-complete:after {
color: #fff;
background: blue;
}
.progress > li.is-active {
color: blue;
}
.progress > li.is-active:before {
color: #fff;
background: green;
}
/**
* Needed for IE8
*/
.progress__last:after {
display: none !important;
}
/**
* Some Generic Stylings
*/
*,
*:after,
*:before {
box-sizing: border-box;
}
<ol class="progress">
<li class="is-complete" data-step="1">
Place A
</li>
<li class="is-active" data-step="2">
Place B
</li>
<li data-step="3" class="progress__last">
Place C
</li>
</ol>
JS Bin Demo

Try below example
.progress {
padding: 40px 0;
position: relative;
}
.progress::before,
.progress::after {
content: "";
background-color: #dfe3e4;
height: 0.5em;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}
.progress::before {
width: 100%;
}
.progress::after {
width: 70%;
background: #008000;
}
.progress li {
position: relative;
list-style: none;
z-index: 1;
display: inline-block;
}
.progress li:first-child {
left: 0;
}
.progress li.is-active {
left: 70%;
position: absolute;
}
.progress li:last-child {
float: right;
}
.progress > li:before {
content: "";
display: block;
margin: 0 auto;
background: #dfe3e4;
width: 3em;
height: 3em;
text-align: center;
line-height: 3em;
border-radius: 100%;
position: relative;
z-index: 1000;
}
.progress li:first-child:before {
background: #0000ff;
}
.progress li.is-active:before {
background: #008000;
}
.progress li span {
position: absolute;
bottom: -20px;
width: max-content;
}
<ol class="progress">
<li class="is-complete" data-step="1"><span>Place A</span></li>
<li class="is-active" data-step="2"><span>Place B</span></li>
<li data-step="3" class="progress__last"><span>Place C</span></li>
</ol>

The basic idea is to have 2 elements that connect your circles: one with the background color and one with the active color. Then you will have to inject the real width value from JS of from the backend, based on your real application.
Here an example made from your code:
.progress {
list-style: none;
margin: 0;
padding: 0;
display: table;
table-layout: fixed;
width: 100%;
color: #849397;
}
.progress > li {
position: relative;
display: table-cell;
text-align: center;
font-size: 0.8em;
}
.progress > li:before {
content: '';
display: block;
margin: 0 auto;
background: #dfe3e4;
width: 3em;
height: 3em;
text-align: center;
margin-bottom: 0.25em;
line-height: 3em;
border-radius: 100%;
position: relative;
z-index: 1000;
}
.progress > li:after {
content: "";
position: absolute;
display: block;
background: #dfe3e4;
width: 100%;
height: 0.5em;
top: 1.25em;
left: 50%;
margin-left: 1.5em\9;
z-index: -1;
}
.progress span.path:after {
content: "";
position: absolute;
display: block;
background: #dfe3e4;
width: 100%;
height: 0.5em;
top: 1.25em;
left: 50%;
margin-left: 1.5em\9;
z-index: -1;
}
.progress > li:last-child:after {
display: none;
}
.progress > li.is-complete {
color: #2ecc71;
}
.progress > li.is-complete:before, .progress > li.is-complete:after {
color: #fff;
background: blue;
}
.progress > li.is-complete:after {
width: 70%;
}
.progress > li.is-active {
color: blue;
}
.progress > li.is-active:before {
color: #fff;
background: green;
}
/**
* Needed for IE8
*/
.progress__last:after {
display: none !important;
}
/**
* Some Generic Stylings
*/
*,
*:after,
*:before {
box-sizing: border-box;
}
<ol class="progress">
<li class="is-complete" data-step="1">
<span class="path"></span>
Place A
</li>
<li class="is-active" data-step="2">
Place B
</li>
<li data-step="3" class="progress__last">
Place C
</li>
</ol>

Main Menu is not displaying properly?

In my blogger website second line of main menu is not displaying correctly.First line is working fine, second line is also working fine but not displaying correctly when i moves mouse pointer on second line buttons than they displays but in general looks completely white.
My website link - Click Here
HTML codes-
.social-text .snapchat a:after {
content: "Snapchat"
}
.social-text .email a:after {
content: "Email"
}
.social-text .external-link a:after {
content: "WebSite"
}
#header-wrap {
position: relative;
margin: 0
}
.header-header {
background-color: #fff;
width: 100%;
height: 90px;
position: relative;
overflow: hidden;
padding: 30px 0
}
.header-header .container {
position: relative;
margin: 0 auto;
padding: 0
}
.header-logo {
position: relative;
float: left;
width: auto;
max-width: 120px;
max-height: 100px;
margin: 0;
padding: 0px 0
}
.header-logo .header-image-wrapper {
display: block
}
.header-logo img {
max-width: 120%;
max-height: 150px;
margin: 0;
margin-left: 70px
}
.header-logo h1 {
color: $(title.color);
font-size: 36px;
line-height: 60px;
margin: 0
}
.header-logo p {
font-size: 12px;
margin: 5px 0 0
}
.header-ads {
position: relative;
float: right
}
.header-ads .widget>.widget-title {
display: none
}
.header-ads .widget {
max-width: 100%
}
.header-ads .widget .widget-content {
width: 728px;
max-width: 100%;
max-height: 90px;
line-height: 1
}
.header-menu {
position: relative;
width: 100%;
height: 46px;
z-index: 10;
font-size: 13px;
margin: 0;
background-color: $(main.dark.color);
border-top: 2px solid $(main.color)
}
.header-menu .container {
position: relative;
margin: 0 auto;
padding: 0
}
#main-menu .widget,
#main-menu .widget>.widget-title {
display: none
}
#main-menu .show-menu {
display: block
}
#main-menu {
position: relative;
height: 46px;
z-index: 15
}
#main-menu ul>li {
float: left;
position: relative;
margin: 0;
padding: 0;
transition: background .17s
}
#main-menu #main-menu-nav>li:hover,
#main-menu #main-menu-nav>li.li-home {
background-color: $(main.color)
}
#main-menu ul>li>a {
position: relative;
color: #fff;
font-size: 13px;
font-weight: 400;
line-height: 46px;
display: inline-block;
margin: 0;
padding: 0 15px;
transition: color .17s ease
}
#main-menu #main-menu-nav>li>a {
text-transform: uppercase;
font-weight: 700
}
#main-menu ul>li:hover>a {
color: #fff
}
#main-menu ul>li>ul {
position: absolute;
float: left;
left: 0;
top: 46px;
width: 180px;
background-color: $(main.dark.color);
z-index: 99999;
margin-top: 0;
padding: 0;
border-top: 2px solid $(main.color);
visibility: hidden;
opacity: 0
}
#main-menu ul>li>ul>li>ul {
position: absolute;
float: left;
top: 0;
left: 100%;
margin: -2px 0 0
}
#main-menu ul>li>ul>li {
display: block;
float: none;
position: relative
}
#main-menu ul>li>ul>li:hover {
background-color: $(main.color)
}
#main-menu ul>li>ul>li a {
display: block;
height: 36px;
font-size: 13px;
color: #fff;
line-height: 36px;
box-sizing: border-box;
margin: 0;
padding: 0 15px;
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: all .17s ease
}
#main-menu ul>li>ul>li:hover>a {
color: #fff
}
#main-menu ul>li.has-sub>a:after {
content: '\f107';
float: right;
font-family: FontAwesome;
font-size: 12px;
font-weight: 400;
margin: 0 0 0 5px
}
#main-menu ul>li>ul>li.has-sub>a:after {
content: '\f105';
float: right;
margin: 0
}
#main-menu .mega-menu {
position: static!important
}
#main-menu .mega-menu>ul {
width: 100%;
box-sizing: border-box;
padding: 20px 10px
}
#main-menu .mega-menu>ul.mega-menu-inner {
overflow: hidden
}
#main-menu ul>li:hover>ul,
#main-menu ul>li>ul>li:hover>ul {
visibility: visible;
opacity: 1
}
#main-menu ul ul {
transition: all .25s ease
}
.mega-menu-inner .mega-item {
float: left;
width: 20%;
box-sizing: border-box;
padding: 0 10px
}
.mega-menu-inner .mega-content {
position: relative;
width: 100%;
overflow: hidden;
padding: 0
}
.mega-content .post-image-wrap {
width: 100%;
height: 120px
}
.mega-content .post-image-link {
width: 100%;
height: 100%;
z-index: 1;
display: block;
position: relative;
overflow: hidden;
padding: 0
}
.mega-content .post-title {
position: relative;
font-size: 13px;
font-weight: 700;
line-height: 1.5em;
margin: 7px 0 5px;
padding: 0
}
.mega-content .post-title a {
display: block;
color: #fff;
transition: color .17s
}
.mega-content .post-title a:hover {
color: $(title.hover)
}
.mega-content .post-meta {
font-size: 11px
}
.no-posts {
float: left;
width: 100%;
height: 100px;
line-height: 100px;
text-align: center
}
.mega-menu .no-posts {
line-height: 60px;
color: $(title.color)
}
.show-search,
.hide-search {
position: absolute;
right: 0;
top: 0;
display: block;
width: 46px;
height: 46px;
background-color: $(main.color);
line-height: 46px;
z-index: 20;
color: #fff;
font-size: 15px;
text-align: center;
cursor: pointer;
padding: 0;
transition: background .17s ease
}
.show-search:before {
content: "\f002";
font-family: FontAwesome;
font-weight: 400
}
.hide-search:before {
content: "\f00d";
font-family: FontAwesome;
font-weight: 400
}
#nav-search {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 46px;
z-index: 99;
background-color: $(main.dark.color);
box-sizing: border-box;
padding: 0
}
#nav-search .search-form {
width: 100%;
height: 46px;
background-color: rgba(0, 0, 0, 0);
line-height: 46px;
overflow: hidden;
padding: 0
}
#nav-search .search-input {
width: 100%;
height: 46px;
font-family: inherit;
color: #fff;
}

1, you have more menu items right, so you have to reduce font-size, padding from (#main-menu ul > li > a).
2, Or otherwise you can go for a inner scroll.

.header-menu {
position: relative;
width: 100%;
/* height: 46px; */
z-index: 10;
font-size: 13px;
margin: 0;
background-color: #384a5f;
border-top: 2px solid #ffd012;
}
#main-menu {
position: relative;
/* height: 46px; */
z-index: 15;
}
#main-menu ul{
display:flex;
flex-wrap:wrap;
}
replace this code in your css for each element! i just removed the height for both header and main menu so that the div can expand with the height of her child! added display:flexfor ul to make height adjust depending on child

How can i make this custom Stepper?

I want to make the Stepper with two circle (one inside other), linked to other circle, but that circle inside other is hard to do, i can i do it?
I try using this https://jsfiddle.net/dedi_wibisono17/c69e374r/2/ and change it to look like that i want to do, but i fail!
<div class="row">
<div class="col-xs-12 col-md-8 offset-md-2 block border">
<div class="wrapper-progressBar">
<ul class="progressBar">
<li class="active">Beong Processed</li>
<li class="active">Waiting for payment</li>
<li>Paid</li>
</ul>
</div>
</div>
</div>
.wrapper-progressBar {
width: 100%
}
.progressBar {
}
.progressBar li {
list-style-type: none;
float: left;
width: 33%;
position: relative;
text-align: center;
}
.progressBar li:before {
content: " ";
line-height: 30px;
border-radius: 50%;
width: 30px;
height: 30px;
border: 1px solid #ddd;
display: block;
text-align: center;
margin: 0 auto 10px;
background-color: white
}
.progressBar li:after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: #ddd;
top: 15px;
left: -50%;
z-index: -1;
}
.progressBar li:first-child:after {
content: none;
}
.progressBar li.active {
color: dodgerblue;
}
.progressBar li.active:before {
border-color: dodgerblue;
background-color: dodgerblue
}
.progressBar li.active + li:after {
background-color: dodgerblue;
}
there was an error, the linked line with z-index=-1 it stay behind the section background, how can i put it in front ( i try change z-index but it not look well, it stay in front of the circle)

This should get you closer to what you're going for.
.wrapper-progressBar {
width: 100%;
}
.progressBar {
}
.progressBar li {
list-style-type: none;
float: left;
width: 33%;
position: relative;
text-align: center;
color:white
}
.progressBar li:before {
content: " ";
line-height: 30px;
border-radius: 50%;
width: 10px;
height: 10px;
display: block;
text-align: center;
padding:5px;
margin: 15px auto 25px;
background-color: white;
}
.progressBar li:after {
content: "";
position: absolute;
width: 94%;
height: 2px;
background-color: #19C1D5;
top: 18px;
left: -47%;
}
.progressBar li:first-child:after {
content: none;
}
.progressBar li.active:before {
margin:0 auto 10px;
border:15px solid #19C1D5;
}
The main changes were changing the margin of the li:before so it acts as a transparent border for the top and bottom, and changing li.active:before to revert the margin/add the border.

Multiple div carousel functionality using HTML/CSS/jQuery

How to achieve the carousel of multiple divs after clicking on add button? For each loop will repeat the div for every click of Add button. After click, multiple divs to be placed side by side and when it is overflow we need to do the carousel functionality for it with arrow marks as next and prev. Any Ideas on how to solve this?
.small-header {
min-height: 124px;
background-position: center right;
text-align: center;
display: table;
width: 100%;
padding: 22px 20px 0;
background: #fff;
box-sizing: border-box;
}
.small-header .vertical-align {
display: table-cell;
vertical-align: middle;
}
.component-carousel {
width: 530px;
display: block;
margin: 0 auto;
position: relative;
margin-bottom: 40px;
}
.component-carousel:before {
left: 0;
}
.component-carousel:after, .component-carousel:before {
content: "";
display: block;
position: absolute;
top: 0;
width: 20%;
height: 100%;
z-index: 1;
}
.component-carousel .outer-content {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.component-carousel .items {
position: relative;
height: 190px;
left: 145px;
}
.component-carousel .items .item {
top: 0;
left: -50px;
height: 190px;
box-sizing: border-box;
float: left;
margin: 0 20px 0 0;
position: relative;
display: table;
}
.your {
display: block;
height: 290px;
border: 2px solid #5e6a71;
text-align: center;
font-weight: 600;
letter-spacing: 1px;
padding: 15px 0 0 0;
width: 244px;
position: relative;
background: #fff;
}
.component-carousel .bullets {
position: absolute;
bottom: -25px;
width: 100%;
text-align: center;
z-index: 3;
}
.component-carousel .bullets li {
transition: all .15s ease-out;
display: inline-block;
margin: 0 3px;
}
.your>p.card-number {
margin-top: 95px;
margin-bottom: 10px;
position: relative;
color: #5e6a71;
}
.your .infonumber {
display: block;
}
.your p.card-number:after {
content: "";
display: block;
width: 70%;
height: 1px;
background: #bec3c6;
margin: 0 auto;
margin-top: 7px;
}
.card-left:after {
content: "";
display: block;
position: absolute;
width: 1px;
height: 95px;
background: #cecfd1;
right: -15px;
top: 0;
}
.card-detail-container {
display: block;
position: absolute;
width: 100%;
height: 80px;
left: 0;
top: 180px;
color: #5e6a71;
}
.card-left {
display: block;
float: left;
width: 50%;
position: relative;
padding:0 18px;
}
.card-right {
display: block;
float: left;
width: 50%;
position: relative;
padding:0 35px;
}
.card-detail-container p {
line-height: 14px !important;
}
.component-carousel.show-two .controls {
display: none;
}
.component-carousel .controls {
width: 100%;
height: 100%;
z-index: 2;
position: absolute;
top: 0;
}
.component-carousel .controls li.disabled {
opacity: .2;
cursor: pointer;
}
.component-carousel .controls li:first-child {
left: 0;
}
.component-carousel .controls li {
transition: all .15s ease-out;
position: absolute;
top: 0;
cursor: pointer;
background: url(/image/component/carousel/arrows.png) no-repeat center left;
height: 100%;
width: 19px;
}
.component-carousel .controls li:last-child {
right: 0;
background-position: center right;
}
.button {
border: 1px solid #a8a8a8;
font-size: 14px;
font-weight: 600;
background: #FFFFFF;
position: relative;
text-decoration: none;
white-space: normal;
cursor: pointer;
color: #292929;
}
.btn {
position: relative;
color: #4f4f4f;
left: 38%;
width: 25% !important;
max-width: 580px;
text-transform: capitalize;
}
#using (Html.BeginForm("", "", FormMethod.Post, new { #class = "form-horizontal" }))
{
if (Model.Details != null && Model.Details.Count() > 0)
{
<div class="small-header">
<div class="vertical-align">
<div class="component-carousel">
<div class="outer-content">
<div class="mask">
<ul class="items" style="transform: matrix(1, 0, 0, 1, 0, 0);">
<li class="item">
#foreach (var item in Model)
{
<div class="your">
<p class="card-number">
<span class="infonumber">123456</span>
</p>
<div class="card-detail-container">
<div class="card-left">
<p class="card-shape-title">Circle</p>
<p class="card-barcode-title">24242</p>
</div>
<div class="card-right">
<p class="card-carat-title">222</p>
<p class="card-certificate-title"></p>
</div>
</div>
</div>
}
</li>
</ul>
</div>
</div>
<ul class="controls">
<li class="prev disabled"></li>
<li class="next"></li>
</ul>
</div>
</div>
</div>
}
<div class="btns">
<button type="submit" id="addinfo" class="btn button" value="Add">Add<span></span><span></span></button>
</div>
}

Categories