Develop Reference

Having issue with alignment of multiple circular item in a row

I have created a circular shape where I show some percentages. I want to put multiple items in a row.
I tried with div and making display flex and nothing is working properly.
Here is a what I tried so far:
.meal-circular-progress{
position: relative;
height: 100px;
width: 100px;
border-radius: 50%;
background: conic-gradient(#7d2ae8 0deg, #ededed 0deg);
display: flex;
align-items: center;
justify-content: center;
margin:auto;
//transition: background 2s;
//transition-timing-function: ease;
//border: 1px solid red;
}
.meal-circular-progress::before{
content: "";
position: absolute;
height: 80px;
width: 80px;
border-radius: 50%;
background-color: #fff;
//border: 1px solid red;
}
.progress-value{
position: relative;
font-size: 40px;
font-weight: 600;
color: #7d2ae8;
}
<div class="col-sm-6 center">
<div class="meal-circular-progress" ng-style="c.circular">
<span class="progress-value">10%</span>
</div>
<div class="meal-circular-progress" ng-style="c.circular">
<span class="progress-value">10%</span>
</div>
<div class="meal-circular-progress" ng-style="c.circular">
<span class="progress-value">10%</span>
</div>
</div>

You need to make your parent element flexbox. In this case your parent element is center.
Make that element flexbox and use the align-items property to do so:
.center {
display: flex;
align-items: center;
justify-content: center;
}
.meal-circular-progress {
position: relative;
height: 100px;
width: 100px;
border-radius: 50%;
background: conic-gradient(#7d2ae8 0deg, #ededed 0deg);
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
.meal-circular-progress::before {
content: "";
position: absolute;
height: 80px;
width: 80px;
border-radius: 50%;
background-color: #fff;
}
.progress-value {
position: relative;
font-size: 40px;
font-weight: 600;
color: #7d2ae8;
}
<div class="col-sm-6 center">
<div class="meal-circular-progress" ng-style="c.circular">
<span class="progress-value">5%</span>
</div>
<div class="meal-circular-progress" ng-style="c.circular">
<span class="progress-value">10%</span>
</div>
<div class="meal-circular-progress" ng-style="c.circular">
<span class="progress-value">20%</span>
</div>
</div>

Flex the container
https://codepen.io/mplungjan/pen/xxJEPwx
#container {
display: flex;
flex-direction: row;
min-width: max-content;
max-width: max-content; /* optional */
border: 1px solid black;
}

Overlay one image into another with z-index

I am trying to overlay one image into another but it not working.
My code
body {
background: #000000 50% 50%;
height: 100%
width:100%;
overflow-x: hidden;
overflow-y: hidden;
}
.neer {
z-index: 100;
position: absolute;
}
.mobile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 30px;
}
<div class="mobile">
<p style="color: blue; font-size: 40px;">Overlay image</p>
<div class="neer">
<img src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" />
</div>
<div>
<img src="https://place-hold.it/338x280" />
</div>
</div>
I am not using margin-top or margin-bottom because i am looking in responsive. defining margin sometime break the layout in different structure.

Place both images inside a div with position: relative;. Add this class to the image that should be on top:
.neer {
z-index: 100;
position: absolute;
top: 0;
left: 0;
}
body {
background: #000000 50% 50%;
height: 100%
width:100%;
overflow-x: hidden;
overflow-y: hidden;
}
.neer {
z-index: 100;
position: absolute;
top: 0;
left: 0;
}
.mobile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 30px;
}
<div class="mobile">
<p style="color: blue; font-size: 40px;">Overlay image</p>
<div style="position: relative;">
<img src="https://place-hold.it/338x280" />
<img class="neer" src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" />
</div>
</div>

there are many ways to do that. a simple way using your giving code is to remove flex style from mobile and put it in body.
* {
/* border: 1px solid red; */
}
body {
background: #000000 50% 50%;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.neer {
z-index: 100;
position: absolute;
}
.mobile {
/* display: flex; */
/* flex-direction: column; */
/* align-items: center; */
/* justify-content: center; */
height: 100%;
gap: 30px;
}
<div class="mobile">
<p style="color: blue; font-size: 40px;">Overlay image</p>
<div class="neer">
<img src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" />
</div>
<div class="behind">
<img src="https://place-hold.it/338x280" />
</div>
</div>
a better way is to put both pictures in one div then give them the same position in that div.
* {
/* border: 1px solid red; */
}
body {
background: #000000 50% 50%;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.neer {
z-index: 100;
position: absolute;
}
.mobile {
/* display: flex; */
/* flex-direction: column; */
/* align-items: center; */
/* justify-content: center; */
height: 100%;
gap: 30px;
}
<div class="mobile">
<p style="color: blue; font-size: 40px;">Overlay image</p>
<div class="container">
<div class="neer">
<img src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" />
</div>
<div class="behind">
<img src="https://place-hold.it/338x280" />
</div>
</div>
</div>
If we know why you want to do this, there might be a better way.

