Prevent nearby text selection on inline svg click - html

When using an inline SVG as a clickable element, clicking it twice may select nearby text.
How can this be prevented without forcing user-select on all nearby elements?
.wrap {
height: 100px;
}
.icon {
height: 100%;
pointer-events: bounding-box;
cursor: pointer;
}
<div class="wrap">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 136 136">
<defs/>
<path fill="none" stroke="rgb(160,70,255)" stroke-width="3" d="M68 134.43A66.43 66.43 0 101.5 68 66.46 66.46 0 0068 134.43zM123.77 68H12.23M68 12.3v111.41"/>
</svg>
</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>


Is this what you mean? ( Added user-select: none; )
.wrap {
height: 100px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.icon {
height: 100%;
pointer-events: bounding-box;
cursor: pointer;
}
<div class="wrap">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 136 136">
<defs/>
<path fill="none" stroke="rgb(160,70,255)" stroke-width="3" d="M68 134.43A66.43 66.43 0 101.5 68 66.46 66.46 0 0068 134.43zM123.77 68H12.23M68 12.3v111.41"/>
</svg>
</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>

Related

SVG Overflow: None (Clip SVG Inside Div)

How do I get the SVG to clip inside its container? I would like the blue circle not to be visible outside the red rectangle (like overflow:none; for divs). Although in this example, the SVG is a circle, in my case, it's a complicated SVG.
#text {border:1px solid green;}
#svg_container {height: 50px;border:1px solid red;}
svg {
position: absolute;
top: -40px;
left: -65px;
}
<div id="text">
The Lorem to the Ipsum is going to bing to the bang
</div>
<div id="svg_container">
<svg viewbox="-3 -3 9 9" width="180px">
<circle fill="darkblue" cx="3" cy="3" r="3" />
</svg>
</div>
<div id="more-text">
No dolor sit amet in this document, that's not what we're going for here. consectetur means consecutively.
</div>

As #ccprog mentions, add some properties to the #svg_container. It moves the SVG, so I changed the viewbox to demonstrate that the clipping is happening as desired.
#text {border:1px solid green;}
#svg_container {
height: 50px;
border:1px solid red;
position:relative;
overflow:hidden;
}
svg {
position: absolute;
top: -40px;
left: -65px;
}
<div id="text">
The Lorem to the Ipsum is going to bing to the bang
</div>
<div id="svg_container">
<svg viewbox="0 0 9 9" width="180px">
<circle fill="darkblue" cx="3" cy="3" r="3" />
</svg>
</div>
<div id="more-text">
No dolor sit amet in this document, that's not what we're going for here. consectetur means consecutively.
</div>

Keep same position on element in relation to other element regardless of screen size

I have a design with one large svg and three divs with text, absolutely positioned with CSS. I need the divs to keep their position in relation to the svg regardless of what the screen size is. That is, I want the text blocks to always stay aligned with the "branches". How do I do that?
Link to Codepen
div {
text-align: center;
position: relative;
}
.box-1,
.box-2,
.box-3 {
position: absolute;
width: 200px;
text-align: left;
}
.box-1 {
top: 50px;
left: 33%;
}
.box-2 {
top: 650px;
left: 52%;
}
.box-3 {
top: 1210px;
left: 36%;
}
.left {
text-align: right;
}
<div>
<svg
width="185"
height="1668"
fill="none"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M39.5 1665c-19.95 2.85 41.323-1.26 64.771-2.89 3.419-.23 5.362-4.82 4.327-8.09-14.809-46.76 97.758-206.14 69.902-341.52-11.147-54.17-45.229-110.52-81-155.5-29.944-37.66-66.9-57.98-80.5-113-4.3-17.39-7.5-61 0-101 7.48-39.898 75.652-305.146 75.999-306.495l.004-.017c.299-1.343 25.703-115.554 35.497-210.988 17.272-168.304-21.4-281.623-76.296-423C95.73 126.455 138.393 276.328 117 463.5c-15.937 139.438-77.961 332.565-86.5 368-18.986 129-54 199 5.5 271.5s115.046 146.4 126 209.5c27.348 157.54-98 349-122.5 352.5z"
fill="#EAECF0"
stroke="#E9EBEF"
strokeWidth="4"
strokeLinejoin="round"
/>
<path
d="M82 1252.94c29.227 11.7 82.878 10.06 82.878 49.65l-3.649 7.89C155 1269.5 95.918 1268.2 82 1252.94zM53.699 105.984c19.085 10.888 35.112 33.394 49.806 52.952v-15.085c-5.59-14.883-38.466-35.764-49.806-42.914-4.816-3.037-14.605-3.284 0 5.047zM78.5 715c-10.345 8.248-21.099 16.711-23.44 30.98l2.968 8.728C64 730.258 97.5 707 111.234 699.579 100.824 702.026 87.1 708.144 78.5 715z"
fill="#E9EBEF"
/>
</svg>
<div class="box-1 left">
<h3>Text</h3>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<div class="box-2">
<h3>Text</h3>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<div class="box-3 left">
<h3>Text</h3>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
</div>

