Specto fixes #9
@ -1,12 +1,12 @@
|
|||||||
.popup{
|
.popup{
|
||||||
width: 900px;
|
width: 900px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
text-align: center
|
text-align: center;
|
||||||
}
|
}
|
||||||
.popup img{
|
.popup img{
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
cursor: pointer
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.show{
|
.show{
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
@ -28,7 +28,7 @@
|
|||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%,-50%);
|
transform: translate(-50%,-50%);
|
||||||
overflow: hidden
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.img-show span{
|
.img-show span{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -50,12 +50,12 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: Raleway;
|
font-family: Raleway;
|
||||||
background-color: #202125;
|
background-color: #202125;
|
||||||
}
|
}
|
||||||
|
|
||||||
.heading {
|
.heading {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 2.0em;
|
font-size: 2.0em;
|
||||||
@ -63,21 +63,21 @@
|
|||||||
padding: 40px;
|
padding: 40px;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-image {
|
.gallery-image {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-image img {
|
.gallery-image img {
|
||||||
height: 250px;
|
height: 250px;
|
||||||
width: 350px;
|
width: 350px;
|
||||||
transform: scale(1.0);
|
transform: scale(1.0);
|
||||||
transition: transform 0.4s ease;
|
transition: transform 0.4s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-box {
|
.img-box {
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
@ -89,7 +89,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.caption {
|
.caption {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 5px;
|
bottom: 5px;
|
||||||
@ -97,7 +97,7 @@
|
|||||||
opacity: 0.0;
|
opacity: 0.0;
|
||||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.transparent-box {
|
.transparent-box {
|
||||||
height: 250px;
|
height: 250px;
|
||||||
width: 350px;
|
width: 350px;
|
||||||
@ -107,28 +107,28 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
transition: background-color 0.3s ease;
|
transition: background-color 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-box:hover img {
|
.img-box:hover img {
|
||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-box:hover .transparent-box {
|
.img-box:hover .transparent-box {
|
||||||
background-color:rgba(0, 0, 0, 0.5);
|
background-color:rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-box:hover .caption {
|
.img-box:hover .caption {
|
||||||
transform: translateY(-20px);
|
transform: translateY(-20px);
|
||||||
opacity: 1.0;
|
opacity: 1.0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-box:hover {
|
.img-box:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.caption > p:nth-child(2) {
|
.caption > p:nth-child(2) {
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.opacity-low {
|
.opacity-low {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
@ -11,10 +11,10 @@
|
|||||||
background: white;
|
background: white;
|
||||||
-moz-box-shadow: 0 0 20px #469330;
|
-moz-box-shadow: 0 0 20px #469330;
|
||||||
-webkit-box-shadow: 0 0 20px #469330;
|
-webkit-box-shadow: 0 0 20px #469330;
|
||||||
box-shadow: 0 0 20px #469330;
|
box-shadow: 0 0 20px #469330;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 25px;
|
border-radius: 25px;
|
||||||
}
|
}
|
||||||
header {
|
header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@ -138,21 +138,16 @@ header {
|
|||||||
.menu {
|
.menu {
|
||||||
display: initial;
|
display: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html{
|
html{
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
|
||||||
margin: 0 0 30px 0;
|
margin: 0 0 30px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1.heading{
|
h1.heading{
|
||||||
@ -167,7 +162,7 @@ ul.emoji{
|
|||||||
|
|
||||||
.question{
|
.question{
|
||||||
color: gray;
|
color: gray;
|
||||||
font-size:20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.nothing{
|
ul.nothing{
|
||||||
@ -178,7 +173,7 @@ a.footer{
|
|||||||
/* background:radial-gradient(circle, rgba(0,159,12,1) 0%, rgba(8,96,0,1) 100%);
|
/* background:radial-gradient(circle, rgba(0,159,12,1) 0%, rgba(8,96,0,1) 100%);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent; */
|
-webkit-text-fill-color: transparent; */
|
||||||
color:lightgreen;
|
color: lightgreen;
|
||||||
}
|
}
|
||||||
footer{
|
footer{
|
||||||
font-size: small;
|
font-size: small;
|
||||||
|
Reference in New Issue
Block a user