How to make a website layout overlapping?

How to make a website layout overlapping?
0

#1

Hi everyone, I’m learning to make a website. So I’m designed a home page with style layout overlapping by Photoshop (just drag and drop, easy). But when I want to use html and css to make it look like my design, I can’t find the way to create layouts like that :

I’m using boostrap 4, please help me, thanks <3


#2

take the basic html and css tutorials bruh.


#3

image

I’m done with it :frowning: Make sure that it’s can’t resolve my problem…


#4

Have you been working on the problem on codepen or someplace? what have you got so far. you gotta come with something specific.

Heres a start. try this in codepen.


<head>
<style>
    #top {
        margin: 0 100px 0 100px;
        height: 300px;
        background-color: blue;
    }
    #bottom {
         margin: 0 100px 0 100px;
          height:200px;
        background-color: green;
    }
</style>
</head>
<body>
<div>
    <div id="top">Top area</div>
    <div id="bottom">Bottom area</div>
</div>
</body>

#5

Ohh, sound like you still can’t know my problem. I mean a div tag overlapping another div tag :frowning:


#6

There’re lots of ways to do it and it depends on what you want to accomplish.

From the image you provided, maybe you can use a negative margin and position the div's with z-index.

I made an example for you: https://codepen.io/ghukahr/pen/QJNLGa


#7

Hi, your link no longer available, I’m sorry that I just check my thread until now :frowning:


#8

Sorry about that, I just cleaned up my code pen :frowning:

I did another one:


#9

thank you <3 :heart_eyes::heart_eyes::heart_eyes:


#10

ok, thanks for your time :smiling_face_with_three_hearts::smiling_face_with_three_hearts::smiling_face_with_three_hearts: