I'm using https://www.shapedivider.app/ to create a wave shape for a div box. However I don't have a solid fill color on the element behind it, I have a color with a svg background texture. How can I get my wave to have the same svg texture as my body background?
It's missing the body svg texture background: https://i.imgur.com/1OoUt6H.png
On the body, I'm using a https://www.heropatterns.com/
Example code of the problem:
<head>
<style>
body {
background-color: #0b4a34;
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0V0zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm20 0a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM10 37a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm10-17h20v20H20V20zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14z' fill='%23ffffff' fill-opacity='0.06' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.custom-shape-divider-top-1611477509 {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.custom-shape-divider-top-1611477509 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 112px;
}
.custom-shape-divider-top-1611477509 .shape-fill {
fill: #0b4a34;
}
</style></head>
<body>
<section style="position: relative;">
<div class="custom-shape-divider-top-1611477509">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
<div style="margin-top: 50px;background-color: #fff;height: 300px;">
test
</div>
</section>
</body>
Paste into https://codepen.io/pen/
I've changed slightly the shape you have. I'm keeping the curve but I close the shape in the opposite direction. All a stroke to see what I mean.
The shape is filled white leaving the rest of the svg transparent so that you can see the body's background.
body {
background-color: #0b4a34;
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0V0zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm20 0a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM10 37a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm10-17h20v20H20V20zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14z' fill='%23ffffff' fill-opacity='0.06' fill-rule='evenodd'/%3E%3C/svg%3E");
}
svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 112px;
background:transparent;
}
<section style="position: relative;">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M0,27.35 A600.21,600.21,0,0,0,321.39,56.44
C379.39,45.65,435.545,26.31,493.39,14.58
C575.78,-2.14,661.58,-3.15,743.84,14.19
C823.78,31,906.67,72,985.66,92.83
C1055.71,111.31,1132.19,118.92,1200,95.83V120H0Z" class="shape-fill" fill="white"></path>
</svg>
<div style="margin-top: 0px;background-color: white;height: 300px;">
test
</div>
</section>
Related
I have a very simple container that has two svg's in them for buttons. In local host these are centered perfectly and responsive as expected. When I host my project on gh-pages my content with the two svg's in them shift the to the left for some reason. Any ideas?
Code for buttons:
return (
<Container className="button_container">
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
fill="currentColor"
className="bi bi-arrow-left-square-fill previousBtn"
viewBox="0 0 16 16"
onClick={previousPage}
>
<path d="M16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12zm-4.5-6.5H5.707l2.147-2.146a.5.5 0 1 0-.708-.708l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L5.707 8.5H11.5a.5.5 0 0 0 0-1z" />
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
fill="currentColor"
className="bi bi-arrow-right-square-fill nextBtn"
viewBox="0 0 16 16"
onClick={nextPage}
>
<path d="M0 14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v12zm4.5-6.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5a.5.5 0 0 1 0-1z" />
</svg>
</Container>
);
}
css
.button_container {
display: flex;
justify-content: space-around;
margin: 3em;
}
.previousBtn,
.nextBtn {
color: $white;
border-radius: 5px;
cursor:pointer
}
.previousBtn:hover,
.nextBtn:hover {
opacity: 0.5;
}
I have created a progress bar that works perfectly fine in codepen. But, inside my website, it acts out! Specifically, the line going through each step does not display properly.
.timeline {
overflow-x: hidden;
padding: 2.5rem 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
overflow-y: hidden;
/* border: 1px solid red; */
}
.step {
flex: 1 1 14.2%;
position: relative;
}
.past {
color: #d0d0d0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* border: 1px solid red; */
}
.past::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
background-color: #ddd;
left: 50%;
top: 2.2rem;
z-index: -1;
}
.current {
color: #d0d0d0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
a {
text-decoration: none;
}
.roadmap-icon {
padding: 1rem;
z-index: 10;
background-color: white;
color: green;
border-radius: 50%;
width: 2rem;
height: 2rem;
border: 1px solid white;
box-shadow: inset 0 0px 3px 0 #3793b7, 0 2px 4px 0 rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
justify-content: center;
}
.roadmap-icon-selected {
font-size: 1.1rem;
padding: 1.2rem;
}
.future {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.future::before {
content: '';
position: absolute;
width: 100%;
height: 1px;
background-color: #ddd;
right: 50%;
top: 2.2rem;
z-index: -1;
}
.icon-text {
text-align: center;
}
<div class="timeline">
<div class="step">
<div class="past">
<a href="/project/add">
<div id="project_id" class="roadmap-icon">
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-building" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
d="M14.763.075A.5.5 0 0 1 15 .5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .342-.474L6 7.64V4.5a.5.5 0 0 1 .276-.447l8-4a.5.5 0 0 1 .487.022zM6 8.694L1 10.36V15h5V8.694zM7 15h2v-1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V15h2V1.309l-7 3.5V15z"
></path>
<path
d="M2 11h1v1H2v-1zm2 0h1v1H4v-1zm-2 2h1v1H2v-1zm2 0h1v1H4v-1zm4-4h1v1H8V9zm2 0h1v1h-1V9zm-2 2h1v1H8v-1zm2 0h1v1h-1v-1zm2-2h1v1h-1V9zm0 2h1v1h-1v-1zM8 7h1v1H8V7zm2 0h1v1h-1V7zm2 0h1v1h-1V7zM8 5h1v1H8V5zm2 0h1v1h-1V5zm2 0h1v1h-1V5zm0-2h1v1h-1V3z"
></path>
</svg>
</div>
</a>
Step 1
</div>
</div>
<div class="step">
<div class="past">
<a href="/project/342/property/add/">
<div id="land_id" class="roadmap-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" fill="currentColor" class="bi bi-binoculars" viewBox="0 0 16 16">
<path
d="M3 2.5A1.5 1.5 0 0 1 4.5 1h1A1.5 1.5 0 0 1 7 2.5V5h2V2.5A1.5 1.5 0 0 1 10.5 1h1A1.5 1.5 0 0 1 13 2.5v2.382a.5.5 0 0 0 .276.447l.895.447A1.5 1.5 0 0 1 15 7.118V14.5a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 14.5v-3a.5.5 0 0 1 .146-.354l.854-.853V9.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v.793l.854.853A.5.5 0 0 1 7 11.5v3A1.5 1.5 0 0 1 5.5 16h-3A1.5 1.5 0 0 1 1 14.5V7.118a1.5 1.5 0 0 1 .83-1.342l.894-.447A.5.5 0 0 0 3 4.882V2.5zM4.5 2a.5.5 0 0 0-.5.5V3h2v-.5a.5.5 0 0 0-.5-.5h-1zM6 4H4v.882a1.5 1.5 0 0 1-.83 1.342l-.894.447A.5.5 0 0 0 2 7.118V13h4v-1.293l-.854-.853A.5.5 0 0 1 5 10.5v-1A1.5 1.5 0 0 1 6.5 8h3A1.5 1.5 0 0 1 11 9.5v1a.5.5 0 0 1-.146.354l-.854.853V13h4V7.118a.5.5 0 0 0-.276-.447l-.895-.447A1.5 1.5 0 0 1 12 4.882V4h-2v1.5a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V4zm4-1h2v-.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5V3zm4 11h-4v.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5V14zm-8 0H2v.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5V14z"
/>
</svg>
</div>
</a>
step 2
</div>
</div>
<div class="step">
<div class="past">
<a href="/development/proforma/add">
<div id="proforma_id" class="roadmap-icon">
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-card-checklist" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
d="M14.5 3h-13a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"
></path>
<path
fill-rule="evenodd"
d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"
></path>
</svg>
</div>
</a>
Step 3
</div>
</div>
<div class="step">
<div class="current">
<div id="development" type_id="" class="roadmap-icon roadmap-icon-selected">
<svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
<path
fill-rule="evenodd"
d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z"
/>
<path
d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"
/>
</svg>
</div>
Step 4
</div>
</div>
<div class="step">
<div class="future">
<a href="/development/proforma/139/financing/add">
<div id="financing_id" class="roadmap-icon">
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-cash-stack" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M14 3H1a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1h-1z"></path>
<path
fill-rule="evenodd"
d="M15 5H1v8h14V5zM1 4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H1z"
></path>
<path
d="M13 5a2 2 0 0 0 2 2V5h-2zM3 5a2 2 0 0 1-2 2V5h2zm10 8a2 2 0 0 1 2-2v2h-2zM3 13a2 2 0 0 0-2-2v2h2zm7-4a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"
></path>
</svg>
</div>
</a>
Step 5
</div>
</div>
<div class="step">
<div class="future">
<a href="/development/project/step6">
<div id="unit" mix_id="" class="roadmap-icon">
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-layout-wtf" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
d="M5 1H1v8h4V1zM1 0a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1H1zm13 2H9v5h5V2zM9 1a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H9zM5 13H3v2h2v-2zm-2-1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H3zm12-1H9v2h6v-2zm-6-1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H9z"
></path>
</svg>
</div>
</a>
<a href="/development/proforma/139/unit%20allocation/add" class="icon-text">
Step 6
</a>
</div>
</div>
<div class="step">
<div class="future">
<a href="/development/project/step7">
<div id="rates_id" class="roadmap-icon">
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-card-list" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
d="M14.5 3h-13a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"
></path>
<path
fill-rule="evenodd"
d="M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8zm0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5z"
></path>
<circle cx="3.5" cy="5.5" r=".5"></circle>
<circle cx="3.5" cy="8" r=".5"></circle>
<circle cx="3.5" cy="10.5" r=".5"></circle>
</svg>
</div>
</a>
Step 7
</div>
</div>
</div>
In my website, this is what I get when removing the z-index of the past::after and keeping the z-index = -1 in future::before. Note that when I inspect the element, the top, right, and z-index properties of .future::before are all greyed out with the hint i in front of it saying that "right has no effect on this element since it’s not a positioned element.
Try setting its position property to something other than static." The position of the .future::before is absolute and its immediate parent's position is .step is relative. How is it that the same browser displays the progress bar fine in one context and acts out in another context? Here is the screen-shot of the problem I have:
My issue is certainly very easy regarding that i am new in css.
I will show you first a picture of my issue :
I am tryin to put the grey to the left of the content alignes with my other div. The issue is that my grey div is always centered.
.row {
display: flex !important;
justify-content: center;
align-items: center !important;
}
.payment-title-div {
color: #fff;
background: #1282a2;
width: 70%;
}
.u-left {
padding-top: 0.5em;
}
.return-div {
padding-left: 15%;
}
.payment-div {
background-color: lightgray;
width: 50%;
height: 400px;
}
<div class="row">
<div class="payment-title-div">
<h1 class="u-left size12">
<svg class="lock-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-shield-lock" viewBox="0 0 16 16">
<path d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z"/>
<path d="M9.5 6.5a1.5 1.5 0 0 1-1 1.415l.385 1.99a.5.5 0 0 1-.491.595h-.788a.5.5 0 0 1-.49-.595l.384-1.99a1.5 1.5 0 1 1 2-1.415z"/>
</svg> <strong>Paiement sécurisé</strong>
</h1>
</div>
<div class="return-div">
<a class="titre" href="books"><svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
<path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
</svg>Retour à l'annonce</a>
</div>
<div class="payment-div">
</div>
</div>
Any indication ?
BR
Well I've copied your code and I didn't get the exact same from your picture, but I'd recommend this changes in your CSS code:
.row {
display: flex !important;
flex-direction: column; /* set the direction as column (one element above another) */
align-items: flex-start; /* align at start (left) */
}
.payment-title-div {
color: #fff;
background: #1282a2;
width: 100%; /* I've changed this to 100% */
}
.u-left {
padding-top: 0.5em;
}
.return-div {
/* padding-left: 15%; remove this padding */
}
.payment-div {
background-color: lightgray;
width: 50%;
height: 400px;
}
You can also check this Flexbox Guide to understand better how to work with flex boxes, It's really awesome am I right?
I started to get into Bootstrap 4.5 and SVG for icons. I'm having a tough time understanding how it works atm. I want to place the SVG inside a shape (rounded-circle) for now. But would like that shape to be side by side another div. I can't move the div to place them on the same line. Following is a code snippet.
.svg-icon {
display: block;
margin: 0 auto;
position: absolute;
top: calc(50% - 14px);
left: calc(50% - 14px);
}
.poll-icon-container {
height: 50px;
width: 50px;
position: relative;
border-radius: 50%;
background-color: pink;
}
<div class="rounded-circle poll-icon-container text-success">
<svg
width="2em"
height="2em"
viewBox="0 0 18 18"
class="bi bi-box-arrow-in-up-right svg-icon"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M14.5 3A1.5 1.5 0 0 0 13 1.5H3A1.5 1.5 0 0 0 1.5 3v5a.5.5 0 0 0 1 0V3a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H9a.5.5 0 0 0 0 1h4a1.5 1.5 0 0 0 1.5-1.5V3z"
/>
<path
fill-rule="evenodd"
d="M4.5 6a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V6.5H5a.5.5 0 0 1-.5-.5z"
/>
<path
fill-rule="evenodd"
d="M10.354 5.646a.5.5 0 0 1 0 .708l-8 8a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708 0z"
/>
</svg>
</div>
<div>
should be on the right side of the icon
</div>
As long as you are using Bootstrap, lets cover those 2 divs in one parent div and make them display flax in bootstrap way
d-flex - BS class to make block to display: flex;
justify-content-start - BS class to make justify-content: flex-start;
align-items-center - BS class to make align-items: center;
ml-3 - BS sizing class, margin-left: 1rem;
.svg-icon {
display: block;
margin: 0 auto;
position: absolute;
top: calc(50% - 14px);
left: calc(50% - 14px);
}
.poll-icon-container {
height: 50px;
width: 50px;
position: relative;
border-radius: 50%;
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="d-flex justify-content-start align-items-center">
<div class="rounded-circle poll-icon-container text-success">
<svg width="2em" height="2em" viewBox="0 0 18 18" class="bi bi-box-arrow-in-up-right svg-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
d="M14.5 3A1.5 1.5 0 0 0 13 1.5H3A1.5 1.5 0 0 0 1.5 3v5a.5.5 0 0 0 1 0V3a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H9a.5.5 0 0 0 0 1h4a1.5 1.5 0 0 0 1.5-1.5V3z"
/>
<path
fill-rule="evenodd"
d="M4.5 6a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V6.5H5a.5.5 0 0 1-.5-.5z"
/>
<path
fill-rule="evenodd"
d="M10.354 5.646a.5.5 0 0 1 0 .708l-8 8a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708 0z"
/>
</svg>
</div>
<div class="ml-3">
should be on the right side of the icon
</div>
</div>
Add inline css with position: absolute; check below snippet.
.svg-icon {
display: block;
margin: 0 auto;
position: absolute;
top: calc(50% - 14px);
left: calc(50% - 14px);
}
.poll-icon-container {
height: 50px;
width: 50px;
position: relative;
border-radius: 50%;
background-color: pink;
}
<div class="rounded-circle poll-icon-container text-success" style="display:inline-block;">
<svg
width="2em"
height="2em"
viewBox="0 0 18 18"
class="bi bi-box-arrow-in-up-right svg-icon"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M14.5 3A1.5 1.5 0 0 0 13 1.5H3A1.5 1.5 0 0 0 1.5 3v5a.5.5 0 0 0 1 0V3a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H9a.5.5 0 0 0 0 1h4a1.5 1.5 0 0 0 1.5-1.5V3z"
/>
<path
fill-rule="evenodd"
d="M4.5 6a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V6.5H5a.5.5 0 0 1-.5-.5z"
/>
<path
fill-rule="evenodd"
d="M10.354 5.646a.5.5 0 0 1 0 .708l-8 8a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708 0z"
/>
</svg>
</div>
<div style="display: inline-block; margin-left:10px;line-height: 50px; position: absolute;">
should be on the right side of the icon
</div>
Kind of struggling to get my icons aligned and in the proper shape. I'm trying to achieve that in the footer I can print 4 social icons in line each in a cikel, and somewhere else on the page have 4 social icons appearing in line (flexbox), and square. However if I have the icons aligned as square buttons, than the cirkel become ovals.
What is the way to go and to have the icons styled independently and make sure they are responsive?
I just put all the code, a bit much, sorry for that.
.social-container {
display: flex;
/* flex-direction: row; */
flex-wrap: wrap;
justify-content: space-between;
min-height: 0%;
flex: 0;
}
.social-container a {
}
/* #mixin svg {
position: relative;
display: inline-flex;
min-width: 0;
*/
a.svg, a.arrow {
position: relative;
display: inline-flex;
min-width: 0;
}
a.arrow {
text-decoration-line: none;
}
a.svg {
/* display: inline-flex; */
text-decoration-line: none;
position: relative;
}
a.svg:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left:0;
}
.social-container a svg {
height: 3vh;
margin-bottom: 10px;
}
.cirkel {
background: #3b5998;
padding: 0.2em;
display: inline-block;
line-height: 0;
-webkit-border-radius: 99%;
-moz-border-radius: 99%;
border-radius: 99%;
}
.cirkel:hover {
background-color: brown;
}
.square {
display: inline-flex;
/* height: 25px;
line-height: 30px; */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-right: 5px;
height: 30px;
width: 80px;
padding-top: 0.2em;
padding-bottom: 0.2em;
padding-right: 0.2em;
}
.square.fb-background {
background: #3b5998;
}
.square.tw-background {
background-color: #4da7de;
}
.square.pi-background {
background-color: #b51205;
}
.square.gp-background {
background-color: #dd4b39;
}
.flex-item {
height: 5%;
}
.name{
font-size: 0.5em;
margin-left: 1em;
}
/* styling individual icons */
.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/* obsolete styls */
.access-label {
text-decoration: none;
}
/* ==========================================
Single-colored icons can be modified like so:
.icon-name {
font-size: 32px;
color: red;
}
========================================== */
.icon-home3 {
color:blue;
}
.icon-arrow-left2 {
width: 30px;
min-height: 0vh;
}
.icon-arrow-left2:hover {
background-color:#013e75;
color: white;
}
.icon-facebook:before {
content:'\e041';
}
/* .icon-facebook {
color: #fff;
font-size: 32px;
} */
.icon-facebook {
color: white;
font-size: 20px;
/* width: 20%;
height: 2%; */
padding: 3px;
}
.icon-facebook:hover {
background-color: #2a4784;
}
.icon-google-plus:before {
content:'\e042';
}
.icon-google-plus {
/* width: 20%; * /
height: 2%; */
color: white;
font-size: 20px;
}
.icon-google-plus:hover {
background-color: #c93725;
}
.icon-linkedin2:before {
content:'\e049';
}
.icon-linkedin2 {
background-color: #3371b7;
color: white;
/* width: 20%; */
height: 2%;
}
.icon-linkedin2:hover {
background-color: #1f5da3;
}
.icon-pinterest2:before {
content:'\e043';
}
.icon-pinterest2 {
color: white;
/* width: 20%; */
padding: 3px;
height: 2%;
font-size: 20px;
}
.icon-pinterest:hover {
}
.icon-price-tag {
width: 20px;
height: 25px;
display: inline;
padding-top: 5px;
}
/* same styling icons used in text heading tag <H4> */
.icon-price-tags, .icon-camera, .icon-bubbles {
color: white;
}
.icon-sailing-boat-water {
color: blueviolet;
}
.icon-price-tags, .icon-camera, .icon-bubbles {
height: 25px;
display: inline;
padding-top: 4px;
width: 30px;
min-height: 0vh;
}
.icon-rss:before {
content:'\e00b';
}
.icon-rss {
/* width: 20%; */
height: 2%;
padding: 3px;
background-color: #f26109;
color: white;
}
.icon-rss:hover {
background-color: #de4d00;
}
.icon-search {
color: #ccc;
}
.icon-search:hover {
color: blueviolet;
}
.icon-twitter:before {
content:'\e040';
}
.icon-twitter {
color: white;
/* width: 20%; */
height: 2%;
padding: 3px;
font-size: 20px;
}
.icon-twitter:hover {
background-color: #3993ca;
}
<!doctype html>
<html>
<head>
<title>IcoMoon - SVG Icons</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="demo-files/demo.css">
<link rel="stylesheet" href="demo-files/probeersel.css">
<!-- link rel="stylesheet" href="SVG/cssfolder-SVG_SPRITE/iconizr-svg-sprite.css" -->
<!-- link rel="stylesheet" href="style.css" -->
</head>
<body>
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="icon-sailing-boat-water" viewbox="0 0 32 32">
<title>sailing-boat-water</title>
<path d="M21.671 23h0.329c2.209 0 3.999-1.795 3.999-4h-10v-15h-1v15h-10c0 0.876 0.282 1.686 0.759 2.345 3.661-1.772 7.586-1.975 11.486 0.219 1.515 0.852 2.993 1.312 4.426 1.436v0 0zM26 18h-9v-9l9 9zM8 9.5c-3 5-3 8.5-3 8.5h9c0 0-1-1.5-1-6s1-8 1-8c0 0-3 0.5-6 5.5v0zM3 25c0.432-0.319 0.901-0.634 1.405-0.934 4.032-2.406 8.441-2.965 12.82-0.502 4.021 2.262 7.786 1.761 11.12-0.452 0.623-0.414 1.177-0.857 1.655-1.299v1.322c-0.341 0.277-0.709 0.549-1.102 0.81-3.622 2.405-7.778 2.957-12.164 0.491-4.022-2.262-8.065-1.75-11.817 0.489-0.713 0.425-1.353 0.881-1.911 1.336-0.002 0.002-0.004 0.003-0.006 0.005v-1.266zM5.979 26.232c3.592-1.665 7.43-1.813 11.245 0.333 3.481 1.958 6.771 1.846 9.755 0.344v1.109c-3.143 1.433-6.616 1.46-10.245-0.581-3.645-2.050-7.307-1.822-10.755-0.094v-1.11z"></path> </symbol> <symbol id="icon-home3" viewbox="0 0 32 32">
<title>home3</title>
<path d="M32 19l-6-6v-9h-4v5l-6-6-16 16v1h4v10h10v-6h4v6h10v-10h4z"></path> </symbol> <symbol id="icon-camera" viewbox="0 0 32 32">
<title>camera</title>
<path d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875s3.973-8.875 8.875-8.875c4.902 0 8.875 3.973 8.875 8.875s-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z"></path> </symbol> <symbol id="icon-file-text" viewbox="0 0 32 32">
<title>file-text</title>
<path d="M27 0h-24c-1.65 0-3 1.35-3 3v26c0 1.65 1.35 3 3 3h24c1.65 0 3-1.35 3-3v-26c0-1.65-1.35-3-3-3zM26 28h-22v-24h22v24zM8 14h14v2h-14zM8 18h14v2h-14zM8 22h14v2h-14zM8 10h14v2h-14z"></path> </symbol> <symbol id="icon-profile" viewbox="0 0 32 32">
<title>profile</title>
<path d="M27 0h-24c-1.65 0-3 1.35-3 3v26c0 1.65 1.35 3 3 3h24c1.65 0 3-1.35 3-3v-26c0-1.65-1.35-3-3-3zM26 28h-22v-24h22v24zM8 18h14v2h-14zM8 22h14v2h-14zM10 9c0-1.657 1.343-3 3-3s3 1.343 3 3c0 1.657-1.343 3-3 3s-3-1.343-3-3zM15 12h-4c-1.65 0-3 0.9-3 2v2h10v-2c0-1.1-1.35-2-3-2z"></path> </symbol> <symbol id="icon-price-tag" viewbox="0 0 32 32">
<title>price-tag</title>
<path d="M30.5 0h-12c-0.825 0-1.977 0.477-2.561 1.061l-14.879 14.879c-0.583 0.583-0.583 1.538 0 2.121l12.879 12.879c0.583 0.583 1.538 0.583 2.121 0l14.879-14.879c0.583-0.583 1.061-1.736 1.061-2.561v-12c0-0.825-0.675-1.5-1.5-1.5zM23 12c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"></path> </symbol> <symbol id="icon-price-tags" viewbox="0 0 40 32">
<title>price-tags</title>
<path d="M38.5 0h-12c-0.825 0-1.977 0.477-2.561 1.061l-14.879 14.879c-0.583 0.583-0.583 1.538 0 2.121l12.879 12.879c0.583 0.583 1.538 0.583 2.121 0l14.879-14.879c0.583-0.583 1.061-1.736 1.061-2.561v-12c0-0.825-0.675-1.5-1.5-1.5zM31 12c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"></path> <path d="M4 17l17-17h-2.5c-0.825 0-1.977 0.477-2.561 1.061l-14.879 14.879c-0.583 0.583-0.583 1.538 0 2.121l12.879 12.879c0.583 0.583 1.538 0.583 2.121 0l0.939-0.939-13-13z"></path> </symbol> <symbol id="icon-bubbles" viewbox="0 0 36 32">
<title>bubbles</title>
<path d="M34 28.161c0 1.422 0.813 2.653 2 3.256v0.498c-0.332 0.045-0.671 0.070-1.016 0.070-2.125 0-4.042-0.892-5.398-2.321-0.819 0.218-1.688 0.336-2.587 0.336-4.971 0-9-3.582-9-8s4.029-8 9-8c4.971 0 9 3.582 9 8 0 1.73-0.618 3.331-1.667 4.64-0.213 0.463-0.333 0.979-0.333 1.522zM16 0c8.702 0 15.781 5.644 15.995 12.672-1.537-0.685-3.237-1.047-4.995-1.047-2.986 0-5.807 1.045-7.942 2.943-2.214 1.968-3.433 4.607-3.433 7.432 0 1.396 0.298 2.747 0.867 3.993-0.163 0.004-0.327 0.007-0.492 0.007-0.849 0-1.682-0.054-2.495-0.158-3.437 3.437-7.539 4.053-11.505 4.144v-0.841c2.142-1.049 4-2.961 4-5.145 0-0.305-0.024-0.604-0.068-0.897-3.619-2.383-5.932-6.024-5.932-10.103 0-7.18 7.163-13 16-13z"></path> </symbol> <symbol id="icon-spinner3" viewbox="0 0 32 32">
<title>spinner3</title>
<path d="M16 9.472c-1.030 0-1.865-0.835-1.865-1.865v-5.596c0-1.030 0.835-1.865 1.865-1.865s1.865 0.835 1.865 1.865v5.596c0 1.030-0.835 1.865-1.865 1.865z"></path> <path d="M16 31.155c-0.644 0-1.166-0.522-1.166-1.166v-5.596c0-0.644 0.522-1.166 1.166-1.166s1.166 0.522 1.166 1.166v5.596c0 0.644-0.522 1.166-1.166 1.166z"></path> <path d="M11.805 10.48c-0.604 0-1.192-0.314-1.516-0.875l-2.798-4.846c-0.483-0.836-0.196-1.906 0.64-2.389s1.906-0.196 2.389 0.64l2.798 4.846c0.483 0.836 0.196 1.906-0.64 2.389-0.275 0.159-0.576 0.235-0.873 0.235z"></path> <path d="M22.995 29.164c-0.363 0-0.715-0.188-0.91-0.525l-2.798-4.846c-0.29-0.502-0.118-1.143 0.384-1.433s1.143-0.118 1.433 0.384l2.798 4.846c0.29 0.502 0.118 1.143-0.384 1.433-0.165 0.095-0.346 0.141-0.524 0.141z"></path> <path d="M8.729 13.436c-0.277 0-0.557-0.070-0.814-0.219l-4.846-2.798c-0.781-0.451-1.048-1.449-0.597-2.229s1.449-1.048 2.229-0.597l4.846 2.798c0.781 0.451 1.048 1.449 0.597 2.229-0.302 0.524-0.851 0.816-1.415 0.816z"></path> <path d="M28.114 23.927c-0.158 0-0.319-0.040-0.465-0.125l-4.846-2.798c-0.446-0.258-0.599-0.828-0.341-1.274s0.828-0.599 1.274-0.341l4.846 2.798c0.446 0.258 0.599 0.828 0.341 1.274-0.173 0.299-0.486 0.466-0.809 0.466z"></path> <path d="M7.607 17.515h-5.596c-0.837 0-1.516-0.678-1.516-1.515s0.678-1.515 1.516-1.515h5.596c0.837 0 1.516 0.678 1.516 1.515s-0.678 1.515-1.516 1.515z"></path> <path d="M29.989 16.933c-0 0 0 0 0 0h-5.596c-0.515-0-0.933-0.418-0.933-0.933s0.418-0.933 0.933-0.933c0 0 0 0 0 0h5.596c0.515 0 0.933 0.418 0.933 0.933s-0.418 0.933-0.933 0.933z"></path> <path d="M3.886 24.394c-0.483 0-0.954-0.251-1.213-0.7-0.386-0.669-0.157-1.525 0.512-1.911l4.846-2.798c0.669-0.387 1.525-0.157 1.911 0.512s0.157 1.525-0.512 1.911l-4.846 2.798c-0.22 0.127-0.461 0.188-0.698 0.188z"></path> <path d="M23.27 12.736c-0.322 0-0.636-0.167-0.809-0.466-0.258-0.446-0.105-1.016 0.341-1.274l4.846-2.798c0.446-0.257 1.016-0.105 1.274 0.341s0.105 1.016-0.341 1.274l-4.846 2.798c-0.147 0.085-0.307 0.125-0.465 0.125z"></path> <path d="M9.004 29.397c-0.218 0-0.438-0.055-0.64-0.172-0.613-0.354-0.823-1.138-0.469-1.752l2.798-4.846c0.354-0.613 1.138-0.823 1.752-0.469s0.823 1.138 0.469 1.752l-2.798 4.846c-0.237 0.411-0.668 0.641-1.112 0.641z"></path> <path d="M20.196 9.664c-0.158 0-0.319-0.040-0.465-0.125-0.446-0.258-0.599-0.828-0.341-1.274l2.798-4.846c0.258-0.446 0.828-0.599 1.274-0.341s0.599 0.828 0.341 1.274l-2.798 4.846c-0.173 0.299-0.486 0.466-0.809 0.466z"></path> </symbol> <symbol id="icon-search" viewbox="0 0 32 32">
<title>search</title>
<path d="M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z"></path> </symbol> <symbol id="icon-arrow-up2" viewbox="0 0 32 32">
<title>arrow-up2</title>
<path d="M27.414 12.586l-10-10c-0.781-0.781-2.047-0.781-2.828 0l-10 10c-0.781 0.781-0.781 2.047 0 2.828s2.047 0.781 2.828 0l6.586-6.586v19.172c0 1.105 0.895 2 2 2s2-0.895 2-2v-19.172l6.586 6.586c0.39 0.39 0.902 0.586 1.414 0.586s1.024-0.195 1.414-0.586c0.781-0.781 0.781-2.047 0-2.828z"></path> </symbol> <symbol id="icon-arrow-right2" viewbox="0 0 32 32">
<title>arrow-right2</title>
<path d="M19.414 27.414l10-10c0.781-0.781 0.781-2.047 0-2.828l-10-10c-0.781-0.781-2.047-0.781-2.828 0s-0.781 2.047 0 2.828l6.586 6.586h-19.172c-1.105 0-2 0.895-2 2s0.895 2 2 2h19.172l-6.586 6.586c-0.39 0.39-0.586 0.902-0.586 1.414s0.195 1.024 0.586 1.414c0.781 0.781 2.047 0.781 2.828 0z"></path> </symbol> <symbol id="icon-arrow-left2" viewbox="0 0 32 32">
<title>arrow-left2</title>
<path d="M12.586 27.414l-10-10c-0.781-0.781-0.781-2.047 0-2.828l10-10c0.781-0.781 2.047-0.781 2.828 0s0.781 2.047 0 2.828l-6.586 6.586h19.172c1.105 0 2 0.895 2 2s-0.895 2-2 2h-19.172l6.586 6.586c0.39 0.39 0.586 0.902 0.586 1.414s-0.195 1.024-0.586 1.414c-0.781 0.781-2.047 0.781-2.828 0z"></path> </symbol> <symbol id="icon-google-plus" viewbox="0 0 32 32">
<title>google-plus</title>
<path d="M10.181 14.294v3.494h5.775c-0.231 1.5-1.744 4.394-5.775 4.394-3.475 0-6.313-2.881-6.313-6.431s2.838-6.431 6.313-6.431c1.981 0 3.3 0.844 4.056 1.569l2.762-2.662c-1.775-1.656-4.075-2.662-6.819-2.662-5.631 0.006-10.181 4.556-10.181 10.188s4.55 10.181 10.181 10.181c5.875 0 9.775-4.131 9.775-9.95 0-0.669-0.075-1.181-0.163-1.688h-9.613z"></path> <path d="M32 14h-3v-3h-3v3h-3v3h3v3h3v-3h3z"></path> </symbol> <symbol id="icon-facebook" viewbox="0 0 32 32">
<title>facebook</title>
<path d="M19 6h5v-6h-5c-3.86 0-7 3.14-7 7v3h-4v6h4v16h6v-16h5l1-6h-6v-3c0-0.542 0.458-1 1-1z"></path> </symbol> <symbol id="icon-twitter" viewbox="0 0 32 32">
<title>twitter</title>
<path d="M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 1.281-0.919 2.394-2.075 3.275-3.394z"></path> </symbol> <symbol id="icon-rss" viewbox="0 0 32 32">
<title>rss</title>
<path d="M4.259 23.467c-2.35 0-4.259 1.917-4.259 4.252 0 2.349 1.909 4.244 4.259 4.244 2.358 0 4.265-1.895 4.265-4.244-0-2.336-1.907-4.252-4.265-4.252zM0.005 10.873v6.133c3.993 0 7.749 1.562 10.577 4.391 2.825 2.822 4.384 6.595 4.384 10.603h6.16c-0-11.651-9.478-21.127-21.121-21.127zM0.012 0v6.136c14.243 0 25.836 11.604 25.836 25.864h6.152c0-17.64-14.352-32-31.988-32z"></path> </symbol> <symbol id="icon-linkedin2" viewbox="0 0 32 32">
<title>linkedin2</title>
<path d="M12 12h5.535v2.837h0.079c0.77-1.381 2.655-2.837 5.464-2.837 5.842 0 6.922 3.637 6.922 8.367v9.633h-5.769v-8.54c0-2.037-0.042-4.657-3.001-4.657-3.005 0-3.463 2.218-3.463 4.509v8.688h-5.767v-18z"></path> <path d="M2 12h6v18h-6v-18z"></path> <path d="M8 7c0 1.657-1.343 3-3 3s-3-1.343-3-3c0-1.657 1.343-3 3-3s3 1.343 3 3z"></path> </symbol> <symbol id="icon-pinterest2" viewbox="0 0 32 32">
<title>pinterest2</title>
<path d="M16 0c-8.825 0-16 7.175-16 16s7.175 16 16 16 16-7.175 16-16-7.175-16-16-16zM16 29.863c-1.431 0-2.806-0.219-4.106-0.619 0.563-0.919 1.412-2.431 1.725-3.631 0.169-0.65 0.863-3.294 0.863-3.294 0.45 0.863 1.775 1.594 3.175 1.594 4.181 0 7.194-3.844 7.194-8.625 0-4.581-3.738-8.006-8.544-8.006-5.981 0-9.156 4.019-9.156 8.387 0 2.031 1.081 4.563 2.813 5.369 0.262 0.125 0.4 0.069 0.463-0.188 0.044-0.194 0.281-1.131 0.387-1.575 0.031-0.137 0.019-0.262-0.094-0.4-0.575-0.694-1.031-1.975-1.031-3.162 0-3.056 2.313-6.019 6.256-6.019 3.406 0 5.788 2.319 5.788 5.637 0 3.75-1.894 6.35-4.356 6.35-1.363 0-2.381-1.125-2.050-2.506 0.394-1.65 1.15-3.425 1.15-4.613 0-1.063-0.569-1.95-1.756-1.95-1.394 0-2.506 1.438-2.506 3.369 0 1.225 0.412 2.056 0.412 2.056s-1.375 5.806-1.625 6.887c-0.281 1.2-0.169 2.881-0.050 3.975-5.156-2.012-8.813-7.025-8.813-12.9 0-7.656 6.206-13.863 13.862-13.863s13.863 6.206 13.863 13.863c0 7.656-6.206 13.863-13.863 13.863z"></path> </symbol> </defs> </svg>
<header class="bgc1 clearfix">
<div class="mhl">
<p>
SVG Icons - Generated by IcoMoon
</p>
</div>
</header>
<svg class="icon icon-sailing-boat-water" aria-hidden="true" focusable="false"> <use xlink:href="#icon-sailing-boat-water"></use> </svg> <br />
<br />
<span class="cirkel"><svg preserveaspectratio="none" class="icon icon-facebook"><use xlink:href="#icon-facebook"></use></svg></span> <br />
<br />
<span class="cirkel"><svg preserveaspectratio="none" class="icon icon-facebook"><use xlink:href="#icon-facebook"></use></svg></span> <br />
<br />
<span class="social-container" style="width: 400px;"> <span class="square fb-background"><svg preserveaspectratio="none" class="icon icon-facebook"><use xlink:href="#icon-facebook"></use></svg></span> <span class="square tw-background"><svg preserveaspectratio="none" class="icon icon-twitter"><use xlink:href="#icon-twitter"></use></svg></span> <span class="square pi-background"><svg preserveaspectratio="none" class="icon icon-pinterest2"><use xlink:href="#icon-pinterest2"></use></svg></span> <span class="square gp-background"><svg preserveaspectratio="none" class="icon icon-google-plus"><use xlink:href="#icon-google-plus"></use></svg></span>
</span>
<p>
</body>
</html>