Positioning Logo with Border [duplicate] - html

Question

This question already has answers here:
Text in Border CSS HTML
(10 answers)
Closed 3 years ago.
im trying to turn a design into code with html and css, but im stumped at a part in the hero section. What's the best way to position this logo with the border that stops around it.
attached is an image of the design i am trying to re-create

Answer 1

you can use before and after classes as
::before and ::after then add border and position it on the top of the corner left and right.
*{
margin: 0; padding: 0; box-sizing: border-box;
}
body{
font-family: Arial , Helvetica;
}
.banner-container{
min-height: 600px; height: 100vh; background-image: linear-gradient(to bottom, rgba(60, 53, 39, 0.6), rgba(60, 53, 39, 0.7)), url("https://images.pexels.com/photos/2015972/pexels-photo-2015972.jpeg?cs=srgb&dl=affection-baby-child-2015972.jpg&fm=jpg"); background-position: center; background-size: cover; background-repeat: no-repeat;
}
.banner-wrap{
margin: 0 auto; max-width: 960px; height: 100%; display: flex; align-items: center; justify-content: center;
}
.banner-box{
border-bottom: solid #A58758 4px; border-left: solid #A58758 4px; border-right: solid #A58758 4px; width: 500px; display: flex; flex-direction: column; align-items: center; position: relative; padding: 50px; margin-top: 100px;
}
.banner-box::before{
content: "";
width: 127px;
border: solid #A58758 2px;
position: absolute;
top: -4px;
left: -4px;
}
.banner-box::after{
content: "";
width: 127px;
border: solid #A58758 2px;
position: absolute;
top: -4px;
right: -4px;
}
.banner-box img{
position: absolute; top: -135px; padding: 5px;
}
.banner-box h2{
color: #fff; font-size: 2.5rem;
}
.banner-box h1{
color: #fff; margin: 5px 0; text-transform: uppercase; font-weight: 400; font-size: 3.8rem; letter-spacing: .4rem;
}
.banner-box h3{
color: #A58758; text-transform: uppercase; font-size: 2.3rem; font-weight: 400; letter-spacing: .6rem;
}
a{
background: #A58758; color: #fff; text-decoration: none; text-transform: uppercase; padding: 15px 25px; position: absolute; bottom: -25px; letter-spacing: .1rem;
}
<div class="banner-container">
<div class="banner-wrap">
<div class="banner-box">
<img src="https://www.thorndalemanors.com/wp-content/uploads/2019/01/thorndale-footer.svg">
<h2>Refined Luxury</h2>
<h1>Singles</h1>
<h3>In Brampton</h3>
Learn More
</div>
</div>
</div>
check its working properly

Answer 2

This is what I would do:
Wrapper element (.box-border) with two children: .box-border__top & .box-border__img
Put a border on .box-border but no top border
For the top border, use .box-border__top consisting of three elements:
.box-border__top:before: a line
.box-border__img: the logo, aligned in the center
.box-border__top:after: a line
To add spacing around the image, use .box-border__content with padding: 5em
body {
background: url(https://www.goodfreephotos.com/albums/vector-images/farm-landscape-illustration-vector-graphics.png);
background-size: cover;
}
.box-border { /* All side borders by the top */
border: .5em solid brown;
border-top: 0;
text-align: center;
}
.box-border__top { /* Align the image & borders */
display: flex;
}
.box-border__top:before,
.box-border__top:after {
content: '';
display: block;
width: 100%;
border-top: .5em solid brown; /* Sections of the top image */
}
.box-border__img { /* Center Image */
transform: translateY(-50%);
margin: 0 0 -99%;
}
/* Add some padding on the bottom */
.box-border__content { padding: 5em; }
<div class="box-border">
<div class="box-border__top">
<img class="box-border__img" src="https://upload.wikimedia.org/wikipedia/commons/6/66/Android_robot.png" width="100" height="90" />
</div>
<div class="box-border__content">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Robogarden_img.png/800px-Robogarden_img.png" width="300" />
</div>
</div>