How do I make it so that if I click outside a paragraph element then the background color is removed? Note I want to it to only be able to highlight one p at a time.
$('p').click(function() {
$('p').removeClass('yellow');
$(this).addClass('yellow');
});
.yellow {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur sequi amet sit dolorem, nulla inventore quo cum ad distinctio aut nesciunt reprehenderit dolorum quidem animi unde aspernatur. Esse, eius!</p>
<p>Deleniti vitae rerum eum saepe eaque tenetur libero, omnis nisi sapiente dicta est repellat, provident placeat quia inventore, at architecto quisquam, pariatur minus quam magni totam praesentium dignissimos. Incidunt, sequi.</p>
<p>Fuga cupiditate consectetur, corporis architecto, doloremque impedit ullam quia praesentium voluptatibus molestiae dolor sint, odio amet atque culpa fugit blanditiis ea nam repellat necessitatibus. Aliquam voluptate fuga quo, omnis mollitia.</p>
</div>
</div>
</div>
Here is what you want:
$('p').click(function(e) {
$('p').removeClass('yellow'); //If there is any p with class yellow, it removes that
$(e.target).closest('p').addClass('yellow'); //This find closest target when you click, in our case current paragraph(p)
});
$(document).click(function(e){ //Here is when you click in your entire document
if($(e.target).closest('p').length==0) { // If click is not paragraph
$('p').removeClass('yellow'); //It removes this class existed from any paragraph
}
})
.yellow {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur sequi amet sit dolorem, nulla inventore quo cum ad distinctio aut nesciunt reprehenderit dolorum quidem animi unde aspernatur. Esse, eius!</p>
<p>Deleniti vitae rerum eum saepe eaque tenetur libero, omnis nisi sapiente dicta est repellat, provident placeat quia inventore, at architecto quisquam, pariatur minus quam magni totam praesentium dignissimos. Incidunt, sequi.</p>
<p>Fuga cupiditate consectetur, corporis architecto, doloremque impedit ullam quia praesentium voluptatibus molestiae dolor sint, odio amet atque culpa fugit blanditiis ea nam repellat necessitatibus. Aliquam voluptate fuga quo, omnis mollitia.</p></div>
</div>
</div>
Use this code
$("p").click(function (e){
$("p").removeClass("yellow");
$(this).addClass("yellow");
});
$(document).click(function (e){
var element = $("p.yellow");
if (!element.is(e.target) && element.has(e.target).length === 0)
element.removeClass("yellow");
});
.yellow {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="yellow">Text text text</p>
<p>Text text text</p>
<p>Text text text</p>
You can set a listener to the <body> and check if the click was onto a <p>:
$('body').click(function(event) {
if(!$(event.target).is('p')) {
$('p').removeClass('yellow');
}
else {
$(event.target).addClass('yellow');
}
});
Related
import { useState } from "react";
const Section = ({ title, description, isVisible, setIsVisible }) => {
return (
<div class="section p-2 m-2 border border-black rounded-lg">
<h2 className="font-bold text-2xl mr-3 inline">{title}</h2>
<button
className="font-bold"
onClick={() => (isVisible ? setIsVisible(false) : setIsVisible(true))}
>
{!isVisible ? "show" : "hide"}
</button>
{isVisible && <p>{description}</p>}
</div>
);
};
const Accordian = () => {
const [visibleSection, setVisibleSection] = useState("none");
return (
<>
<h2 className="font-bold text-xl inline m-auto">Example of collapsable accordian</h2>
<Section
isVisible={visibleSection==="item1"}
setIsVisible={(toShow) => toShow ? setVisibleSection("item1") : setVisibleSection("none")}
title={"Title 1"}
description={
"Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore iure laudantium officia laboriosam consectetur voluptate ipsum ea molestiae error magnam quos, in illum, repellat, nulla qui! Dignissimos nemo placeat cupiditate. Temporibus aperiam odit sunt! Culpa vel, suscipit a laborum iusto necessitatibus, quae dicta ducimus corporis, expedita nam earum dolorem enim."
}
></Section>
<Section
isVisible={visibleSection==="item2"}
setIsVisible={(toShow) => toShow ? setVisibleSection("item2") : setVisibleSection("none")}
title={"Title 2"}
description={
"Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore iure laudantium officia laboriosam consectetur voluptate ipsum ea molestiae error magnam quos, in illum, repellat, nulla qui! Dignissimos nemo placeat cupiditate. Temporibus aperiam odit sunt! Culpa vel, suscipit a laborum iusto necessitatibus, quae dicta ducimus corporis, expedita nam earum dolorem enim."
}
></Section>
<Section
isVisible={visibleSection==="item3"}
setIsVisible={(toShow) => toShow ? setVisibleSection("item3") : setVisibleSection("none")}
title={"Title 3"}
description={
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Labore, quos? Commodi unde deserunt voluptates suscipit odit similique voluptas at totam distinctio officia eum est a repellendus optio officiis error, excepturi consequatur cum illum aspernatur nemo eaque et perferendis molestiae? Explicabo aspernatur in praesentium at ad est voluptates tenetur. Distinctio, aliquam numquam tempore cum, iusto est ex quidem expedita eum odio fugiat architecto sit culpa qui tempora beatae quae mollitia, odit sunt! Iure, officiis. Vitae facilis nisi accusantium nihil iste, unde laudantium. Quasi sapiente reprehenderit aperiam recusandae minus fugit. Itaque nisi recusandae illum sed, adipisci unde asperiores dolore tempore cupiditate aperiam?"
}
></Section>
</>
);
};
export default Accordian;
I want to add transition when user clicks on hide and/or show button. But here there is no property like height on the div which accomodates h1 & p. I actually works based on the state (isVisible) which shows or hide the p element. So, is there any way to use transition with react state ?
And also is there any state in css like onClick on that div (just like hover and focus) so that I can implement the transition ?
I am a beginner in programming, I have a problem and want to ask you!
At present, there is a layout that the green area appears on the left side, such as area A in the picture, but when the mouse slides down, the green area is about to become area B in the picture.
But I don’t know how to make such a change, no Know if someone can give me a little help? thanks
* {
border: 1px solid #222;
}
html {
background-color: #ccc;
}
.content {
margin: auto;
display: flex;
justify-content: center;
max-width: 600px;
}
.content .main {
flex: 2;
background-color: #f80d77;
padding: 20px;
line-height: 1.6;
}
.content .main .title {
font-size: 60px;
height: 100px;
background-color: #71ff05;
margin-bottom: 20px;
padding: 10px;
}
.content .side {
flex: 1;
}
.content .side .side_wrap {
background-color: #ff5b0f;
padding: 20px;
}
<div class="warp">
<div class="content">
<div class="main">
<div class="title">TITLE</div>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia libero explicabo est hic illo! Beatae, optio molestiae, debitis itaque in ullam odio corporis neque delectus facilis nobis omnis. Cum voluptatem vel, accusantium repellendus consectetur facilis dolore possimus deleniti corporis placeat iure exercitationem fugiat repellat ipsa eaque? Quam alias, sit corporis earum doloremque eos et voluptatem tempora, similique mollitia pariatur suscipit porro reprehenderit ea ut in quidem! Deleniti soluta nostrum at quidem itaque, maxime enim sint sequi recusandae possimus dicta natus quo harum! Veniam ut dolorem, laboriosam mollitia ab quasi non ratione officia iure, nam, molestiae sunt pariatur explicabo cupiditate deserunt?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia libero explicabo est hic illo! Beatae, optio molestiae, debitis itaque in ullam odio corporis neque delectus facilis nobis omnis. Cum voluptatem vel, accusantium repellendus consectetur facilis dolore possimus deleniti corporis placeat iure exercitationem fugiat repellat ipsa eaque? Quam alias, sit corporis earum doloremque eos et voluptatem tempora, similique mollitia pariatur suscipit porro reprehenderit ea ut in quidem! Deleniti soluta nostrum at quidem itaque, maxime enim sint sequi recusandae possimus dicta natus quo harum! Veniam ut dolorem, laboriosam mollitia ab quasi non ratione officia iure, nam, molestiae sunt pariatur explicabo cupiditate deserunt?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia libero explicabo est hic illo! Beatae, optio molestiae, debitis itaque in ullam odio corporis neque delectus facilis nobis omnis. Cum voluptatem vel, accusantium repellendus consectetur facilis dolore possimus deleniti corporis placeat iure exercitationem fugiat repellat ipsa eaque? Quam alias, sit corporis earum doloremque eos et voluptatem tempora, similique mollitia pariatur suscipit porro reprehenderit ea ut in quidem! Deleniti soluta nostrum at quidem itaque, maxime enim sint sequi recusandae possimus dicta natus quo harum! Veniam ut dolorem, laboriosam mollitia ab quasi non ratione officia iure, nam, molestiae sunt pariatur explicabo cupiditate deserunt?
</div>
<div class="side">
<ul class="side_wrap">
<li>Lorem ipsum dolor sit.</li>
<li>Lorem ipsum dolor sit.</li>
<li>Lorem ipsum dolor sit.</li>
<li>Lorem ipsum dolor sit.</li>
<li>Lorem ipsum dolor sit.</li>
<li>Lorem ipsum dolor sit.</li>
</ul>
</div>
</div>
</div>
Use position:sticky; with element.
You could use this as reference.
The issue is that when I click on the questions the plus and minus icons of all the questions change, I only want the icon next to the question I clicked on to change. Can anyone help?
document.addEventListener('DOMContentLoaded', function() {
const questions = document.querySelectorAll('.questions');
const toggleIcons = document.querySelectorAll('.toggle-icon');
for (const question of questions) {
question.addEventListener('click', () =>{
const answerToQuestion = question.nextElementSibling;
answerToQuestion.toggleAttribute('hidden');
for(const toggleIcon of toggleIcons) {
if(toggleIcon.src == 'https://via.placeholder.com/50x50'){
toggleIcon.setAttribute('src', 'https://via.placeholder.com/200x200')
} else {
toggleIcon.setAttribute('src', 'https://via.placeholder.com/50x50')
}
}
})
}
});
<div class='question-container'>
<div class="questions">
<h3>Can I return my order?</h3>
<img src="https://via.placeholder.com/50x50" alt="minus-sign" class="toggle-icon" onclick="openQuestion()">
</div>
<div class="answer" id="default-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!
Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,</p>
</div>
</div>
<div class="question-container">
<div class="questions">
<h3>How much will it cost to ship my item?</h3>
<img src="https://via.placeholder.com/50x50" alt="minus-sign" class="toggle-icon" onclick="openQuestion()">
</div>
<div class="answer">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!
Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,</p>
</div>
</div>
I refactor the code to try to isolate some parts, it was as follows:
document.addEventListener('DOMContentLoaded', function () {
const QUESTIONS = document.querySelectorAll('.questions');
const BIG_IMAGE_SRC = "https://via.placeholder.com/200x200";
const SMALL_IMAGE_SRC = "https://via.placeholder.com/50x50";
for (let question of QUESTIONS) {
question.addEventListener("click", function (event) {
const questionContainerDivTarget = this.parentElement;
const imageTarget = questionContainerDivTarget.querySelector("img");
const textTarget = questionContainerDivTarget.querySelector("p");
const isTargetContainBigImage = imageTarget.src === BIG_IMAGE_SRC;
textTarget.toggleAttribute("hidden");
let toggleImage = isTargetContainBigImage ? SMALL_IMAGE_SRC : BIG_IMAGE_SRC;
imageTarget.setAttribute("src", toggleImage);
})
}
});
<div class='question-container'>
<div class="questions">
<h3>Can I return my order?</h3>
<img src="https://via.placeholder.com/50x50" alt="minus-sign" class="toggle-icon">
</div>
<div class="answer" id="default-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!
Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,</p>
</div>
</div>
<div class="question-container">
<div class="questions">
<h3>How much will it cost to ship my item?</h3>
<img src="https://via.placeholder.com/50x50" alt="minus-sign" class="toggle-icon">
</div>
<div class="answer">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!
Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,</p>
</div>
</div>
Be aware the const questionContainerDivTarget = this.parentElement; will get the div of the "question-container" css class. parentElement will get the first parent element and then you can control the entire div
Here is a perfect solution
<div class='question-container'>
<div class="questions">
<h3>Can I return my order?</h3>
<img src="https://via.placeholder.com/50x50" alt="minus-sign" class="toggle-icon" onclick="openQuestion(this)">
</div>
<div class="answer" id="default-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!
Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,</p>
</div>
</div>
<div class="question-container">
<div class="questions">
<h3>How much will it cost to ship my item?</h3>
<img src="https://via.placeholder.com/50x50" alt="minus-sign" class="toggle-icon" onclick="openQuestion(this)">
</div>
<div class="answer">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!
Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,</p>
</div>
</div>
Here is script you need
function openQuestion (e) {
if(e.src == 'https://via.placeholder.com/50x50'){
e.setAttribute('src', 'https://via.placeholder.com/200x200')
} else {
e.setAttribute('src', 'https://via.placeholder.com/50x50')
}
e.parentNode.nextElementSibling.toggleAttribute('hidden')
}
I am unable to present two paragraph's side by side without compromising the entire format. Here is a video that better explains the issue: Video
Link to Code
Link to Site
https://jsfiddle.net/1L5emghf/
CSS:
.app {
max-width: 1000px;
margin: 0 auto;
}
.app:after {
clear:both;
}
p {
display: block;
width: calc(50% - 10px);
float: left;
margin: 5px;
background-color: #CCC;
border: 3px;
padding: 20px;
box-sizing: border-box;
}
p:nth-child(even) {
float: right;
}
Is this the solution to your problem? If you want to have the same height against the underlying element use JS (you need to give the sibling a minimum height relative to the active element)
Full solution with JS
https://jsfiddle.net/1L5emghf/1/
HTML:
<div class="app">
<p contenteditable>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto vero officia id fugit accusantium unde, minima assumenda veniam deleniti perferendis.</p>
<p contenteditable>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor qui veritatis esse voluptatum, asperiores, quam tenetur quae porro voluptatibus facilis debitis est iure recusandae voluptates. Modi sapiente maxime libero deleniti ad excepturi nam natus iusto, doloribus esse vel, recusandae repellendus iste officiis quis cupiditate blanditiis perspiciatis, facere animi. Sunt, praesentium.</p>
<p contenteditable>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere omnis illum aperiam voluptates error doloremque quam, totam minima corrupti doloribus magni eaque velit ex? Eveniet praesentium, delectus cumque ullam velit dicta dolorum maiores, consequatur fugit nam nulla, quas veniam tempore repellendus voluptate! Cumque adipisci nesciunt quae iste esse commodi? Minima placeat, tempora ea harum ipsam vitae? Velit laudantium quibusdam iure facilis repellendus perspiciatis temporibus maiores necessitatibus alias, amet delectus quidem quia iusto eos eveniet explicabo modi voluptatibus sit harum aut provident corporis! Culpa soluta sunt, sapiente quasi officiis aliquid vitae, repellendus, repellat consectetur voluptatem, sed quas. Modi quod ab voluptatem debitis nulla eum, in, repellat cupiditate, eos voluptas quae commodi ut incidunt sapiente soluta doloribus consequuntur saepe. Officiis deserunt ab iste quae ullam cupiditate quis possimus, incidunt, voluptates distinctio doloremque dignissimos dicta dolore quo sit. Ullam asperiores maiores aliquam sint facere cumque quidem reiciendis natus, quo nobis quod aspernatur rem sapiente ipsum, voluptatibus tenetur non id modi adipisci sunt quae provident unde in! Esse placeat et recusandae nobis iste magni dolorem assumenda similique. Tempora magni repellat, fugiat officiis quam error non quisquam blanditiis nesciunt sint consectetur dolorem voluptates sed ipsum unde. At amet culpa excepturi possimus officiis magnam, accusantium fugit cupiditate voluptatibus harum explicabo quia vitae dolorum quam beatae, eveniet! Pariatur blanditiis iusto, est porro earum neque aperiam. Laudantium minima officia dolorem sit, enim blanditiis eius aspernatur dolor, assumenda, possimus ut hic id veniam unde odit nesciunt, explicabo odio vero ex! Ipsam velit, cupiditate nisi accusamus facilis aliquid ad ab omnis eveniet dolorem quaerat ea officia, necessitatibus quasi porro doloremque quis, rerum eligendi consectetur suscipit. Enim, fugiat, non? Suscipit dolorum nam assumenda nisi ipsa, voluptatum incidunt reprehenderit dolor molestiae dolores quae adipisci, dignissimos nobis illum praesentium architecto. Libero omnis velit, nihil, est consequuntur natus accusantium. Cumque numquam modi tenetur iste.</p>
<p contenteditable>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem praesentium consequatur quisquam facilis, magnam consequuntur asperiores optio architecto facere, obcaecati qui omnis cupiditate aspernatur repellat inventore illum similique placeat quas?</p>
<p contenteditable>5 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit sint consequuntur non corporis hic vero ut ipsam reprehenderit rerum unde.</p>
<p contenteditable>6 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quis quibusdam eveniet soluta, iure dolor assumenda a aliquid autem sed tempora dignissimos laudantium? Ipsa maiores dolorum, optio temporibus iste dolore est nobis aspernatur placeat numquam eos fuga rerum quae sed.</p>
<p contenteditable>7 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto debitis beatae recusandae. Provident ea aut quia nemo corporis et unde iure dignissimos assumenda sed corrupti illum, harum, itaque ad ipsum.</p>
</div>
JS:
let els = document.querySelectorAll('[contenteditable]');
function syncHeight(activeEl, siblingEl) {
siblingEl.style.minHeight = activeEl.offsetHeight + 'px';
}
function prepare(el) {
let height = el.offsetHeight;
let even = !!(Array.prototype.slice.call(el.parentNode.children).indexOf(el)%2);
if(even) {
syncHeight(el, el.previousElementSibling);
} else {
if(el.nextElementSibling) {
syncHeight(el, el.nextElementSibling);
}
}
}
for(let el of els) {
prepare(el);
el.addEventListener('input', function(e) {
prepare(el);
});
}
Since all the paragraphs are using relative positions, you can set max-width / overflow-y styles for them :
CSS
p { max-height: 154px; overflow-y: scroll; }
Inline Styles
<p styles= "max-height: 154px; overflow-y: scroll; <....>" > mmmmmmmmm </p>
Incase paragraph widths are also being affected, add max-width: 483px; overflow-x: hidden; properties
I'm having struggles with what I'm trying to acomplish. Basicly I have 2 colums in my HTML and on my left colum I have text and want to have div's on the right colum with videos stay near certain parts of the text. Diferent aproaches I have tried are table cells, who I couldn' make work how I wanted because it would deformat the text creating big spaces between paragraphs to fit in the size of the video on the right.
I have also tried dummy divs to fill the vertical space but this won't work for all screens since the div's sizes will be diferent.
I've tried searching for some anchors that could be attached to the text somehow where I could create a div next to it without influencing the text itself but I'm kinda lost.
I hope this question is according to the rules. Thanks in advance.
image in paint to help
Please check this link and let me know whether you want this type of layout
.row {
align-items: flex-end;
display: flex;
}
.bg-red {
background: red;
}
.col-6 {
width: 50%;
}
<div class="container-fluid">
<div class="row">
<div class="col-6">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
</div>
<div class="col-6">
<video width="100%" height="300" controls>
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="row bg-red">
<div class="col-6">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremq natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
</div>
<div class="col-6">
<video width="100%" height="300" controls>
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4">
</video>
</div>
</div>
</div>