Skip to main content

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>
          <a href="#">SERVICE</a>
       </nav>

        <button class="btn">Help Line</button>
</div>

 <main>
<section class="left-sec">
<h2>We Bring Ideas To Life</h2>
<h1>PROGRAMMING</h1>
<p>programming is thinking Not typing. That's the thing about people who think they hate computers. What they really hate is lousy programmers.</p>
<button>LEARN MORE</button>
</section>

 <section class="right-sec">
<figure>
<img src="17.png" height="500px" width="600px">
</figure>
</section>

 </main>

 </header>

 </body>

</html>
CSS CODE
***************

 @import url('https://fonts.googleapis.com/css?family=Saira+Stencil+One&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: arial;
}

 header{
  width: 100%;
  height: 100vh;
  background-image:url('modern1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%; 
}

 .mainheader{
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mainheader .logo img{
  width: 200px;
  height: 130px;
  padding-left: 60px;
  margin-top: 50px;
}

 .mainheader nav{
  width: 450px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

 .mainheader nav a{
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 18px;
}

 .mainheader nav a:hover{
  text-decoration: none;
  color: #fff;
  padding: 10px;
  background-image: linear-gradient(to right, #7d41a6, #256eb0);
  border-radius: 10px;
  text-transform: uppercase;
  transition:0.8s;
  font-weight: bold;
}

 .btn{
  margin-right: 60px;
  cursor: pointer;
  
}
.mainheader button{
  padding: 10px 45px;
  font-size: 14px;
  color: #fff;
  border: none;
  border-radius: 10px;
  background-image: linear-gradient(to right, #f61c16, #ee1986);
}

 .mainheader button:hover{
  padding: 10px 45px;
  font-size: 14px;
  color: #fff;
  border: none;
  border-radius: 10px;
  background-image: linear-gradient(to right, #ee1986 , #f61c16);
}

 main{
   width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

 main .right-sec{
  padding-right: 100px;
  
}

 main .left-sec{
  padding-left: 100px;
}

 .left-sec h2{
  font-size: 20px;
  font-weight: lighter;
  color: #242424;
  margin-top: 100px;  
}

 .left-sec h1{
  font-size: 55px;
  font-weight: 700;
  margin: 15px 0;
  font-family: 'Archivo Black', sans-serif;
}

 .left-sec p{
  margin-bottom: 20px; 
  width:85%;
  text-transform: capitalize;
  line-height: 25px;
  
}

 button{
  padding: 15px 45px;
  font-size: 14px;
  color: #fff;
  border: none;
  background-image: linear-gradient(to right, #f61c16, #ee1986);
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
}

 button:hover{
  padding: 15px 45px;
  font-size: 14px;
  color: #fff;
  border: none;
  background-image: linear-gradient(to right, #ee1986, #f61c16);
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;

}
----------***----------
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/
>> IF YOU WANT TO LEARN C++ PROGRAM WITH OUTPUT, SO VISIT THIS 
      BLOG

>> IF YOU WANT TO LEARN HTML WITH OUTPUT, SO VISIT THIS BLOG
>> 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