Your text is positioned towards the left edge of the surrounding div in percent. If you wan to svg to behave the same, you have to position it as well.
I added css that does that. The main rationale is to treat the elements that are supposed to behave the same the same way.
Update:
You can use padding on the .text-box elements to influence the position of the text. Again, the box is positioned in the exact way as the svg (by percentage of the viewport width). To fine tune the position on in relation to the svg canvas, use something that adds a fixed offset to the percentage wise positioning.
(The .inner elements are only there to display the padding with a background. You can remove them when you're doing this.)
.container {
position: relative;
}
.text-box,
svg {
position: absolute;
left: 33%;
}
svg {
border: 1px solid red;
}
.text-box {
width: 200px;
text-align: right;
border: 1px solid green;
}
.text-box .inner {
background: rgba(255, 255, 0, 0.1);
}
.box-1 {
top: 50px;
padding-left: 20px;
}
.box-2 {
top: 650px;
padding-left: 40px;
}
.box-3 {
top: 1210px;
padding-left: 60px;
}
<div class="container"> <svg width="185" height="1668" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<path
d="M39.5 1665c-19.95 2.85 41.323-1.26 64.771-2.89 3.419-.23 5.362-4.82 4.327-8.09-14.809-46.76 97.758-206.14 69.902-341.52-11.147-54.17-45.229-110.52-81-155.5-29.944-37.66-66.9-57.98-80.5-113-4.3-17.39-7.5-61 0-101 7.48-39.898 75.652-305.146 75.999-306.495l.004-.017c.299-1.343 25.703-115.554 35.497-210.988 17.272-168.304-21.4-281.623-76.296-423C95.73 126.455 138.393 276.328 117 463.5c-15.937 139.438-77.961 332.565-86.5 368-18.986 129-54 199 5.5 271.5s115.046 146.4 126 209.5c27.348 157.54-98 349-122.5 352.5z"
fill="#EAECF0"
stroke="#E9EBEF"
strokeWidth="4"
strokeLinejoin="round"
/>
<path d="M82 1252.94c29.227 11.7 82.878 10.06 82.878 49.65l-3.649 7.89C155 1269.5 95.918 1268.2 82 1252.94zM53.699 105.984c19.085 10.888 35.112 33.394 49.806 52.952v-15.085c-5.59-14.883-38.466-35.764-49.806-42.914-4.816-3.037-14.605-3.284 0 5.047zM78.5 715c-10.345 8.248-21.099 16.711-23.44 30.98l2.968 8.728C64 730.258 97.5 707 111.234 699.579 100.824 702.026 87.1 708.144 78.5 715z"
fill="#E9EBEF"
/>
</svg>
<div class="text-box box-1 left">
<div class="inner">
<h3>Text</h3>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>20px padding to the left</p>
</div>
</div>
<div class="text-box box-2">
<div class="inner">
<h3>Text</h3>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>40px padding to the left</p>
</div>
</div>
<div class="text-box box-3 left">
<div class="inner">
<h3>Text</h3>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>60px padding to the left</p>
</div>
</div>
</div>

I have a strange white line in the right of page

The document appears a strange white line in right of the page.All my width is 100% or with margin to be centered but this line is already here and I can not understand why.I sow in another part of the stackOverflow that position:relative is problem in navigation bar or other elements in HTML but I try just to delete them but that do not solve the problem.At the end how can I remove this line?
/* Global */
#import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
body {
margin: 0;
padding: 0;
line-height: 1.6;
font-size: 17px;
font-family: "Roboto", sans-serif;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
.colored {
color: #e86c00;
}
/* Local */
/* navigation bar */
#headNavigation {
display: block;
height: 110px;
width: 100%;
background: #222;
}
ul {
margin: 0;
padding: 0;
text-align: center;
list-style-type: none;
position: relative;
bottom: 50px;
}
ul li {
display: inline-block;
padding: 25px 20px 0 20px;
text-align: center;
opacity: 0.2;
position: relative;
bottom: 20px;
left: 20%;
}
ul li a {
text-decoration: none !important;
text-transform: uppercase;
letter-spacing: 3px;
color: #fff;
}
nav h1 {
color: #fff;
position: relative;
top: 30px;
left: 30px;
}
.bi {
display: block;
margin: 10px auto;
}
ul li:hover,
ul li:hover .menu-title {
opacity: 1;
color: #e86c00;
}
.active a {
color: #e86c00;
}
.active {
opacity: 1;
}
/* section with photos */
.slider {
position: relative;
overflow: hidden;
height: 80vh;
width: 100%;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
.content {
position: absolute;
bottom: 70px;
left: -600px;
opacity: 0;
width: 600px;
background-color: rgba(255, 255, 255, 0.6);
color: #333;
padding: 35px;
}
.slide .content h1 {
margin-bottom: 10px;
}
.slide.current .content {
opacity: 1;
transform: translateX(600px);
transition: all 0.7s ease-in-out 0.3s;
}
.buttons button#next {
position: absolute;
top: 50%;
right: 15px;
}
.buttons button#prev {
position: absolute;
top: 50%;
left: 15px;
}
.buttons button {
border: 2px solid #fff;
background-color: transparent;
color: #fff;
padding: 10px 12px;
border-radius: 50%;
outline: none;
}
.buttons button:hover {
background-color: #fff;
color: #333;
}
.slide.current {
opacity: 1;
}
.slide:first-child {
background: url(../photos/pic1.jpg) no-repeat center center/cover;
}
.slide:nth-child(2) {
background: url(../photos/pic8.jpg) no-repeat center center/cover;
}
.slide:nth-child(3) {
background: url(../photos/pic3.jpg) no-repeat center center/cover;
}
.slide:nth-child(4) {
background: url(../photos/pic7.jpg) no-repeat center center/cover;
}
.slide:nth-child(5) {
background: url(../photos/pic5.jpg) no-repeat center center/cover;
}
.slide:nth-child(6) {
background: url(../photos/pic6.jpg) no-repeat center center/cover;
}
/* artivle for subscribe */
.sub {
height: 150px;
width: 100%;
color: #fff;
background-color: #222222;
}
#subscribeForm {
float: right;
}
#subscribeForm input[type="email"] {
height: 40px;
width: 350px;
position: relative;
right: 150px;
border: none;
text-align: center;
}
#subscribeForm input[type="submit"] {
height: 45px;
width: 150px;
position: relative;
right: 140px;
background-color: #eb4034;
border: none;
color: #fff;
}
.sub h1 {
position: relative;
top: 50px;
left: 25px;
}
/* article with courses */
.courses {
position: relative;
overflow: hidden;
height: auto;
width: 100%;
text-align: center;
}
.course {
display: block;
height: 250px;
width: 30%;
float: left;
margin: 60px 0 50px 35px;
}
.courseImage {
display: block;
height: 150px;
width: 60%;
margin: 0 auto 15px;
}
.course a {
text-decoration: none;
color: #e86c00;
}
/* Created by JS */
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<script src="https://kit.fontawesome.com/839b1040bb.js" crossorigin="anonymous"></script>
<header>
<nav id="headNavigation">
<h1>
Be
<span data-name="[positive , motivated]" data-wait="3000" class="colored">creative</span
>
</h1>
<ul>
<li class="active">
<svg
class="bi bi-house"
width="2em"
height="2em"
viewBox="0 0 16 16"
fill="#fff"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M2 13.5V7h1v6.5a.5.5 0 00.5.5h9a.5.5 0 00.5-.5V7h1v6.5a1.5 1.5 0 01-1.5 1.5h-9A1.5 1.5 0 012 13.5zm11-11V6l-2-2V2.5a.5.5 0 01.5-.5h1a.5.5 0 01.5.5z"
clip-rule="evenodd"
/>
<path
fill-rule="evenodd"
d="M7.293 1.5a1 1 0 011.414 0l6.647 6.646a.5.5 0 01-.708.708L8 2.207 1.354 8.854a.5.5 0 11-.708-.708L7.293 1.5z"
clip-rule="evenodd"
/>
</svg>
Home
</li>
<li>
<svg
class="bi bi-eject"
width="2em"
height="2em"
viewBox="0 0 16 16"
fill="#fff"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.27 1.047a1 1 0 011.46 0l6.345 6.77c.6.638.146 1.683-.73 1.683H1.656C.78 9.5.326 8.455.926 7.816L7.27 1.047zM14.346 8.5L8 1.731 1.654 8.5h12.692zM.5 11.5a1 1 0 011-1h13a1 1 0 011 1v1a1 1 0 01-1 1h-13a1 1 0 01-1-1v-1zm14 0h-13v1h13v-1z"
clip-rule="evenodd"
/>
</svg>
About
</li>
<li>
<svg
class="bi bi-chat"
width="2em"
height="2em"
viewBox="0 0 16 16"
fill="#fff"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M2.678 11.894a1 1 0 01.287.801 10.97 10.97 0 01-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 01.71-.074A8.06 8.06 0 008 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894zm-.493 3.905a21.682 21.682 0 01-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 00.244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 01-2.347-.306c-.52.263-1.639.742-3.468 1.105z"
clip-rule="evenodd"
/>
</svg>
Feedback
</li>
<li>
<svg
class="bi bi-box-arrow-in-right"
width="2em"
height="2em"
viewBox="0 0 16 16"
fill="#fff"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M8.146 11.354a.5.5 0 010-.708L10.793 8 8.146 5.354a.5.5 0 11.708-.708l3 3a.5.5 0 010 .708l-3 3a.5.5 0 01-.708 0z"
clip-rule="evenodd"
/>
<path
fill-rule="evenodd"
d="M1 8a.5.5 0 01.5-.5h9a.5.5 0 010 1h-9A.5.5 0 011 8z"
clip-rule="evenodd"
/>
<path
fill-rule="evenodd"
d="M13.5 14.5A1.5 1.5 0 0015 13V3a1.5 1.5 0 00-1.5-1.5h-8A1.5 1.5 0 004 3v1.5a.5.5 0 001 0V3a.5.5 0 01.5-.5h8a.5.5 0 01.5.5v10a.5.5 0 01-.5.5h-8A.5.5 0 015 13v-1.5a.5.5 0 00-1 0V13a1.5 1.5 0 001.5 1.5h8z"
clip-rule="evenodd"
/>
</svg>
Log In
</li>
</ul>
</nav>
<div class="lighter"></div>
</header>
<section>
<div class="slider">
<div class="slide current">
<div class="content">
<h1>Henry Park</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Perferendis, unde.
</p>
</div>
</div>
<div class="slide ">
<div class="content">
<h1>Peter Bottom(wizard)</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Perferendis, unde.
</p>
</div>
</div>
<div class="slide ">
<div class="content">
<h1>Annie Granger</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Perferendis, unde.
</p>
</div>
</div>
<div class="slide ">
<div class="content">
<h1>Miriam (Mitzi)</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Perferendis, unde.
</p>
</div>
</div>
<div class="slide ">
<div class="content">
<h1>Julie Wothson</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Perferendis, unde.
</p>
</div>
</div>
<div class="slide ">
<div class="content">
<h1>Mabel Tven</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Perferendis, unde.
</p>
</div>
</div>
</div>
<div class="buttons">
<button id="prev"><i class="fas fa-arrow-left "></i></button>
<button id="next"><i class="fas fa-arrow-right "></i></button>
</div>
</section>
<article>
<div class="sub">
<h1>
Please <span class="colored">Subscribe</span> for
<span class="colored">our</span> site
</h1>
<form id="subscribeForm">
<input type="email" name="Sub Email" id="SubEmail" placeholder="Enter Email" />
<input type="submit" value="Submit" />
</form>
</div>
</article>
<article>
<div class="container">
<div class="courses">
<div class="course">
<div class="image">
<img src="/photos/photoShop.png" alt="Adobe photoShop" class="courseImage" />
</div>
Photo Shop course
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
</p>
</div>
<div class="course">
<div class="image">
<img src="/photos/photoEditingCourse.jpg" alt="Editing course" class="courseImage" />
</div>
Photo Editing Course
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
</p>
</div>
<div class="course">
<div class="image">
<img src="/photos/beIntoPhoto.jpg" alt="be into" class="courseImage" />
</div>
Be into photo
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
</p>
</div>
<div class="course">
<div class="image">
<img src="/photos/photoMarketing.jpg" alt="Photo Marketing" class="courseImage" />
</div>
Photo marketing with Ed Brand
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
</p>
</div>
<div class="course">
<div class="image">
<img src="/photos/creativiy.jpg" alt="Creativity" class="courseImage" />
</div>
Creativity with Adam Bauman
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
</p>
</div>
</div>
</div>
</article>
<footer>
<h5>NO COPYRIGHT &copy</h5>
<div class="sectionOfPartners">
<h6>Partners</h6>
<p>Partner 1</p>
<p>Partner 2</p>
<p>Partner 3</p>
<p>Partner 4</p>
<p>Partner 5</p>
<p>Partner 6</p>
<p>Partner 7</p>
</div>
<div class="sectionOfContacts">
<p>Oficial telephone +XXX / XXX XXXX</p>
<p>Contact with workers +XXX / XXX XXXX</p>
<p>Other Contacts Contact</p>
</div>
</footer>