Space between div in postion: relative

I'm builiding a navigation panel which is over header. I used postion: relative and I subtracked few px (#navigation).
The height of the section header is reserved as if the navigation panel has not been moved. I would like that section to be closer to the header with no break.
How can I do it?
body {
background-color: #e6e6e6;
}
#conteiner {
border: 1px solid black;
}
#conteiner>* {
min-height: 100px;
display: flex;
}
/* HEADER */
header {
flex-direction: column;
align-items: center;
}
#spacer-up {
background-color: #8dc63f;
height: 15px;
width: 100%;
}
#frame-header {
max-height: 400px;
flex-direction: column;
align-items: center;
}
#spacer-down {
background-color: #dddddd;
height: 15px;
width: 100%;
}
#navigation {
width: 450px;
height: 130px;
display: flex;
position: relative;
top: -65px;
}
.button1 {
flex: 1;
background-color: #00984a;
display: flex;
align-items: center;
justify-content: center;
color: #FFF;
transition: 0.1s;
}
.button1:hover {
background-color: #007639;
transition: 0.2s;
}
/* Content */
section {
display: flex;
justify-content: center;
position: relative;
}
#content {
border: 1px solid black;
width: 1200px;
background-color: #FFF;
}
footer {
background-color: #007639;
justify-content: center;
align-items: center;
}
<body>
<!-- Add your site or application content here -->
<div id="conteiner">
<header>
<div id="spacer-up"></div>
<div id="frame-header">
<img src="/img/header-background.png" alt="" width="1138" height="369">
</div>
<div id="spacer-down"></div>
<div id="navigation">
<div class="button1">TEXT1</div>
<div class="button1">TEXT2</div>
<div class="button1">TEXT3</div>
</div>
</header>
<section>
<div id="content">
SECTION 1
</div>
</section>
<footer>
FOOTER
</footer>
</div>
<body>

unnecessary height is coming in html css

