Sticky On Colum2

 <!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>Document</title>
</head>
<body>

    <div class="parent">

        <div class="bar1">
           
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus distinctio sunt dolore eveniet voluptatem dolorem recusandae, doloribus consectetur velit ex esse quod corporis vel quisquam labore maiores consequatur commodi obcaecati aperiam officiis beatae dicta modi harum? Distinctio est ratione tempore velit perspiciatis, numquam aliquid! Necessitatibus eveniet, sed porro possimus facilis nulla nihil eligendi odit, aspernatur unde quasi doloribus fugiat cumque neque, itaque inventore accusamus voluptas nam nesciunt? Totam, eaque incidunt molestias voluptas pariatur minus? Illo, laudantium placeat nemo officia explicabo, sapiente fuga magni eum quas provident ab sint velit accusantium recusandae similique. Laudantium delectus cupiditate incidunt impedit error adipisci voluptate!</p>

                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto earum consectetur maiores saepe, mollitia corporis dolorum reiciendis, nesciunt adipisci alias rem quis ad quam delectus a modi? Quisquam laboriosam illum fuga, error, modi et recusandae totam repellat soluta, voluptatibus vel nostrum animi accusamus vitae laborum exercitationem! Illum et impedit corporis incidunt, culpa dolor rerum perspiciatis, rem cupiditate, magnam libero fugit qui modi atque. Tenetur, totam quaerat? Obcaecati molestias expedita nostrum sequi minus iste architecto sunt inventore excepturi! Libero fuga nam quod vitae velit, cupiditate temporibus quisquam sunt. Porro est quasi id dolorum quae maiores non maxime, error sunt iste? Earum eaque unde commodi fugiat aspernatur aliquid consectetur laboriosam. Rerum adipisci ex non, sit amet impedit, consequuntur ipsa libero itaque, quidem suscipit. Quis omnis nam, distinctio natus iure nesciunt accusamus tempore labore perspiciatis id porro corrupti eaque deleniti suscipit quidem mollitia et, quo libero. Asperiores nobis odio enim aspernatur non nemo recusandae ullam fugiat rerum consequatur commodi ex voluptatibus, aut iure laudantium cupiditate debitis dolorum, labore itaque a. Minima totam dolor, fugiat hic non quibusdam aspernatur molestiae quidem quos? Praesentium optio maiores eveniet nesciunt illum a, voluptatibus at doloremque! Dignissimos delectus nostrum aperiam quisquam dolore facere, non doloribus culpa doloremque expedita, sint quaerat at dolorem quibusdam illum quo voluptatibus placeat deserunt voluptate! Amet quos eum voluptatum ipsam architecto repellendus perspiciatis esse ratione nihil tempora corporis officia accusamus suscipit corrupti nostrum velit dolor, aut nisi numquam? Numquam natus vero reprehenderit voluptatibus at quas repudiandae ducimus, cum adipisci dolorem dolores aliquam quibusdam consequuntur. Culpa recusandae et pariatur delectus non, consequuntur mollitia cumque adipisci perferendis velit quae asperiores consequatur tenetur? Repudiandae sunt excepturi autem consectetur iure doloremque mollitia vitae repellendus ratione aut architecto magnam praesentium velit dolores, omnis nulla culpa sapiente, fugit quia quas. Ipsum id eum tempora voluptate, eligendi aliquid tenetur eius reprehenderit soluta dicta consequatur labore accusantium suscipit laboriosam! Odio quos possimus quia, autem incidunt vitae modi fugiat, reprehenderit nulla eaque iure laudantium, nostrum dolores quam dolore magnam doloribus pariatur laboriosam aliquam hic! Perferendis iusto quibusdam tempore, a est autem neque exercitationem atque inventore, enim provident vitae nam voluptate necessitatibus sint eius maiores odit error veritatis nulla fuga debitis quis! Asperiores, vel inventore explicabo neque ab nobis deserunt delectus veritatis quia atque. Facilis ad ipsam illum repellat, aliquam alias nam et ab quam quis, voluptates neque tenetur unde numquam expedita sapiente, mollitia possimus? Aperiam laudantium explicabo ad earum velit nobis, quaerat, est facilis nisi ex, sed totam delectus. Dignissimos omnis non ad cum modi ipsa cupiditate nam quo pariatur sint eaque accusantium repellat debitis dolor assumenda provident eos eum alias, odit magnam minus in tenetur fuga! Ut eum velit corporis nesciunt laudantium cumque beatae at cupiditate, animi veritatis maxime quam veniam dignissimos libero nemo, distinctio quia possimus aperiam accusamus magnam voluptatibus officia assumenda nisi eligendi. Doloribus officia est, iusto explicabo facere aliquid assumenda? Veritatis non, dolore sequi vel doloremque aliquid, odio ab, eligendi modi labore expedita eveniet alias tempore! Similique ad neque, harum debitis quisquam minus atque, iste, quam illo aut est distinctio aspernatur voluptatibus maxime. Temporibus, aut! Neque saepe placeat obcaecati. Commodi pariatur, non corrupti accusamus natus officiis, quis delectus a ducimus dignissimos eum voluptates asperiores ut quam labore. Amet autem quia, sunt iusto quas qui eius nesciunt? Fuga possimus temporibus nihil officiis, neque autem nulla quo tenetur, excepturi eveniet id quibusdam. Voluptate quasi optio inventore eum reprehenderit tempora ipsa voluptatibus illum quidem. Tempore corporis laboriosam, ducimus minima modi soluta et ipsam provident explicabo! Nostrum rerum unde vel porro ullam at repellat, quam molestiae itaque laudantium id omnis veritatis ab? Itaque ea impedit pariatur voluptates ullam minus excepturi aliquid obcaecati? Labore eveniet hic perspiciatis rem! Dolor magni, ipsa aut neque voluptatibus, tempore nihil cumque natus commodi cum aliquid, deserunt quibusdam incidunt. Iusto qui velit ex perspiciatis rerum a itaque dicta neque. Commodi ab fuga, temporibus facere corrupti atque incidunt aperiam eveniet molestias laborum qui voluptates tenetur in quam laudantium necessitatibus. Repellat vel alias libero, aut quibusdam consequatur consequuntur animi quasi saepe dicta? Impedit, architecto quis sapiente reprehenderit, deleniti doloremque enim officiis consequuntur voluptatibus aliquam ratione sequi vitae inventore repudiandae in ab magnam autem accusamus debitis neque commodi ipsum eius. Laboriosam mollitia ullam doloremque illo. Ab quos rem quasi minus totam dicta obcaecati a quam. Impedit distinctio velit perferendis aut, provident accusamus minus. Magni quisquam similique sunt nihil voluptates eius officiis asperiores voluptatibus labore cupiditate odio, animi sit repellendus. Consequuntur non doloribus maiores nostrum ipsum, ipsa explicabo illo recusandae quisquam, minus deleniti perferendis quaerat porro sequi ex. Ducimus ea magni quam voluptatem enim similique quas sit aliquid, sint veritatis sapiente nihil accusamus ad aperiam fugiat saepe, natus assumenda in quasi, sunt culpa voluptate. Cum minus quam accusamus maiores, doloribus culpa laboriosam architecto pariatur ratione quos amet sit nostrum quibusdam debitis, eius minima consequuntur dolores fuga expedita? Facilis necessitatibus nobis debitis molestias suscipit, ipsam enim labore alias, sint iste sequi tempore perferendis eveniet. Necessitatibus quas eligendi maiores ea veniam optio, sit aliquid eveniet id consequuntur magni nobis in quam architecto, nemo quod veritatis rem harum incidunt praesentium odit quisquam? Culpa dolores excepturi cupiditate aliquam quisquam necessitatibus optio voluptatum consequatur, maiores sequi placeat aliquid rem at veritatis impedit, temporibus facere mollitia sapiente, non animi nobis adipisci a pariatur. Facilis tempora nisi sequi iste, hic eligendi pariatur dicta maiores earum. Culpa reprehenderit deleniti voluptatum ducimus officia quidem provident veritatis, cum vel officiis. Repellat eum labore ratione ipsam magni nulla dolores illum quas minus. Saepe quae tempora maxime voluptatum est modi, distinctio excepturi fugiat veritatis iure tempore, neque corrupti accusantium architecto suscipit! Harum soluta quisquam voluptas cum, quaerat eaque vel velit corrupti incidunt consequuntur, nostrum, eligendi repellendus. Veniam, quod. Repellendus, mollitia iure assumenda exercitationem totam dicta corrupti illo repellat quia suscipit cupiditate, non officia possimus est. Quisquam atque dolore esse! Eligendi impedit delectus voluptatum reiciendis, quis recusandae perspiciatis! Iste vel, quidem perferendis consectetur nihil atque quae voluptas, sed aliquam quos eum nostrum soluta labore eveniet autem doloremque architecto itaque velit sapiente harum? Quis assumenda quibusdam at cum culpa facere, totam adipisci quas dignissimos. Enim, consequuntur voluptates!</p>
       

        </div>

        <div class="sencon-col">
            <div class="bar2">
                <img class="bar2-img" src="https://source.unsplash.com/1900x1400/?burger" alt="">

                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates, porro!</p>
               

            </div>

        </div>


    </div>

   
