How to create an amazing welcome intro page background for websites

By Wisdom Isaac Oku

 HOW TO CREATE AMAZING WELCOME INTRO PAGE BACKGROUND FOR WEBSITES WITH ONLY HTML AND CSS 

You can watch the 50mins vedio on how to create your and also add your own effect or changes..







Watch Vedio 

You can also download the source code 👉👉 Download here  

Let's get started 

 Create a HTML file in any folder of your choice and call it index.html


Past the following code:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=Edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">


  <title>HTML</title>

  

  <!-- HTML -->

  


  <!-- Custom Styles -->

  <link rel="stylesheet" href="style.css">

</head>


<body>

  

  <div class="clip">

    <div class="h1"></div>

    <h1>WISTEEN TECHNOLOGY</h1>

    <h2>The home of comics.</h2>

    <button > Get started</button>

  </div>

  






  

  

  

</body>

</html>




Create a CSS file in the same folder and input the following codes 

body {

    font-size: 15pt;

    margin: 0;

    padding: 0;

    

    

}

.h1{

  /* font-weight: bolder; */

  width: 100%;

  height: 700px;

  /* color: black; */

  z-index: -5;

  position: absolute;

    left:50%;

    transform: translateX(-50%);

        background:linear-gradient(to right, rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(1.png) ;

        background-repeat: no-repeat;

    background-size: cover;


}

.clip {

  width: 100%;

  height: 700px;

  position: absolute;

  z-index:0;

}

.clip::before {

  content:"";

  position:absolute;

  z-index:-1;

  top:0;

  left:0;

  right:0;

  bottom:0;

-webkit-clip-path: polygon(0 86%, 45% 0, 100% 88%, 48% 54%);

clip-path: polygon(0 86%, 45% 0, 100% 88%, 48% 54%);

    background:url(1.png);

    background-repeat: no-repeat;

    background-size: cover;

    animation-name: cliper;

    animation-duration: 4s;

    animation-direction: alternate;

    

    animation-iteration-count: infinite;

    animation-play-state: running;

   animation-fill-mode:both;

    animation-timing-function: ease-in-out;


}


@keyframes cliper{

  0%{

    -webkit-clip-path: polygon(87% 0, 0% 100%, 68% 83%);

clip-path: polygon(87% 0, 0% 100%, 68% 83%);

  }

  

  20%{

    

    

-webkit-clip-path: polygon(87% 0, 0% 100%, 12% 31%);

clip-path: polygon(87% 0, 0% 100%, 12% 31%);

-webkit-clip-path: polygon(87% 0, 0% 100%, 12% 31%);

clip-path: polygon(87% 0, 0% 100%, 12% 31%);

    

  }

  40%{

    

-webkit-clip-path: polygon(87% 0, 0 36%, 100% 100%);

clip-path: polygon(87% 0, 0 36%, 100% 100%);


  }

  60%{

-webkit-clip-path: polygon(87% 0, 0 36%, 46% 100%);

clip-path: polygon(87% 0, 0 36%, 46% 100%);

  }

  80%{

    webkit-clip-path: polygon(67% 78%, 80% 0%, 100% 100%, 0% 100%);

clip-path: polygon(67% 78%, 80% 0%, 100% 100%, 0% 100%);

  }

  100%{

    webkit-clip-path: polygon(67% 78%, 80% 0%, 43% 56%, 0% 100%);

clip-path: polygon(67% 78%, 80% 0%, 43% 56%, 0% 100%);

  }

}


h1{

  font-size: 2em;

  color: white ;

    text-shadow: 3px 2px 3px black;

  margin-bottom: 0;

  padding-bottom: 0;

  font-family: sans-serif;

}

h2{

  

  color: plum;

    width:500px;

margin-top: 0;

font-style: italic;


}




button{

  width:400px;

  height :100px;

  outline:none;

  border:4px solid plum;

  color: white ;

  font-size: 2em;

  font-weight: bold;

  background: transparent ;

  left: 50%;

  top :500px;

  position: absolute;

  transform: translateX(-50%);

  box-shadow: 0px 2px 6px white inset;

}



@media (max-width:500px){

  button{

    width:300px;

  }

  h2{

    font-size: 1em;

    width: 300px;

  }

  h1{

    color: white ;

    text-shadow: 3px 2px 3px black;

  }

}


For the image




Comments

Post a Comment

Popular Post

What is the best way to improve life?

By Wisdom Isaac Oku
Image
  What is the best way to improve life? Don’t compare yourself. Everyone has got their own story to tell and so do you. Reading writing, and staying happy with yourself. Establishing boundaries when you need to. Staying positive about what life has got to offer you. Trying out new things every month or so. Keeping up with your health. Not falling victim to bitterness, hate or other negative emotions. Finding peace. Learning to “just keep swimming” no matter the weather. Accepting people for who and what they are. Accepting yourself. Learning something new every day even if its teeny tiny. “Be a friend to get a friend” Keeping your home clean. Whether your surround yourself with many people or none is up to you. Do what makes you feel good about your life. Don’t follow protocol but do stay disciplined. Last but not least, stand up for yourself. Don’t let people’s opinions rule over your life.
Read more

HOW TO DISTINGUISH BETWEEN A SEED 🌾 AND A BREAD 🍞

By Wisdom Isaac Oku
Image
DISTINGUISH BETWEEN A SEED AND A BREAD The bible says he has given bread to the eater and seed to the sower ISAIAH 55:10. Most people suffer penury because they disobey this law of bread to the eater and seed to the sower. They are incomes that are beard and while other incomes are a seed. What you suppose to sow for it to germinate out of hunger you eat it. This is the same event that happen to Esau he traded his birthright for food. Hunger of a day or three days won't kill you. Learn to know when it is a seed and when it is bread. And know when it is a bread don't sow bread because the bread would not yield anything it would just decay in the ground at least it turns to manure. Don't use  money given to you to fulfil a given task like your school fees or people’s money to sow seed God does not operate in that manner, He does not need your money but wants to see the power you have over your desire to lay it down. There is one thing you need to know about money; It is eit...
Read more

Russia vs. Ukraine Redux?

By Wisdom Isaac Oku
Image
  Russia vs. Ukraine Photo by ide alien  on Unsplash Mapping the Way Forward from the Recent Past.   I n April 2014, because of Ukrainian-Russian tensions, I quoted historian Stephen Cohen: “I think that we are three steps from war with Russia, two steps from a Cuban missile crisis.” Now, seven years later, New York Times Moscow correspondent Andrew  Kramer writes of “the largest military buildup along the border with Ukraine since the outset of Kyiv’s war with Russian-backed separatists seven years ago. . . . The [Russian] mobilization is setting off alarms in the North Atlantic Treaty Organization, European capitals and Washington.”     On 20 April Ukrainian President Volodymyr Zelensky warned Ukrainian TV viewers of the possibility of war, urged Russian President Putin “to step back from the brink,” and proposed a meeting with him. Only on 22 April did Russian Defense Minister Sergei Shoigu announce that Russia would begin withdrawing military forces fr...
Read more