Comparar texto

Encuentra la diferencia entre dos archivos de texto

Editor live
Ocultar sin cambios
Sin ajuste de línea
Vista
Nivel de detalle
Resaltado de sintaxis

Untitled Diff

Creado El diff nunca expira
15 eliminaciones
128 líneas
14 adiciones
124 líneas
@import url("https://fonts.googleapis.com/css?family=Inconsolata|Merriweather");
@import url("https://fonts.googleapis.com/css?family=Inconsolata|Merriweather");
body {
body {
font-family: "Inconsolata", monospace;
font-family: "Inconsolata", monospace;
margin: 0;
margin: 0;
}
}


button {
button {
cursor: pointer;
cursor: pointer;
}
}


#portfolio {
#portfolio {
width: 100%;
width: 100%;
min-height: 100vh;
min-height: 100vh;
background: #ffffff;
background: #ffffff;
position: relative;
position: relative;
display: grid;
display: grid;
grid-template-columns: repeat(4, minmax(200px, 1fr));
grid-template-columns: repeat(4, minmax(200px, 1fr));
grid-template-rows: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 2px;
grid-gap: 2px;
}
}


.project {
.project {
position: relative;
position: relative;
background: #f2dad7;
background: #f2dad7;
overflow: hidden;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
}
.project img {
.project img {
position: absolute;
position: absolute;
opacity: 1;
width:300%;
object-fit: contain;
background-size: cover;
height: 50vh;
}
}
.project p {
.project p {
position: absolute;
position: absolute;
text-align: center;
text-align: center;
width: 100%;
width: 100%;
padding: 1em 0;
padding: 1em 0;
text-transform: uppercase;
text-transform: uppercase;
letter-spacing: 2px;
letter-spacing: 2px;
z-index: 3;
/* just to make text more readable */
background-color:#ffffff80;
font-size:20px;
}
}


.project:hover .grid__overlay {
.project:hover .grid__overlay {
transform: translateY(0%);
transform: translateY(0%);
}
}


.grid__overlay {
.grid__overlay {
background: rgba(48, 40, 39, 0.9);
background: rgba(48, 40, 39, 0.9);
height: 100%;
height: 100%;
grid-column: 1/-1;
grid-column: 1/-1;
grid-row: 1/-1;
grid-row: 1/-1;
position: relative;
position: relative;
display: grid;
display: grid;
justify-items: center;
justify-items: center;
align-items: center;
align-items: center;
transform: translateY(101%);
transform: translateY(101%);
transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
width: 100%;
}
}
.grid__overlay button {
.grid__overlay button {
background: none;
background: none;
outline: none;
outline: none;
font-weight: 100;
font-weight: 100;
letter-spacing: 2px;
letter-spacing: 2px;
border: 1px solid #ffffff;
border: 1px solid #ffffff;
color: #ffffff;
color: #ffffff;
text-transform: uppercase;
text-transform: uppercase;
padding: 10px;
padding: 10px;
}
}
.grid__overlay button:hover {
.grid__overlay button:hover {
transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background: #ffffff;
background: #ffffff;
color: #d1a39e;
color: #d1a39e;
transform: scale(1.05);
transform: scale(1.05);
}
}


.overlay {
.overlay {
position: fixed;
position: fixed;
background: rgba(71, 69, 69, 0.7);
background: rgba(71, 69, 69, 0.7);
top: 0;
top: 0;
right: 0;
right: 0;
bottom: 0;
bottom: 0;
left: 0;
left: 0;
display: none;
display: none;
z-index: 3;
z-index: 3;
}
}


.overlay.open {
.overlay.open {
display: block;
display: block;
align-items: center;

object-fit: none;
width: 100%;

padding-right: 500px;
}
}
.overlay.open img {
.overlay.open img {
display: block;
display: block;

margin:auto; /*align center*/
width: 100%;
max-width: 100%;
max-height: 100%;
max-height: 100%;
}
}


.overlay__inner {
.overlay__inner {
background: #ffffff;
background: #ffffff;
position: relative;
height: 100%;
opacity: 1;
display:flex; /*align vertical center*/
object-fit: cover;
}
}


.close {
.close {
position: absolute;
position: absolute;
top: 3px;
top: 3px;
right: 10px;
right: 10px;
background: none;
background: none;
outline: 0;
outline: 0;
color: #f7f1f1;
color: #f7f1f1;
border: 0;
border: 0;
text-transform: uppercase;
text-transform: uppercase;
letter-spacing: 2px;
letter-spacing: 2px;
}
}
.close:hover {
.close:hover {
color: #d1a39e;
color: #d1a39e;
}
}


.project__image {
.project__image {
margin-left: -25%;
}
}
Diferencias guardadas