Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* Created by TheiPhoneFan on 2024-03-28 */
- /* Theme 6.0.3 2023-2024 */
- /* Begin Slideshow CSS */
- .slideshow-container {
- max-width: 500px;
- position: relative;
- margin: auto;
- }
- .slideshow-container .slideshow-img {
- display: none;
- max-width: 100%;
- height: auto;
- }
- .slideshow-img img {
- border-radius: 16px;
- max-width: 100%;
- }
- .prev,
- .next {
- cursor: pointer;
- position: absolute;
- top: 50%;
- width: auto;
- margin-top: -22px;
- padding: 16px;
- color: white;
- font-weight: bold;
- font-size: 18px;
- transition: 0.6s ease;
- border-radius: 0 3px 3px 0;
- }
- .prev {
- left: 0;
- }
- .next {
- right: 0;
- }
- .previews-container {
- display: flex;
- justify-content: center;
- margin-top: 10px;
- }
- .preview-img {
- width: 85px;
- height: auto;
- margin: 0 5px;
- cursor: pointer;
- border-radius: 12px;
- }
- .active-preview {
- border: 2px solid #6495ED;
- }
- figcaption {
- text-align: center;
- }
- /* End Slideshow CSS */
- /* Begin Expandable Image CSS */
- .image-gallery {
- /* The Gallery That Holds The Images */
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- gap: 10px;
- }
- .gallery-image {
- /* A pointer cursor will display when you hover over the image */
- cursor: pointer;
- }
- .modal {
- /* The fullscreen popup that shows an expanded view of the image */
- display: none;
- position: fixed;
- padding-top: 50px;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- overflow: auto;
- background-color: rgba(0, 0, 0, 0.9);
- }
- .modal-content {
- /* The content inside of the .modal */
- display: block;
- margin: auto;
- }
- .close {
- /* The close button (x) that can be clicked to close the .modal */
- color: white;
- font-size: 40px;
- position: absolute;
- top: 10px;
- right: 25px;
- cursor: pointer;
- }
- #modalImage {
- /* The image inside the .image-container */
- max-width: 100%;
- width: 450px;
- }
- /* End Expandable Image CSS */
- /* Begin Image Gallery CSS */
- div.gallery {
- border: 1px solid #ccc;
- border-radius: 16px;
- }
- div.gallery:hover {
- border: 1px solid #777;
- }
- div.gallery img {
- width: 100%;
- height: auto;
- border-radius: 16px 16px 0px 0px;
- }
- div.desc {
- padding: 15px;
- text-align: center;
- }
- .desc p {
- margin: 0px;
- }
- * {
- box-sizing: border-box;
- }
- .responsive {
- padding: 0 6px;
- margin-top: 10px;
- margin-bottom: 10px;
- float: left;
- width: 24.99999%;
- }
- @media only screen and (max-width: 700px) {
- .responsive {
- width: 49.99999%;
- margin: 6px 0;
- }
- }
- @media only screen and (max-width: 500px) {
- .responsive {
- width: 100%;
- }
- }
- .clearfix:after {
- content: "";
- display: table;
- clear: both;
- }
- .image-gallery {
- /* The Gallery That Holds The Images */
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- gap: 10px;
- }
- .gallery-image {
- /* A pointer cursor will display when you hover over the image */
- cursor: pointer;
- }
- /* End Image Gallery CSS */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement