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>Welcome</button>
</div>
</section>
</header>

</body>

</html>

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

CSS CODE

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

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: arial;
}

.site-header{
width: 100%;
height: 100vh;
background: linear-gradient(57deg, #7d41a6, #256eb0);
clip-path: polygon(0% 0%, 100% 0%,100% 80%, 0% 100%);
}

nav{
width: 100%;
height: 100px;
/* background-color: red; */
display: flex;
color: #fff;
}

.logo{
width: 50%;
height:auto;
}

.logo h1{
line-height: 100px;
padding-left: 50px;
}

.menu{
width: 50%;
height: 100px;
/* background-color: green; */
}

.menu ul{
width: 100%;
height: 100px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}

.menu ul li{
list-style: none;
font-style: 12px;
font-weight: bold;
text-transform: uppercase;
}

section{
display: flex;
}

.leftside{
width: 45%;
height: auto;
overflow: hidden;
margin-top: 20px;
}

.leftside img{
width: 600px;
height: 400px;
padding-left: 20px;
}

.rightside{
width: 55%;
height: 300px;
color: #fff;
text-align: center;
padding: 40px;
margin-top: 50px;
}

.rightside h1{
font-size: 50px;
font-weight: bold;
}

.rightside p{
font-size: 1.1rem;
padding:30px 0;
}

.rightside button{
font-size: 17px;
font-weight: bold;
color: #fff;
text-transform: uppercase;
background: linear-gradient(57deg, #7d41a6, #256eb0);
border-radius:4px;
padding: 20px 35px;
}

.rightside button:hover{
background: linear-gradient(57deg, #256eb0, #7d41a6);

}

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

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

https://cplusplusdnpdeveloper.blogspot.com/


>> IF YOU WANT TO LEARN HTML WITH OUTPUT, SO VISIT THIS BLOG

      https://dnpwebdeveloper.blogspot.com/

>> MY INSTAGRAM ID : dnp176

SIMPLE WEB DESIGN 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 VIEW</title> <link rel="stylesheet" type="text/css" href="shape2.css"> </head> <body> <section id="main"> <div class="flex-container"> <div id="img-div"> <img src="pic1.jpg" id="image" alt=""> </div> <h1 id="title">DHRUV PATEL</h1> <p id="info">dnp developer</p> </div> </section> </body> </html> ---------- *** ---------- CSS CODE *************** body{ margin: 0; font-family: impact; } .flex-container{ height: 420px; background: repeating-linear-g...

DNP DEVELOPER

Search This Blog