Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Oi, tenho um flip para virar a imagem, bem pequeno e funcional, mas ao colocar um rodapé, ele simplesmente invade esse rodapé
Creio que tem haver alguma coisa com o position: absolute, mas não entendo nada de css
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
</head>
<body>
<!-- CSS DO FLIP -->
<style>
.flip-container:hover .flipper{
transform: rotateY(180deg);
/* se quiser uma animação na vertical,
troque por rotateX(180deg)
*/
}
.flipper{
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
} position: absolute;
width: 100%;
height: 100%;
}
.back{
transform: rotateY(180deg);
}
</style>
<center>
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/zohO24tyN2WB8etR3nhZPvhf.png" />
</div>
<div class="back">
<img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/XkAkTVqVPbLB3cK5njqdun66.png" />
</div>
</div>
</div>
<!-- AQUI COMEÇA O RODAPÉ --><!-- CSS DO RODAPÉ -->
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); margin: 0;
padding: 0;
color: #d9d9d9;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.content1{
position: relative;
margin: 130px auto;
text-align: center;
padding: 0 20px;
} font-size: 2.5rem;
font-weight: 600;
color: #202020;
} font-size: 2.1875rem;
font-weight: 600;
color: #202020;
} position: fixed;
bottom: 0px;
width: 100%;
background: #111;
}
.main-content{
display: flex;
} flex-basis: 50%;
padding: 10px 20px;
} font-size: 1.125rem;
font-weight: 600;
text-transform: uppercase;
} margin: 20px 0 0 0;
position: relative;
} position: absolute;
content: '';
top: -10px;
height: 2px;
width: 100%;
background: #1a1a1a;
} position: absolute;
content: '';
height: 2px;
width: 15%;
background: #f12020;
top: -10px;
} text-align: justify;
} margin: 20px 0 0 0;
} padding: 0 2px;
} height: 40px;
width: 40px;
background: #1a1a1a;
line-height: 40px;
text-align: center;
font-size: 18px;
border-radius: 5px;
transition: 0.3s;
} background: #f12020;
} font-size: 1.4375rem;
background: #1a1a1a;
height: 45px;
width: 45px;
line-height: 45px;
text-align: center;
border-radius: 50%;
transition: 0.3s;
cursor: pointer;
} background: #f12020;
} font-size: 1.0625rem;
font-weight: 500;
padding-left: 10px;
} margin: 15px 0;
} font-size: 1.0625rem;
margin-bottom: 2px;
color: #656565;
} margin-top: 10px;
} width: 100%;
font-size: 1.0625rem;
background: #151515;
padding-left: 10px;
border: 1px solid #222222;
} outline-color: #3498db;
} height: 35px;
} margin-top: 10px;
} height: 40px;
width: 100%;
border: none;
outline: none;
background: #f12020;
font-size: 1.0625rem;
font-weight: 500;
cursor: pointer;
transition: .3s;
} background: #000;
} padding: 5px;
font-size: 0.9375rem;
background: #151515;
} color: #656565;
} color: #f12020;
text-decoration: none;
} text-decoration: underline;
} position: relative;
bottom: 0px;
}
.main-content{
flex-wrap: wrap;
flex-direction: column;
}
.main-content .box{
margin: 5px 0;
}
}
</style>
<div class="content1">
<div class="text">
Fully Responsive Footer Section</div>
<div class="p">
HTML and CSS (Flexbox)</div>
</div>
<footer>
<div class="main-content">
<div class="left box">
<h2>
About us</h2>
<div class="content">
<p>
CodinNepal is a YouTube channel where you can learn web designing, web development, ui/ux designing, html css tutorial, hover animation and effects, javascript and jquery tutorial and related so on.</p>
<div class="social">
<a href="https://facebook.com/coding.np"><span class="fab fa-facebook-f"></span></a>
<a href="#"><span class="fab fa-twitter"></span></a>
<a href="https://instagram.com/coding.np"><span class="fab fa-instagram"></span></a>
<a href="https://youtube.com/c/codingnepal"><span class="fab fa-youtube"></span></a>
</div>
</div>
</div>
<div class="center box">
<h2>
Address</h2>
<div class="content">
<div class="place">
<span class="fas fa-map-marker-alt"></span>
<span class="text">Birendranagar, Surkhet</span>
</div>
<div class="phone">
<span class="fas fa-phone-alt"></span>
<span class="text">+089-765432100</span>
</div>
<div class="email">
<span class="fas fa-envelope"></span>
<span class="text">abc@example.com</span>
</div>
</div>
</div>
<div class="right box">
<h2>
Contact us</h2>
<div class="content">
<form action="#">
<div class="email">
<div class="text">
Email *</div>
<input type="email" required>
</div>
<div class="msg">
<div class="text">
Message *</div><changeit id=".msgForm" rows="2" cols="25" required></changeit> <!-- replace this changeit name to textarea -->
<br />
<div class="btn">
<button type="submit">Send</button>
</div>
<div class="bottom">
<center>
<span class="credit">Created By <a href="https://youtube.com/c/codingnepal">CodingNepal</a> | </span>
<span class="far fa-copyright"></span> 2020 All rights reserved.
</center>
</div>
</body>
</html>Carregando comentários...