<article class="component component1">
<img src="img/sample-image.png" alt="">
<div class="content-right">
<h3>Vector illustration set of rocks and stones</h3>
<div class="author">
by <a href="#">Lillian Beck</a>
</div>
<div class="actions">
<a href="#">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 25H25" stroke="#585971" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15 17.5V5" stroke="#585971" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15 17.5L20 12.5" stroke="#585971" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15 17.5L10 12.5" stroke="#585971" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Download
</a>
<a href="#">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.25 5H11.25L15 8.75H23.75C25.1307 8.75 26.25 9.86929 26.25 11.25V21.25C26.25 22.6307 25.1307 23.75 23.75 23.75H6.25C4.86929 23.75 3.75 22.6307 3.75 21.25V7.5C3.75 6.11929 4.86929 5 6.25 5" stroke="#585971" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15 12.5V20" stroke="#585971" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.25 16.25H18.75" stroke="#585971" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Save to Collection
</a>
</div>
</div>
</article>
<div class="divider"></div>
<aside class="component component2">
<h3>Image size</h3>
<ul>
<li>
<label class="radio">
<input type="radio" checked name="size" value="1">
<span class="cb"></span>
<span class="text">Original ・3264 x 4922</span>
</label>
</li>
<li>
<label class="radio">
<input type="radio" name="size" value="2">
<span class="cb"></span>
<span class="text">Large ・3264 x 4922</span>
</label>
</li>
<li>
<label class="radio">
<input type="radio" name="size" value="3">
<span class="cb"></span>
<span class="text">Medium ・1280 x 1932</span>
</label>
</li>
<li>
<label class="radio">
<input type="radio" name="size" value="4">
<span class="cb"></span>
<span class="text">Small ・640 x 966</span>
</label>
</li>
<li>
<label class="radio">
<input type="radio" name="size" value="5">
<span class="cb"></span>
<span class="text">Custom Size</span>
</label>
</li>
<li class="button">
<button type="submit">Download</button>
</li>
</ul>
</aside>
<div class="divider"></div>
<div class="component component3">
<h3>Similar keywords</h3>
<div class="keywords">
<a href="#">rock</a>
<a href="#">stone</a>
<a href="#">illustration</a>
<a href="#">cartoon</a>
<a href="#">geography</a>
<a href="#" class="view-all">
View all
<img src="img/icon-arrow-right.svg" alt="">
</a>
</div>
<ul class="stock-details">
<li>
<label>Category</label>
Vector illustrations
</li>
<li>
<label>License type</label>
Standard or Extended
</li>
</ul>
</div>
@import url('https://fonts.googleapis.com/css2?family=Mulish:[email protected];700&display=swap');
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
outline: 0;
box-sizing: border-box;
text-decoration: none;
font-family: 'Mulish', sans-serif;
}
body {
background: #F3F6FD;
padding: 30px;
}
.component {
&.component1 {
background: #fff;
padding: 80px;
border-radius: 15px;
max-width: 950px;
display: flex;
align-items: center;
> img {
margin-right: 40px;
width: 302px;
height: 231px;
object-fit: cover;
}
.content-right {
height: 231px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
h3 {
font-size: 32px;
}
.author {
font-size: 18px;
color: #1A1B38;
a {
color: #5B60ED;
text-decoration: underline;
}
}
.actions {
display: flex;
margin: 0 -7px;
a {
height: 63px;
display: flex;
align-items: center;
border: 1px solid #D4DBEE;
border-radius: 3px;
margin: 0 7px;
font-size: 18px;
color: #585971;
justify-content: center;
padding: 0 30px;
white-space: nowrap;
&:hover {
border-color: #5B60ED;
color: #5B60ED;
svg path {
stroke: #5b60ed;
}
}
img, svg {
margin-right: 10px;
}
}
}
}
&.component2 {
background: #fff;
padding: 50px 60px 60px 60px;
border-radius: 15px;
max-width: 390px;
h3 {
font-size: 24px;
padding-bottom: 25px;
}
ul {
li {
padding-bottom: 15px;
&.button {
padding-top: 35px;
}
button[type="submit"] {
height: 63px;
border-radius: 3px;
background: #5B60ED;
width: 100%;
cursor: pointer;
color: #fff;
font-size: 18px;
&:hover {
opacity: .9;
}
}
&:last-child {
padding-bottom: 0;
}
.radio {
display: flex;
align-items: center;
font-size: 18px;
cursor: pointer;
.cb {
margin-right: 10px;
width: 24px;
height: 24px;
min-width: 24px;
border-radius: 50%;
border: 1px solid #D4DBEE;
position: relative;
&::before {
content: '';
width: 16px;
height: 16px;
border-radius: 50%;
background: #5B60ED;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
}
&:hover {
.cb {
border-color: #5B60ED;
}
}
input {
display: none;
&:checked + .cb {
border-color: #5B60ED;
&::before {
display: block;
}
}
}
}
}
}
}
&.component3 {
background: #fff;
padding: 55px 60px 65px 60px;
border-radius: 15px;
max-width: 510px;
h3 {
font-size: 24px;
padding-bottom: 25px;
}
.keywords {
display: flex;
flex-wrap: wrap;
a {
margin-right: 10px;
margin-bottom: 10px;
height: 38px;
display: flex;
padding: 0 20px;
border-radius: 3px;
align-items: center;
font-size: 14px;
color: #585971;
border: 1px solid #D4DBEE;
&:hover {
border-color: #5B60ED;
color: #5B60ED;
}
&.view-all {
background: #F3F6FD;
border-color: #F3F6FD;
color: #5B60ED;
img {
margin-left: 5px;
}
}
}
}
.stock-details {
margin-top: 40px;
padding-top: 50px;
display: flex;
border-top: 1px solid #D4DBEE;
li {
flex: 1;
font-size: 16px;
color: #585971;
label {
padding-bottom: 12px;
display: block;
font-size: 14px;
font-weight: bold;
}
}
}
}
}
.divider {
height: 50px;
}