There are 2 headers (nav h1 & .sub h1 )and ul li have overflow issue because of the relative position.
nav h1 & .sub h1: left -> padding-left
ul li: remove left:20%
/* Global */
#import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
body {
margin: 0;
padding: 0;
line-height: 1.6;
font-size: 17px;
font-family: "Roboto", sans-serif;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
.colored {
color: #e86c00;
}
/* Local */
/* navigation bar */
#headNavigation {
display: block;
height: 110px;
width: 100%;
background: #222;
}
ul {
margin: 0;
padding: 0;
text-align: center;
list-style-type: none;
position: relative;
bottom: 50px;
}
ul li {
display: inline-block;
padding: 25px 20px 0 20px;
text-align: center;
opacity: 0.2;
position: relative;
bottom: 20px;
}
ul li a {
text-decoration: none !important;
text-transform: uppercase;
letter-spacing: 3px;
color: #fff;
}
nav h1 {
color: #fff;
position: relative;
top: 30px;
padding-left: 30px;
}
.bi {
display: block;
margin: 10px auto;
}
ul li:hover,
ul li:hover .menu-title {
opacity: 1;
color: #e86c00;
}
.active a {
color: #e86c00;
}
.active {
opacity: 1;
}
/* section with photos */
.slider {
position: relative;
overflow: hidden;
height: 80vh;
width: 100%;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
.content {
position: absolute;
bottom: 70px;
left: -600px;
opacity: 0;
width: 600px;
background-color: rgba(255, 255, 255, 0.6);
color: #333;
padding: 35px;
}
.slide .content h1 {
margin-bottom: 10px;
}
.slide.current .content {
opacity: 1;
transform: translateX(600px);
transition: all 0.7s ease-in-out 0.3s;
}
.buttons button#next {
position: absolute;
top: 50%;
right: 15px;
}
.buttons button#prev {
position: absolute;
top: 50%;
left: 15px;
}
.buttons button {
border: 2px solid #fff;
background-color: transparent;
color: #fff;
padding: 10px 12px;
border-radius: 50%;
outline: none;
}
.buttons button:hover {
background-color: #fff;
color: #333;
}
.slide.current {
opacity: 1;
}
.slide:first-child {
background: url(../photos/pic1.jpg) no-repeat center center/cover;
}
.slide:nth-child(2) {
background: url(../photos/pic8.jpg) no-repeat center center/cover;
}
.slide:nth-child(3) {
background: url(../photos/pic3.jpg) no-repeat center center/cover;
}
.slide:nth-child(4) {
background: url(../photos/pic7.jpg) no-repeat center center/cover;
}
.slide:nth-child(5) {
background: url(../photos/pic5.jpg) no-repeat center center/cover;
}
.slide:nth-child(6) {
background: url(../photos/pic6.jpg) no-repeat center center/cover;
}
/* artivle for subscribe */
.sub {
height: 150px;
width: 100%;
color: #fff;
background-color: #222222;
}
#subscribeForm {
float: right;
}
#subscribeForm input[type="email"] {
height: 40px;
width: 350px;
position: relative;
right: 150px;
border: none;
text-align: center;
}
#subscribeForm input[type="submit"] {
height: 45px;
width: 150px;
position: relative;
right: 140px;
background-color: #eb4034;
border: none;
color: #fff;
}
.sub h1 {
position: relative;
top: 50px;
padding-left: 25px;
}
/* article with courses */
.courses {
position: relative;
overflow: hidden;
height: auto;
width: 100%;
text-align: center;
}
.course {
display: block;
height: 250px;
width: 30%;
float: left;
margin: 60px 0 50px 35px;
}
.courseImage {
display: block;
height: 150px;
width: 60%;
margin: 0 auto 15px;
}
.course a {
text-decoration: none;
color: #e86c00;
}
/* Created by JS */
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<script src="https://kit.fontawesome.com/839b1040bb.js" crossorigin="anonymous"></script>
<header>
<nav id="headNavigation">
<h1>
Be
<span data-name="[positive , motivated]" data-wait="3000" class="colored">creative</span
>
</h1>
<ul>
<li class="active">
<svg
class="bi bi-house"
width="2em"
height="2em"
viewBox="0 0 16 16"
fill="#fff"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M2 13.5V7h1v6.5a.5.5 0 00.5.5h9a.5.5 0 00.5-.5V7h1v6.5a1.5 1.5 0 01-1.5 1.5h-9A1.5 1.5 0 012 13.5zm11-11V6l-2-2V2.5a.5.5 0 01.5-.5h1a.5.5 0 01.5.5z"
clip-rule="evenodd"
/>
<path
fill-rule="evenodd"
d="M7.293 1.5a1 1 0 011.414 0l6.647 6.646a.5.5 0 01-.708.708L8 2.207 1.354 8.854a.5.5 0 11-.708-.708L7.293 1.5z"
clip-rule="evenodd"
/>
</svg>
Home
</li>
<li>
<svg
class="bi bi-eject"
width="2em"
height="2em"
viewBox="0 0 16 16"
fill="#fff"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.27 1.047a1 1 0 011.46 0l6.345 6.77c.6.638.146 1.683-.73 1.683H1.656C.78 9.5.326 8.455.926 7.816L7.27 1.047zM14.346 8.5L8 1.731 1.654 8.5h12.692zM.5 11.5a1 1 0 011-1h13a1 1 0 011 1v1a1 1 0 01-1 1h-13a1 1 0 01-1-1v-1zm14 0h-13v1h13v-1z"
clip-rule="evenodd"
/>
</svg>
About
</li>
<li>
<svg
class="bi bi-chat"
width="2em"
height="2em"
viewBox="0 0 16 16"
fill="#fff"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M2.678 11.894a1 1 0 01.287.801 10.97 10.97 0 01-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 01.71-.074A8.06 8.06 0 008 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894zm-.493 3.905a21.682 21.682 0 01-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 00.244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 01-2.347-.306c-.52.263-1.639.742-3.468 1.105z"
clip-rule="evenodd"
/>
</svg>
Feedback
</li>
<li>
<svg
class="bi bi-box-arrow-in-right"
width="2em"
height="2em"
viewBox="0 0 16 16"
fill="#fff"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M8.146 11.354a.5.5 0 010-.708L10.793 8 8.146 5.354a.5.5 0 11.708-.708l3 3a.5.5 0 010 .708l-3 3a.5.5 0 01-.708 0z"
clip-rule="evenodd"
/>
<path
fill-rule="evenodd"
d="M1 8a.5.5 0 01.5-.5h9a.5.5 0 010 1h-9A.5.5 0 011 8z"
clip-rule="evenodd"
/>
<path
fill-rule="evenodd"
d="M13.5 14.5A1.5 1.5 0 0015 13V3a1.5 1.5 0 00-1.5-1.5h-8A1.5 1.5 0 004 3v1.5a.5.5 0 001 0V3a.5.5 0 01.5-.5h8a.5.5 0 01.5.5v10a.5.5 0 01-.5.5h-8A.5.5 0 015 13v-1.5a.5.5 0 00-1 0V13a1.5 1.5 0 001.5 1.5h8z"
clip-rule="evenodd"
/>
</svg>
Log In
</li>
</ul>
</nav>
<div class="lighter"></div>
</header>
<section>
<div class="slider">
<div class="slide current">
<div class="content">
<h1>Henry Park</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Perferendis, unde.
</p>
</div>
</div>
<div class="slide ">
<div class="content">
<h1>Peter Bottom(wizard)</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Perferendis, unde.
</p>
</div>
</div>
<div class="slide ">
<div class="content">
<h1>Annie Granger</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Perferendis, unde.
</p>
</div>
</div>
<div class="slide ">
<div class="content">
<h1>Miriam (Mitzi)</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Perferendis, unde.
</p>
</div>
</div>
<div class="slide ">
<div class="content">
<h1>Julie Wothson</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Perferendis, unde.
</p>
</div>
</div>
<div class="slide ">
<div class="content">
<h1>Mabel Tven</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Perferendis, unde.
</p>
</div>
</div>
</div>
<div class="buttons">
<button id="prev"><i class="fas fa-arrow-left "></i></button>
<button id="next"><i class="fas fa-arrow-right "></i></button>
</div>
</section>
<article>
<div class="sub">
<h1>
Please <span class="colored">Subscribe</span> for
<span class="colored">our</span> site
</h1>
<form id="subscribeForm">
<input type="email" name="Sub Email" id="SubEmail" placeholder="Enter Email" />
<input type="submit" value="Submit" />
</form>
</div>
</article>
<article>
<div class="container">
<div class="courses">
<div class="course">
<div class="image">
<img src="/photos/photoShop.png" alt="Adobe photoShop" class="courseImage" />
</div>
Photo Shop course
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
</p>
</div>
<div class="course">
<div class="image">
<img src="/photos/photoEditingCourse.jpg" alt="Editing course" class="courseImage" />
</div>
Photo Editing Course
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
</p>
</div>
<div class="course">
<div class="image">
<img src="/photos/beIntoPhoto.jpg" alt="be into" class="courseImage" />
</div>
Be into photo
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
</p>
</div>
<div class="course">
<div class="image">
<img src="/photos/photoMarketing.jpg" alt="Photo Marketing" class="courseImage" />
</div>
Photo marketing with Ed Brand
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
</p>
</div>
<div class="course">
<div class="image">
<img src="/photos/creativiy.jpg" alt="Creativity" class="courseImage" />
</div>
Creativity with Adam Bauman
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
</p>
</div>
</div>
</div>
</article>
<footer>
<h5>NO COPYRIGHT &copy</h5>
<div class="sectionOfPartners">
<h6>Partners</h6>
<p>Partner 1</p>
<p>Partner 2</p>
<p>Partner 3</p>
<p>Partner 4</p>
<p>Partner 5</p>
<p>Partner 6</p>
<p>Partner 7</p>
</div>
<div class="sectionOfContacts">
<p>Oficial telephone +XXX / XXX XXXX</p>
<p>Contact with workers +XXX / XXX XXXX</p>
<p>Other Contacts Contact</p>
</div>
</footer>

