Introduction
Hello guys,
Today in this article, we will be learning how to create a website using HTML and css? Only these kinds of websites can be used for your business purpose, for your purpose, and can be used as a college project. I have used straightforward HTML tags and css styling in this article so that everyone can understand, including beginners, very quickly.
i)-Folders to Create
Okay... i have a folder named a website and a background image, open a vs code and select a folder you have created and create a file name index.html and dial dot css, okay...and i would name my website webpage design and design link this webpage with style.css.
ii)-Body
okay inside the body we create a div dot main and inside the class main we create another div that is dot nav bar and inside the navigation bar we create dot icon which is for our logo class logo and name pra, let's see in our browser okay... here we have our logo now we go to style.css put a margin of zero in padding also zero. We go to our class-main with 100 linear background gradient making our background image 50 dimmer connecting with URL one 1.jpg background-position of center and background-size cover and height of 100 views
We go back to our website and see,it looks good now let's go back to next class navbar width of 1200 pixel height of 75 pixel margin auto okay go to next dot icon width of 200 pixel float left size 70 pixel and go to dot logo and we'll keep color like orange color. Let's see in website yeah okay looks good.
Now font size of 35 pixels on family area padding-left 20-pixel float left and padding-top 10 pixel okay.
Now we go back to the index and create another div for a menu that is div dot menu and create an unordered list inside another list we create a list and anchor tag. Then we copy this paste and type a home about service design and a contact. Now go back to our website where we have our menu. Go back to the style.css dot menu.
Okay... here we have width of 400 pixel and float left and height of 70 pixel, it looks good and now we go to another list upload lift display flex and justify-content center and align item also center.
Okay.... let's go to our webpage, and here we have okay now we go to another list inside the list, and we have list type none and margin-left 62 pixels margin-top 27 pixels and font size 14 pixel. Now it looks more suitable. Now we go to another list list anchor tab: text-decoration color white okay and our font family ariel and font-weight bold. We have a transition of 0.4 s is in out.
Hover Effect:
Okay.... now we will put a hover effect in our menu color and orange. Here we have our hover effect on
our menu bar now. Let's get back to our index and create another dip for the search bar. We put input for search and name placeholder type to text and class src h
OK, anchor tab button inside button we put a class that is btn and another search. Okay... here we have our search bar.
Let's get back to our style.css in-class search. We have a width of 330-pixel float left margin left 27 0 pixels and dot srcs font family of times new roman width of 200-pixel height of 40 pixels and background transparent okay it looks good now we have our border one-pixel solid orange and mars in top of 13 pixels okay a color of white and border right now font size 16-pixel float lift padding of 10 pixels and border bottom 5 pixels and border-top left radius 5 pixels okay next dot btn width of 100 pixel height of 40 pixel background orange and border 2 pixel solid orange mars in top 13 pixel color white font size 15 pixel and border border top left bottom right 5 pixel and bottom also 5 pixel now we go to that btn focus outline none and also dot srcx focus outline none okay here we have.
Description:
Here is our description short description about our website. We have a button request that is for contact and let's say and join us if you're interested okay here is our join us link okay now we get back to our dot content with 100 pixel height of auto margin also auto color would be white Poisson relative okay we get to that content dot paragraph padding-left would be 20-pixel padding-bottom 25 pixel one family area letter spacing will be 1.2 pixel and line-height would be 30 pixel. Okay... it looks good now we go to dot content x1 tag yeah one family of times new roman font size of 50-pixel padding-left would be like 20 pixel and margin-top 9 percent letter spacing 2 pixel okay more better and then we will add that content for that contact that is of joining us with 160 pixel height of 40 pixel and background orange border none here is our link join us and we put now margin-bottom of 10-pixel margin-left of 20 pixel. Okay now font size 18 pixel border radius of 10 pixel and cursor point pointer.
Okay, now it looks good
.
Login Box
now we get back to index.html and create another div that is for our login box. This is div dot form and h2 tag login here and puts an input type email name email, and placeholder enters email here, and input for password type password and placeholder enter a password here then button class btnn anchor tag here log in.
Okay here we have our login box. Now it's done our whole website done.
If you have any question regarding my article do comment below and let me know, so thanks for reading my article.
Bye Bye
I'm also a website developer and i was so impressed with your web developing style
❤
Nice Work keep it up bro!🤗🤗
I found this article helpful for me. You deserve 5 star.
You must be logged in to post a comment.