Bootstrap
help with html and css #31525
Unanswered
HackerLord0
asked this question in
General
help with html and css
#31525
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Hello everyone, I would appreciate your help with my following code:
html
`<!doctype html>
<title>Responsive Box Model Using CSS Flex</title>CSS
`@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');
*
{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
background: #16384c;
}
.container
{
position: relative;
width: 1100px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 30px;
}
.container .card
{
position: relative;
max-width: 300px;
height: 215px;
background: #fff;
margin: 30px 10px;
padding: 20px 15px;
display: flex;
flex-direction: column;
box-shadow: 0 5px 20px rgba(0,0,0,0.5);
transition: 0.3s ease-in-out;
}
.container .card:hover
{
height: 420px;
}
.container .card .imgBx
{
position: relative;
width: 260px;
height: 260px;
top: -60px;
left: 20px;
z-index: 1;
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}
.container .card .imgBx img
{
max-width: 100%;
border-radius: 4px;
}
.container .card .content
{
position: relative;
margin-top: -140px;
padding: 10px 15px;
text-align: center;
color: #111;
visibility: hidden;
opacity: 0;
transition: 0.3s ease-in-out;
}
.container .card:hover .content
{
visibility: visible;
opacity: 1;
margin-top: -40px;
transition-delay: 0.3s;
}`
I need all the content to be centered on the page, however it is aligned to the top of the page
Beta Was this translation helpful? Give feedback.
All reactions