how to avoid this unnecessary height in responsive view?
i tried everything but still not getting
and if possible can anyone suggest me how to make it responsive where both top headers are in left in column which must appear on clicking a hamburger
var main = document.getElementById('main');
function clicked() {
main.classList.toggle("mystyle");;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html {
font-size: 12px;
}
body {
background-color: black;
width: 100%;
height: 100vh;
}
.header1 {
display: flex;
justify-content: flex-end;
width: 100%;
align-items: center;
background-color: transparent;
color: aliceblue;
}
.main {}
.info {
display: flex;
flex-direction: column;
padding: 20px;
}
.header2 {
width: 100%;
display: flex;
color: aliceblue;
justify-content: space-around;
align-items: center;
background-color: transparent;
height: 60px;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
.navbar {}
.navbar ul {
display: flex;
flex-direction: row;
list-style: none;
position: relative;
}
.navbar ul ul {
top: 70px;
width: fit-content;
padding: 0 30px 0 30px;
display: none;
font-size: 1rem;
line-height: .01px;
z-index: 10;
transition: all 2s ease;
background-color: white;
}
.navbar ul ul li a {
color: black;
}
.navbar ul li:hover ul {
display: block;
opacity: 1;
}
a {
text-decoration: none;
color: aliceblue;
}
li {
padding: 30px;
}
.sicons {
display: flex;
justify-content: space-between;
align-items: stretch;
}
.sicons img {
display: block;
padding: 5px;
}
.text {
z-index: 1;
position: relative;
top: 0;
width: 50%;
display: flex;
margin-left: 50px;
flex-direction: column;
margin-top: 60px;
height: auto;
line-height: 8rem;
background-color: transparent;
font-weight: 600;
}
.st1 {
font-size: 1.6rem;
color: white;
}
.nd2 {
font-size: 8rem;
color: crimson;
}
.th3 {
font-size: 8rem;
color: white;
}
.btn button {
left: 0;
width: 220px;
height: 70px;
background-color: transparent;
border-radius: 50px;
color: white;
font-size: 1.2rem;
border: 1px solid white;
padding: 15px;
}
.active,
.navbar ul li:hover {
border-bottom: 1px solid crimson;
}
.mystyle {
display: none;
}
/* mediaqueries */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>sample</title>
</head>
<body>
<div id="main">
<div id="header1" class="header1">
<img src="https://img.icons8.com/ios-glyphs/30/fa314a/clock--v3.png" />
<div class="info">
<span style="color: crimson;">HOURS</span><span>Mon - Sat
8.00 - 18.00</span>
</div><img src="https://img.icons8.com/ios-glyphs/30/fa314a/phone-disconnected.png" />
<div class="info">
<span style="color: crimson;">Call</span>+91 878778777</span>
</div>
<img src="https://img.icons8.com/ios-glyphs/30/fa314a/marker--v1.png" />
<div class="info">
<span style="color: crimson;">Address</span><span>India</span>
</div>
</div>
<hr style="color: crin;">
<div id="header2" class="header2">
<div class="navbar">
<ul class="mt">
<li class="active">Home</li>
<li class="">About</li>
<li class="">Programs
<ul>
<li> School Program</li>
<hr>
<li> Single Program</li>
<hr>
<li> Schedule</li>
<hr>
<li> Workshop and events</li>
<hr>
<li> Get Quote</li>
</ul>
</li>
<li class="">Blog</li>
<li class="">Shop</li>
<li class="">Elements</li>
</ul>
</div>
<div class="sicons">
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/facebook-new.png" />
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/twitter.png" />
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/youtube-play.png" />
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/instagram-new.png" />
</div>
</div>
</div>
<div class="text">
<div class="st1">ENROLL TODAY</div>
<div class="nd2">Learn To</div>
<div class="th3">Play Guitar </div>
<div class="btn">
<button onclick="clicked()"> START NOW </button>
</div>
</div>
</body>
</html>

Your .text has margin-top: 60px; and line-height: 8rem is this the unneccessary height you were looking for?
You can use Browser development tools to find where stylings come from:
As for your question about the hamburger menu button... you can search stackoverflow for examples. Just type "how to make burger button" or something in the search bar at the top.
One result here: Javascript hamburger menu toggle (this is about an error someone had but you can copy&paste the correct source code from there if you also read the solution).
You can also search the internet for tutorials on this. One tutorial found here:
https://dev.to/ljcdev/easy-hamburger-menu-with-js-2do0

Center a div and append a right menu to that div

I need to center a main div and append a fixed menu to the right of that item. I need the main div to stay in the center and the right menu to "fix" to the centered div.
Currently, I'm using flex to center the div, but this is resulting in both items centering (meaning the main div is not truly in the center).
This is the desired layout:
Current layout:
The code appears as below (I'm using React with styled components):
Container:
const DivContainer = styled.div`
display: flex;
justify-content: center;
position: relative;
z-index: 60;
width: 100%;
`;
Main Div:
const MainDiv = styled.div`
width: 300px;
padding: 35px 15px;
`;
Menu div:
const MenuDiv = styled.div`
display: flex;
cursor: pointer;
flex-shrink: 0;
flex-direction: column;
margin-top: 85px;
order: 10;
`;
This is rendered as the below:
<DivContainer>
<MainDiv />
<MenuDiv />
</DivContainer>

You could put the sidebar inside the container and push it out with a negative margin right
body,
html {
height: 100%;
margin: 0;
}
.container {
height: 100%;
width: 100%;
border: 2px solid yellow;
border-radius: 5px;
box-sizing: border-box;
margin: 5px;
display: grid;
place-items: center;
}
.center {
width: 200px;
height: 200px;
border: 2px solid yellow;
border-radius: 5px;
}
.sidebar {
width: 50px;
height: 200px;
outline: 2px solid magenta;
border-radius: 5px;
/* important */
float: right;
margin-right: -50px;
}
<div class="container">
<div class="center">
content
<div class="sidebar">
sidebar
</div>
</div>
</div>
ps: for the snippet click full page

You could just wrap it in a zero width div, with overflow visible:
#wrapper {
display: flex;
border: solid 3px green;
justify-content: center;
}
#main {
border: solid 2px orange;
width: 50%;
}
#no-width {
width: 0;
overflow: visible;
}
#menu {
width: 100px;
border: solid red 2px;
}
<body>
<div id="wrapper">
<div id="main">
Centered
</div>
<div id="no-width">
<div id="menu">
"Zero" width div, so doesn't affect centering
</div>
</div>
</div>
</body>

Wrap it in another div with same width as main div and set min-width for its child
.wrapper {
display: flex;
width: 300px;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.main {
width: 300px;
min-width: 300px;
min-height: 200px;
background-color: aquamarine;
}
.menu {
width: 80px;
min-width: 80px;
min-height: 200px;
background-color: cadetblue;
position: relative;
}
<div class="container">
<div class="wrapper">
<div class="main"></div>
<div class="menu"></div>
</div>
</div>