Я все еще изучаю основы.
Я создаю страницу в Bootstrap 4. Навигация по заголовку в порядке, затем анимированный SVG-файл, затем текст H1, который исчезает (через animate.css).
Исходя из SVG и H1, я хочу 3 карты, однако, когда я их кодирую, они просто перекрывают SVG.
Как изменить код так, чтобы карты следовали из svg и h1, а не перекрывали их?
Я сам попробовал оба кодирования в картах, затем попытался скопировать некоторый код шаблона из codepen, ни одна из них не сработала.
Я прикрепил свой кодовый блок, я закомментировал раздел карточек, если вы откомментируете его, вы поймете, что я имею в виду.
https://codepen.io/john-from-tamworth/pen/dyyZQpd
HTML-код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simba Barbers</title>
<!--CSS Style Sheets-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
<a class="navbar-brand" href="#">
<img src="clippers 1.png" width="30" height="30" alt="logo">
Simba
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-list-2" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-list-2">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</nav>
<div class="section">
<div class="container">
<svg id="logo"
width="100%" height="auto" viewBox="0 0 669 170" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M58.174 167C47.6428 167 38.1801 165.16 29.7857 161.48C21.5439 157.646 15.0574 152.432 10.326 145.839C5.59463 139.092 3.15262 131.348 3 122.607H25.207C25.9701 130.121 29.0226 136.485 34.3645 141.698C39.859 146.759 47.7955 149.289 58.174 149.289C68.0946 149.289 75.8785 146.835 81.5256 141.928C87.3254 136.868 90.2252 130.428 90.2252 122.607C90.2252 116.474 88.5464 111.49 85.1886 107.656C81.8309 103.823 77.6337 100.909 72.597 98.9158C67.5604 96.9224 60.7686 94.7756 52.2216 92.4754C41.6905 89.7153 33.2198 86.9551 26.8095 84.1949C20.5519 81.4348 15.1337 77.1412 10.5549 71.3142C6.12881 65.3338 3.91575 57.36 3.91575 47.3927C3.91575 38.6522 6.12881 30.9084 10.5549 24.1613C14.9811 17.4142 21.1624 12.2006 29.0989 8.52033C37.188 4.84011 46.4218 3 56.8003 3C71.7576 3 83.9676 6.75689 93.4304 14.2707C103.046 21.7845 108.464 31.7517 109.685 44.1725H86.7912C86.028 38.0388 82.8229 32.6718 77.1758 28.0715C71.5287 23.3179 64.05 20.9411 54.7399 20.9411C46.0403 20.9411 38.9432 23.2412 33.4487 27.8415C27.9542 32.2885 25.207 38.5755 25.207 46.7027C25.207 52.5297 26.8095 57.2833 30.0146 60.9635C33.3724 64.6438 37.417 67.4806 42.1483 69.474C47.0323 71.3142 53.8242 73.461 62.5238 75.9144C73.0549 78.8279 81.5256 81.7415 87.9359 84.655C94.3461 87.4151 99.8406 91.7854 104.419 97.7658C108.998 103.593 111.288 111.567 111.288 121.687C111.288 129.508 109.227 136.868 105.106 143.769C100.985 150.669 94.8803 156.266 86.7912 160.56C78.702 164.853 69.163 167 58.174 167Z" stroke="white" stroke-width="5"/>
<path d="M162.779 5.07013V165.39H141.945V5.07013H162.779Z" stroke="white" stroke-width="5"/>
<path d="M360.144 6.2202V165.39H339.311V46.7027L286.655 165.39H272.004L219.119 46.4726V165.39H198.286V6.2202H220.721L279.33 137.788L337.938 6.2202H360.144Z" stroke="white" stroke-width="5"/>
<path d="M475.375 82.8149C481.175 83.7349 486.441 86.1117 491.172 89.9453C496.056 93.7789 499.872 98.5325 502.619 104.206C505.519 109.88 506.969 115.937 506.969 122.377C506.969 130.504 504.908 137.865 500.787 144.459C496.666 150.899 490.638 156.036 482.701 159.87C474.917 163.55 465.684 165.39 455 165.39H395.476V5.07013H452.71C463.547 5.07013 472.781 6.91024 480.412 10.5905C488.043 14.1173 493.767 18.9476 497.582 25.0814C501.398 31.2151 503.306 38.1155 503.306 45.7826C503.306 55.2898 500.711 63.187 495.522 69.474C490.485 75.6078 483.77 80.0547 475.375 82.8149ZM416.309 74.3043H451.337C461.105 74.3043 468.66 72.0042 474.002 67.4039C479.344 62.8036 482.014 56.4399 482.014 48.3128C482.014 40.1856 479.344 33.8219 474.002 29.2216C468.66 24.6213 460.952 22.3212 450.879 22.3212H416.309V74.3043ZM453.168 148.139C463.547 148.139 471.636 145.685 477.436 140.778C483.235 135.871 486.135 129.048 486.135 120.307C486.135 111.413 483.083 104.436 476.978 99.3759C470.873 94.1622 462.707 91.5554 452.481 91.5554H416.309V148.139H453.168Z" stroke="white" stroke-width="5"/>
<path d="M630.201 129.738H560.604L547.784 165.39H525.806L583.498 5.99018H607.537L665 165.39H643.022L630.201 129.738ZM624.249 112.717L595.403 31.7518L566.557 112.717H624.249Z" stroke="white" stroke-width="5"/>
</svg>
</div>
</div>
<h1 class="animated fadeIn delay-5s">BARBERING ACADEMY</h1>
<!-- <div class="container-fluid">
<div class="row">
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="//placehold.it/720x350" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="//placehold.it/720x350" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="//placehold.it/720x350" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Код CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: poppins;
background: linear-gradient(228deg, #3f3f3f, #6d6a72);
background-size: 400% 400%;
-webkit-animation: AnimationName 7s ease infinite;
-moz-animation: AnimationName 7s ease infinite;
animation: AnimationName 7s ease infinite;
}
.animated {
position: absolute;
left: 50%;
transform: translate(-50%);
margin-top: 35%;
text-shadow: 0 0 32px white;
color: white;
}
@-webkit-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
#logo{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: fill 3s ease forwards 4.5s;
}
#logo path:nth-child(1){
stroke-dasharray:786.734;
stroke-dashoffset:786.734;
animation: line-anim 4s ease forwards;
}
#logo path:nth-child(2){
stroke-dasharray:362.307;
stroke-dashoffset:362.307;
animation: line-anim 4s ease forwards 0.3s;
}
#logo path:nth-child(3){
stroke-dasharray:1204.95;
stroke-dashoffset:1204.95;
animation: line-anim 4s ease forwards 0.6s;
}
#logo path:nth-child(4){
stroke-dasharray:972.413;
stroke-dashoffset:972.413;
animation: line-anim 4s ease forwards 0.9s;
}
#logo path:nth-child(5){
stroke-dasharray:781.918;
stroke-dashoffset:781.918;
animation: line-anim 4s ease forwards 1.2s;
}
@keyframes line-anim {
to{
stroke-dashoffset: 0;
}
}
@keyframes fill{
from {
fill: transparent;
}
to{
fill: white;
}
}