Добавил кнопку чтобы скроллить

This commit is contained in:
2021-04-14 13:47:35 +03:00
parent 3958f0b76c
commit 39974fe4e8
3 changed files with 69 additions and 31 deletions

View File

@@ -1,29 +1,60 @@
* {
margin: 0;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: rgb(41, 41, 41)
}
body {
background-color: rgb(241, 241, 241);
}
#cardholder {
width: 100%;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
white-space: nowrap;
scroll-behavior: smooth;
}
#scroll_btn {
background-color: white;
margin: auto;
font-size: xx-large;
cursor: pointer;
border-radius: 50%;
width: 1.5em;
height: 1.5em;
box-shadow: 1px 1px 10px rgba(71, 71, 71, 0.397);
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Old versions of Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
}
.card {
display: inline-block;
padding: 10px;
margin: 10px;
border: 1px solid;
border-radius: 12px;
background-color: white;
padding: 1em;
margin: 1em;
width: 400px;
flex: 0 0 auto;
border-radius: 12px;
box-shadow: 1px 1px 10px rgba(71, 71, 71, 0.397);
}
img {
.card img {
max-width: 100%;
border-radius: 7px;
}
.card p {
width: 90%;
margin: 1em auto 0 auto;
}