===================================================================================================== <!DOCTYPE html>
<html>
<body>
<style>
* {
box-sizing: border-box;
}
body {
background-color: #1B1B1E;
font-family: Roboto, sans-serif;
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 960px;
min-height: 100vh;
margin: 0 auto;
}
.list {
flex: 0 80%;
}
.list__item {
position: relative;
}
.list__item:hover label {
color: #BB4430;
}
.list__item:hover .label::before {
border: 7px solid #BB4430;
margin-right: 30px;
}
.radio-btn {
position: absolute;
visibility: hidden;
}
.radio-btn:checked ~ .label {
color: #BB4430;
}
.radio-btn:checked ~ .label::before {
margin-right: 30px;
border: 7px solid #BB4430;
background: #F8F7FF;
}
.label {
display: flex;
align-items: center;
padding: 25px 0 25px 20px;
color: #F8F7FF;
font-size: 20px;
font-weight: 300;
text-transform: uppercase;
cursor: pointer;
transition: all 0.25s linear;
}
.label::before {
display: block;
content: '';
border: 7px solid #F8F7FF;
border-radius: 50%;
height: 18px;
width: 18px;
margin-right: 10px;
transition: all .25s linear;
}</style>
<div class="container">
<ul class="list">
<li class="list__item">
<input type="radio" class="radio-btn" name="choise" id="a-opt" />
<label for="a-opt" class="label">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTUeR39EUzNov5cwCqoWVFK9P05LvHD2KOgJJV3ybtSvYx7dHBS" alt="Smiley face" height="70" width="200">
</label>
</li>
<li class="list__item">
<input type="radio" class="radio-btn" name="choise" id="b-opt" />
<label for="b-opt" class="label"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTUeR39EUzNov5cwCqoWVFK9P05LvHD2KOgJJV3ybtSvYx7dHBS" alt="Smiley face" height="70" width="200">
</label>
</li>
<li class="list__item">
<input type="radio" class="radio-btn" name="choise" id="c-opt" />
<label for="c-opt" class="label">pick me i'm the best!</label>
</li>
<li class="list__item">
<input type="radio" class="radio-btn" name="choise" id="d-opt" />
<label for="d-opt" class="label">pick me i'm fabulous!</label>
</li>
</ul>
</div>
</body>
</html>
No comments:
Post a Comment