<div class="help-center">
<h3>How can we help you?</h3>
<div class="inner">
<form action="">
<div class="icon">
<img src="img/icon-search.svg" alt="">
</div>
<input type="text" placeholder="Describe your issue">
</form>
<ul class="dropdown-container">
<li>
<input type="checkbox" id="question1">
<label for="question1">
Popular articles
<img src="img/icon-arrow-down.svg" alt="">
</label>
<div class="dropdown-content">
sample text.. <br>
sample text.. <br>
sample text.. <br>
sample text.. <br>
sample text.. <br>
</div>
</li>
<li>
<input type="checkbox" id="question2">
<label for="question2">
Fix problems & request removals
<img src="img/icon-arrow-down.svg" alt="">
</label>
<div class="dropdown-content">
sample text.. <br>
sample text.. <br>
sample text.. <br>
sample text.. <br>
sample text.. <br>
</div>
</li>
<li>
<input type="checkbox" id="question3">
<label for="question3">
Browse the web
<img src="img/icon-arrow-down.svg" alt="">
</label>
<div class="dropdown-content">
sample text.. <br>
sample text.. <br>
sample text.. <br>
sample text.. <br>
sample text.. <br>
</div>
</li>
<li>
<input type="checkbox" id="question4">
<label for="question4">
Search on your phone or tablet
<img src="img/icon-arrow-down.svg" alt="">
</label>
<div class="dropdown-content">
sample text.. <br>
sample text.. <br>
sample text.. <br>
sample text.. <br>
sample text.. <br>
</div>
</li>
</ul>
</div>
<div class="help-articles">
<ul>
<li>
<a href="#">
<img src="https://picsum.photos/256/128?random=1" alt="">
<span class="title">
A friend indeed
</span>
</a>
</li>
<li>
<a href="#">
<img src="https://picsum.photos/256/128?random=2" alt="">
<span class="title">
A friend indeed
</span>
</a>
</li>
<li>
<a href="#">
<img src="https://picsum.photos/256/128?random=3" alt="">
<span class="title">
Return of the Ridleys
</span>
</a>
</li>
</ul>
</div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:[email protected];700&display=swap');
* {
padding: 0;
margin: 0;
list-style: none;
border: none;
text-decoration: none;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
font-family: 'Nunito Sans', sans-serif;
&:focus {
outline: 0;
}
}
body {
background-color: #F6F8FC;
height: 100vh;
display: grid;
place-items: center;
}
.help-center {
display: flex;
flex-direction: column;
align-items: center;
padding: 25px 0;
h3 {
font-size: 24px;
font-weight: bold;
color: #202842;
margin-bottom: 52px;
text-align: center;
}
.inner {
width: 558px;
}
form {
position: relative;
margin-bottom: 66px;
.icon {
position: absolute;
top: 0;
left: 0;
width: 68px;
height: 63px;
display: grid;
place-items: center;
}
input {
background: #fff;
border-radius: 10px;
height: 63px;
width: 100%;
box-shadow: 0 9px 10px -4px rgba(#C9D6EF, .46);
font-size: 16px;
color: #202842;
padding: 0 20px 0 68px;
&::placeholder {
color: #828D97;
}
}
}
.dropdown-container {
margin-bottom: 70px;
li {
margin-bottom: 25px;
border-bottom: 2px solid #DEE4F1;
label {
display: flex;
justify-content: space-between;
align-items: flex-start;
height: 51px;
padding-top: 5px;
font-size: 18px;
color: #202842;
cursor: pointer;
img {
transition: 300ms all;
}
}
.dropdown-content {
overflow: hidden;
max-height: 0;
transition: 500ms all;
font-size: 18px;
line-height: 1.5;
color: rgba(#202842, .6);
}
input {
display: none;
&:checked + label {
img {
transform: rotate(-180deg);
}
& + .dropdown-content {
max-height: 50vh;
padding-bottom: 20px;
}
}
}
&:last-child {
margin-bottom: 0;
}
}
}
.help-articles {
width: 838px;
ul {
display: flex;
margin: 0 calc(-35px / 2);
li {
margin: 0 calc(35px / 2);
a {
display: block;
box-shadow: 0 9px 10px -4px rgba(#C9D6EF, .46);
border-radius: 10px;
background: #fff;
transition: 300ms all;
img {
width: 100%;
border-radius: 10px 10px 0 0;
display: block;
height: 128px;
object-fit: cover;
}
.title {
display: block;
padding: 15px;
text-align: center;
font-size: 14px;
color: #202842;
}
&:hover {
transform: scale(1.04);
}
}
}
}
}
}