Set inline-svg as the background of a div

I got a place on my CSS Grid where I am inserting a paragraph of about 15 characters long, I would like to add a background element to it and I want it to have some personality so am using a inline SVG content.
I tried to place it at the bottom with a position:relative but when you change the view-port size it doesn't scale well. I wrapped the SVG code in a container:
.marquee-container {
height: 0;
position: absolute;
width: 500px;
}
And the styles of the SVG:
.svg-marquee {
fill: teal;
stroke-width: 4;
stroke-miterlimit: 10;
cursor: pointer;
transition: .5s;
}
This is the HTML Markup
<div class="home-works">
<div class="head">
<h1>Entries</h1>
</div>
<img class="thumbnail" src="img/profile-picture.png" width="100%"/>
<div class="main-content">
<div class="marquee-container">
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" viewBox="0 0 634 175" style="enable-background:new 0 0 634 175;"
xml:space="preserve">
<path class="svg-marquee" d="M595.9,173C317,173,317,153,38.1,153C27.3,153,2,157.6,2,151C2,87.5,34.8,87.5,34.8,24c0-6.6-7.5-22,3.3-22
C317,2,317,22,595.9,22c10.8,0,36.1-4.6,36.1,2c0,63.5-32.8,63.5-32.8,127C599.2,157.6,606.7,173,595.9,173z"/>
</svg>
</div>
<div class="post">
<h3>title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore placeat
maiores ad ullam illo, blanditiis ipsam libero! Aspernatur, mollitia suscipit?
</p>
</div>
</div>
</div>
My item is inside a CSS Grid Layout where post is the class I am using to style the contents of the paragraph. Which is not inside any grid-template-areas, its just a class within an area already defined.
.post {
text-align: left;
position: relative;
z-index: 1;
}
So the scaling doesn't go well, I would like to place the element at the background of the paragraph to be contained, what is the best approach?
.marquee-container {
height: 0;
position: absolute;
width: 500px;
}
.svg-marquee {
fill: teal;
stroke-width: 4;
stroke-miterlimit: 10;
cursor: pointer;
transition: .5s;
}
.post {
text-align: left;
position: relative;
z-index: 1;
}
<div class="home-works">
<div class="head">
<h1>Entries</h1>
</div>
<img class="thumbnail" src="img/profile-picture.png" width="100%" />
<div class="main-content">
<div class="marquee-container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" viewBox="0 0 634 175" style="enable-background:new 0 0 634 175;" xml:space="preserve">
<path class="svg-marquee" d="M595.9,173C317,173,317,153,38.1,153C27.3,153,2,157.6,2,151C2,87.5,34.8,87.5,34.8,24c0-6.6-7.5-22,3.3-22
C317,2,317,22,595.9,22c10.8,0,36.1-4.6,36.1,2c0,63.5-32.8,63.5-32.8,127C599.2,157.6,606.7,173,595.9,173z"/>
</svg>
</div>
<div class="post">
<h3>title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore placeat maiores ad ullam illo, blanditiis ipsam libero! Aspernatur, mollitia suscipit?
</p>
</div>
</div>
</div>

