Positioning Logo with Border

Question

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

Please include the (minimal) CSS and HTML that you are using. Also indicate how th is image is different from how you expected it to appear. — Ray Butterworth, Apr 12 '19 at 01:15
please explain further about what you want based on the image. And show us what you've done so far then we will help. We can't just imagine your code — JkAlombro, Apr 12 '19 at 01:38

score 3 · Answer 1 · edited Apr 12 '19 at 06:11

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>
      <a href="#">Learn More</a>
    </div>
  </div>
</div>

check its working properly

score 1 · Answer 2 · answered Apr 12 '19 at 02:43

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>

Positioning Logo with Border

2 Answers2