I am developing a blog site using ReactJS, I want when the user clicks to view the full content, instead of the scrolling behaviour we get on most blog sites, I want a page-by-page view as we have in PDF reader, where the user clicks on the button and will be taken to a new page as he continues reading.
How do I limit the number of characters on each page regardless of the number of words? eg: If the author posted 2000 words, I will only display 500 words on the first page and when the user clicks "next" button it moves to another page with 500 words, till the user gets to the last words in the article.
How I want it to look
Here is the code
export default function Read() {
return (
<div className="h-screen">
<div className="flex items-center justify-between w-screen h-[45px] z-10 bg-white drop-shadow-lg top-0">
<Link className="flex items-center text-white bg-indigo-800 h-full" href="/"><ArrowLeftIcon
className="w-6 text-white active:text-white"/><span>Home</span></Link>
<div className="text-sm font-bold ">
<p>Book Title will be here</p>
</div>
<div className="text-xs font-bold ">
<p>Page 1</p>
</div>
<div className=" ">
<AdjustmentsHorizontalIcon className="w-7 text-indigo-900 active:text-white"/>
</div>
</div>
<div className="px-1.5 bg-zinc-300 shadow-lg">
<p className="bg-white px-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Beatae dolor dolores incidunt, ipsa ipsam iure labore maiores
nobis nulla, odio omnis placeat quod, reiciendis. Cum deleniti
fugit laudantium repudiandae velit? Dicta dolorem explicabo fuga
illum incidunt itaque laboriosam magni necessitatibus numquam
perspiciatis qui quis, quo recusandae, rerum similique temporibus
tenetur!
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Beatae dolor dolores incidunt, ipsa ipsam iure labore maiores
nobis nulla, odio omnis placeat quod, reiciendis. Cum deleniti
fugit laudantium repudiandae velit? Dicta dolorem explicabo fuga
illum incidunt itaque laboriosam magni necessitatibus numquam
perspiciatis qui quis, quo recusandae, rerum similique temporibus
tenetur!
<br/>
<br/>
fugit laudantium repudiandae velit? Dicta dolorem explicabo fuga
illum incidunt itaque laboriosam magni necessitatibus numquam
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum
eius eligendi enim expedita ipsum iusto nemo, nisi perspiciatis
quis vitae!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad aspernatur aut deleniti doloremque eius eos eveniet, expedita facilis labore magni,
</p>
</div>
<div className="pagination fixed bottom-0 left-0 right-0">
<div className="active:bg-red-300 rounded-3xl">
<ArrowLeftCircleIcon className="w-10 text-indigo-600"/>
</div>
<div className="active:bg-red-300 rounded-3xl">
<ArrowRightCircleIcon className="w-10 text-indigo-600"/>
</div>
</div>
</div>
)}
One way to approach this is that, you can split the "article", say 2000 words, into 4 sections with each section a index attribute attached to it, and store it into the database at the beginning, when fetching the next page, you can query the previousIndex + 1 for the next section, and send it back to the client.
Related
I am trying to create an App which has 2 html files, index.html and bookmarks.html. Index.html has some question cards which contain some text and a bookmarks button.
My goal is that when I press the bookmark button in the question card from index.html, that card should be replicated in bookmarks.html.
I was thinking to use the createElement approach, but I have no idea how to do this when the elements that should be created are on a different page...
For more clarity, here is the html code for the question cards in index.html:
<section class="question-card">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam vitae
labore repudiandae tenetur. Qui maiores animi quibusdam voluptatum
nobis. Nam aperiam voluptatum dolorem quia minima assumenda velit
libero saepe repellat. Tempore delectus deleniti libero aliquid rem
velit illum expedita nostrum quam optio maiores officiis consequatur
ea, sint enim cum repudiandae inventore ab nemo? Eum dicta illum odio
harum, commodi similique. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Inventore maxime ipsa accusamus, soluta provident
tenetur aliquid ad nisi voluptate iste quaerat ab ullam voluptatem
illo eos optio ut dolor nostrum.
</p>
<button type="button" class="qc-bookmark-icon">
<img src="/assets/bookmark-icon.jpeg" alt="bookmark icon"/>
</button>
</section>
And this is what it looks like, with the bookmark button on the top-right corner.
Do you have any idea if this would be the right approach and if yes, how could I implement this?
If not, I am open to any suggestions, how I could make this work...
Thank you.
I am building a website that is split into two columns in bootstrap 5. There are rows aswell that creates some visual square blocks. In one of those blocks, I have to fit more content than the height of the block/div, so I have made it scrollable. What I would like to achieve is:
When the user scrolls down instead of having to click on the block (or have the mouse over) in order to activate the scroll, when he reaches the viewport window height the scroll on that block / div will activate automatically. Upon scrolling untill the end , the effect should transfer back to the whole page. Main section has the scroll class, the intro section & FOOTER are there for reference.
<!--====== Intro_Section ======-->
<div class="container-fluid">
<div class="row d-flex justify-content-center min-vh-100 bg-gray-black "> <!-- Intro space -->
<div class="text-center mt-3 pt-3">
<h1>Lorem ipsum </h1>
</div>
<div class="d-flex flex-column justify-content-end nav">
<div class="align-self-center mb-3 pb-3 ">
<ul>
<li>a</a></li>
<li>a</li>
<li>a</li>
</ul>
</div>
</div>
</div>
<!--====== MAIN_SECTION ======-->
<div class="row min-vh-100">
<div class="col-md-6 bg-red d-flex flex-column justify-content-between">
<div class="w-100"> <!--just an empty box with 100% width--> </div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore nostrum, voluptatibus placeat sapiente natus inventore adipisci aliquid nesciunt reprehenderit, tempora repellat nam suscipit delectus commodi sint aut similique quasi necessitatibus.</p>
<p>
</div>
<div class="col-md-6 scroll">
<div class="d-flex flex-column mx-5 px-5">
<!---<div class="my-3 py-3">
<h2>Hello World</h2>
</div>--->
<div class="mt-5 pt-5">
<p><b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem debitis tempore voluptates. Nostrum velit incidunt explicabo corrupti ab unde neque maxime consequatur modi odio, voluptas voluptate quasi repellendus in repudiandae! </b></p>
</div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore nostrum, voluptatibus placeat sapiente natus inventore adipisci aliquid nesciunt reprehenderit, tempora repellat nam suscipit delectus commodi sint aut similique quasi necessitatibus.</p>
<p><ol class="list-group-numbered">
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ol></p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore nostrum, voluptatibus placeat sapiente natus inventore adipisci aliquid nesciunt reprehenderit, tempora repellat nam suscipit delectus commodi sint aut similique quasi necessitatibus.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore nostrum, voluptatibus placeat sapiente natus inventore adipisci aliquid nesciunt reprehenderit, tempora repellat nam suscipit delectus commodi sint aut similique quasi necessitatibus.</p>
<p><ol class="list-group-numbered">
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ol></p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore nostrum, voluptatibus placeat sapiente natus inventore adipisci aliquid nesciunt reprehenderit, tempora repellat nam suscipit delectus commodi sint aut similique quasi necessitatibus.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore nostrum, voluptatibus placeat sapiente natus inventore adipisci aliquid nesciunt reprehenderit, tempora repellat nam suscipit delectus commodi sint aut similique quasi necessitatibus.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore nostrum, voluptatibus placeat sapiente natus inventore adipisci aliquid nesciunt reprehenderit, tempora repellat nam suscipit delectus commodi sint aut similique quasi necessitatibus.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore nostrum, voluptatibus placeat sapiente natus inventore adipisci aliquid nesciunt reprehenderit, tempora repellat nam suscipit delectus commodi sint aut similique quasi necessitatibus.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore nostrum, voluptatibus placeat sapiente natus inventore adipisci aliquid nesciunt reprehenderit, tempora repellat nam suscipit delectus commodi sint aut similique quasi necessitatibus.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore nostrum, voluptatibus placeat sapiente natus inventore adipisci aliquid nesciunt reprehenderit, tempora repellat nam suscipit delectus commodi sint aut similique quasi necessitatibus.</p>
</div>
</div>
</div>
<!--====== FOOTER ======-->
<div class="row min-vh-100">
<div class="col-md-6 d-flex flex-column ">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore nostrum, voluptatibus placeat sapiente natus inventore adipisci aliquid nesciunt reprehenderit, tempora repellat nam suscipit delectus commodi sint aut similique quasi necessitatibus.</p>
</div>
<div class="col-md-6 min-vw-50 min-vh-100 px-0">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore nostrum, voluptatibus placeat sapiente natus inventore adipisci aliquid nesciunt reprehenderit, tempora repellat nam suscipit delectus commodi sint aut similique quasi necessitatibus.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore nostrum, voluptatibus placeat sapiente natus inventore adipisci aliquid nesciunt reprehenderit, tempora repellat nam suscipit delectus commodi sint aut similique quasi necessitatibus.</p>
</div>
</div>
<--- CSS code for scroll with hidden bar --->
.scroll {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
text-align:justify;
}
Not sure if I should do this with JavaScript or pure CSS, but I can 't figure it out nor I was able to find info about it online yet. Any help or guidance is very much appreciated! Thanks in advance!
Each <p> are hidden on initial load and I want to click on the <h3> then want the p-tag to show using Javascript.
I have a section in my HTML that looks as follow
<div id="bio-sections">
<div id="history">
<h3 onclick="openFunction()">My History</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias hic officia dolor quidem maiores quasi architecto veritatis obcaecati debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum quae!</p>
</div>
<div id="schooling">
<h3>My Schooling</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In iure distinctio voluptatum non quia maxime numquam amet eum at, quo ut iusto est quos hic placeat. Repudiandae dolorem cupiditate illo.</p>
</div>
<div id="work">
<h3>My Work experience</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam dolor nemo nostrum consequuntur. Tempora, quia nobis eligendi, labore porro natus voluptates nam, consectetur corporis vitae eius hic sed ea earum.</p>
</div>
<div id="hobbies">
<h3>My Hobbies</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor perspiciatis ipsam suscipit voluptas ab distinctio a doloribus, dolorem officia iure nemo qui incidunt soluta dolores ratione saepe. In, mollitia! Voluptatem!</p>
</div>
</div>
My question is how do you reference the following div (or in this case p-tag) given the H3 you pressed?
If you press the H3 under #history then only that p-tag must show and the same with the other divs. But how do you do this in Javascript without duplicating code with different id's or classes.
My approach avoid the use of inline JS inside HTML, which is a bad practice.
Select all <h3> that are clickable and should open the <p> tags, then add the listener to them all.
Now, all you need is the function using this, that refers to the clicked h3, get it's sibling element, check if it is displaying or not, and do the toggle.
See below code
openFunction = function(ev) {
let pTagElem = this.nextElementSibling
if (pTagElem.style.display == "inline") {
pTagElem.style.display = "none"
} else {
pTagElem.style.display = "inline"
}
}
//select all <h3> that should be clickable (inside bio-sections divs)
let h3s = document.querySelectorAll("#bio-sections div h3")
//add the listener to them all
for (let h3 of h3s) {
h3.onclick = openFunction
}
#bio-sections div p {
display: none
}
#bio-sections div h3 {
cursor: pointer
}
<div id="bio-sections">
<div id="history">
<h3>My History</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias hic officia dolor quidem maiores quasi architecto veritatis obcaecati debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum quae!</p>
</div>
<div id="schooling">
<h3>My Schooling</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In iure distinctio voluptatum non quia maxime numquam amet eum at, quo ut iusto est quos hic placeat. Repudiandae dolorem cupiditate illo.</p>
</div>
<div id="work">
<h3>My Work experience</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam dolor nemo nostrum consequuntur. Tempora, quia nobis eligendi, labore porro natus voluptates nam, consectetur corporis vitae eius hic sed ea earum.</p>
</div>
<div id="hobbies">
<h3>My Hobbies</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor perspiciatis ipsam suscipit voluptas ab distinctio a doloribus, dolorem officia iure nemo qui incidunt soluta dolores ratione saepe. In, mollitia! Voluptatem!</p>
</div>
</div>
you can use javascript parameters like this, and move the id into the p tag
<div>
<h3 onclick="openFunction('history')">My History</h3>
<p id="history">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias hic officia dolor quidem maiores quasi architecto veritatis obcaecati debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum quae!</p>
</div>
<script>
function openFunction(id) {
document.getElementById(id).show()
}
</script>
You can use closest() and delegation.
const container = document.querySelector("#bio-sections");
container.addEventListener("click", function (event) {
const parentSectionDiv = event.target.closest(".section");
if (parentSectionDiv !== null) {
parentSectionDiv.querySelector("p").classList.remove("hidden");
}
});
.hidden {
display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <link rel="stylesheet" href="style.css" /> -->
<title>Sign in & Sign up Form</title>
</head>
<body>
<div id="bio-sections">
<div id="history" class="section">
<h3>My History</h3>
<p class="hidden">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias
hic officia dolor quidem maiores quasi architecto veritatis obcaecati
debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum
quae!
</p>
</div>
<div id="schooling" class="section">
<h3>My Schooling</h3>
<p class="hidden">
Lorem ipsum dolor sit amet consectetur adipisicing elit. In iure
distinctio voluptatum non quia maxime numquam amet eum at, quo ut
iusto est quos hic placeat. Repudiandae dolorem cupiditate illo.
</p>
</div>
<div id="work" class="section">
<h3>My Work experience</h3>
<p class="hidden">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam
dolor nemo nostrum consequuntur. Tempora, quia nobis eligendi, labore
porro natus voluptates nam, consectetur corporis vitae eius hic sed ea
earum.
</p>
</div>
<div id="hobbies" class="section">
<h3>My Hobbies</h3>
<p class="hidden">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor
perspiciatis ipsam suscipit voluptas ab distinctio a doloribus,
dolorem officia iure nemo qui incidunt soluta dolores ratione saepe.
In, mollitia! Voluptatem!
</p>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
It depends a bit on how stable your HTML is, but if you are confident it remains like that you don't need to change it and can on the click get the p element.
There's several ways of doing this. This snippet gets the common parent and the first p element in it.
function openFunction() {
console.log(event.target);
console.log(event.target.parentElement.querySelector('p:first-of-type'));
}
<div id="bio-sections">
<div id="history">
<h3 onclick="openFunction()">My History</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias hic officia dolor quidem maiores quasi architecto veritatis obcaecati debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum quae!</p>
</div>
<div id="schooling">
<h3>My Schooling</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In iure distinctio voluptatum non quia maxime numquam amet eum at, quo ut iusto est quos hic placeat. Repudiandae dolorem cupiditate illo.</p>
</div>
<div id="work">
<h3>My Work experience</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam dolor nemo nostrum consequuntur. Tempora, quia nobis eligendi, labore porro natus voluptates nam, consectetur corporis vitae eius hic sed ea earum.</p>
</div>
<div id="hobbies">
<h3>My Hobbies</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor perspiciatis ipsam suscipit voluptas ab distinctio a doloribus, dolorem officia iure nemo qui incidunt soluta dolores ratione saepe. In, mollitia! Voluptatem!</p>
</div>
</div>
currently, I am trying to get a long paragraph or news into 3 sections from API so it can take a layout like in example picture. but the problem I can't divide the paragraph to make it like a layout unless I got 3 attributes for every section and just read it in angular.
I already read this Divide HTML into pages, split long paragraphs
but it still not solve my problem, can someone help me to solve this problem only using 1 attribute?
this is my example data for news:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.
this is my html code :
<!-- start section -->
<section class="wow fadeIn">
<div class="container">
<div class="row">
<div class="col-12 col-lg-10 d-flex flex-wrap mx-auto last-paragraph-no-margin text-center text-md-left">
<div class="col-12 col-lg-4 pl-0 text-center text-large md-no-padding-lr md-margin-30px-bottom">
<!-- start blockquote -->
<p class="text-extra-dark-gray margin-50px-bottom md-margin-20px-bottom alt-font">
<i class="fas fa-quote-left text-light-gray icon-medium margin-15px-bottom"></i>
Apa yang mendefinisikan siapa kita, tidak ada artinya dibandingkan apa yang menyatukan kita.
<i class="fas fa-quote-right text-right text-light-gray icon-medium margin-15px-bottom"></i>
</p>
<!-- end blockquote -->
</div>
<div class="col-12 col-lg-8 pr-0 text-large md-no-padding-lr text-center text-md-left">
<p class="text-large line-height-30 text-medium-gray text-center text-md-justify sm-line-height-26">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga autem eius, hic tempore neque vel beatae facilis quaerat excepturi, minima odio dolore! Atque non quo illo, odio est vel consequuntur! Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quis ex aspernatur ab sunt repellat in ratione. Suscipit fugiat, sed laborum debitis, soluta dolores ipsum hic quae, corporis dignissimos unde! Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus impedit repudiandae illum, incidunt tenetur sapiente ad itaque odio, ipsa cupiditate saepe omnis voluptatibus! Ipsum beatae, nihil voluptatem earum illum non. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium sunt aliquam corrupti sed voluptates, suscipit quibusdam rerum inventore molestiae, ullam fugiat ducimus, debitis mollitia consequatur. Maiores, cupiditate! Nesciunt, odio modi.</p>
</div>
</div>
</div>
</div>
</section>
<!-- end section -->
<!-- start parallax section -->
<section class="wow fadeIn parallax p-0 height-400px md-height-200px sm-height-100px background-position-x-50 cover-background" data-stellar-background-ratio="0.5" style="background-image: url('../../../assets/img/galeri/mpkmb-6.webp');">
<div class="container">
<div class="row">
<div class="col-12"></div>
</div>
</div>
</section>
<!-- end parallax section -->
<!-- start section -->
<section class="wow fadeIn">
<div class="container">
<div class="row">
<div class="col-12 col-lg-10 d-flex flex-wrap mx-auto last-paragraph-no-margin text-center text-md-left">
<div class="col-12 col-lg-5 pl-0 text-large md-no-padding-lr md-margin-30px-bottom">
<p class="text-large line-height-30 text-medium-gray text-center text-md-justify sm-line-height-26">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur, ab minima! Aliquid unde architecto, omnis, quisquam, rem exercitationem fuga reiciendis quam voluptatibus aliquam minima aperiam dolore voluptatem sunt alias quis.</p>
</div>
<div class="col-12 col-lg-7 pr-0 text-large md-no-padding-lr text-center text-md-left">
<p class="text-large line-height-30 text-medium-gray text-center text-md-justify sm-line-height-26">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum placeat officiis laborum. Amet harum placeat, eos, mollitia laudantium odio, quam rerum ut esse provident explicabo asperiores in possimus molestiae officia.</p>
</div>
</div>
</div>
</div>
</section>
<!-- end section -->
so to sum it:
how can I make a sentence which can continue to the next section like the layout or example image do?
As for my code, it already done slicing the layout image but still not divide or make the news continue to the next section since in my code I divide it into 3 section
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>