<link rel="stylesheet" type="text/css" href="css/style.min.css"><link rel="preload" href="css/style.min.css" as="style">
.two_title p {
display: inline-block;
color: #222222;
font-family:Raleway, sans-serif;
font-size:213%;
font-weight:bold;
background-color: #FEFEFE;
margin-left: 50%;
transform: translate(-50%, 0);
}
p:after {
content: '';
display: block;
border-bottom: 2px solid black;
}.button <-- это ваша кнопка
какие-то стили
этой кнопки
.content <-- это блок, в котором она будет находится на обеих страницах
какие-то стили
этого блока
&__contact-button
margin 40px auto
&__index-button
margin 20px 30px<button class="button content__index-button">a</button><button class="button content__contact-button">b</button><div class="container">
<div class="a"></div>
<div class="b"></div>
</div>.container {
width: 500px;
height: 500px;
position: relative;
}
.a {
display: none;
width: 500px;
height: 500px;
background-color: black;
clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 10%);
position: absolute;
top: 0;
left: 0;
}
.b {
width: 494px;
height: 494px;
background-color: yellow;
position: absolute;
top: 3px;
left: 3px;
clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 10%);
}
.container:hover .a {
display: block;
}<p>Date: <input type="text" id="datepicker"></p>$( function() {
$( "#datepicker" ).datepicker();
} );<div class="container">
<aside></aside>
<aside></aside>
<main></main>
<aside></aside>
<aside></aside>
</div>.container {
width:900px;
height:200px;
display:flex;
flex-direction:column;
flex-wrap:wrap;
}
aside {
width:300px;
height:100px;
}
main {
width:300px;
height:200px;
}