Placing a transparent div with borders on top of another transparent div with borders
تبليغسؤال
يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
Please see the image below.
I want to make a contact container that has a square Contact header. I want the contact header in the middle of the container halfway out of the container. Problem is, both the header and the container have to be transparent and they have borders. The borders of the container cut right through the contact header. I’m having trouble removing the borders from inside the header.
<style>* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 100%;
}
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
padding-top: 30px;
padding-bottom: 20px;
}
.profile {
width: 480px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
ul {
list-style-type: none;
}
li {
display: inline;
}
.contact {
margin-bottom: 5px;
}
.container {
border: 2px solid gray;
}
.contact {
width: 40%;
margin-top: -23px;
border: 2px solid gray;
}
.header {
display: flex;
align-items: center;
justify-content: center;
}
h2 {
font-size: 25px;
text-align: center;
margin-top: 5px;
margin-bottom: 5px;
}
.container {
height: 380px;
}
.content {
width: 400px;
height: 70%;
margin: 0 auto;
}
.social {
display: flex;
align-items: center;
justify-content: center;
}
</style>
<div class=”profile”>
<section class=”container”>
<div class=”header”>
<div class=”contact”>
<h2>Contact</h2>
</div>
</div>
<div class=”content”>
<p class=”about”>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae distinctio libero repudiandae consequatur qui, vel ad error animi doloremque magni cupiditate officia officiis et? Vel voluptatem reiciendis placeat cumque officiis!</p>
</div>
<div class=”social”>
<ul>
<li><a href=”#”>Twitter</a></li>
<li><a href=”#”>Behance</a></li>
<li><a href=”#”>Instagram</a></li>
</ul>
</div>
</section>
</div>
أضف إجابة