[Style] Enhance the Beautiify heading

[sheetal-81]

What's the style idea?

We need to improve { Beautiify } heading in animation form like text color animation effect

Checklist

• [X] I have checked the existing issues.
• [X] I follow Contributing Guidelines of this project.
• [x] I am a GSSOC'24 contributor.
• [ ] I am a IWOC'24 contributor.
• [ ] I am a JWOC'24 contributor.
• [ ] I am a SWOC'24 contributor.

Code of Conduct

• [X] I agree to follow this project's "Code of Conduct".

[github-actions[bot]]

Hey @sheetal-81, Welcome to the project Beautiify! 🎊 Thanks for opening an issue! 🙌 Please wait for the issue to be assigned. Happy Coding!! ✨

[90firoj]

Hello sir , please add the label. I want to work on it .

[Stut26]

Hey please assign the label. I want to work on this. Please assign this to me.

[HareRamDwivedi]

I am a GSSOC contributor , I have a good experience in UI designing I can make it more visually appealing please assign me this issue under GSSOC 2024

[Rakesh9100]

Pls provide the supporting screenshot of your issue @sheetal-81

[sheetal-81]

okay The changes i want to do in Beatify heading I am writing it here according to priority wise -{1} Text logo animation {2} Loading Style CSS Text Animation {3} Text color animation for Text color animation i have sample video of its https://github.com/Rakesh9100/Beautiify/assets/134307985/0af87202-0d08-4189-86d6-d47e080e6951

for Loading Style CSS Text Animation here is the code

.css file @import url(https://fonts.googleapis.com/css?family=Montserrat);

html, body{ height: 100%; font-weight: 800; }

body{ background: yellow; font-family: Arial; }

svg { display: block; font: 10.5em 'Montserrat'; width: 960px; height: 300px; margin: 0 auto; }

.text-copy { fill: none; stroke: white; stroke-dasharray: 6% 29%; stroke-width: 5px; stroke-dashoffset: 0%; animation: stroke-offset 5.5s infinite linear; }

.text-copy:nth-child(1){ stroke: #4D163D; animation-delay: -1; }

.text-copy:nth-child(2){ stroke: #840037; animation-delay: -2s; }

.text-copy:nth-child(3){ stroke: #BD0034; animation-delay: -3s; }

.text-copy:nth-child(4){ stroke: #BD0034; animation-delay: -4s; }

.text-copy:nth-child(5){ stroke: #FDB731; animation-delay: -5s; }

@keyframes stroke-offset{ 100% {stroke-dashoffset: -35%;} }

and for text logo animation

LOGO

.css , :before, *:after { box-sizing: border-box; } html { height: 100%; } body { display: flex; align-items: center; justify-content: center; min-height: 100%; background-color: #f5f6f9; }

.logo-container { position: relative;

&:before {
    content:  "";
    position: absolute;
    top:      calc( 100% - 2px );
    width:    100%;
    height:   4px;
    background-color: #cf0000;
    transform-origin: center center;
    transform: scaleX( 0 );

    animation: line-animation 3s ease infinite alternate;
}

h1#page-logo {
    font: bold 6rem 'Arial', sans-serif;

    animation: clip-path-reveal-1 3s ease infinite alternate;
}

}

@keyframes line-animation { 0% { transform: scaleX( 0 ); } 15% { transform: scaleX( 0 ); } 20%, 25% { transform: scaleX( 1 ); top: calc( 100% - 2px ); } 50% { transform: scaleX( 1 ); top: 0px; } 70% { transform: scaleX( 0.2 ); top: 0px; } 80%, 100% { transform: scaleX( 0.2 ); top: 0px; } }

@keyframes clip-path-reveal-1 { 0%, 25% { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); } 50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } }

[Rakesh9100]

Go ahead @sheetal-81

[github-actions[bot]]

Hello @sheetal-81! Your issue #770 has been closed. Thank you for your contribution!! 🙌