Diff
checker
Text
Text
Images
Documents
Excel
Folders
Legal
Enterprise
Desktop
Pricing
Sign in
Download Diffchecker Desktop
Compare text
Find the difference between two text files
Tools
History
Real-time editor
Hide unchanged lines
Disable line wrap
Layout
Split
Unified
Diff precision
Smart
Word
Char
Syntax highlighting
Choose syntax
Ignore
Transform text
Go to first change
Edit input
Diffchecker Desktop
The most secure way to run Diffchecker. Get the Diffchecker Desktop app: your diffs never leave your computer!
Get Desktop
inside out project STEP-104 to STEP-105 CSS Code Changes
Created
8 years ago
Diff never expires
Clear
Export
Share
Explain
0 removals
Lines
Total
Removed
Characters
Total
Removed
To continue using this feature, upgrade to
Diff
checker
Pro
View Pricing
91 lines
Copy
69 additions
Lines
Total
Added
Characters
Total
Added
To continue using this feature, upgrade to
Diff
checker
Pro
View Pricing
158 lines
Copy
Copy
Copied
Copy
Copied
/*
CSS Document */
/*
inside out project STEP-105
CSS Document */
#logo {
cursor: pointer;
}
#logo:hover {
color: #EEE;
}
nav {
nav {
right: 250px;
right: 250px;
display: inline;
display: inline;
position: fixed;
position: fixed;
background: #FFF;
background: #FFF;
z-index: 1000;
z-index: 1000;
border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
padding-right: 20px;
padding-right: 20px;
}
}
nav ul {
nav ul {
list-style: none;
list-style: none;
position: relative;
position: relative;
float: left;
float: left;
margin: 0;
margin: 0;
padding: 0;
padding: 0;
}
}
nav ul a {
nav ul a {
display: block;
display: block;
text-decoration: none;
text-decoration: none;
font-weight: 700;
font-weight: 700;
line-height: 32px;
line-height: 32px;
padding: 0 15px;
padding: 0 15px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
color: #333;
font-size: 16px;
font-size: 16px;
}
}
nav ul li {
nav ul li {
position: relative;
position: relative;
float: left;
float: left;
margin: 0;
margin: 0;
padding: 0;
padding: 0;
}
}
nav ul li.current-menu-item {
nav ul li.current-menu-item {
background: #ddd;
background: #ddd;
}
}
nav ul li:hover {
nav ul li:hover {
background: #DDD;
background: #DDD;
}
}
nav ul ul {
nav ul ul {
display: none;
display: none;
position: absolute;
position: absolute;
top: 100%;
top: 100%;
left: 0;
left: 0;
background: #f6f6f6;
background: #f6f6f6;
border: thin #225AA7 solid;
border: thin #225AA7 solid;
padding: 0;
padding: 0;
border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 5px;
border-top-right-radius: 5px;
}
}
nav ul ul li {
nav ul ul li {
float: none;
float: none;
width: 200px;
width: 200px;
}
}
nav ul ul a {
nav ul ul a {
line-height: 120%;
line-height: 120%;
padding: 10px 15px;
padding: 10px 15px;
}
}
nav ul ul ul {
nav ul ul ul {
top: 0;
top: 0;
left: 100%;
left: 100%;
}
}
nav ul li:hover > ul {
nav ul li:hover > ul {
display: block;
display: block;
}
}
#loaderDiv {
#loaderDiv {
background: url("https://90northgroup.com/wp-content/uploads/2017/02/cogs-1.gif") no-repeat center center fixed;
background: url("https://90northgroup.com/wp-content/uploads/2017/02/cogs-1.gif") no-repeat center center fixed;
position: fixed;
position: fixed;
z-index: 9999;
z-index: 9999;
top: 0;
top: 0;
left: 0;
left: 0;
bottom: 0;
bottom: 0;
right: 0;
right: 0;
opacity: 0.025;
opacity: 0.025;
background-size: 120%;
background-size: 120%;
background-color: #FFFFFF;
background-color: #FFFFFF;
display: none;
display: none;
}
}
Copy
Copied
Copy
Copied
section {
min-height: 450px;
}
.circle {
position: absolute;
top: 150px;
left: 50%;
transform: translate(-50%,-50%);
width: 350px;
height: 350px;
border: 5px solid #fff;
box-shadow: 0 0 0 5px #4973ff;
border-radius: 50%;
overflow: hidden;
}
.wave {
position: relative;
width: 100%;
height: 100%;
background: #4973ff;
border-radius: 50%;
box-shadow: inset 0 0 50px rgba(0,0,0,.5);
}
.wave:before,.wave:after {
content: '';
position: absolute;
width: 200%;
height: 200%;
top: 0;
left: 50%;
transform: translate(-50%,-75%);
background: #000;
}
.wave:before {
border-radius: 45%;
background: rgba(255,255,255,1);
animation: animate 5s linear infinite;
}
.wave:after {
border-radius: 40%;
background: rgba(255,255,255,.5);
animation: animate 10s linear infinite;
}
@keyframes animate {
0% {
transform: translate(-50%,-75%) rotate(0deg);
}
100% {
transform: translate(-50%,-75%) rotate(360deg);
}
}
Saved diffs
Original text
Open file
/* CSS Document */ nav { right: 250px; display: inline; position: fixed; background: #FFF; z-index: 1000; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; padding-right: 20px; } nav ul { list-style: none; position: relative; float: left; margin: 0; padding: 0; } nav ul a { display: block; text-decoration: none; font-weight: 700; line-height: 32px; padding: 0 15px; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333; font-size: 16px; } nav ul li { position: relative; float: left; margin: 0; padding: 0; } nav ul li.current-menu-item { background: #ddd; } nav ul li:hover { background: #DDD; } nav ul ul { display: none; position: absolute; top: 100%; left: 0; background: #f6f6f6; border: thin #225AA7 solid; padding: 0; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 5px; } nav ul ul li { float: none; width: 200px; } nav ul ul a { line-height: 120%; padding: 10px 15px; } nav ul ul ul { top: 0; left: 100%; } nav ul li:hover > ul { display: block; } #loaderDiv { background: url("https://90northgroup.com/wp-content/uploads/2017/02/cogs-1.gif") no-repeat center center fixed; position: fixed; z-index: 9999; top: 0; left: 0; bottom: 0; right: 0; opacity: 0.025; background-size: 120%; background-color: #FFFFFF; display: none; }
Changed text
Open file
/* inside out project STEP-105 CSS Document */ #logo { cursor: pointer; } #logo:hover { color: #EEE; } nav { right: 250px; display: inline; position: fixed; background: #FFF; z-index: 1000; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; padding-right: 20px; } nav ul { list-style: none; position: relative; float: left; margin: 0; padding: 0; } nav ul a { display: block; text-decoration: none; font-weight: 700; line-height: 32px; padding: 0 15px; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333; font-size: 16px; } nav ul li { position: relative; float: left; margin: 0; padding: 0; } nav ul li.current-menu-item { background: #ddd; } nav ul li:hover { background: #DDD; } nav ul ul { display: none; position: absolute; top: 100%; left: 0; background: #f6f6f6; border: thin #225AA7 solid; padding: 0; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 5px; } nav ul ul li { float: none; width: 200px; } nav ul ul a { line-height: 120%; padding: 10px 15px; } nav ul ul ul { top: 0; left: 100%; } nav ul li:hover > ul { display: block; } #loaderDiv { background: url("https://90northgroup.com/wp-content/uploads/2017/02/cogs-1.gif") no-repeat center center fixed; position: fixed; z-index: 9999; top: 0; left: 0; bottom: 0; right: 0; opacity: 0.025; background-size: 120%; background-color: #FFFFFF; display: none; } section { min-height: 450px; } .circle { position: absolute; top: 150px; left: 50%; transform: translate(-50%,-50%); width: 350px; height: 350px; border: 5px solid #fff; box-shadow: 0 0 0 5px #4973ff; border-radius: 50%; overflow: hidden; } .wave { position: relative; width: 100%; height: 100%; background: #4973ff; border-radius: 50%; box-shadow: inset 0 0 50px rgba(0,0,0,.5); } .wave:before,.wave:after { content: ''; position: absolute; width: 200%; height: 200%; top: 0; left: 50%; transform: translate(-50%,-75%); background: #000; } .wave:before { border-radius: 45%; background: rgba(255,255,255,1); animation: animate 5s linear infinite; } .wave:after { border-radius: 40%; background: rgba(255,255,255,.5); animation: animate 10s linear infinite; } @keyframes animate { 0% { transform: translate(-50%,-75%) rotate(0deg); } 100% { transform: translate(-50%,-75%) rotate(360deg); } }
Find difference