0

Muy buenas, diseñé una landing page en figma y luego la transcribi a html y css. Hasta ese punto todo excelente, pero al momento de incorporar mi svg, este no se adapta totalmente al sitio.

Ya he probado con ajustar las dimensiones en css dando como resultado que la página principal cambie su tamaño a valores no deseados y el SVG no se vea de forma completa. Añado capturas de la comparación en Figma y el resultado en el navegador web. Tambien adjunto el html y css de la página

(https://i.sstatic.net/egmGs.jpg)

body {
    font-family: 'Poppins', sans-serif; 
  }
  .gradient-custom {
    /* fallback for old browsers */
    background: #182141;
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, rgba(24, 33, 65, 1), rgba(48, 77, 120, 1));
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, rgba(24, 33, 65, 1), rgba(48, 77, 120, 1));
  }
  .vector{
    background-image: url(../public/images/Vector\ 1.svg);
    background-color: black;
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: contain; 
  }

  .navbar .navbar-brand{
    font-size: 40px;
    margin-left: 52px;
  }
  .navbar .nav-link{
    font-size: 20px;
    margin-right: 45px;
  }
  .navbar a{
    color:white !important;
  }
  .section-1{
    background-image: url(../public/images/Vector.png);
  }
  .section-1 h2{
    margin-top: 213px;
    margin-left: 50px;
    font-size: 45px;
    width: 47%;
  }
  .section-1 p{
    margin-top: 33px;
    margin-left: 50px;
    font-size: 20px;
    width: 614px;
  }
  .section-1 .soldier-image{
    margin-left: 50.4%;
  }
  .section-1 .btn-warning{
    margin-left: 50px;
    margin-top:33px;
    border-radius: 30px;
    font-style: normal;
    font-size: 20px;
    padding: 17px,44px;
  }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="views/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="views/style.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>

<body class="gradient-custom  ">
    <nav class="navbar navbar-expand-lg navbar-light ">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">RT:STATS</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
                aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav ms-auto">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                    <a class="nav-link" href="#">Contact</a>
                    <a class="nav-link" href="#">Sign in via Steam</a>
                </div>
            </div>
        </div>
    </nav>
    <section class="section-1">
        <div class="container-fluid ">
            <div class="row">
                <div class="col-6 ">
                    <h2 class="text-white">Stop playing for win Start playing for learning</h2>
                    <p class="text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero
                        et velit interdum, ac aliquet odio mattis.</p>
                    <a href="" class="btn btn-warning">GET STARTED</a>
                    <img src="public/images/Vector 1.svg" alt="">
                </div>
            </div>
        </div>
    </section>
</body>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</html>

SVG:

<svg width="1400" height="428" viewBox="0 0 1400 428" fill="none"  xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_4_139)">
<path d="M0 388.8L56.0192 421L107.729 406.178L149.384 364.493H196.285L276.071 310.563L310.335 355.578C316.992 355.578 383.516 324.4 383.516 324.4L456.293 335.133L496.83 283.977L596.196 301.448L675.983 258.531L788.565 241.82L819.403 268.406L886.463 193.207L988.766 180.294C1016.01 166.621 1071.88 88.1559 1077.36 87.2444C1082.85 86.3329 1126.96 94.2072 1148.34 98.2584L1192.68 169.022L1247.26 127.111L1297.54 116.378L1314.77 40.2223L1400 7" stroke="#E3B02B" stroke-width="5"/>
</g>
<defs>
<filter id="filter0_d_4_139" x="-5.24585" y="0.670715" width="1410.15" height="427.024" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.890196 0 0 0 0 0.690196 0 0 0 0 0.168627 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4_139"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4_139" result="shape"/>
</filter>
</defs>
</svg>

2
  • El svg tiene un ancho de 1400 pixel. Es eso el problema? Commented el 5 abr. 2022 a las 5:53
  • Tienes en la hoja de estilos una clase .vector que no está en el HTML. Fue un intento previo?
    – ffflabs
    Commented el 5 abr. 2022 a las 10:20

1 respuesta 1

0

En la maqueta se observa que la línea, que vamos a llamar "ForeCast" (para no decirle "svg" siendo que hay dos y se llaman casi igual)

  • empieza en la esquina inferior izquierda,
  • cubre todo el ancho del browser
  • su extremo superior derecho está visiblemente más arriba que el botón

Así que la banda central y el forecast deben estar diseñados para superponerse sin estorbarse, y el forecast debe bajar tanto como sea necesario y extenderse también cuanto sea necesario. Pero en tu código

  1. La imagen va a continuación de la banda central. No es capaz de superponerse
  2. No baja más que lo que "la empuja" la banda central.
  3. No se extiende a todo lo ancho sino que le pones el ancho natural del SVG.

TL/DR basta con darle estilo al forecast

.forecast {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
}

fixed lo deja libre para superponerse con lo que quiera. bottom y left en 0 lo fijan en la esquina inferior derecha width:100% lo hace ocupar todo el ancho disponible. Finalmente, si se superponen la imagen impedirá clickear el botón, así que le ponemos pointer-events:none; y con eso simplemente no interactúa con el mouse ni touch.

Y aquí va:

body {
  font-family: 'Poppins', sans-serif;
}

.gradient-custom {
  /* fallback for old browsers */
  background: #182141;
  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(to right, rgba(24, 33, 65, 1), rgba(48, 77, 120, 1));
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(to right, rgba(24, 33, 65, 1), rgba(48, 77, 120, 1));
}

.navbar .navbar-brand {
  font-size: 40px;
  margin-left: 52px;
}

.navbar .nav-link {
  font-size: 20px;
  margin-right: 45px;
}

.navbar a {
  color: white !important;
}

.section-1 {
  background-image: url(../public/images/Vector.png);
}

.section-1 h2 {
  margin-top: 213px;
  margin-left: 50px;
  font-size: 45px;
  width: 47%;
}

.section-1 p {
  margin-top: 33px;
  margin-left: 50px;
  font-size: 20px;
  width: 614px;
}

.section-1 .soldier-image {
  margin-left: 50.4%;
}

.section-1 .btn-warning {
  margin-left: 50px;
  margin-top: 33px;
  border-radius: 30px;
  font-style: normal;
  font-size: 20px;
  padding: 17px, 44px;
}

.forecast {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="views/style.css">
</head>

<body class="gradient-custom  ">
  <nav class="navbar navbar-expand-lg navbar-light ">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">RT:STATS</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav ms-auto">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
          <a class="nav-link" href="#">Contact</a>
          <a class="nav-link" href="#">Sign in via Steam</a>
        </div>
      </div>
    </div>
  </nav>
  <section class="section-1">
    <div class="container-fluid ">
      <div class="row">
        <div class="col-6 ">
          <h2 class="text-white">Stop playing for win Start playing for learning</h2>
          <p class="text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.</p>
          <a href="" class="btn btn-warning">GET STARTED</a>
          <img src="https://svgshare.com/i/fxw.svg" class="forecast" alt="">
        </div>
      </div>
    </div>
  </section>
</body>

</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.