ATC Throwback Packs
How do I make an atc throwback packs?
Vintage packaging using Avondale Type Co. fonts. Designs by http://twitter.com/avondaletypeco. Fonts: http://avondaletype.co.. What is a atc throwback packs? How do you make a atc throwback packs? This script and codes were developed by Tiffany Stoik on 28 November 2022, Monday.
ATC Throwback Packs - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ATC Throwback Packs</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/80729/atc-fonts.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box;
}
html { font-size: 2vmin;
}
body { padding: 1rem; background: #5ee3ab; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center;
}
.box-wrapper { position: relative; display: inline-block; margin: 1rem; width: 15rem; height: 22rem; text-align: center; vertical-align: middle;
}
.box-wrapper:before { position: absolute; top: 0; right: 0; width: 1rem; height: calc(100% - 1rem); content: ''; transform: skewY(45deg); transform-origin: top left;
}
.box-wrapper:after { position: absolute; bottom: 0; left: 0; width: 14rem; height: 1rem; content: ''; transform: skewX(45deg); transform-origin: top left;
}
.box-wrapper .box { width: calc(100% - 1rem); height: calc(100% - 1rem);
}
.box-wrapper--1:before { background: #eae4c7;
}
.box-wrapper--1:after { background: #ddd9c7;
}
.box-wrapper--1 .box { background: #f4f0da; font-family: 'ATC Duel';
}
.box-wrapper--1 .logo-mark { margin: 0 auto 0.625rem; width: 5rem; height: 2.5rem; background: #ebddaa;
}
.box-wrapper--1 .logo-mark svg { margin: 0.5rem auto; width: 2rem;
}
.box-wrapper--1 .label { position: relative; padding: 3.3rem 0 4.9rem; background: #0f87d9; color: #fff;
}
.box-wrapper--1 .label:before { position: absolute; top: 0; right: -1rem; display: block; width: 1rem; height: 100%; background: #1883b2; content: ''; transform: skewY(45deg); transform-origin: top left;
}
.box-wrapper--1 .label:after { position: absolute; top: 50%; left: 50%; display: block; width: 8.6rem; height: 8.6rem; border: 0.125rem solid #fff; border-radius: 50%; content: ''; transform: translate(-50%, -50%);
}
.box-wrapper--1 .label svg { width: 6.25rem;
}
.box-wrapper--1 .text-mark { position: absolute; right: 1.25rem; bottom: 1.25rem; text-transform: uppercase; font-size: 0.6rem;
}
.box-wrapper--1 .year { margin-bottom: 1.375rem; font-family: 'ATC Timberline'; font-weight: 500; font-size: 0.3rem;
}
.box-wrapper--1 .title { margin-top: 0.25rem; text-transform: uppercase; font-size: 0.7rem;
}
.box-wrapper--1 .title:before { position: absolute; bottom: 1.75rem; left: 50%; display: block; width: 0.0625rem; height: 2.5rem; background: #fff; content: '';
}
.box-wrapper--1 h1 { margin: 0.7rem 0 0.25rem; font-size: 2.5rem; color: #bc9342; font-weight: 800;
}
.box-wrapper--1 h2 { font-size: 1.15em; color: #0f87d9;
}
.box-wrapper--2:before { background: #dd2a4d;
}
.box-wrapper--2:after { background: #d12e4e;
}
.box-wrapper--2 .box { position: relative; padding: 2.5rem 0; background: #f8273e; font-family: 'ATC Timberline'; color: #fff; text-transform: uppercase;
}
.box-wrapper--2 .box:before { position: absolute; top: 0.625rem; right: 0.625rem; bottom: 0.625rem; left: 0.625rem; display: block; border: 0.1875rem solid #fff; content: '';
}
.box-wrapper--2 .size { font-size: 0.8rem;
}
.box-wrapper--2 .desc { margin: 0.6rem 0 1.25rem; font-size: 0.5rem;
}
.box-wrapper--2 svg { margin-bottom: 1.25rem; width: 4rem;
}
.box-wrapper--2 .title { margin-bottom: 1rem; font-family: 'ATC Krueger'; font-size: 3.75rem;
}
.box-wrapper--2 .tagline { position: relative; z-index: 1; font-family: 'ATC Ripley'; text-transform: none;
}
.box-wrapper--2 .tagline span { padding: 0 0.5rem; background: #f8273e;
}
.box-wrapper--2 .tagline:before { position: absolute; top: 50%; right: 2.5rem; left: 2.5rem; z-index: -1; display: block; height: 0.0625rem; background: #fff; content: ''; transform: translateY(-50%);
}
.box-wrapper--3 { position: relative; display: inline-block; margin: 1rem; width: 30rem; height: 18rem; vertical-align: middle;
}
.box-wrapper--3 .matchbed { position: absolute; top: 0.5rem; bottom: 1rem; left: 0; width: 5rem; background: #ffebcf; border: 0.25rem solid; border-top-color: #f1c5a7; border-right: 0; border-bottom-color: #fff9e6; border-left-color: #ffd9af;
}
.box-wrapper--3 .matchbox { position: relative; margin-left: 5rem; width: calc(100% - 5rem); height: calc(100% - 0.5rem); background: #fff9e6;
}
.box-wrapper--3 .matchbox:before, .box-wrapper--3 .matchbox:after { position: absolute; right: 0; content: '';
}
.box-wrapper--3 .matchbox:before { bottom: -0.5rem; left: 0; height: 0.5rem; background: #ffd9af; transform: skewX(-45deg); transform-origin: top left;
}
.box-wrapper--3 .matchbox:after { top: 0; bottom: 0; left: -0.5rem; z-index: -1; width: 0.5rem; background: #ddb899; transform: skewY(-45deg); transform-origin: top right;
}
.box-wrapper--3 .match { margin: 0.125rem 0 0.125rem 1.5rem; height: 7.5%;
}
.box-wrapper--3 .match:before, .box-wrapper--3 .match:after { display: block; float: left; content: '';
}
.box-wrapper--3 .match:before { position: relative; z-index: 1; width: 2rem; height: 100%; background: #1b8feb; border-radius: 30% 70% 70% 30% / 50% 50% 50% 50%;
}
.box-wrapper--3 .match:after { margin-top: 0.25rem; margin-left: -0.25rem; width: calc(100% - 1.75rem); height: 0.625rem; background: #edc56d;
}
.box-wrapper--3 .title { position: absolute; top: 50%; left: 50%; color: rgba(40, 36, 32, 0.85); font-family: 'ATC Rosemary'; font-size: 9rem; letter-spacing: -0.075em; transform: translate(-50%, -50%);
}
.box-wrapper--3 .title:before { position: absolute; top: 50%; left: 50%; z-index: -1; display: block; width: 7.5rem; height: 7.5rem; background: #ff9270; content: ''; transform: translate(-50%, -50%) rotate(45deg);
}
.box-wrapper--3 .filigree { position: absolute; left: 50%; width: 13rem; transform: translateX(-50%);
}
.box-wrapper--3 .filigree:first-child { top: 1rem;
}
.box-wrapper--3 .filigree:last-child { bottom: 1rem; transform: translateX(-50%) rotate(180deg);
}
.box-wrapper--3 .upc { position: absolute; top: 50%; right: -5%; font-family: 'ATC Overlook'; letter-spacing: 0.2em; color: #665c54; font-size: 0.75rem; transform: translateY(-50%) rotate(-90deg);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="box-wrapper box-wrapper--1"> <div class="box"> <div class="logo-mark"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 26.7 18.6" style="enable-background:new 0 0 26.7 18.6;" xml:space="preserve"> <style type="text/css"> .st0{fill:#B58764;} </style> <g> <rect x="12.8" y="10.6" class="st0" width="1" height="5"/> <rect x="13" y="17.6" class="st0" width="0.8" height="1.1"/> <path class="st0" d="M0,13.9l0.1,0.4L0,14.7c0.2,0.1,3.8,0.9,7.2,0.9c1.8,0,3.6-0.2,4.8-0.9l-0.2-0.3L12,14C8.4,12,0.3,13.8,0,13.9 z M2,14.3c2.4-0.4,6.4-0.9,8.9,0C8.4,15.2,4.4,14.7,2,14.3z"/> <path class="st0" d="M14.7,12.3l0.3,0.2l0,0.4c3.3,0,7.8-4.9,8-5.1l-0.3-0.3l-0.1-0.4C22.4,7.3,16.4,9.5,14.7,12.3z M21.1,8.7 c-1.3,1.2-3.4,2.8-5.1,3.3C17.2,10.6,19.5,9.4,21.1,8.7z"/> <path class="st0" d="M11.7,12.9l0-0.4l0.3-0.2c-1.7-2.8-7.6-5-7.9-5.1L4,7.6L3.7,7.8C3.9,8,8.4,12.8,11.7,12.9z M10.8,12 C9.1,11.5,7,9.9,5.7,8.7C7.3,9.4,9.6,10.6,10.8,12z"/> <path class="st0" d="M9.2,4.6L8.8,4.7C8.9,4.9,10.1,9,11.8,10l0.2-0.3l0.4,0c0-2-2.8-5.2-2.9-5.3L9.2,4.6z M10.6,7.2 c0.2,0.3,0.4,0.7,0.6,1C10.9,7.9,10.7,7.5,10.6,7.2z"/> <path class="st0" d="M15,10c1.7-1,2.9-5.1,2.9-5.3l-0.4-0.1l-0.3-0.2c-0.1,0.1-2.9,3.3-2.9,5.3l0.4,0L15,10z M15.7,8.2 c0.2-0.3,0.4-0.7,0.6-1C16,7.5,15.9,7.9,15.7,8.2z"/> <path class="st0" d="M26.7,13.9c-0.3-0.1-8.4-2-12,0l0.2,0.3l-0.2,0.3c1.2,0.7,3,0.9,4.8,0.9c3.4,0,7-0.8,7.2-0.9l-0.1-0.4 L26.7,13.9z M15.8,14.3c2.5-0.9,6.5-0.4,8.9,0C22.3,14.7,18.3,15.2,15.8,14.3z"/> <path class="st0" d="M13.4,0.1L13,0c-0.1,0.3-1.5,6.4,0.1,8.5l0.3-0.2l0.3,0.2c1.6-2.2,0.1-8.3,0.1-8.5L13.4,0.1z M13.4,7.4 c-0.4-1.3-0.3-3.6,0-5.3C13.6,3.8,13.8,6.1,13.4,7.4z"/> </g> </svg> </div><!-- /.logo-mark --> <div class="label"> <div class="year">1972</div> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 81.9 14.2" style="enable-background:new 0 0 81.9 14.2;" xml:space="preserve"> <style type="text/css"> .st1{fill:#FFFFFF;} </style> <g> <path class="st1" d="M47.9,0c-2.4,0-4.4,1.8-5.5,3.3l-7.4,10.9h16.6c2.6,0,8.4,0,8.4,0c1.9,0,3.5-1.4,3.9-3.1h2.1 c1.9,0,3.5-1.4,3.9-3.1h1.9c1.9,0,3.5-1.4,3.9-3.1h2.4c2.2,0,4-1.8,4-4V0L47.9,0L47.9,0z M77.9,3.5H61.7v1.3h12.1 c-0.3,0.9-1.2,1.8-2.2,1.8H58.7v1.3H68c-0.3,0.9-1.2,1.8-2.2,1.8H55.2v1.3H62c-0.3,0.9-1.2,1.5-2.2,1.5c0,0-5.8,0-8.4,0H38l5.7-8.4 c0.7-1,2.3-2.6,4.2-2.6h32.2C79.7,2.5,78.9,3.5,77.9,3.5z"/> <path class="st1" d="M34,0L0,0l0,0.8c0,2.2,1.8,4,4,4h2.4c0.4,1.8,2,3.1,3.9,3.1h1.9c0.4,1.8,2,3.1,3.9,3.1h2.1 c0.4,1.8,2,3.1,3.9,3.1c0,0,5.8,0,8.4,0h16.6L39.5,3.3C38.4,1.8,36.3,0,34,0L34,0z M1.8,1.6H34c1.8,0,3.5,1.6,4.2,2.6l5.7,8.4H30.4 c-2.6,0-8.4,0-8.4,0c-1,0-1.8-0.6-2.2-1.5h6.8V9.8H16c-1,0-1.8-1-2.2-1.8h9.2V6.6H10.2c-1,0-1.8-1-2.2-1.8h12.1V3.5H4 C3,3.5,2.1,2.5,1.8,1.6z"/> </g> </svg> <div class="title">Aepohabt</div> <div class="logo"></div> <div class="text-mark">ot</div> </div><!-- /.label --> <h1>TU-125</h1> <h2>бонбони цигари</h2> </div><!-- /.box -->
</div><!-- /.box-wrapper.box-wrapper--1 -->
<div class="box-wrapper box-wrapper--2"> <div class="box"> <div class="size">King Size</div> <div class="desc">Candy Cigarettes</div> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 52.9 77.8" style="enable-background:new 0 0 52.9 77.8;" xml:space="preserve"> <style type="text/css"> .st2{fill:#FFFFFF;} </style> <g> <path class="st2" d="M14,29.2c-1,2.1-1.6,4.2-1.8,6.5c-0.3,3,0,5.9,1.8,8.6c0.3,0.5,1.9,2.6,2.6,3.4c1.1,2.7,2.1,5.4,2,8.4 c-0.2,5.6-0.4,11.1-0.7,16.7c-0.1,1.7-0.2,1.8-1.8,1.3c-2.3-0.6-3-0.2-3.3,2.1c0,0.1,0,0.2,0,0.2c-0.2,1.1,0.1,1.5,1.3,1.5 c1.8,0,3.5,0,5.3,0c0.9,0,1.6-0.3,2-1c0.6-1.1,1.3-2.2,1.6-3.3c0.4-1.4,0.4-2.9,0.6-4.4c0.5-3.7,1.7-7.3,3.2-10.7 c0.7-1.6,1.1-3.2,1.1-4.9c0.1-2.2,0.6-4.3,1.9-6.1c0.5-0.7,1.3-1.5,2.1-1.7c1.1-0.3,2.3-0.3,3.5-0.2c4.4,0.5,7.4,3.2,9.5,6.9 c0,0.1,0,0.2,0,0.3c-0.3-0.1-0.4-0.3-0.6-0.5c-2.4-2.3-5.2-4-8.5-4.8c-3.8-1.1-6.1,0.3-6.7,4.2c-0.5,2.9-0.5,6-0.7,9 c0,0.7,0.1,1.5,0.3,2.2c0.6,2.2,2.3,3.5,4.2,4.5c1.1,0.5,2.3,1,3.4,1.6c1.5,0.8,2.6,2,3.5,3.4c0.6,0.9,0.3,1.4-0.7,1.6 C38.5,73.9,38,74,37.6,74c-3.7,0-7.3-0.7-10.8-1.7c-0.6-0.2-1.1-0.1-1.6,0.3c-1.2,1.1-1.6,2.5-1.3,4.1c0.1,0.7,0.5,1,1.3,1 c7.9,0,15.8,0,23.7,0c1.8,0,2.2-0.3,2.6-2.1c0.5-2.5,0.8-5,1.3-7.5c0.5-2.4,0.3-4.7-0.4-7c-0.3-1.2-0.6-2.4-0.7-3.6 c-0.4-3.8-1.4-7.5-3.3-10.8c-2.4-4.3-5.5-7.9-9.3-11.1c-1.6-1.3-3.1-2.6-4.7-3.9c-3.4,5-7.4,9.2-12.8,11.6c1.9-1.9,4.4-4.1,6-5.6 c2.1-2,3.9-3.8,5-6.5c0.1-0.2,0.2-0.6,0.1-0.8c-1.1-1.9-2.2-3.8-3.3-5.7c-4.2,2.9-6.7,2.3-11.6,1.9c4.4-0.5,6.6-1,10.6-3.2 c0.4-0.2,0.4-0.4,0.3-0.8c-0.2-1.5-0.3-2.9-0.4-4.4c-0.1-2-0.4-4-1.4-6c-0.4,0.5-0.7,2.9-1,3.2c-0.6,0.5-0.8,1.3-0.7,2.2 c0.4,3-0.9,3.1-3.3,4.1c-2.3,0.9-4.7,1.5-7.2,1.1"/> <path class="st2" d="M18.6,21.7c3.3-0.4,5.1-2.2,5.6-5.3c0.2-1.4,1.3-3.6,2.1-4.9c0.5-0.8,1.1-1.7,1-2.6c-0.1-2.8-0.9-5.5-2.2-8.1 c-0.4-0.8-1-0.9-1.6-0.3c-0.6,0.6-1,1.4-1.6,2.1c-0.7,0.9-1.3,1.8-2.1,2.5c-1.5,1.3-3.3,2.1-5.2,2.6C14,7.8,13.3,8,12.6,8.1 c2.1,0.2,4.1,0.9,5.5,2.1c0.2,0.2,0.2,0.6,0.3,0.9c-0.3,0-0.6,0-0.9-0.1c-1-0.5-1.9-1-2.9-1.4c-1.9-0.8-5.3,0.1-6,2.4 c-0.2,0.5-0.7,0.9-1.2,1.2c-0.7,0.4-1.5,0.8-2.3,1c-0.9,0.2-0.8,0.7-0.7,1.4c0.3,1.7,1.4,2.8,2.4,4.1c0.2,0.3,0.7,0.4,1,0.4 c0.8,0.1,1.6,0,2.3,0.1c0.4,0.1,0.8,0.4,1.2,0.6c0.5,0.3,1,1,1.5,1C14.8,21.7,16.8,21.9,18.6,21.7z M16.2,14.2 c-0.9-0.4-1.2-0.4-2.2-0.3c-1.1,0.1-1.5,0-2.6,0c-1,0-1.6-0.4-1.1-1.3c0.6-1.2,1.4-1.8,2.8-1.9c1.4,0.1,2,0.6,2.5,1.7 c0.3,0.8,0.5,0.7,1,1.2"/> <path class="st2" d="M4.3,70.6c-0.9-1.8-1.7-4.6-1.8-6.5c-0.1-2.6,0.1-5.3,0.6-7.9c0.2-1.2,0.7-2.1-0.3-2.3 c-1.1-0.2-1.9,0.4-2.1,1.6c-0.8,4-1.1,8-0.3,12c0.6,3.2,2,6,4.8,7.9c1.6,1.1,3.4,1.6,5.2,1.7c0.3-1.2,0.6-2.3,0.9-3.4 c-0.1,0-0.3,0-0.5,0C8.1,73.5,5.5,73.1,4.3,70.6z"/> <path class="st2" d="M19.5,4.1c0.2-0.2,0.4-0.6,0.3-0.8c-0.3-0.9-0.6-1.9-1-2.7c-0.3-0.7-1-0.7-1.4-0.1C17,1,16.7,1.7,16.5,2.3 c-0.4,0.9-0.7,1.8-1.1,2.6C15,5.6,14.5,6.3,13.9,7C16.2,6.6,18.1,5.8,19.5,4.1z"/> </g> </svg> <div class="title">Chat Blanc</div> <div class="tagline"><span>Premium</span></div> </div><!-- /.box -->
</div><!-- /.box-wrapper.box-wrapper--2 -->
<div class="box-wrapper--3"> <div class="matchbed"> <div class="match"></div> <div class="match"></div> <div class="match"></div> <div class="match"></div> <div class="match"></div> <div class="match"></div> <div class="match"></div> <div class="match"></div> <div class="match"></div> <div class="match"></div> <div class="match"></div> <div class="match"></div> </div><!-- /.matchbed --> <div class="matchbox"> <div class="filigree"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 164 18.7" style="enable-background:new 0 0 164 18.7;" xml:space="preserve"> <style type="text/css"> .st3{fill:none;stroke:#FF9271;stroke-miterlimit:10;} </style> <g> <path class="st3" d="M36.6,5.7c-3.4,0-6.2,2.8-6.2,6.2s2.8,6.2,6.2,6.2s6.2-2.8,6.2-6.2H0"/> <polyline class="st3" points="36.6,5.7 76.7,5.7 82,0.4 "/> <line class="st3" x1="76.7" y1="5.7" x2="82.1" y2="11.1"/> <path class="st3" d="M127.4,5.7c3.4,0,6.2,2.8,6.2,6.2s-2.8,6.2-6.2,6.2c-3.4,0-6.2-2.8-6.2-6.2H164"/> <polyline class="st3" points="127.4,5.7 87.3,5.7 82,0.4 "/> <line class="st3" x1="87.3" y1="5.7" x2="81.9" y2="11.1"/> <path class="st3" d="M40.6,11.9"/> </g> </svg> </div><!-- /.filigree --> <div class="title">25</div> <div class="upc">02101992</div> <div class="filigree"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 164 18.7" style="enable-background:new 0 0 164 18.7;" xml:space="preserve"> <style type="text/css"> .st3 { fill:none; stroke:#FF9271; stroke-miterlimit:10;} </style> <g> <path class="st3" d="M36.6,5.7c-3.4,0-6.2,2.8-6.2,6.2s2.8,6.2,6.2,6.2s6.2-2.8,6.2-6.2H0"/> <polyline class="st3" points="36.6,5.7 76.7,5.7 82,0.4 "/> <line class="st3" x1="76.7" y1="5.7" x2="82.1" y2="11.1"/> <path class="st3" d="M127.4,5.7c3.4,0,6.2,2.8,6.2,6.2s-2.8,6.2-6.2,6.2c-3.4,0-6.2-2.8-6.2-6.2H164"/> <polyline class="st3" points="127.4,5.7 87.3,5.7 82,0.4 "/> <line class="st3" x1="87.3" y1="5.7" x2="81.9" y2="11.1"/> <path class="st3" d="M40.6,11.9"/> </g> </svg> </div><!-- /.filigree --> </div><!-- /.matchbox -->
</div><!-- /.box-wrapper--3 -->
</body>
</html>
ATC Throwback Packs - Script Codes CSS Codes
* { box-sizing: border-box;
}
html { font-size: 2vmin;
}
body { padding: 1rem; background: #5ee3ab; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center;
}
.box-wrapper { position: relative; display: inline-block; margin: 1rem; width: 15rem; height: 22rem; text-align: center; vertical-align: middle;
}
.box-wrapper:before { position: absolute; top: 0; right: 0; width: 1rem; height: calc(100% - 1rem); content: ''; transform: skewY(45deg); transform-origin: top left;
}
.box-wrapper:after { position: absolute; bottom: 0; left: 0; width: 14rem; height: 1rem; content: ''; transform: skewX(45deg); transform-origin: top left;
}
.box-wrapper .box { width: calc(100% - 1rem); height: calc(100% - 1rem);
}
.box-wrapper--1:before { background: #eae4c7;
}
.box-wrapper--1:after { background: #ddd9c7;
}
.box-wrapper--1 .box { background: #f4f0da; font-family: 'ATC Duel';
}
.box-wrapper--1 .logo-mark { margin: 0 auto 0.625rem; width: 5rem; height: 2.5rem; background: #ebddaa;
}
.box-wrapper--1 .logo-mark svg { margin: 0.5rem auto; width: 2rem;
}
.box-wrapper--1 .label { position: relative; padding: 3.3rem 0 4.9rem; background: #0f87d9; color: #fff;
}
.box-wrapper--1 .label:before { position: absolute; top: 0; right: -1rem; display: block; width: 1rem; height: 100%; background: #1883b2; content: ''; transform: skewY(45deg); transform-origin: top left;
}
.box-wrapper--1 .label:after { position: absolute; top: 50%; left: 50%; display: block; width: 8.6rem; height: 8.6rem; border: 0.125rem solid #fff; border-radius: 50%; content: ''; transform: translate(-50%, -50%);
}
.box-wrapper--1 .label svg { width: 6.25rem;
}
.box-wrapper--1 .text-mark { position: absolute; right: 1.25rem; bottom: 1.25rem; text-transform: uppercase; font-size: 0.6rem;
}
.box-wrapper--1 .year { margin-bottom: 1.375rem; font-family: 'ATC Timberline'; font-weight: 500; font-size: 0.3rem;
}
.box-wrapper--1 .title { margin-top: 0.25rem; text-transform: uppercase; font-size: 0.7rem;
}
.box-wrapper--1 .title:before { position: absolute; bottom: 1.75rem; left: 50%; display: block; width: 0.0625rem; height: 2.5rem; background: #fff; content: '';
}
.box-wrapper--1 h1 { margin: 0.7rem 0 0.25rem; font-size: 2.5rem; color: #bc9342; font-weight: 800;
}
.box-wrapper--1 h2 { font-size: 1.15em; color: #0f87d9;
}
.box-wrapper--2:before { background: #dd2a4d;
}
.box-wrapper--2:after { background: #d12e4e;
}
.box-wrapper--2 .box { position: relative; padding: 2.5rem 0; background: #f8273e; font-family: 'ATC Timberline'; color: #fff; text-transform: uppercase;
}
.box-wrapper--2 .box:before { position: absolute; top: 0.625rem; right: 0.625rem; bottom: 0.625rem; left: 0.625rem; display: block; border: 0.1875rem solid #fff; content: '';
}
.box-wrapper--2 .size { font-size: 0.8rem;
}
.box-wrapper--2 .desc { margin: 0.6rem 0 1.25rem; font-size: 0.5rem;
}
.box-wrapper--2 svg { margin-bottom: 1.25rem; width: 4rem;
}
.box-wrapper--2 .title { margin-bottom: 1rem; font-family: 'ATC Krueger'; font-size: 3.75rem;
}
.box-wrapper--2 .tagline { position: relative; z-index: 1; font-family: 'ATC Ripley'; text-transform: none;
}
.box-wrapper--2 .tagline span { padding: 0 0.5rem; background: #f8273e;
}
.box-wrapper--2 .tagline:before { position: absolute; top: 50%; right: 2.5rem; left: 2.5rem; z-index: -1; display: block; height: 0.0625rem; background: #fff; content: ''; transform: translateY(-50%);
}
.box-wrapper--3 { position: relative; display: inline-block; margin: 1rem; width: 30rem; height: 18rem; vertical-align: middle;
}
.box-wrapper--3 .matchbed { position: absolute; top: 0.5rem; bottom: 1rem; left: 0; width: 5rem; background: #ffebcf; border: 0.25rem solid; border-top-color: #f1c5a7; border-right: 0; border-bottom-color: #fff9e6; border-left-color: #ffd9af;
}
.box-wrapper--3 .matchbox { position: relative; margin-left: 5rem; width: calc(100% - 5rem); height: calc(100% - 0.5rem); background: #fff9e6;
}
.box-wrapper--3 .matchbox:before, .box-wrapper--3 .matchbox:after { position: absolute; right: 0; content: '';
}
.box-wrapper--3 .matchbox:before { bottom: -0.5rem; left: 0; height: 0.5rem; background: #ffd9af; transform: skewX(-45deg); transform-origin: top left;
}
.box-wrapper--3 .matchbox:after { top: 0; bottom: 0; left: -0.5rem; z-index: -1; width: 0.5rem; background: #ddb899; transform: skewY(-45deg); transform-origin: top right;
}
.box-wrapper--3 .match { margin: 0.125rem 0 0.125rem 1.5rem; height: 7.5%;
}
.box-wrapper--3 .match:before, .box-wrapper--3 .match:after { display: block; float: left; content: '';
}
.box-wrapper--3 .match:before { position: relative; z-index: 1; width: 2rem; height: 100%; background: #1b8feb; border-radius: 30% 70% 70% 30% / 50% 50% 50% 50%;
}
.box-wrapper--3 .match:after { margin-top: 0.25rem; margin-left: -0.25rem; width: calc(100% - 1.75rem); height: 0.625rem; background: #edc56d;
}
.box-wrapper--3 .title { position: absolute; top: 50%; left: 50%; color: rgba(40, 36, 32, 0.85); font-family: 'ATC Rosemary'; font-size: 9rem; letter-spacing: -0.075em; transform: translate(-50%, -50%);
}
.box-wrapper--3 .title:before { position: absolute; top: 50%; left: 50%; z-index: -1; display: block; width: 7.5rem; height: 7.5rem; background: #ff9270; content: ''; transform: translate(-50%, -50%) rotate(45deg);
}
.box-wrapper--3 .filigree { position: absolute; left: 50%; width: 13rem; transform: translateX(-50%);
}
.box-wrapper--3 .filigree:first-child { top: 1rem;
}
.box-wrapper--3 .filigree:last-child { bottom: 1rem; transform: translateX(-50%) rotate(180deg);
}
.box-wrapper--3 .upc { position: absolute; top: 50%; right: -5%; font-family: 'ATC Overlook'; letter-spacing: 0.2em; color: #665c54; font-size: 0.75rem; transform: translateY(-50%) rotate(-90deg);
}
Developer | Tiffany Stoik |
Username | tstoik |
Uploaded | November 28, 2022 |
Rating | 4 |
Size | 9,363 Kb |
Views | 14,168 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
ATC Vintage Radio Flip Clock | 9,722 Kb |
Twirling Flower | 4,081 Kb |
Chevron BG Pattern | 2,374 Kb |
Rainbow Infinity Loader | 3,639 Kb |
8-bit Hovers | 146,179 Kb |
Hover Reveal Effect | 4,000 Kb |
One element four color loader | 2,765 Kb |
Hexagon Loader | 3,261 Kb |
Morphing Logo Concept | 4,693 Kb |
Animated Logo | 3,203 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
CSS Social Media Icon | TychoBlender | 3,871 Kb |
FontAwesome icons with animation | Nicotinell | 2,083 Kb |
Fullscreen Parallax | Bassta | 3,313 Kb |
Simple blog concept | Drew_mc | 2,666 Kb |
Reading Grid | Tappily | 4,306 Kb |
CSS Link Icons with jQuery Titles | Nicwinn | 2,312 Kb |
Css color for svg | Ademilter | 2,392 Kb |
Svg animation draw | SzymonDziewonski | 5,545 Kb |
Responsive Section hover effect to show content | Berdejitendra | 2,540 Kb |
Slick Slider | Wearebold | 5,913 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!