टेक्स्ट की तुलना करें

दो टेक्स्ट फ़ाइलों के बीच अंतर ढूंढें

रियल-टाइम एडिटर
अपरिवर्तित संक्षिप्त करें
लाइन रैप बंद
लेआउट
परिवर्तन हाइलाइट करें
सिंटैक्स हाइलाइटिंग

Untitled Diff

बनाया गया Diff कभी समाप्त नहीं होता
15 हटाए गए
128 लाइनें
14 जोड़े गए
124 लाइनें
@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%;
}
}
सेव किए गए Diffs