Link to article: Your Local Artmacy.
#page-title {
display: none;
}
#header {
height: 350px;
background-image: url('https://scp-wiki.wikidot.com/local--files/your-local-artmacy/snake-removebg-preview.webp');
background-position: 50% 25%;
background-repeat: no-repeat;
background-size:300px auto;
}
.flex-container {
display: flex;
}
.flex-item {
flex: 1;
}
/* Media query for smaller screens */
@media screen and (max-width: 768px) {
.flex-container {
flex-direction: column; /* Stack items vertically on smaller screens */
}
/* Apply a border to all images with the class 'picture' */
.picture {
border: 2px solid #0d0c00; /* 2px solid border with a light gray color */
border-radius: 8px; /* Optional: Add rounded corners for a softer look */
background-image: radial-gradient(#01010f, #01010f);
margin: 10px; /* Optional: Add some margin for spacing between pictures */
float: left; /* Float the images to the left to make them appear side by side */
width: calc(33.33% - 20px); /* Set the width to one-third of the container with some margin */
width: 300px;
height: 335px;
box-sizing: border-box; /* Include borders in the width calculation */
clear: none; /* Prevent the images from clearing the float */
}
/* Optional: Add hover effect for a subtle interaction */
.picture:hover {
border-color: #452299; /* Darker border color on hover */
}
/* Apply a border to all images with the class 'picture' */
.plaque {
border: 2px solid #0d0c00; /* 2px solid border with a light gray color */
border-radius: 8px; /* Optional: Add rounded corners for a softer look */
background-image: radial-gradient(#00008B, #01010f);
margin: 10px; /* Optional: Add some margin for spacing between pictures */
float: left; /* Float the images to the left to make them appear side by side */
width: calc(33.33% - 20px); /* Set the width to one-third of the container with some margin */
width: 320px;
height: 75px;
box-sizing: border-box; /* Include borders in the width calculation */
clear: none; /* Prevent the images from clearing the float */
}
/* Optional: Add hover effect for a subtle interaction */
.picture:hover {
border-color: #452299; /* Darker border color on hover */
}
/* Apply a border to all images with the class 'picture' */
.plaque2 {
border: 2px solid #0d0c00; /* 2px solid border with a light gray color */
border-radius: 8px; /* Optional: Add rounded corners for a softer look */
background-image: radial-gradient(#301934, #01010f);
margin: 10px; /* Optional: Add some margin for spacing between pictures */
float: left; /* Float the images to the left to make them appear side by side */
width: calc(33.33% - 20px); /* Set the width to one-third of the container with some margin */
width: 300px;
height: 75px;
box-sizing: border-box; /* Include borders in the width calculation */
clear: none; /* Prevent the images from clearing the float */
}
/* Optional: Add hover effect for a subtle interaction */
.picture:hover {
border-color: #452299; /* Darker border color on hover */
}
/* Apply a border to all images with the class 'picture' */
.plaque3 {
border: 2px solid #0d0c00; /* 2px solid border with a light gray color */
border-radius: 8px; /* Optional: Add rounded corners for a softer look */
background-image: radial-gradient(#AA336A, #01010f);
margin: 10px; /* Optional: Add some margin for spacing between pictures */
float: left; /* Float the images to the left to make them appear side by side */
width: calc(33.33% - 20px); /* Set the width to one-third of the container with some margin */
width: 300px;
height: 75px;
box-sizing: border-box; /* Include borders in the width calculation */
clear: none; /* Prevent the images from clearing the float */
}
/* Optional: Add hover effect for a subtle interaction */
.picture:hover {
border-color: #452299; /* Darker border color on hover */
}
/* Apply a border to all images with the class 'picture' */
.plaque4 {
border: 2px solid #0d0c00; /* 2px solid border with a light gray color */
border-radius: 8px; /* Optional: Add rounded corners for a softer look */
background-image: radial-gradient(#013220, #01010f);
margin: 10px; /* Optional: Add some margin for spacing between pictures */
float: left; /* Float the images to the left to make them appear side by side */
width: calc(33.33% - 20px); /* Set the width to one-third of the container with some margin */
width: 320px;
height: 75px;
box-sizing: border-box; /* Include borders in the width calculation */
clear: none; /* Prevent the images from clearing the float */
}
/* Optional: Add hover effect for a subtle interaction */
.picture:hover {
border-color: #452299; /* Darker border color on hover */
}
border: solid 6px black; background-image: radial-gradient( #00008B, #000435); padding-top: 1em; padding-right: 0em; padding-bottom: 0em; margin-bottom: 0em; color: #FFF7D8;
font-size: 25px; margin: 2%;
font-size: 20px; margin: 10px;
font-size: 25px; margin: 5px;
border: solid 6px black; background-image: radial-gradient( #AEC6CF, #AEC6CF); padding-top: 1em; padding-right: 0em; padding-bottom: 0em; margin-bottom: 0em; color: #FFF7D8;
height:100%;
height:100%;
height:100%;
height:100%;
height:100%;
height:100%;
height:100%;
border: solid 6px black; background-image: radial-gradient( #CCCCFF, #CCCCFF); padding-top: 1em; padding-right: 0em; padding-bottom: 0em; margin-bottom: 0em; color: #FFF7D8;
height:100%;
height:100%;
height:100%;
height:100%;
border: solid 6px black; background-image: radial-gradient( #FFD1DC, #FFD1DC); padding-top: 1em; padding-right: 0em; padding-bottom: 0em; margin-bottom: 0em; color: #FFF7D8;
height:100%;
height:100%;
height:100%;
height:100%;
border: solid 6px black; background-image: radial-gradient( #C1E1C1, #C1E1C1); padding-top: 1em; padding-right: 0em; padding-bottom: 0em; margin-bottom: 0em; color: #FFF7D8;
height:100%;
height:100%;
height:100%;
height:100%;
height:100%;
height:100%;
ambrose
menu
picture
ambrose
menu
flex-container
flex-item
picture
plaque
flex-item
picture
plaque
flex-container
flex-item
picture
plaque
flex-item
picture
plaque
flex-container
flex-item
picture
plaque
flex-item
picture
plaque
flex-container
flex-item
picture
plaque
flex-item
picture
plaque
flex-container
flex-item
picture
plaque
flex-item
picture
plaque
ambrose
menu
flex-container
flex-item
picture
plaque2
flex-item
picture
plaque2
flex-container
flex-item
picture
plaque2
flex-item
picture
plaque2
ambrose
menu
flex-container
flex-item
picture
plaque3
flex-item
picture
plaque3
flex-container
flex-item
picture
plaque3
flex-item
picture
plaque3
ambrose
menu
flex-container
flex-item
picture
plaque4
flex-item
picture
plaque4
flex-container
flex-item
picture
plaque4
flex-item
picture
plaque4
flex-container
flex-item
picture
plaque4
flex-item
picture
plaque4