Since you are positioning the .marquee-container absolutely.
You need a parent to have position set to relative, So, add position: relative on the parent .main-content.
I don't understand why you set the .marquee-container height to 0.
I would suggest set it's height to auto and have a bottom: 0;, (As you wanted it to be aligned to bottom of the container).
Set the width to 100% since you want it to be scalable. also add a negative z-index so that the element doesn't cover up the contents.
Check the snippet below.
.main-content {
position: relative;
}
.marquee-container {
position: absolute;
bottom: 0;
height: auto;
width: 100%;
z-index: -5;
}
.svg-marquee {
fill: teal;
stroke-width: 4;
stroke-miterlimit: 10;
cursor: pointer;
transition: .5s;
}
.post {
text-align: left;
position: relative;
z-index: 1;
}
<div class="home-works">
<div class="head">
<h1>Entries</h1>
</div>
<img class="thumbnail" src="img/profile-picture.png" width="100%" />
<div class="main-content">
<div class="marquee-container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" viewBox="0 0 634 175" style="enable-background:new 0 0 634 175;" xml:space="preserve">
<path class="svg-marquee" d="M595.9,173C317,173,317,153,38.1,153C27.3,153,2,157.6,2,151C2,87.5,34.8,87.5,34.8,24c0-6.6-7.5-22,3.3-22
C317,2,317,22,595.9,22c10.8,0,36.1-4.6,36.1,2c0,63.5-32.8,63.5-32.8,127C599.2,157.6,606.7,173,595.9,173z"/>
</svg>
</div>
<div class="post">
<h3>title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore placeat maiores ad ullam illo, blanditiis ipsam libero! Aspernatur, mollitia suscipit?
</p>
</div>
</div>
</div>

