Happy New Year || Pure CSS Project Code Full Process To Develop

 How To Develop " HAPPY NEW YEAR 2024 "  With HTML , CSS







1.Give the file name (index.html)
Copy This Code :
-----------------------------------------------------------------------------------------------------------------------------

HTML 
Code:

<div class="feliz">Happy new year</div>
<div class="ano_novo">
  <span>202</span>
  <span class="seis">3</span>
  <span class="sete">4</span>
  <div class="balao"></div>
</div>
<div class="fogos">
  <div class="f1">
    <span><i></i></span>
    <span><i></i></span>
    <span><i></i></span>
  </div>
  <div class="f2">
    <span><i></i></span>
    <span><i></i></span>
    <span><i></i></span>
  </div>
  <div class="f3">
    <span><i></i></span>
    <span><i></i></span>
    <span><i></i></span>
  </div>
  <div class="f4">
    <span><i></i></span>
    <span><i></i></span>
    <span><i></i></span>
  </div>
</div>
<a href="https://twitter.com/cecelabomfim" class="author">Marcela Bomfim</a>

-----------------------------------------------------------------------------------------------------------
CSS Code:

@import url('https://fonts.googleapis.com/css?family=Montserrat:700|Pacifico');

*, *:after, *:before{
  box-sizing:border-box;
  margin:0;
  padding:0;
  -webkit-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
}
html{
background: #222048;
}
.feliz{
  width: 100%;
  font-family: 'Pacifico', cursive;
  font-size: 100px;
  font-weight: 700;
  color: #f48fb1;
  text-align: center;
  position: absolute;
  top: 50%;
  opacity: 0;
  animation: vem_feliz 2s ease-in-out 7s forwards;
}
.ano_novo{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 200px 100px 0px 0px;
}
.ano_novo>span{
  font-family: 'Montserrat', sans-serif;
  font-size: 175px;
  font-weight: 700;
  color: #7a8fe8;
}
span.seis{
  position: absolute;
  top: 50%;
  right: 50%;
  margin-right: -200px;
  animation: vai_2016 5s ease-in-out 5s forwards;
}
span.sete{
  position: absolute;
  right: 0%;
  margin-right: -200px;
  animation: vem_2017 6s ease-in-out forwards;
}
span.sete:before{
  content: '';
  width: 0px;
  height: 6px;
  display: block;
  border-radius: 3px;
  background: #7a8fe8;
  transform: rotate(0deg);
  transform-origin: left top;
  position: absolute;
  top: 55px;
  left: 10px;
  z-index: -1;
  animation: entrega_balao 1s ease-in-out 4s;
}
.balao{
  width: 100px;
  height: 100px;
  display: block;
  background: #e8d57a;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  margin-top: -165px;
  right: 0%;
  margin-right: -200px;
  animation: vem_e_vai_balao 10s ease-in-out forwards;
}
.balao:before{
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 20px 10px;
  border-color: transparent transparent #b19b32 transparent;
  position: absolute;
  left: 50%;
  margin-left: -10px;
  bottom: -10px;
  z-index: -1;
}
.balao:after{
  content: '';
  width: 4px;
  height: 100px;
  display: block;
  background: #fff;
  border-radius: 0px 0px 3px 3px;
  position: absolute;
  left: 50%;
  margin-left: -2px;
  bottom: -110px;
}
.fogos{
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.fogos>div{
  border: 2px solid #fff;
  position: absolute;
  opacity: 0;
  animation: solta_fogos 1.5s ease-in-out 8s forwards;
}
.fogos>div.f1{
  left: 20%;
  top: 40%;
}
.fogos>div.f2{
  left: 15%;
  top: 70%;
}
.fogos>div.f3{
  right: 20%;
  top: 40%;
}
.fogos>div.f4{
  right: 15%;
  top: 70%;
}
.fogos>div span{
  width: 6px;
  height: 6px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: estoura_fogos 0.5s ease-in-out 9s forwards;
}
.fogos>div span:nth-child(1){
  transform: rotate(0deg);
}
.fogos>div span:nth-child(2){
  transform: rotate(120deg);
}
.fogos>div span:nth-child(3){
  transform: rotate(240deg);
}
.fogos>div span:before{
  content: '';
  width: 2px;
  height: 50px;
  display: block;
  background: #f5cc06;
  position: absolute;
  top: -60px;
  left: 2px;
}
.fogos>div span:after{
  content: '';
  width: 2px;
  height: 50px;
  display: block;
  background: #f5cc06;
  position: absolute;
  bottom: -60px;
  left: 2px;
}
.fogos>div span i:before{
  content: '';
  width: 3px;
  height: 3px;
  display: block;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: -15px;
  left: 10px;
}
.fogos>div span i:after{
  content: '';
  width: 3px;
  height: 3px;
  display: block;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: -15px;
  right: 10px;
}
a.author{
  font-size: 12px;
  text-decoration: none;
  color: #f47c7c;
  position: fixed;
  bottom: 10px;
  right: 10px;
}

@keyframes vem_2017 {
  0% {
    right: 0%;
  }
  66.6666% {
    right: 50%;
    margin-right: -300px;
  }
  90% {
    right: 50%;
    margin-right: -300px;
  }
  100% {
    right: 50%;
  }
}
@keyframes vem_e_vai_balao {
  0% {
    right: 0%;
  }
  40% {
    right: 50%;
    margin-right: -300px;
  }
  50% {
    right: 50%;
    margin-right: -200px;
    top: 50%;
  }
  100% {
    top: -100%;
    right: 50%;
  }
}
@keyframes entrega_balao {
  0% {
    transform: rotate(-30deg);
    width: 40px;
  }
  100% {
    transform: rotate(-150deg);
    width: 70px;
  }
}
@keyframes vai_2016 {
  0% {
    top: 50%;
  }
  100% {
    top: -100%;
  }
}
@keyframes vem_feliz {
  0% {
    margin-top: 0px;
    opacity: 0;
  }
  100% {
    margin-top: -200px;;
    opacity: 1;
  }
}
@keyframes solta_fogos {
  0% {
    margin-top: 100%;
    opacity: 0;
    width: 2px;
    height: 30px;
    display: block;
    border-radius: 50%;
  }
  75% {
    margin-top: 0%;
    opacity: 1;
    width: 2px;
    height: 30px;
    display: block;
    border-radius: 50%;
  }
  80%{
    margin-top: 0px;
    margin-left: 0px;
    opacity: 1;
    width: 10px;
    height: 10px;
    display: block;
    border-radius: 50%;
    transform: scale(0.2);
  }
  100%{
    opacity: 1;
    width: 10px;
    height: 10px;
    display: block;
    border-radius: 50%;
    transform: scale(1);
  }
}
@keyframes estoura_fogos {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Comments

Post a Comment

Hello Coders If You Have any Doughts Contact Us

Popular posts from this blog

"Job Preparation Guide" A Comprehensive Guide to Job Preparation: Strategies for Success

Image
Preparing for a job involves several key steps to increase your chances of success. Here's a comprehensive guide to help you prepare effectively: Self-Assessment: Identify your skills, strengths, weaknesses, and interests. Determine your career goals and aspirations. Consider what type of job or industry aligns with your skills and interests. Research: Research potential employers and industries. Explore job roles that match your skills and interests. Learn about the company culture, values, and mission of the organizations you're interested in. Stay updated on industry trends and developments. Networking: Build and maintain professional networks both online (LinkedIn, professional forums) and offline (industry events, seminars). Reach out to professionals in your desired field for informational interviews or advice. Attend career fairs and networking events to connect with potential employers. Resume and Cover Letter: Tailor your resume and cover letter to each job application
Read more

🎉Mastering the Web: Your Ultimate Guide to Learning CSS, HTML, and JavaScript

Image
 Introduction: Welcome to the dynamic world of web development! If you've ever marveled at the seamless designs and interactive features of your favorite websites, you're about to embark on a thrilling journey. Learning CSS, HTML, and JavaScript is like unlocking the keys to the virtual kingdom, allowing you to craft stunning web pages and bring them to life with functionality. In this blog, we'll dive into the essentials and share a roadmap that will set you on the path to mastering these fundamental web development languages. Chapter 1: Understanding the Basics HTML – The Backbone of the Web HTML, or HyperText Markup Language, is the foundation of every web page. It structures your content, turning a blank canvas into an interactive space. Dive into the world of tags, elements, and attributes, and witness the magic of creating your first webpage. CSS – Styling with Flair Cascading Style Sheets (CSS) add the style and finesse to your HTML structure. Learn how to use select
Read more

Accenture "Quality Engineer (Tester) Job Description: Roles, Responsibilities, and Skills" Apply Befor Expiry

Image
Accenture -------------------------------------------------------------- Position: Quality Engineer (Tester) BENGALURU     JOB NO. ATCI-4366344-S1689605     FULL-TIME Role Description: Enable full stack solutions through multi-disciplinary team planning and ecosystem integration to accelerate delivery and drive quality across the application lifecycle. Perform continuous testing for security, API, and regression suite. Create automation strategy, automated scripts, and support data and environment configuration. Participate in code reviews, monitor, and report defects to support continuous improvement activities for the end-to-end testing process. Must-Have Skills: Functional Test Planning Good-to-Have Skills: NA Experience: 0-2 years Qualification: Any Degree Educational Qualification: Any Degree Summary: As a Quality Engineer (Tester), you will play a crucial role in ensuring the quality of our software solutions. You will collaborate with cross-functional teams to develop and execut
Read more