How to make a business card website with a cool background in 5 minutes?!
In this video I tell you how to in only 5 minutes to create a business card website with a cool background. It's really 5 minutes, if you leave only everything important. You can do it quickly and spend a minimum of time!
Be sure to use convenient tools for editing web pages-such as the Brackets editor with two additions: Emmet - to speed up the writing of HTML code and Beautify - for beautiful code design.
To create a business card website we will use the Bootstrap framework.
Do the following:
1. Open the example from the framework website Bootstrap - Prices.
2. Click the Right mouse button - View the page code.
3. Copy the entire code of page .
4. In the Brackets editor, paste the copied code and save the page to your desktop in your site2 folder under the name page1.html.
5. Open the page in the browser - double click on the file page1.html.
6. We see that it is displayed without any design - so it is not loaded its CSS styles. We add the Bootstrap site url to the styles linking code - this is done in two places.
7. Save - and see that now the page is displayed correctly.
8. Now change the name of the company - right in the code edit the text and save.
9. Add the phone instead of the right side of the menu.
10. Edit the title h1 page - change it to your own.
11. Edit the paragraph following the H1 heading.
12. Save and check that you get your changes on the screen. And the text that we have entered is OK.
13. Now select a picture for background, for demonstrations I took the picture from Yandex Pictures.
14. In order for the text in the picture to be read and visible, the picture itself must be made either light or dark. For this purpose the online editor photoshop was used. Editor - menu Correction - item Levels. Moving the slider to the left - we will get a picture in light colors, moving to the right - a picture in dark colors. Then the image is stored in the same folder as the file.
15. To determine the background of the site, use the style assignment to the body tag.
16. For a live view of our changes - this can be done in the page debugger. Right-click and select "Explore item".
17. The following styles have been assigned to the body tag:
background-image: url(construction.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
18. Saved and checked - everything is OK. Now we have a working website business card with a cool background.
Subscribe to our KZitem channel: / @wiseplat
Join our group VK: vk.com/wiseplat
Ask questions - try to answer
Good luck in such cool endeavors!
Негізгі бет Make a business card website in 5 minutes! - from IT professional
Пікірлер: 17