<section class="section-date" id="form">
<div class="container">
<div class="date-block">
<div class="date-item ">
<div class="date-day">03</div>
<div class="date-month">
<div class="date-month-text">августа</div>
<div class="date-status">
<span class="date-checkbox"></span>
<span class="date-status-text">ближайший курс</span>
</div>
</div>
</div>
<div class="date-item active">
<div class="date-day">05</div>
<div class="date-month">
<div class="date-month-text">октября</div>
<div class="date-status">
<span class="date-checkbox"></span>
<span class="date-status-text">следующий курс</span>
</div>
</div>
</div>
<div class="date-item">
<div class="date-day">30</div>
<div class="date-month">
<div class="date-month-text">ноября</div>
<div class="date-status">
<span class="date-checkbox"></span>
<span class="date-status-text">следующий курс</span>
</div>
</div>
</div>
</div>
<div class="form-block">
<h3 class="form-block-title">Запишитесь на эту дату</h3>
<form action="" method="post" class="form">
<div class="row">
<div class="col-5 col-sm-6 col-xs-12 form-item">
<span>Имя и фамилия</span>
<input>
</div>
<div class="col-4 col-sm-6 col-xs-12 form-item">
<span>E-mail</span>
<input>
</div>
<div class="col-3 col-sm-5 col-xs-12 form-item">
<span>телефон</span>
<input type="text">
</div>
</form>
</div>
</div>
</section>
.container {
max-width: 1135px;
width: 100%;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
.row {
margin-left: -15px;
margin-right: -15px;
display: flex;
flex-wrap: wrap;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.3333%;
}
/* Form */
.form .row {
align-items: center;
}
.form-item {
padding-right: 8px;
padding-left: 8px;
margin-bottom: 20px;
}
.form-control,
.form-select {
border: 1.5px solid #CBCBCB;
border-radius: 6px;
color: #1D335B;
font-size: 18px;
line-height: 21px;
padding: 12px 16px;
width: 100%;
}
.form-control::placeholder {
color: #9CA0A8;
}
.date-block {
display: flex;
flex-wrap: wrap;
}
.date-item {
color: #6B6D9A;
cursor: pointer;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
letter-spacing: 0.01em;
text-transform: uppercase;
height: 114px;
width: 33.3333%;
}
.date-item.active {
background: #fff;
box-shadow: 0 10px 50px rgba(33, 36, 96, 0.1);
color: #1D335B;
border-radius: 6px;
position: relative;
}
.date-day {
font-size: 56px;
padding-right: 10px;
}
.date-month-text {
font-size: 28px;
padding-bottom: 5px;
}
.date-checkbox {
background: #E2E2E2;
border-radius: 3.55556px;
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
}
.date-item.active .date-checkbox {
background: #E2E2E2 url(../images/date/check.png) no-repeat center center;
}
.date-status-text {
font-size: 17px;
}
.form-block {
background: #fff;
box-shadow: 0px 10px 50px rgba(33, 36, 96, 0.1);
padding: 40px 30px 52px;
}
.form-block-title {
font-size: 24px;
font-weight: 700;
letter-spacing: 0.01em;
margin-bottom: 30px;
}
/*new styles*/
.form-block {
position: relative;
}
.date-item.active > div {
position: relative;
z-index: 2;
}
.date-item.active:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: 1;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.