How to create a frame with text mid page? [closed]

Question

How to create a frame with text mid page? [closed]

Navigation

#1 by (0 votes)

2

HowdoIcreateframesthatarethesame,alsowithabitoftransparency?

I was kind of doing this basic work.

html classes css div

asked by anonymous 10.05.2018 / 21:03

1 answer

Downloading large PHP files? How to get the sense of the device using gyroscope and accelerometer? Ionic 3

score 0 · Accepted Answer

Here is a simple example that might help you out, but as I mentioned in the comment there are a thousand ways to do this, and the image probably uses some Bootstrap framework.

In this example I used flex-box , because everything is fine responsive and does not need to clearfix as in the case of fleets that may already be considered an old practice of making a Grid ...

The only detail is because of the transparency in the Box, that if you put in the parent element everything inside it tb assumes the transparency, so to avoid this I created the transparent box using a ::after pseudo element. p>

See how it went:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    margin: 1rem auto;
    background-color: red;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    background-image: url(http://placecage.com/600/200);
    background-size: cover;
}
.box {
    width: calc(100% / 3);
    height: auto;
    box-sizing: border-box;
    padding: 1rem;
    margin: 1rem;
    position: relative;
    z-index: 2;
}
.box span::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #fff;
    opacity: 0.4;
    top: 0;
    left: 0;
    z-index: -1;
}

<div class="container">
    <div class="box">
        <span>Box 1</span>
    </div>
    <div class="box">
        <span>Box 2</span>
    </div>
    <div class="box">
        <span>Box 3</span>
    </div>
</div>