Skip to content

Instantly share code, notes, and snippets.

@jasonfesta

jasonfesta/svg-tint-background.css

Created April 12, 2019 15:20
Show Gist options
  • Save jasonfesta/ccbaa2c1342a5da6767c4e3ba0f32ba7 to your computer and use it in GitHub Desktop.
Save jasonfesta/ccbaa2c1342a5da6767c4e3ba0f32ba7 to your computer and use it in GitHub Desktop.
Download ZIP
Design Engine auto generated syntax v1
Raw
svg-tint-background.css
/* CSS Generator v1.0 */
/* Code snippets by Design Engine. */
/* Made in Mountain View, CA. */
/* -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */
.congrats {
position: absolute;
top: 0px;
left: 0px;
width: 375px;
height: 812px;
}
.rectangle {
position: absolute;
top: 0px;
left: 0px;
width: 1px;
height: 812px;
background-color: #9A9A9A;
}
.rectangle {
position: absolute;
top: 0px;
left: 20px;
width: 1px;
height: 812px;
background-color: #9A9A9A;
}
.rectangle {
position: absolute;
top: 0px;
left: 40px;
width: 1px;
height: 812px;
background-color: #9A9A9A;
}
.rectangle {
position: absolute;
top: 0px;
left: 60px;
width: 1px;
height: 812px;
background-color: #9A9A9A;
}
.rectangle {
position: absolute;
top: 0px;
left: 80px;
width: 1px;
height: 812px;
background-color: #9A9A9A;
}
.rectangle {
position: absolute;
top: 0px;
left: 100px;
width: 1px;
height: 812px;
background-color: #9A9A9A;
}
.rectangle {
position: absolute;
top: 0px;
left: 120px;
width: 1px;
height: 812px;
background-color: #9A9A9A;
}
.rectangle {
position: absolute;
top: 0px;
left: 140px;
width: 1px;
height: 812px;
background-color: #9A9A9A;
}
.rectangle {
position: absolute;
top: 0px;
left: 160px;
width: 1px;
height: 812px;
background-color: #9A9A9A;
}
.rectangle {
position: absolute;
top: 0px;
left: 180px;
width: 1px;
height: 812px;
background-color: #9A9A9A;
}
.rectangle {
position: absolute;
top: 0px;
left: 200px;
width: 1px;
height: 812px;
background-color: #9A9A9A;
}
.rectangle {
position: absolute;
top: 0px;
left: 220px;
width: 1px;
height: 812px;
background-color: #9A9A9A;
}
.rectangle {
position: absolute;
top: 0px;
left: 240px;
width: 1px;
height: 812px;
background-color: #9A9A9A;
}
.rectangle {
position: absolute;
top: 0px;
left: 260px;
width: 1px;
height: 812px;
background-color: #9A9A9A;
}
.rectangle {
position: absolute;
top: 0px;
left: 280px;
width: 1px;
height: 812px;
background-color: #9A9A9A;
}
.rectangle {
position: absolute;
top: 0px;
left: 300px;
width: 1px;
height: 812px;
background-color: #9A9A9A;
}
.rectangle {
position: absolute;
top: 0px;
left: 320px;
width: 1px;
height: 812px;
background-color: #9A9A9A;
}
.rectangle {
position: absolute;
top: 0px;
left: 340px;
width: 1px;
height: 812px;
background-color: #9A9A9A;
}
.rectangle {
position: absolute;
top: 0px;
left: 360px;
width: 1px;
height: 812px;
background-color: #9A9A9A;
}
.tint {
position: absolute;
top: 0px;
left: 0px;
width: 375px;
height: 812px;
background-color: #000000;
}
.svg-tint-background {
position: absolute;
top: 0px;
left: 0px;
width: 375px;
height: 812px;
background-color: #000000;
}
.parcel {
position: absolute;
top: 165px;
left: 98px;
width: 180px;
height: 160px;
background-color: #0073FF;
}
.rectangle-5 {
position: absolute;
top: 165px;
left: 98px;
width: 180px;
height: 160px;
background-color: #0073FF;
}
.header {
position: absolute;
top: 446px;
left: 6px;
width: 364px;
height: 106px;
background-color: #0073FF;
}
.background {
position: absolute;
top: 446px;
left: 6px;
width: 364px;
height: 106px;
background-color: #0073FF;
}
.street {
position: absolute;
top: 488px;
left: 50px;
width: 275px;
height: 20px;
font-family: "AvenirNext Bold", sans-serif;
font-weight: 700;
font-size: 25px;
color: #FFFFFF;
letter-spacing: 3.80px;
line-height: 33px;
text-align: center;
}
.city-state {
position: absolute;
top: 522px;
left: 101px;
width: 172px;
height: 14px;
font-family: "AvenirNext DemiBold", sans-serif;
font-weight: 600;
font-size: 15px;
color: #FFFFFF;
letter-spacing: 0.00px;
line-height: 28px;
text-align: center;
}
.title {
position: absolute;
top: 464px;
left: 136px;
width: 99px;
height: 11px;
font-family: "BourbonGrotesque Regular", sans-serif;
font-weight: 400;
font-size: 13px;
color: #FFFFFF;
letter-spacing: 3.50px;
line-height: 128px;
text-align: center;
}
.owner {
position: absolute;
top: 569px;
left: 28px;
width: 320px;
height: 58px;
background-color: #FFFFFF;
}
.rectangle-4 {
position: absolute;
top: 569px;
left: 28px;
width: 320px;
height: 58px;
background-color: #FFFFFF;
}
.llama19 {
position: absolute;
top: 591px;
left: 143px;
width: 90px;
height: 15px;
font-family: "AvenirNext Bold", sans-serif;
font-weight: 700;
font-size: 19px;
color: #3E3E3E;
letter-spacing: 0.24px;
line-height: 24px;
text-align: center;
}
.owner {
position: absolute;
top: 576px;
left: 34px;
width: 39px;
height: 9px;
font-family: "AvenirNext Bold", sans-serif;
font-weight: 700;
font-size: 10px;
color: #9B9B9B;
letter-spacing: 0.13px;
line-height: 24px;
text-align: left;
}
.price-size {
position: absolute;
top: 626px;
left: 28px;
width: 320px;
height: 58px;
background-color: #FFFFFF;
}
.rectangle-4 {
position: absolute;
top: 626px;
left: 28px;
width: 160px;
height: 58px;
background-color: #FFFFFF;
}
.rectangle-4 {
position: absolute;
top: 626px;
left: 187px;
width: 161px;
height: 58px;
background-color: #FFFFFF;
}
.22872 {
position: absolute;
top: 647px;
left: 72px;
width: 71px;
height: 17px;
font-family: "AvenirNext Bold", sans-serif;
font-weight: 700;
font-size: 17px;
color: #3E3E3E;
letter-spacing: 0.21px;
line-height: 24px;
text-align: center;
}
.22-up2 {
position: absolute;
top: 648px;
left: 237px;
width: 60px;
height: 14px;
font-family: "AvenirNext Bold", sans-serif;
font-weight: 700;
font-size: 17px;
color: #3E3E3E;
letter-spacing: 0.21px;
line-height: 24px;
text-align: center;
}
.price {
position: absolute;
top: 633px;
left: 34px;
width: 29px;
height: 9px;
font-family: "AvenirNext Bold", sans-serif;
font-weight: 700;
font-size: 10px;
color: #9B9B9B;
letter-spacing: 0.13px;
line-height: 24px;
text-align: left;
}
.size {
position: absolute;
top: 633px;
left: 194px;
width: 21px;
height: 9px;
font-family: "AvenirNext Bold", sans-serif;
font-weight: 700;
font-size: 10px;
color: #9B9B9B;
letter-spacing: 0.13px;
line-height: 24px;
text-align: left;
}
.buy {
position: absolute;
top: 683px;
left: 28px;
width: 320px;
height: 58px;
background-color: #FFFFFF;
}
.rectangle-4 {
position: absolute;
top: 683px;
left: 28px;
width: 320px;
height: 58px;
background-color: #FFFFFF;
}
.button {
position: absolute;
top: 688px;
left: 34px;
width: 309px;
height: 48px;
background-color: #02A100;
}
.rectangle-3 {
position: absolute;
top: 688px;
left: 34px;
width: 309px;
height: 48px;
background-color: #02A100;
}
.rectangle-3 {
position: absolute;
top: 730px;
left: 34px;
width: 309px;
height: 6px;
background-color: #FFFFFF;
}
.view-title {
position: absolute;
top: 701px;
left: 121px;
width: 131px;
height: 16px;
font-family: "AvenirNext Bold", sans-serif;
font-weight: 700;
font-size: 20px;
color: #FFFFFF;
letter-spacing: 2.40px;
line-height: 26px;
text-align: center;
}
.rectangle-5 {
position: absolute;
top: 329px;
left: 127px;
width: 37px;
height: 37px;
background-color: #A9A9A9;
}
.rectangle-5 {
position: absolute;
top: 245px;
left: 219px;
width: 24px;
height: 37px;
background-color: #0073FF;
}
.rectangle-5 {
position: absolute;
top: 205px;
left: 170px;
width: 37px;
height: 37px;
background-color: #73DC15;
}
.rectangle-5 {
position: absolute;
top: 108px;
left: 235px;
width: 37px;
height: 37px;
background-color: #FFD600;
}
.rectangle-5 {
position: absolute;
top: 41px;
left: 285px;
width: 37px;
height: 37px;
background-color: #73DC15;
}
.rectangle-5 {
position: absolute;
top: 144px;
left: 285px;
width: 41px;
height: 37px;
background-color: #E0F528;
}
.rectangle-5 {
position: absolute;
top: 227px;
left: 157px;
width: 37px;
height: 37px;
background-color: #E0F528;
}
.rectangle-5 {
position: absolute;
top: 179px;
left: 207px;
width: 37px;
height: 37px;
background-color: #E0F528;
}
.rectangle-5 {
position: absolute;
top: 141px;
left: 170px;
width: 37px;
height: 37px;
background-color: #0073FF;
}
.rectangle-5 {
position: absolute;
top: 123px;
left: 120px;
width: 41px;
height: 19px;
background-color: #0073FF;
}
.rectangle-5 {
position: absolute;
top: 164px;
left: 128px;
width: 37px;
height: 37px;
background-color: #E0F528;
}
.rectangle-5 {
position: absolute;
top: 145px;
left: 41px;
width: 37px;
height: 37px;
background-color: #73DC15;
}
.rectangle-5 {
position: absolute;
top: 316px;
left: 189px;
width: 37px;
height: 37px;
background-color: #E0F528;
}
.rectangle-5 {
position: absolute;
top: 258px;
left: 110px;
width: 24px;
height: 37px;
background-color: #0073FF;
}
.rectangle-5 {
position: absolute;
top: 335px;
left: 204px;
width: 37px;
height: 37px;
background-color: #73DC15;
}
.rectangle-5 {
position: absolute;
top: 272px;
left: 165px;
width: 37px;
height: 37px;
background-color: #73DC15;
}
.rectangle-5 {
position: absolute;
top: 299px;
left: 267px;
width: 41px;
height: 19px;
background-color: #E0F528;
}
.rectangle-5 {
position: absolute;
top: 413px;
left: 159px;
width: 37px;
height: 37px;
background-color: #E0F528;
}
.rectangle-5 {
position: absolute;
top: 385px;
left: 178px;
width: 37px;
height: 37px;
background-color: #73DC15;
}
.rectangle-5 {
position: absolute;
top: 78px;
left: 170px;
width: 37px;
height: 37px;
background-color: #E0F528;
}
.rectangle-5 {
position: absolute;
top: 54px;
left: 47px;
width: 37px;
height: 37px;
background-color: #E0F528;
}
.street {
position: absolute;
top: 233px;
left: 53px;
width: 273px;
height: 67px;
font-family: "AvenirNext Bold", sans-serif;
font-weight: 700;
font-size: 68px;
color: #FFFFFF;
letter-spacing: -3.00px;
line-height: 60px;
text-align: center;
}
.background {
position: absolute;
top: 0px;
left: 0px;
width: 375px;
height: 68px;
background-color: #FFFFFF;
}
.background {
position: absolute;
top: 0px;
left: 0px;
width: 375px;
height: 68px;
background-color: #FFFFFF;
}
.line {
position: absolute;
top: 67px;
left: 0px;
width: 375px;
height: 1px;
background-color: #D8D8D8;
}
.shape {
position: absolute;
top: 19px;
left: 20px;
width: 30px;
height: 30px;
background-color: #3E3E3E;
}
.left {
position: absolute;
top: 13px;
left: 90px;
width: 99px;
height: 42px;
background-color: #E5E5E5;
}
.background {
position: absolute;
top: 13px;
left: 90px;
width: 99px;
height: 42px;
background-color: #E5E5E5;
}
.map-icon-active {
position: absolute;
top: 20px;
left: 126px;
width: 28px;
height: 28px;
background-color: #9B9B9B;
}
.shape {
position: absolute;
top: 33px;
left: 126px;
width: 28px;
height: 15px;
background-color: #9B9B9B;
}
.pin {
position: absolute;
top: 20px;
left: 133px;
width: 13px;
height: 20px;
background-color: #9B9B9B;
}
.shape {
position: absolute;
top: 20px;
left: 133px;
width: 13px;
height: 19px;
background-color: #9B9B9B;
}
.oval {
position: absolute;
top: 25px;
left: 138px;
width: 3px;
height: 3px;
background-color: #9B9B9B;
}
.right {
position: absolute;
top: 13px;
left: 187px;
width: 99px;
height: 42px;
background-color: #FFFFFF;
}
.background {
position: absolute;
top: 13px;
left: 187px;
width: 99px;
height: 42px;
background-color: #FFFFFF;
}
.list-icon-tab-nonactive {
position: absolute;
top: 20px;
left: 226px;
width: 22px;
height: 28px;
background-color: #3E3E3E;
}
.shape {
position: absolute;
top: 20px;
left: 226px;
width: 22px;
height: 28px;
background-color: #3E3E3E;
}
.rectangle-2 {
position: absolute;
top: 32px;
left: 232px;
width: 10px;
height: 3px;
background-color: #3E3E3E;
}
.rectangle-2 {
position: absolute;
top: 26px;
left: 232px;
width: 10px;
height: 3px;
background-color: #3E3E3E;
}
.shape {
position: absolute;
top: 20px;
left: 226px;
width: 22px;
height: 28px;
background-color: #9B9B9B;
}
.rectangle-2 {
position: absolute;
top: 32px;
left: 232px;
width: 10px;
height: 3px;
background-color: #9B9B9B;
}
.rectangle-2 {
position: absolute;
top: 26px;
left: 232px;
width: 10px;
height: 3px;
background-color: #9B9B9B;
}
.background {
position: absolute;
top: 764px;
left: 0px;
width: 375px;
height: 48px;
background-color: #FFFFFF;
}
.background {
position: absolute;
top: 764px;
left: 0px;
width: 375px;
height: 48px;
background-color: #FFFFFF;
}
.user-details {
position: absolute;
top: 770px;
left: 10px;
width: 129px;
height: 36px;
background-color: #E5E5E5;
}
.username {
position: absolute;
top: 782px;
left: 51px;
width: 76px;
height: 12px;
font-family: "AvenirNext Bold", sans-serif;
font-weight: 700;
font-size: 15px;
color: #3E3E3E;
letter-spacing: 1.00px;
line-height: 20px;
text-align: left;
}
.avatar {
position: absolute;
top: 773px;
left: 10px;
width: 30px;
height: 30px;
background-color: #E5E5E5;
}
.combined-shape {
position: absolute;
top: 780px;
left: 331px;
width: 24px;
height: 17px;
background-color: #3E3E3E;
}
.sticky-header {
position: absolute;
top: 68px;
left: 0px;
width: 375px;
height: 48px;
background-color: #000000;
}
.rectangle-2 {
position: absolute;
top: 68px;
left: 0px;
width: 375px;
height: 48px;
background-color: #000000;
}
.you-are-now-the-owne {
position: absolute;
top: 86px;
left: 43px;
width: 286px;
height: 13px;
font-family: "AvenirNext Bold", sans-serif;
font-weight: 700;
font-size: 16px;
color: #FFFFFF;
letter-spacing: 1.71px;
line-height: 24px;
text-align: center;
}
.close-button-gray {
position: absolute;
top: 376px;
left: 311px;
width: 44px;
height: 44px;
background-color: #8B8B8B;
}
.oval {
position: absolute;
top: 376px;
left: 311px;
width: 44px;
height: 44px;
background-color: #8B8B8B;
}
.combined-shape {
position: absolute;
top: 391px;
left: 326px;
width: 14px;
height: 14px;
background-color: #FFFFFF;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment