From a1011b18f9004334611f3751f47192da9122998f Mon Sep 17 00:00:00 2001 From: TreetopFlyer Date: Tue, 10 Aug 2021 10:38:48 -0400 Subject: [PATCH] correct title animations --- index.html | 103 ++++++++++++++++++++++++----------------------------- 1 file changed, 47 insertions(+), 56 deletions(-) diff --git a/index.html b/index.html index d69eb16..7e9c4e2 100644 --- a/index.html +++ b/index.html @@ -29,42 +29,55 @@ section padding:50px; } + h2 { + display:flex; + align-items: center; + box-sizing:border-box; width:500px; margin:0 auto; - padding:5px 15px 5px 15px; + padding:5px 20px 5px 20px; text-align:center; text-transform:uppercase; font-size:36px; } -h2::before, h2::after +h2 > span +{ + position: relative; + flex:1; +} +h2 > span:first-child::before, h2 > span:last-child::before { - display: inline-block; content: "⬦"; - font-size: 61px; - line-height: 8px; - width: 0px; + line-height: 7px; + font-size: 60px; + text-indent:-37px; + display: block; + position: absolute; + top: -2px; + width: 0%; height: 5px; background: #000; - text-align: left; - text-indent: -37px; - vertical-align: middle; - margin-top: -10px; transition: width 0.4s; } -h2::before +h2 > span:first-child::before { - transform: translateX(-10px) + text-align:left; + direction:ltr; + right: 0; } -h2::after +h2 > span:last-child::before { - transform: translateX(10px) rotate(180deg); + text-align:right; + direction:rtl; + left: 0; } -h2[data-spy='true']::before, h2[data-spy='true']::after +h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last-child::before { - width:100px; + width: 100%; } + .CTA { position:relative; @@ -267,30 +280,12 @@ h2[data-spy='true']::before, h2[data-spy='true']::after - -
- Random Content -
- +