how to design a website using HTML and CSS with PSD to HTML


how to design a website using HTML and CSS with PSD to HTML

Web Design Photoshop Document Being an Image of a Website? Where a website has completed drawings that only a Photoshop designer can do. When a buyer needs a website, he designs the website through a website design of his mind.

And hire a web designer with that image to create a website in HTML and CSS programming languages. 

Then it can be said that the exact form of the document is created through the document is called the sample of the document.

web-design-psd-to-html
web-design-PSD-to-HTML

This website is designed using HTML and CSS only.

I have converted to PSD to HTML for your convenience. In other words, I have converted it to HTML code by looking at the picture above. Converting PSD to HTML code is called static web design.

Here are some ideas to convert PSD to HTML.

  • Look at the PSD file that you will design your static website by looking at the PSD file in a good way.
  • After looking at the PSD file in a good way, come up with an idea for yourself from which site to start and how to get started.
  • After understanding everything you create your HTML and CSS files.
  • Then write the code step by step.
  • If there is a problem with the code in any place, try to inspect the element, it will benefit you a lot.
  • Use color pickup software to keep the color of the web site right or copy the color codes from the PSD file.


After doing all the code correctly, upload it to your hosting panel and visit the website. I will give the code of the PSD file that I have converted to HTML here. You can copy it and see it.

Or if you type free PSD files in Google, you will get many free PSD files and you can practice by looking at them.

HTML code

<!DOCTYPE html>
<html>
<head>
<title>Yoga website make by NISHAT SHAGOR</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="main_wrapper">
<div class="wrapper header">
<div class="logo">
<a href="#">
<h1>Yoga<span>.com</span></h1>
</a>
</div>
<nav id="navigation">
<ul>
<li><a href="#" id="active">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About-Us</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div class="wrapper">
<content>
<div class="article1">
<h1>Hi!<br>welcome to the <br>yoga world</h1>
<a href="#" id="infrom">MORE INFORMATION</a>
</div>
<section id="capto">
<div class="article_img">
<img src="pexels-photo-3759660.jpeg" alt="pexels-photo-747963.jpg">
</div>
</section>
</content>
</div>
</body>
</html>

CSS code

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
*{
margin:0px;
padding:0px;
}
body{
font-family: 'Roboto', sans-serif;
width:100%;
height:100vh;
background-image:url(background.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position: top;
overflow:hidden;
}
.main_wrapper{
width:100%;
overflow:hidden;
}
.wrapper{
width: 1148px;
margin:0px auto;
}
.logo{
float:left;
}
.logo>a{
text-decoration:none;
color:#000;
font-size:26px;
}
.logo>a h1> span{
font-size:17px;
}
#navigation{
float:right;
}
#navigation> ul{
list-style-type:none;
}
#navigation> ul li{
list-style-type:none;
float:left;
margin:5px;
}
#navigation> ul li a{
display:block;
padding:10px 20px;
text-decoration:none;
color:#000;
transition:all 0.4s ease;
}
#navigation> ul li a:hover{
background:#5C038A;
color:#fff;
border-radius:7px;
}
#active{
background: #5c038a;
color:#fff !important;
border-radius:7px;
}
.header{
margin-top:57px;
}
.article1{
float:left;
margin-top: 173px;
}
.article_img{
float:right;
width: 641px;
height: 641px;
overflow: hidden;
border-radius: 50%;
}
#capto{
float: right;
width: 641px;
height: 641px;
position:relative;
border-radius:50%;
right: -18%;
margin-top: 31px;
}
.article_img>img{
width: 100%;
height: 73%;
margin-left: -27px;
transform: scale(1.1);
}
#capto:after{
content:'';
position:absolute;
top:0px;
left:0px;
width: 122px;
height: 122px;
background: #e1a8ff;
border-radius:50%;
}
#infrom{
margin-top:10px;
display:inline-block;
padding:10px 20px;
color: #5C038A;
border: 2px solid #5C038A;
border-radius: 48px;
text-decoration: none;
font-size: 14px;
}
#infrom:hover{
color:#FFF;
border:2px solid #5C038A;
background:#5C038A;
}



You can download all the code by clicking on the download button above. However, if you download the pickers will support. 

If you only use the code, the pictures will not be supported here, which is why we have given the download option where the image is mentioned. If you download from that download option and run the file, you will see that the image will be supported.


Each code is perfectly written there. If you have any problems, you must comment. If you have any more designs like this in your head, be sure to share it with us. We will try to publish your designs here.


consultation 

I think you like the design a lot, if you like it, please comment and contact us to get more different from the contact, then thank you all for reading our post.


Thanks

Post a Comment

0 Comments