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>
svg
tiene un ancho de 1400 pixel. Es eso el problema?.vector
que no está en el HTML. Fue un intento previo?