Skip to main content

SIMPLE MINI WEB PAGE USING HTML & CSS (SLANTED DIV & SKEW)

hello friends....

TAKE THE FIRST STEP TO KNOWLEDGE FRIENDS BECAUSE KNOWLEDGE IS FREE.

HTML CODE
*******************

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NEW DESIGN CREATE</title>
<link rel="stylesheet" type="text/css" href="sla1.css">
</head>
<body>

 <div class="slant">
<h1>DNP DEVELOPER</h1>
    <img src="dnp_2.jpg">

     <div class="slantdiv"></div>
</div>

 <div class="paradiv">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>

 <div class="slant1">
<h2>LIKE SHARE SUBSCRIBE</h2>

     <div class="slantdiv2"></div>
</div>

 <footer>
<h3>THANK YOU :)</h3>
</footer>

 </body>

</html>
---------- *** ----------

CSS CODE


***************

*{
  padding: 0;
  margin: 0;
}

 .slant{
  width: 100%;
  height: 400px;
  background-color: pink;
  position: relative;
  text-align: center;
  
  /*jb aap new div loge to wo isi 400px ke niche se
  start hoga. jab ki ye right side se 400px se jayda hai. isliye
  ise complet banane ke liye.*/
  
  margin-bottom: 150px;
}

 h1{
  color: white;
  font-size: 70px;
  margin-bottom: 20px;
}

 img{
  width: 200px;
  height: 250px;
  border-radius: 50%;
}

 .slantdiv{
  /* same wahi div ki size jo slant mai di hai. */
  width: 100%;
  height: 400px;
 /* background-color: black; */
  position: absolute;
  top: 0;
  left: 0;
  
  transform: skewY(5deg);
  transform-origin: top left;
  z-index: -1;
  
  background-color: pink;
}

 .paradiv{
  width: 100%;
  height: 300px;
}

 p{
  font-size: 20px;
  padding: 60px 40px;
  text-align: center;
  line-height: 1.6;
}

 .slantdiv2{
  width: 100%;
  height: 400px;
  background-color: skyblue;
  position: absolute;
  top: 0;
  left: 0;
  transform: skewY(5deg);
  
  z-index: -1;
}

 .slant1{
  width: 100%;
  height: 400px;
  background-color: skyblue;
  position: relative;
  text-align: center;
  
  /*jb aap new div loge to wo isi 400px ke niche se
  start hoga. jab ki ye right side se 400px se jayda hai. isliye
  ise complet banane ke liye.*/
  
  margin-bottom: 150px;
  
  /* ye display, align-items, justyfy-content ko kis liye likha ?
  reason : ek div ke andar dusra div hai or h1 jaise tag ko use kiya hai. 
  ab isko sahi tarah se manage karne ke liye inako use kiya hai.
  */
  display:flex;
  align-items: center;
  justify-content: center;
}

 h2{
  text-align: center;
  font-size: 50px;
  text-transform: uppercase;
  color: white;
}

 footer{
  height: 200px;
  
}

 h3{
  font-size: 30px;
  text-align: center;

}

----------***----------

OUTPUT
============   


------------------------------------------------------------------------------------------------------------------------

>> IF YOU LIKE THIS BLOG, PLEASE SHARE AND SUBSCRIBE. ALSO COMMENT              FOR THIS BLOG.
>> IF YOU HAVE ANY QUESTIONS PLEASE ASK IN COMMENT.

>> IF YOU WANT TO LEARN C PROGRAM WITH OUTPUT, SO VISIT THIS BLOG
      https://dnpdeveloper.blogspot.com/

>> MY INSTAGRAM ID : dnp176

Labels:

Comments

Post a Comment

Popular posts from this blog

MODERN WEBSITE CREATE BY USING HTML AND CSS

hello friends.... TAKE THE FIRST STEP TO KNOWLEDGE FRIENDS  BECAUSE KNOWLEDGE IS FREE. HTML CODE ******************* <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>MODERN WEBSITE DESIGN</title> <link rel="stylesheet" type="text/css" href="modern_2.css"> <link href="https://fonts.googleapis.com/css?family=Saira+Stencil+One&display=swap" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <header> <div class="main_header"> <div class="logo"> <img src="dnp_bg.png" width="100px" height="100px"> </div> <nav> <a href="#">home</a> <a href="#">about us</a> <a href="#">contact us</a...
Post a Comment
Read more

MODERN WEBSITE CREATE BY USING HTML AND CSS

hello friends.... TAKE THE FIRST STEP TO KNOWLEDGE FRIENDS  BECAUSE KNOWLEDGE IS FREE. HTML CODE ******************* <!DOCTYPE html> <html> <head> <title>MODERN WEBSITE CREATE</title> <link rel="stylesheet" type="text/css" href="mord_site.css"> </head> <body> <header class="site-header"> <nav> <div class="logo"> <h1>DNP DEVELOPER</h1> </div> <div class="menu"> <ul> <li>Home</li> <li>About</li> <li>Contact Us</li> </ul> </div> </nav> <section> <div class="leftside"> <img src="1.png"> </div> <div class="rightside"> <h1>OUR MODERN WEBSITE</h1> <p>We Are the best website Developer Company.</p> <button>We...
Post a Comment
Read more

DESIGN REGISTRATION FORM BY USING HTML & CSS

hello friends.... TAKE THE FIRST STEP TO KNOWLEDGE FRIENDS  BECAUSE KNOWLEDGE IS FREE. HTML CODE ******************* <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="regis.css"> <title>REGISTRATION FORM</title> </head> <body> <h1>REGISTRATION FORM</h1> <div id="main_box"> <table align="center"> <tr><td>FIRST NAME </td><td><input type="text" name="f_name" maxlength="20"></td></tr> <tr><td>LAST NAME  </td><td><input type="text" name="l_name" maxlength="20"></td></tr> <tr><td>EMAIL ID </td><td><input type="text" name="emil"   m...
Post a Comment
Read more