Here I'm creating a header with display: flex; for perfect horizontally centering my elements inside that and not vertically centering them. Without using Bootstrap, everything works right, but as soon as I add Bootstrap CSS to my HTML, they just leap into the center of the .container with a little spacing between them, I want my .right-svg and .nike-svg to be placed at the very right and left spaces in their .container.
NOTE: The result f this snippet is exactly what I want it to look like, but please add Bootstrap CSS 3 to this HTML as I did, and the problem will be shown.
Any advises is welcome.
*,
*::after,
*::before{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
main{
max-width: 100%;
}
/*====================== header ======================*/
header .row{
margin: 0;
}
header .row .col-xs-12{
padding: 0;
}
header .row .gen-nav-header{
height: 60px;
background-color: #e38d13;
}
header .row .gen-nav-header .container-fluid{
width: 96%;
height: 100%;
margin: auto;
border: 1px solid #000;
display: flex;
/*align-items: center;*/
justify-content: space-between;
flex-direction: row-reverse;
}
header .row .gen-nav-header .container-fluid .right-svg{
display: flex;
justify-content: end;
align-items: center;
border: 1px solid #000;
flex-direction: row-reverse;
}
header .row .gen-nav-header .container-fluid .nike-svg{
display: block;
position: relative;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nike Official Site. Nike DE</title>
</head>
href="node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="images/nike-icon.jpg">
<body>
<main>
<!-- ================ header ============== -->
<header>
<div class="row">
<div class="col-xs-12">
<div class="gen-nav-header">
<div class="container-fluid">
<!------------------ right svg ------------------->
<div class="right-svg">
<span class="hamburger-menu-svg">
<svg width="24px" height="24px" fill="#111" viewBox="0 0 24 24"><path d="M21 13H3c-.6 0-1-.4-1-1s.4-1 1-1h18c.6 0 1 .4 1 1s-.4 1-1 1zm0-8H3c-.6 0-1-.4-1-1s.4-1 1-1h18c.6 0 1 .4 1 1s-.4 1-1 1zm0 16H3c-.6 0-1-.4-1-1s.4-1 1-1h18c.6 0 1 .4 1 1s-.4 1-1 1z"></path></svg>
</span>
<span class="search-svg">
<svg class="pre-search-input-icon" fill="#111" height="30px" width="30px" viewBox="0 0 24 24"><path d="M21.71 20.29L18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.39zM11 18a7 7 0 1 1 7-7 7 7 0 0 1-7 7z"></path></svg>
</span>
<span class="shopping-svg">
<svg width="24px" height="24px" fill="#111" viewBox="0 0 24 24"><path d="M16 7a1 1 0 0 1-1-1V3H9v3a1 1 0 0 1-2 0V3a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v3a1 1 0 0 1-1 1z"></path><path d="M20 5H4a2 2 0 0 0-2 2v13a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a2 2 0 0 0-2-2zm0 15a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7h16z"></path></svg>
</span>
</div>
<!----------------- end right svg ------------------->
<span class="nike-svg">
<svg class="pre-logo-svg" height="60px" width="60px" fill="#111" viewBox="0 0 69 32"><path d="M68.56 4L18.4 25.36Q12.16 28 7.92 28q-4.8 0-6.96-3.36-1.36-2.16-.8-5.48t2.96-7.08q2-3.04 6.56-8-1.6 2.56-2.24 5.28-1.2 5.12 2.16 7.52Q11.2 18 14 18q2.24 0 5.04-.72z"></path></svg>
</span>
</div>
</div>
</div>
</div>
</header>
</main>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>
Change the class name .container-fluid to something else as that is a bootstrap predefined class.
You can change the class name to anything else you want.
Codepen: https://codepen.io/manaskhandelwal1/pen/mdrzqOM
Add .col to <div class="col-xs-12">.
Is it possible, that you are using Bootstrap 4 while looking to Bootstrap 5 guide?
/*====================== header ======================*/
header .row {
margin: 0;
}
header .row .col-xs-12 {
padding: 0;
}
header .row .gen-nav-header {
height: 60px;
background-color: #e38d13;
}
header .row .gen-nav-header .container-fluid {
width: 96%;
height: 100%;
margin: auto;
border: 1px solid #000;
display: flex;
/*align-items: center;*/
justify-content: space-between;
flex-direction: row-reverse;
}
header .row .gen-nav-header .container-fluid .right-svg {
display: flex;
justify-content: end;
align-items: center;
border: 1px solid #000;
flex-direction: row-reverse;
}
header .row .gen-nav-header .container-fluid .nike-svg {
display: block;
position: relative;
left: 0;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<main>
<!-- ================ header ============== -->
<header>
<div class="row">
<div class="col col-xs-12"> <!-- ← ADD .col HERE ← -->
<div class="gen-nav-header">
<div class="container-fluid">
<!------------------ right svg ------------------->
<div class="right-svg">
<span class="hamburger-menu-svg">
<svg width="24px" height="24px" fill="#111" viewBox="0 0 24 24">
<path d="M21 13H3c-.6 0-1-.4-1-1s.4-1 1-1h18c.6 0 1 .4 1 1s-.4 1-1 1zm0-8H3c-.6 0-1-.4-1-1s.4-1 1-1h18c.6 0 1 .4 1 1s-.4 1-1 1zm0 16H3c-.6 0-1-.4-1-1s.4-1 1-1h18c.6 0 1 .4 1 1s-.4 1-1 1z"></path>
</svg>
</span>
<span class="search-svg">
<svg class="pre-search-input-icon" fill="#111" height="30px" width="30px" viewBox="0 0 24 24">
<path d="M21.71 20.29L18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.39zM11 18a7 7 0 1 1 7-7 7 7 0 0 1-7 7z"></path>
</svg>
</span>
<span class="shopping-svg">
<svg width="24px" height="24px" fill="#111" viewBox="0 0 24 24">
<path d="M16 7a1 1 0 0 1-1-1V3H9v3a1 1 0 0 1-2 0V3a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v3a1 1 0 0 1-1 1z"></path>
<path d="M20 5H4a2 2 0 0 0-2 2v13a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a2 2 0 0 0-2-2zm0 15a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7h16z"></path>
</svg>
</span>
</div>
<!----------------- end right svg ------------------->
<span class="nike-svg">
<svg class="pre-logo-svg" height="60px" width="60px" fill="#111" viewBox="0 0 69 32">
<path d="M68.56 4L18.4 25.36Q12.16 28 7.92 28q-4.8 0-6.96-3.36-1.36-2.16-.8-5.48t2.96-7.08q2-3.04 6.56-8-1.6 2.56-2.24 5.28-1.2 5.12 2.16 7.52Q11.2 18 14 18q2.24 0 5.04-.72z"></path>
</svg>
</span>
</div>
</div>
</div>
</div>
</header>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Related
I have a <div id="Frame"> element, within it is a <svg> element. I would like the <svg> element to be centered in the frame, and grow at a aspect ratio of 1/1, until one edge uses up say 90% of the available space (so it almost fills the whole space, but has a bit of a border).
But I can't get the SVG to grow. I read the many other similar SO answers, some say CSS overrides the width/height attributes of the SVG, but I tried removing them just incase (not ideal), but it still did not grow). The other common soluation is width: 100%; height: auto;, which did not work for me.
main {
padding: 0; margin: 0;
width: 100vw;
height: 100vh;
}
#FRAME {
padding: 0; margin: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: lightyellow;
position:relative;
}
#FRAME svg {
max-width: 90%;
max-height: 90%;
width: 90%;
height: auto;
aspect-ratio: 1/1;
flex-grow: 1;
}
<main>
<div id="FRAME">
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 5v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5a2 2 0 0 0-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"></path>
</svg>
</div>
</main>
You'll need to add a viewBox to the SVG to determine the SVG viewport.
Whilst the width and height attributes help with keeping the aspect ratio, viewBox helps with scaling the SVG contents correctly.
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 5v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5a2 2 0 0 0-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"></path>
</svg>
I ran into a weird problem with Safari.
It seems to ignore the padding of a link when the span inside is inline-block.
Works in FF and Chrome but Safari just ignores the right padding.
I can add a padding to the span inside but then FF and Chrome have too much space on the right. The structure is generated by the speeddial component in primefaces so not easily changed.
Here's a Screenshot of the problem in Safari and Firefox for comparison.
Anyone ran into this problem before?
Thanks in advance!
ul{
width: 200px;
height: auto;
list-style: none;
}
li{
margin-bottom: 1em;
}
a{
display: inline-block;
background: red;
padding: 0 1em;
}
span{
white-space: nowrap;
}
svg{
margin-right: 0.5em;
max-width: 1.25rem;
vertical-align: bottom;
}
<ul>
<li>
<a href="#"><span>
<svg enable-background="new 0 0 20 21.4" viewBox="0 0 20 21.4">
<path d="m13.1 8.4v-6h1v-2h-8.2v2h1v6l-4.4 9.6c-.1.1-.1.3-.1.4v.5c0 .2 0 .4.1.6s.1.4.3.5c.2.3.4.5.7.7.2.2.5.3.9.3h11.2c.3 0 .7-.1 1-.3s.5-.4.7-.7c.2-.3.3-.6.3-1 0-.3 0-.7-.2-1zm-4.2.7c0-.1.1-.2.1-.2 0-.1 0-.1 0-.2v-6.2h2v6.2.2c0 .1 0 .2.1.2l2.1 4.7h-6.4z" fill="#fff"></path>
</svg>
Link text one
</span></a>
</li>
<li>
<a href="#"><span>
<svg enable-background="new 0 0 20 21.4" viewBox="0 0 20 21.4">
<path d="m13.1 8.4v-6h1v-2h-8.2v2h1v6l-4.4 9.6c-.1.1-.1.3-.1.4v.5c0 .2 0 .4.1.6s.1.4.3.5c.2.3.4.5.7.7.2.2.5.3.9.3h11.2c.3 0 .7-.1 1-.3s.5-.4.7-.7c.2-.3.3-.6.3-1 0-.3 0-.7-.2-1zm-4.2.7c0-.1.1-.2.1-.2 0-.1 0-.1 0-.2v-6.2h2v6.2.2c0 .1 0 .2.1.2l2.1 4.7h-6.4z" fill="#fff"></path>
</svg>
Link text
</span></a>
</li>
</ul>
I want the height of the picture to always be equal to the height of the text, I'm assuming that the height of the div depends on the height of the content and I'm trying to set this height in the picture by specifying height: 100%; but it doesn't work - how can i fix the problem
<!DOCTYPE html>
<body>
<div class="container">
<svg xmlns=" http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="#2329D6" stroke-width="1" color="#2329D6">
<path
d="M16 12C15.3333333 12.6666667 15 14 15 16L15 17 9 17 9 16C9 14 8.66666667 12.6666667 8 12 5.6739597 9.6739597 5.41421356 6.10050506 7.75735931 3.75735931 10.1005051 1.41421356 13.8994949 1.41421356 16.2426407 3.75735931 18.5857864 6.10050506 18.4068484 9.59315157 16 12zM10 21L14 21" />
</svg>
<div class="text">
<div class="text__first">First</div>
<div class="text__second">second</div>
</div>
</div>
</body>
<style>
.container {
display: flex;
flex-direction: row;
font-size: 20vmin;
}
.text {
background: green;
}
.text__first {
font-size: 20vmin;
}
.text__second {
font-size: 10vmin;
}
svg {
height: 100%;
}
</style>
</html>
Add some simple wrapper and make it a grid. I added a border for visual clarity and based the font on the original container by using em.
.container {
display: flex;
flex-direction: row;
font-size: 20vmin;
}
.image-container {
display: grid;
}
.text {
background: green;
}
.text__first {
1em;
/* based on container */
}
.text__second {
font-size: 0.5em;
}
.container .image-container svg {
border: 1px solid #FFAAFF;
height: 100%;
}
<div class="container">
<div class="image-container">
<svg xmlns=" http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="#2329D6" stroke-width="1" color="#2329D6">
<path
d="M16 12C15.3333333 12.6666667 15 14 15 16L15 17 9 17 9 16C9 14 8.66666667 12.6666667 8 12 5.6739597 9.6739597 5.41421356 6.10050506 7.75735931 3.75735931 10.1005051 1.41421356 13.8994949 1.41421356 16.2426407 3.75735931 18.5857864 6.10050506 18.4068484 9.59315157 16 12zM10 21L14 21" />
</svg>
</div>
<div class="text">
<div class="text__first">First</div>
<div class="text__second">second</div>
</div>
</div>
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 1 year ago.
I want to hide the icon when I hover on the h2, but my code doesn't work. What is wrong with my code?
I use Bootstrap and SCSS, but I don't think that causes my problem.
This is my HTML code:
<div class="home__container ">
<div class="home__container__icon" id="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="90" fill="currentColor"
class="bi bi-check-square text-success " viewBox="0 0 16 16">
<path
d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
<path
d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.235.235 0 0 1 .02-.022z" />
</svg>
</div>
<h2 class="home__container__head">
the Straight Path
</h2>
</div>
SCSS code is:
.home__container__head {
background-image: linear-gradient(#7ed56f, #28b485);
-webkit-background-clip: text !important;
background-clip: text;
color: transparent !important;
font-size: 5rem;
transform: scale(0.9);
display: inline-block;
transition: all 0.3s;
&:hover {
box-shadow: 2px 2px 3px #28b485;
transform: scale(1.2);
outline: 5px solid #28b485;
& #icon {
margin-top: -25px;
display: none;
}
}
}
CSS doesn't have a facility for you to 'back up and then down'.
A couple of things you can do with just HTML/CSS.
You could alter the CSS to sense hover on the parent:
.home__container__head {
background-image: linear-gradient(#7ed56f, #28b485);
-webkit-background-clip: text !important;
background-clip: text;
color: transparent !important;
font-size: 5rem;
transform: scale(0.9);
display: inline-block;
transition: all 0.3s;
}
.home__container:hover .home__container__head {
box-shadow: 2px 2px 3px #28b485;
transform: scale(1.2);
outline: 5px solid #28b485;
}
.home__container:hover #icon {
margin-top: -25px;
display: none;
}
<div class="home__container ">
<div class="home__container__icon" id="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="90" fill="currentColor" class="bi bi-check-square text-success " viewBox="0 0 16 16">
<path
d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
<path
d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.235.235 0 0 1 .02-.022z" />
</svg>
</div>
<h2 class="home__container__head">
the Straight Path
</h2>
</div>
Or change the design and put the icon after The Straight Path - that way you can select the icon as a sibling directly following The Straight Path.
Or put the icon not in a separate div but in a pseudo before element. Then you can make it disappear on hover of the text div.
If neither of these is possible then you will have to use some Javascript to sense when The Straight Path is being hovered over and alter both it and the icon's styles (or add/remove classes).
I'm trying to space out the 'categories' along the black bar and put divider spacers in-between. The 'categories' are in a list. I was able to put them horizontally but am having trouble spacing them out. How would I go about doing this ? For visuals I mocked up the desired result in illustrator below.
Here is what I have so far:
HTML:
<div class="ride-stats">
<div class="ride-stats-content">
<ul>
<li>
<div class="ride-stats-col ride-stats-distance">
<span class="icon-distance">
<svg height= 10mm width= 12mm xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.75 35.86">
<g id="prefix__Layer_2" data-name="Layer 2">
<g id="prefix__Layer_1-2" data-name="Layer 1">
<path class="prefix__cls-1"
d="M3.33 30a2.5 2.5 0 012.49-2.49h6.74a5.83 5.83 0 000-11.65h-.84v3.33h.84a2.5 2.5 0 010 5H5.82a5.82 5.82 0 000 11.64H25v-3.29H5.82A2.5 2.5 0 013.33 30zM6.73 0A6.73 6.73 0 000 6.73c0 5 6.73 12.5 6.73 12.5s6.73-7.45 6.73-12.5A6.73 6.73 0 006.73 0zm0 9.13a2.4 2.4 0 112.4-2.4 2.39 2.39 0 01-2.4 2.4zM30 16.64a6.73 6.73 0 00-6.73 6.73c0 5 6.73 12.49 6A6.72 6.72 0 0030 16.64zm0 9.13a2.41 2.41 0 112.4-2.4 2.41 2.41 0 01-2.4 2.4z" />
</g>
</g>
</svg>
</span>
<span class="ride-stats-label">Distance:</span>
<span> <h3>19.5</h3> <span>km</span></span>
</div>
</li>
<li>
<div class="ride-stats-col ride-stats-elevation">
<span class="icon-elevation">
<svg height= 10mm width= 12mm xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.75 18.51">
<g data-name="Layer 2">
<path d="M36.75 18.52H0l6.32-9.26L12.63 0l6.32 9.26 1.53 2.24.19-.26 5.36-7.27 10.72 14.55z"
data-name="Layer 1" />
</g>
</svg>
</span>
<span class="ride-stats-label">Elevation:</span>
<span> <h3>120</h3>
<span>m</span>
</span>
</div>
</li>
<li>
<div class="ride-stats-col ride-stats-difficulty">
<span class="icon-difficulty">
<svg height=10mm width= 12mm xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.75 35.87">
<g id="prefix__Layer_2" data-name="Layer 2">
<g id="prefix__Layer_1-2" data-name="Layer 1">
<path class="prefix__cls-1"
d="M27.83 0h8.92v35.86h-8.92zM0 23.91h8.92v11.95H0zM13.92 11.97h8.92v23.9h-8.92z" />
</g>
</g>
</svg>
</span>
<span class="ride-stats-label">Difficulty:</span>
<span> <h3>Easy</h3></span>
</div>
</li>
</ul>
</div>
</div>
CSS:
.ride-stats {
color: white;
margin: 0;
position: relative;
}
.ride-stats svg{
fill: red;
}
.ride-stats h3 {
font-family: sans-serif;
display: inline-block;
font-size: 25px;
font-weight: 700;
margin-bottom: 0;
}
.ride-stats-content {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
margin: 0 auto 0 auto;
max-width: 1100px;
background: #282828;
padding: 20px 0 20px 0;
}
ul li{
display: inline-flex;
text-align: center;
margin: 0 0 0px 0;
}
* {
box-sizing: border-box;
}
ul li .ride-stats-col{
text-decoration: none;
display: flexbox;
}
.ride-stats-col {
position: relative;
text-align: center;
flex-grow: 1;
flex-basis: 0; padding: 15px 0;
}
.ride-stats .icon-distance, .ride-stats .icon-elevation, .ride-stats .icon-difficulty{
display: block;
min-height: 55px;
}
Your issue is that you are setting the display:flex in the incorrect class, you have to apply to the ul instead
Snippet - with a bit of CSS improved
* {
box-sizing: border-box;
margin: 0
}
.ride-stats {
color: white;
}
.ride-stats svg {
fill: red;
}
.ride-stats h3 {
font-family: sans-serif;
display: inline-block;
font-size: 25px;
font-weight: 700;
}
.ride-stats-content {
margin: 0 auto;
max-width: 1100px;
background: #282828;
}
.ride-stats-content ul {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 20px;
list-style: none;
}
[class^='icon-'] {
display: block;
min-height: 55px;
}
.ride-stats-label {
display: block
}
<div class="ride-stats">
<div class="ride-stats-content">
<ul>
<li>
<div class="ride-stats-col ride-stats-distance">
<span class="icon-distance">
<svg height= 10mm width= 12mm xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.75 35.86">
<g id="prefix__Layer_2" data-name="Layer 2">
<g id="prefix__Layer_1-2" data-name="Layer 1">
<path class="prefix__cls-1"
d="M3.33 30a2.5 2.5 0 012.49-2.49h6.74a5.83 5.83 0 000-11.65h-.84v3.33h.84a2.5 2.5 0 010 5H5.82a5.82 5.82 0 000 11.64H25v-3.29H5.82A2.5 2.5 0 013.33 30zM6.73 0A6.73 6.73 0 000 6.73c0 5 6.73 12.5 6.73 12.5s6.73-7.45 6.73-12.5A6.73 6.73 0 006.73 0zm0 9.13a2.4 2.4 0 112.4-2.4 2.39 2.39 0 01-2.4 2.4zM30 16.64a6.73 6.73 0 00-6.73 6.73c0 5 6.73 12.49 6A6.72 6.72 0 0030 16.64zm0 9.13a2.41 2.41 0 112.4-2.4 2.41 2.41 0 01-2.4 2.4z" />
</g>
</g>
</svg>
</span>
<span class="ride-stats-label">Distance:</span>
<span> <h3>19.5</h3> <span>km</span></span>
</div>
</li>
<li>
<div class="ride-stats-col ride-stats-elevation">
<span class="icon-elevation">
<svg height= 10mm width= 12mm xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.75 18.51">
<g data-name="Layer 2">
<path d="M36.75 18.52H0l6.32-9.26L12.63 0l6.32 9.26 1.53 2.24.19-.26 5.36-7.27 10.72 14.55z"
data-name="Layer 1" />
</g>
</svg>
</span>
<span class="ride-stats-label">Elevation:</span>
<span> <h3>120</h3>
<span>m</span>
</span>
</div>
</li>
<li>
<div class="ride-stats-col ride-stats-difficulty">
<span class="icon-difficulty">
<svg height=10mm width= 12mm xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.75 35.87">
<g id="prefix__Layer_2" data-name="Layer 2">
<g id="prefix__Layer_1-2" data-name="Layer 1">
<path class="prefix__cls-1"
d="M27.83 0h8.92v35.86h-8.92zM0 23.91h8.92v11.95H0zM13.92 11.97h8.92v23.9h-8.92z" />
</g>
</g>
</svg>
</span>
<span class="ride-stats-label">Difficulty:</span>
<span> <h3>Easy</h3></span>
</div>
</li>
</ul>
</div>
</div>