div
элементы. Уберите все эти div
элементы, которые находятся внутри col
<div class="container my-2">
<div class="row row-cols-1 row-cols-mb-2 row-cols-lg-3">
<div class="col">
<div class="card">
<img src="Sasha.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="Sasha.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="Sasha.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="/практика номер 3/style.css" type="text/css">
json_decode
в PHP для преобразования строки JSON в объект PHP. Затем вы можете обратиться к свойству message
этого объекта, чтобы получить значение сообщения:$json = '{"result":404,"message":"NOT FOUND","data":{}}';
$data = json_decode($json);
echo $data->message; // выведет "NOT FOUND"
fill
в path
<svg width="39" height="34" viewBox="0 0 39 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.3029 22.2175L14.6578 31.2472C15.5808 31.2472 15.9805 30.8527 16.4599 30.3789L20.7873 26.2634L29.754 32.798C31.3985 33.71 32.5572 33.2297 33.0008 31.2925L38.8865 3.84768L38.8882 3.84606C39.4098 1.42693 38.009 0.480945 36.4068 1.07441L1.81054 14.2551C-0.550586 15.1671 -0.514836 16.477 1.40916 17.0704L10.254 19.8081L30.7989 7.01551C31.7658 6.37838 32.6449 6.7309 31.9218 7.36803L15.3029 22.2175Z" />
</svg>
svg {
fill: blue
}
svg:hover {
fill: green;
}
CSS-свойство z-index определяет положение позиционированного элемента и его дочерних элементов или флекс-элементов по оси z.
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");
body {
margin: 0;
}
* {
font-family: "Roboto", sans-serif;
}
a {
text-decoration: none;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header-content {
position: relative;
display: flex;
flex-direction: row;
height: 80px;
align-items: center;
background-color: #fff;
z-index: 100;
}
.mobilmenu {
display: none;
}
.header-logo {
width: 15%;
font-size: 24px;
}
.header-menu {
width: 70%;
}
.header-menu ul {
padding: 0;
margin: 0;
text-align: center;
}
.header-menu li {
display: inline;
padding: 0 15px;
}
.header-menu a {
color: #868e96;
transition: color 0.5s ease;
font-size: 18px;
}
.header-menu a:hover {
color: #000;
}
.header-call {
width: 15%;
}
.header-call a {
color: #000;
font-size: 18px;
}
.header-mobil-menu {
display: none;
}
@media (max-width: 767px) {
.burger {
display: block;
width: 50px;
height: 50px;
border: 0;
background: transparent;
cursor: pointer;
}
.burger__icon {
display: block;
position: relative;
width: 100%;
height: 5px;
background: #000;
transition: background 0s 0.2s;
}
.burger__icon:after,
.burger__icon:before {
position: absolute;
background: #000;
content: "";
height: 5px;
width: 100%;
left: 0;
top: 10px;
transition-duration: 0.2s, 0.2s;
transition-delay: 0.2s, 0s;
transition-property: top, transform;
}
.burger__icon:before {
top: -10px;
}
.burger.active .burger__icon {
background: transparent;
}
.burger.active .burger__icon:after,
.burger.active .burger__icon:before {
top: 0;
transform: rotate(45deg);
transition-delay: 0s, 0.2s;
}
.burger.active .burger__icon:before {
transform: rotate(-45deg);
}
.header-mobil-menu {
position: relative;
display: flex;
width: 50%;
z-index: 100;
text-align: left;
justify-content: flex-end;
background-color: #fff;
}
.header-content {
padding: 0 10px;
}
.header-logo {
position: relative;
width: 50%;
z-index: 100;
background-color: #fff;
}
.header-menu {
display: none;
}
.header-call {
display: none;
}
.mobilmenu {
display: block;
position: absolute;
background-color: #fff;
width: 100%;
height: 200px;
top: -120px;
transition: top 0.4s ease;
z-index: 1;
}
.mobilmenu.active {
display: block;
position: absolute;
top: 80px;
top: 80px;
}
.mobilmenu a {
color: #000;
}
.mobilmenu li {
list-style: none;
padding-bottom: 15px;
}
}