Fixed Size SVG Background Image

I have a shape I'm trying to put on top of a text box with a background image. This shape will go in different sized containers and scale responsively. The issue I'm having is the background image scales as well, and I would like for it to stay the same size without using a clip path. Please see the code for what I'm talking about. This is driving me crazy!
.container {
width: 75%;
}
.box {
background-image: url("https://s22.postimg.org/dhkk3e8sh/Blue_881.jpg");
padding-top: 5px;
padding-left: 25px;
padding-right: 20px;
padding-bottom: 5px;
margin-top: -5px;
}
p {
color: white;
}
<div class="container">
<svg width="100%" height="auto" viewBox="375 265 1268 45.3">
<defs>
<pattern id="img1" height="30%" width="30%"
patternContentUnits="objectBoundingBox"
viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice">
<image height="1" width="1" preserveAspectRatio="xMidYMid slice"
xlink:href="https://s22.postimg.org/dhkk3e8sh/Blue_881.jpg" />
</pattern>
</defs>
<path d="M369,291.8v19.7h1280v-22.7c0,0-137-21.6-277-21.6c-308,0-534,34.9-726,34.9C460,302.2,369,291.8,369,291.8z" fill="url(#img1)" />
</svg>
<div class="box">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec tamen ille erat sapiens quis enim hoc aut quando aut ubi aut unde
</p>
</div>
If you change the percentage size of the container, you'll see what I'm talking about.
Thanks for the help!

