{"id":8470,"date":"2022-09-28T11:19:24","date_gmt":"2022-09-28T11:19:24","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=8470"},"modified":"2022-09-28T11:19:24","modified_gmt":"2022-09-28T11:19:24","slug":"html-layout-templates","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/09\/28\/html-layout-templates\/","title":{"rendered":"HTML Layout Templates"},"content":{"rendered":"\n<p>Here is a collection of HTML templates providing basic website layouts.<\/p>\n\n\n\n<p>Each layout includes the following five main sections that are used on any website:<\/p>\n\n\n\n<ul><li>header<\/li><li>footer<\/li><li>navigation menu<\/li><li>main content area<\/li><li>extra stuff<\/li><\/ul>\n\n\n\n<p>Almost all layouts are created with the\u00a0CSS float\u00a0property and negative\u00a0margins. There are two things you should know about negative margins: if we apply negative margin on the float side, it will have the effect of shifting even more the floated elements towards the float side, if we apply a negative margin opposite a float, it will create a void, which leads to content overlapping, and this is very helpful for creating liquid layouts.<\/p>\n\n\n\n<p>In modern websites, float-based layouts are being replaced with flexible layouts created using\u00a0CSS Flexible Box Layout Module.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"customizing-templates-4\">Customizing Templates<\/h2>\n\n\n\n<p>Here you can find a few ways to customize your HTML template:<\/p>\n\n\n\n<ul><li>Add some graphics to the template.<\/li><li>Change your template or add some content.<\/li><li>Learn HTML with our\u00a0HTML\u00a0tutorial.<\/li><li>Learn how to change template styles with our\u00a0CSS\u00a0tutorial.<\/li><li>Learn how to make templates interactive with our\u00a0JavaScript\u00a0tutorial.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Here is a collection of HTML templates providing basic website layouts. Each layout includes the following five main sections that are used on any website: header footer navigation menu main content area extra stuff Almost all layouts are created with the\u00a0CSS float\u00a0property and negative\u00a0margins. There are two things you should know about negative margins: if [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[358],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/8470"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=8470"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/8470\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=8470"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=8470"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=8470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}