this is what I want to achieve
I tried to do so but I am not able to change the gap between the dashes. Also, the size of the circles and the dashed lines is not changing according to the screen size.
This is what I have done till now: see the gap difference between the dashes
Here's the code:
<div id="getStarted" className={styles.getStarted}>
<h3>How to get started?</h3>
<div className={styles.Icons}>
<div className={styles.circle}>
</div>
<div className={styles.dash}></div>
<div className={styles.circle}>
</div>
<div className={styles.dash}></div>
<div className={styles.circle}>
</div>
</div>
</div>
Here's the css styling:
.getStarted {
justify-content: center;
align-items: center;
text-align: center;
h3 {
color: #006ebe;
font-size: 2.3vw;
margin-bottom: 100px;
}
.Icons {
gap: 2vw;
display: flex;
justify-content: center;
.circle {
border-radius: 50%;
width: 20px;
height: 20px;
padding: 10px;
background: #0093ff;
border: 3px solid #0093ff;
color: white;
text-align: center;
font: 20px Poppins, sans-serif;
font-weight: 600;
line-height: 22px;
}
.dash {
width: 10%;
border-top: 4px dotted #006ebe;
margin-top: 20px;
transform: rotate(-0.07deg);
}
}
}
CodePudding user response:
Your template looks very suspiciously like svg lines that use stroke-dasharray and round strike-linecap
.getStarted {
justify-content: center;
align-items: center;
text-align: center;
}
h3 {
color: #006ebe;
font-size: 2.3vw;
margin-bottom: 100px;
}
.Icons {
gap: 2vw;
display: flex;
justify-content: center;
}
.circle {
border-radius: 50%;
width: 20px;
height: 20px;
padding: 10px;
background: #0093ff;
border: 3px solid #0093ff;
color: white;
text-align: center;
font: 20px Poppins, sans-serif;
font-weight: 600;
line-height: 22px;
}
.dash {
width: 10%;
transform: rotate(-0.07deg);
}
.dash line {
stroke: #0093ff;
stroke-dasharray: 0.5 3.2;
stroke-linecap: round;
}
<div id="getStarted" >
<h3>How to get started?</h3>
<div >
<div >
</div>
<svg viewBox="-10 -5 20 10"><line x1="-9" x2="9"></line></svg>
<div >
</div>
<svg viewBox="-10 -5 20 10"><line x1="-9" x2="9"></line></svg>
<div >
</div>
</div>
</div>
CodePudding user response:
by using this answer How to increase space between dotted border dots and change the background-size
property you can change the gap between dashes . and by using vw
unit you can to change dashes with page resizing.
.getStarted {
justify-content: center;
align-items: center;
text-align: center;
}
h3 {
color: #006ebe;
font-size: 2.3vw;
margin-bottom: 100px;
}
.Icons {
gap: 2vw;
display: flex;
justify-content: center;
}
.circle {
border-radius: 50%;
width: 20px;
height: 20px;
padding: 10px;
background: #0093ff;
border: 3px solid #0093ff;
color: white;
text-align: center;
font: 20px Poppins, sans-serif;
font-weight: 600;
line-height: 22px;
}
.dash {
width: 10%;
background-image: linear-gradient(
to right,
#0093ff 35%,
rgba(255, 255, 255, 0) 0%
);
background-position: center;
background-size: 1.6vw 0.6vw;
background-repeat: repeat-x;
}
<div id="getStarted" class='getStarted'>
<h3>How to get started?</h3>
<div class='Icons'>
<div class=' circle'>
</div>
<div class='dash'></div>
<div class='circle'>
</div>
<div class='dash'></div>
<div class='circle'>
</div>
</div>
</div>
CodePudding user response:
You can change your CSS.
CSS Example:
.getStarted {
justify-content: center;
align-items: center;
text-align: center;
}
h3 {
color: #006ebe;
font-size: 2.3vw;
margin-bottom: 100px;
}
.Icons {
display: flex;
justify-content: center;
}
.circle {
border-radius: 50%;
width: 20px;
height: 20px;
padding: 10px;
background: #0093ff;
border: 3px solid #0093ff;
color: white;
text-align: center;
font: 20px Poppins, sans-serif;
font-weight: 600;
line-height: 22px;
margin-left: 6px;
margin-right: 6px;
}
.dash {
width: 20%;
border-top: 4px dotted #006ebe;
margin: 20px 2px 0 2px;
transform: rotate(-0.07deg);
}
HTML
<div id="getStarted" className={styles.getStarted}>
<h3>How to get started?</h3>
<div className={styles.Icons}>
<div className={styles.circle}>
</div>
<div className={styles.dash}></div>
<div className={styles.circle}>
</div>
<div className={styles.dash}></div>
<div className={styles.circle}>
</div>
</div>
</div>
.getStarted {
justify-content: center;
align-items: center;
text-align: center;
}
h3 {
color: #006ebe;
font-size: 2.3vw;
margin-bottom: 100px;
}
.Icons {
display: flex;
justify-content: center;
}
.circle {
border-radius: 50%;
width: 20px;
height: 20px;
padding: 10px;
background: #0093ff;
border: 3px solid #0093ff;
color: white;
text-align: center;
font: 20px Poppins, sans-serif;
font-weight: 600;
line-height: 22px;
margin-left: 6px;
margin-right: 6px;
}
.dash {
width: 20%;
border-top: 4px dotted #006ebe;
margin: 20px 2px 0 2px;
transform: rotate(-0.07deg);
}
<div id="getStarted">
<h3>How to get started?</h3>
<div >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
</div>