For a start you will need to get rid of the viewBox in the SVG. That causes the SVG to get scaled, and that affects anything in the SVG. You'll also want the pattern to be 1:1, so that means switching to patternContentUnits="userSpaceOnUse" and have the pattern use the image at actual size.
We are also using overflow:hidden so that the non-scaling SVG will not force the parent SVG to be wider.
This gets you close. The pattern is now 1:1 but it doesn't exactly line up with the HTML one because they have differing pattern origins. You can adjust that by tweaking the x and y attributes of the pattern until it lines up correctly. I'll leave that to you.
.container {
width: 75%;
overflow: hidden;
}
.box {
background-image: url("https://s22.postimg.org/dhkk3e8sh/Blue_881.jpg");
padding-top: 5px;
padding-left: 25px;
padding-right: 20px;
padding-bottom: 5px;
margin-top: -5px;
}
p {
color: white;
}
<div class="container">
<svg width="1268" height="45.3">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="881" height="192">
<image width="881" height="192"
xlink:href="https://s22.postimg.org/dhkk3e8sh/Blue_881.jpg" />
</pattern>
</defs>
<path transform="translate(-375 -265)"
d="M369,291.8v19.7h1280v-22.7c0,0-137-21.6-277-21.6c-308,0-534,34.9-726,34.9C460,302.2,369,291.8,369,291.8z" fill="url(#img1)" />
</svg>
<div class="box">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec tamen ille erat sapiens quis enim hoc aut quando aut ubi aut unde
</p>
</div>