</body>
</html>

// CSS FILE

.parent{
    margin: auto;
    display: flex;
    width: 700px;
    gap: 30px;
   






}

.bar1{
    width: 700px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    /* margin: 20px auto; */




}

.bar2{
    border: solid black;
    border-width: 1px;
    /* margin: 20px auto; */
    width: 300px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    border-radius: 10px;
    padding: 3px;
    /* position: sticky;
    top: 0; */

}

.bar2-img{
    width: 100%;
    border-radius: 10px;




}      

.sencon-col{
    position: sticky;
    top: 0;
    align-self: flex-start;

}
Output:










Comments

Post a Comment

Popular posts from this blog

Array Mapping and Filters Assignment

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >         < title >Document</ title > </ head > < body >         < script src = "am.js" ></ script > </ body > </ html > // JAVA SCRIPT FILE const users = [     {         name : "Akash Sharma" ,         age : 17 ,         gender : "Male" ,         location : "Delhi, India"     },     {         name : "Neha Patel" ,         age : 16 ,         gender : "Female" ,         location : "Mumbai, India"     },     {         name : "Rajesh Singh" ,     ...
Read more

Rolling Dice

Image
  <! 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 >Document</ title > </ head > < body >     < div class = "container" >         < audio id = "diceaudio" src = "dice.mp3" ></ audio >         < h1 class = "heading" >Roll The Dice To Get Random Number</ h1 >         < p class = "desc" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, eligendi.</ p >         < div id = "dice" >6</ div >         < div class = "button" onclick = " roll ()" >Roll The Dice</ div >     </ div >     ...
Read more

Basics Of Java Script Till DOM Beggining

  <! 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 >Document</ title > </ head > < body >     < div class = "container" >         < h1 id = "title" >Welcome to css</ h1 >         < button id = "btn" class = "btn" onclick = " feedback ()" >Give Feedback</ button >         < input id = "inp1" type = "text" placeholder = "Enter Name" >         < input id = "inp2" type = "text" placeholder = "Enter Number" >     </ div >     < script src = "app.js" >         </ script >     </ body > </ html ...
Read more