Изменить: вот CodePen с CSS/HTML
Я провожу выходные, создавая карточку CSS для веб-сайта, только чтобы понять, что она вообще не адаптивна. Я не очень хорошо разбираюсь в CSS или адаптивном дизайне, поэтому я надеюсь, что кто-то с большим опытом сможет мне помочь. До сих пор я пробовал играть с тегом @media, но безуспешно. Это соответствующий CSS:
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
* {
box-sizing: border-box;
}
body {
background: #ffffff;
font-family: 'Muli', sans-serif;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
.courses-container {
}
.course {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
display: flex;
max-width: 100%;
margin: 20px;
overflow: hidden;
width: 1300px;
}
.course h6 {
opacity: 0.6;
margin: 0;
letter-spacing: 1px;
text-transform: uppercase;
}
.course h2 {
letter-spacing: 1px;
margin: 10px 0;
}
.course-preview {
background-color: #2a265f;
color: #fff;
padding: 30px;
max-width: 250px;
}
.course-preview a {
color: #fff;
display: inline-block;
font-size: 12px;
opacity: 0.6;
margin-top: 30px;
text-decoration: none;
}
.course-info {
padding: 30px;
position: relative;
width: 100%;
}
.right-container {
padding: 30px;
background-color: #fff;
width: 30%;
line-height: 200%;
}
.progress-container {
position: absolute;
top: 30px;
right: 30px;
text-align: right;
width: 150px;
}
.progress {
background-color: #ddd;
border-radius: 3px;
height: 5px;
width: 100%;
}
.progress::after {
border-radius: 3px;
background-color: #2a265f;
content: '';
position: absolute;
top: 0;
left: 0;
height: 5px;
width: 10%;
}
.progress-text {
font-size: 10px;
opacity: 0.6;
letter-spacing: 1px;
}
