Birthday Wishing HTML and CSS web page source code.

Wish to your friend with this web page and with different way.😋😍💗

preview 👇 👀

ADS

Download source code link below 👀👇

OR

    
    
<!DOCTYPE html>
<html>
<head> 
<meta charset="ISO-8859-1">
<title>Birthday Wishing</title>

    <link rel="Stylesheet" href="cssfile/AdminCss.css" type="text/css"><!--link css file-->
    <link rel="Stylesheet" href="cssfile/AdminInsert.css" type="text/css">

    <style>
            body{
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
                background-color: black;
            }

            .container{

                height: 100vh;
                width: 100%;
                background-image: url(images/3.jpg);
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                background-attachment: fixed;
                transition: 5s;
                font-family: cursive;
                animation-name: animate;
                animation-direction: alternate-reverse;
                animation-duration: 30s;
                animation-fill-mode: forwards;
                animation-iteration-count: infinite;
                animation-play-state: running;
                animation-timing-function: ease-in-out;


            }

            @keyframes animate{

                0%{
                    background-image: url(images/1.jpg);
                }
                20%{
                    background-image: url(images/2.jpg);
                }
                40%{
                    background-image: url(images/3.jpg);
                }
                60%{
                    background-image: url(images/4.jpg);
                }
                80%{
                    background-image: url(images/5.jpg);
                }
                100%{
                    background-image: url(images/6.jpg);
                }


            }
            .container2{

              /*  width: 200px;
                height: 200px;*/
              /*  border: 1px solid white;*/
               
            }
            .png1{

                width: 20%;
                float: left;
            }
            
            .png7{

                width: 16%;
                float: right;
                margin: -32px 35px 0px 0px;
            }
            .png6{

                width: 14%;
                float: left;
                margin: 0px 0px 0px 40px;

            }
            .betti_topic{

                color: #fff;
                font-family: unset;
                text-align: center;
                font-size: 81px;
                font-weight: 900;
                text-transform: uppercase;

            }
            .betti_topic:hover{

                color: red;
                font-family:sans-serif;
            }
            .para{
                color: #fff;
                font-size: 30px;
                /*border: 5px solid white;*/
                width: 800px;
                height: 200px;
                margin: 0px 10px 10px 298px;
                border-radius: 10px;
                cursor: pointer;
            }
            .para:hover{

                background: rgba(0, 0, 0, .6);
                border: 5px solid white;
                color: #F30828 ;
                font-family:sans-serif;
                /*cursor: progress;*/
                font-weight: 900;

            }
            .forDP{


                width: 150px;
                height: 2px;
                /* background-attachment: fixed; */
                /* background-size: cover; */
                /* background-image: url(images/betti.jpg); */
                margin: -46px 0px 0px 69px;
                border-radius: 5px;
              /*  border: 3px solid white;*/
                padding: -1px 41px -27px 13px;


            }
            .bettiDP{

               /* width: 80px;*/
                border-radius: 10px;
                background-attachment: fixed;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                border: 5px solid white;
             
             
            }
            .chathuranga{
                font-family: cursive;
                color: white;
                text-align: center;
                margin-top: 125px;
            }

            
            

  


   </style>
    

</head>

<body>

       <div class="container">

                       <img src="images/png1.png" class="png1">
                       <img src="images/png7.png" class="png7">

        <div class="container2">

               

        </div><!--container number2-->


                                 <h1 class="betti_topic">Happy Birthday To You</h1>



                                 <div class="forDP">
                                     

                                             <img src="images/avtr.png" class="bettiDP">

                                 </div>



                               
                                              <p class="para">


                                                  
                                                     Wishing you a beautiful day with good health and happiness forever.
                                                     I am blessed to have a friend like you, Loving thoughts and warm wishes on your birthday. Happy birthday!



                                              </p><!--para-->



                       <img src="images/png6.png" class="png6">
                                        
                       <img src="images/png4.png" class="png7">        



                       <p class="chathuranga">------Created by Chathuranga Ranasinghe for you!!!------</p>                            

                                                 
 
       </div><!container  ending tag-->
 
</body>
</html>

for images you need to download zip file

💓Thank you 💓

Ads

Birthday Wishing HTML and CSS web page source code.

Wish to your friend with this web page and with different way.😋😍💗

preview 👇 👀

Download source code link below 👀👇

OR

Posted by Chathuranga Ranasinghe

Post a Comment

0 Comments

Ads

ADS

Our E-books

C programming for beginner

Contact Us

Most Popular

3D_bookCover HTML | CSS with source code

What is Quantum computing?

Bus Reservation System Pure PHP,HTML,CSS,XAMP,MYSQl with source code

Subscribe Us

Facebook

Tags

Categories

Search This Blog

Report Abuse

Followers

Labels

Popular Posts

3D_bookCover HTML | CSS with source code

What is Quantum computing?

Bus Reservation System Pure PHP,HTML,CSS,XAMP,MYSQl with source code

Footer Menu Widget

Contact form

Ads

Ads

Birthday Wishing HTML and CSS web page source code.

Wish to your friend with this web page and with different way.😋😍💗

preview 👇 👀

Download source code link below 👀👇

OR

Posted by Chathuranga Ranasinghe

You may like these posts

Post a Comment

0 Comments

Ads

ADS

Our E-books

Contact Us

Most Popular

Subscribe Us

Facebook

Tags

Categories

Search This Blog

Followers

Labels

Popular Posts

Footer Menu Widget

Contact form