Skip to main content

HOW USE AND WORK AFTER AND BEFORE EFFECT IN HTML & 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>AFTER AND BEFORE EFFECT</title>
<link rel="stylesheet" type="text/css" href="textef.css">
</head>
<body>

 <div class="mainDiv">
<div class="centerDiv">
<h1>web</h1>
</div>
</div>
</body>

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

CSS CODE
***************

 *{
  margin: 0;
  padding: 0;
}

 .mainDiv{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;justify-content: center;
  text-align: center;
}

 h1{
  font-size: 6rem;
  color: skyblue;
  text-transform: uppercase;
  letter-spacing: 3px;
}

 h1::before{
  content: 'dnp';
  color: #fff ;
  display: block;
  background-color:#c70039; 
}

 h1::after{
  content: 'developer';
  color: #fff;
  display: block;
 background-color:#c70039;

}
----------***----------

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>DESIGN MOODERN  WEBSITE</title> <link rel="stylesheet" type="text/css" href="modern1.css"> <link href="https://fonts.googleapis.com/css?family=Saira+Stencil+One&display=swap" rel="stylesheet"> </head> <body> <header> <div class="mainheader">         <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

SIMPLE WEB DESIGN BY USING HTML AND CSS(SLANTED & USE 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>SLANTED DIV DESIGN</title> <link rel="stylesheet" type="text/css" href="shape5.css"> </head> <body> <div class="thing1"> <img src="pic2.jpg"> </div> <div class="thing2"> <h2>DNP DEVELOPER</h2> <p>hi.. i am dhruv patel. i am web developer. i am created differnt effect make by using html & css.</p> </div> </body> </html> ---------- *** ---------- CSS CODE *************** body{   padding: 0;   margin: 0; } .thing1{   height: 450px;   position: relative;   width: 100%; } .thing1 img{   width: 100%; } .thing2{   background: #fb6b19;   color: #fff; ...
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> <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