マップ

デモ

See the Pen map by logsuke (@design-list) on CodePen.

コード

<section>
        <div class="section-container">
            <div class="bg content-1">
                <div class="item"></div>
                <div id="map" class="item">
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3241.681397502151!2d139.72745486566797!3d35.660220530199226!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1658375684754!5m2!1sja!2sjp"
                        width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </div>
        </div>
    </section>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
  }
  
  :root {
    --nav-height: 8rem;
    --max-width: 1024px;
    --container-padding: 0 4rem;
    --gap: 2rem;
  }
  
  /* section */
  .section-container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
  }
  
  .bg {
    border: 5px solid rgb(55, 53, 53);
    position: relative;
    background-image: radial-gradient(#e331dd 2px, #e5e5f7 2px);
    background-size: 40px 40px;
  }
  
  .content-1 {
    display: flex;
    gap: var(--gap);
    padding: 1rem;
    position: relative;
  }
  
  .item {
    width: 100%;
    height: 80vh;
    background: rgba(233, 181, 255, 0.608);
    position: relative;
  }
  
  .item::before {
    content: 'item';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: black;
    font-size: 2rem;
  }

  /* map */
  #map {
    flex-basis:600px;
    flex-shrink: 0;
  }

  #map iframe {
    width: 100%;
    height: 100%;
  }
  
  @media screen and (max-width: 768px) {
    .content-1 {
      flex-direction: column;
    }
  }