0

I'm trying yo make this form using html and css using the grid

html css form

the all code is here

codepen

this is th css code and you can see the html code in the link above

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.container {
    padding: 40px;
    font-family: 'Lato', sans-serif;
    display: grid;
    grid-template-columns: repeat(3, calc(100%/3));
    grid-template-rows: repeat(3, calc(100%/3));
    grid-gap: 15px;
}

.container div {
    border-radius: 5px;
    color: #fff;
    position: relative;
}

.container h3,
.container p {
    letter-spacing: 1px;
    margin-bottom: 10px;
    line-height: 1.5;
}

.container h3 {
    text-transform: uppercase;
}

.container a {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    padding: 10px;
    display: inline-block;
    position: absolute;
    bottom: -25%;
}

.a-1 {
    background-color: #fdc731;
}

.a-2 {
    background-color: #f56464;
}

.container img {
    width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.container .text-container {
    padding: 20px;
}

.child-1,
.child-3 {
    background-color: #f3b917;
}

.child-1 {
    grid-row: 1/ span 2;
}

.child-3 {
    grid-row: 1/ span 2;
    grid-column: 3;
}

.child-2 {
    background-color: #ff4343;
    text-align: center;
    padding: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.child-2 p {
    font-size: 20px;
}

.child-4,
.child-6 {
    background-color: #00800085;
    text-align: center;
}

.child-5 {
    background-color: #fb7878;
        grid-row: 2 / span 3;
}

.child-6 {
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: flex-end;
}

.child-4 {
        grid-row: 3 / span 2;
}

the problem is with the last column that I can't make it like the picture above the last column doesn't take the height to be same as the picture any idea how to make it ?

how can i fix this problem ?

user3018000
  • 337
  • 1
  • 2
  • 13

0 Answers0