asked on

Scroll Replication

Hi Experts,

How can I replicate the scroll from the right side of https://bigorski.org.mk/medija/foto/

So far I have

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>MPC Scroll</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <link rel="stylesheet"
              href="style.css" 
              type="text/css" media="all" property="stylesheet">
    </head>
    <body>
        <div id="link-scroll">

          <div class="svitok">
            <img id="imgSvitok" src="https://bigorski.org.mk/wp-content/themes/bigorski/assets/images/decor/drven-svitok.png" alt="Дрвен свиток">
          </div>
            
            <br /> abc
            <br /> abc
            <br /> abc
            
        </div> <!-- /#link-scroll -->
    </body>
</html>

Open in new window


#link-scroll{
    outline: 2px dashed red;
    position: relative; 
    overflow: visible; 
    box-sizing: border-box; 
    min-height: 1px;
    padding: 30px 15px;
    background: #e1cea4;
    width: 262px;
}


#imgSvitok{
    width: 390px;
    height: 154px;
}

Open in new window

but its way off

User generated image

What am I missing.

Yes, I have permission to replicate this.

ASKER CERTIFIED SOLUTION

David H.H.Lee

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Scott Fell

Use the browser console. If you right-click on the item and select, "inspect" you can see it is a simple scroll made up by using a gif image at the top of the div