Onepage website is modern trend among internet and you can view many beautiful onepage driven websites there. One of the main advantage of these kind of website is it can give easy and enjoyable experience for users. It is suitable for those who have little bit of text on each topic. it will also give proper idea about the company on single look.<\/p>\n
Here is a complete tutorial on creating a onepage website, and can make modification according to your needs. You can view the working demo of this tutorial and download source code in zip format at the bottom of this post.<\/p>\n
\r\n\r\n\r\n\r\n\r\n\t\r\n\t\r\n\tMax Onepage - Free Multipurpose Responsive HTML5 CSS3 Website Template - Demo | Vishmax.com<\/title>\r\n\t\r\n\t<meta name=\"description\" content=\"Max One Page - Free Responsive HTML5 CSS3 Website Template Demo\">\r\n\t\r\n<\/head>\r\n\r\n<body class=\"home\">\r\n\r\n\t<input type=\"radio\" id=\"menu1\" checked name=\"menu\">\r\n\t<input type=\"radio\" id=\"menu2\" name=\"menu\">\r\n\t<input type=\"radio\" id=\"menu3\" name=\"menu\">\r\n\t<input type=\"radio\" id=\"menu4\" name=\"menu\">\r\n\t\r\n\t<div id=\"navi\">\r\n\t\t<ul>\r\n\t\t\t<li><label for=\"menu1\"><i class=\"fa fa-home\"><\/i><\/label> <span>Home<\/span> <\/li>\r\n\t\t\t<li><label for=\"menu2\"><i class=\"fa fa-user\"><\/i><\/label> <span>About Us<\/span> <\/li>\r\n\t\t\t<li><label for=\"menu3\"><i class=\"fa fa-dropbox\"><\/i><\/label> <span>Services<\/span> <\/li>\r\n\t\t\t<li><label for=\"menu4\"><i class=\"fa fa-phone\"><\/i><\/label> <span>Contact Us<\/span> <\/li>\r\n\t\t<\/ul>\r\n\t<\/div>\r\n\t\r\n\t<div class=\"menu menu1\">\r\n\t\t<a href=\"http:\/\/www.vishmax.com\/\"><img decoding=\"async\" src=\"http:\/\/vishmax.com\/demos\/images\/logo-company.png\" alt=\"\" itemprop=\"image\"><\/a>\r\n\t\t<h2 class=\"caption-home\">Welcome To Our Company<\/h2>\r\n\t\t<div class=\"description\">You can add a short note about your Company here.<\/div>\r\n\t\t<div class=\"button mobile-hiden\">Download Now<\/div>\r\n\t<\/div>\r\n\t\r\n\t<div class=\"menu menu2\">\r\n\t\t<h2 class=\"caption-child\">About Us<\/h2>\r\n\t\t<div class=\"width-50\">\r\n\t\t<p>\r\nPython is a very simple language, and has a very straightforward syntax. It encourages programmers to program without boilerplate (prepared) code. The simplest directive in Python is the \"print\" directive - it simply prints out a line (and also includes a newline, unlike in C).\r\n<br>\r\nThere are two major Python versions, Python 2 and Python 3. Python 2 and 3 are quite different. This tutorial uses Python 2, because it is more widely used and supported. However, Python 3 is more semantically correct, and supports newer features.\r\n<\/p>\r\n<p class=\"mobile-hiden\">\r\nThere are two major Python versions, Python 2 and Python 3. Python 2 and 3 are quite different. However, Python 3 is more semantically correct, and supports newer features. This tutorial uses Python 2, because it is more widely used and supported. However, Python 3 is more semantically correct, and supports newer features.\r\n<br><br>\r\nThere are two major Python versions, Python 2 and Python 3. Python 2 and 3 are quite different.\r\n<\/p>\r\n\t\t<\/div>\r\n\t\t\r\n\t\t\r\n\t\t<div class=\"width-40 mobile-hiden\">\r\n\t\t<h3>Our History<\/h3>\r\nThere are two major Python versions, Python 2 and Python 3. Python 2 and 3 are quite different. This tutorial uses Python 2,\r\n<br><br>\r\n\r\n\t\t<h3>Our Vision<\/h3>\r\nThere are two major Python versions, Python 2 and Python 3. Python 2 and 3 are quite different. This tutorial uses Python 2,\r\n<br><br>\r\n\r\n\t\t<h3>Our Partners<\/h3>\r\nThere are two major Python versions, Python 2 and Python 3. Python 2 and 3 are quite different. This tutorial uses Python 2,\r\n<br><br>\r\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n\t\r\n\t<div class=\"menu menu3\">\r\n\t\t<h2 class=\"caption-child\">Our Services<\/h2>\r\n\t\t\r\n\t\t<div class=\"width-40\">\r\n\t\t<ul>\r\n\t\t\t<li>\r\n<h3>Our Services 1<\/h3>\r\nThere are two major Python versions, Python 2 and Python 3. Python 2 and 3 are quite different. This tutorial uses Python 2,\r\n\t\t\t<\/li>\r\n\t\t\t<li>\r\n<h3>Our Services 2<\/h3>\r\nThere are two major Python versions, Python 2 and Python 3. Python 2 and 3 are quite different. This tutorial uses Python 2,\r\n\t\t\t<\/li>\r\n\t\t\t<li>\r\n<h3>Our Services 3<\/h3>\r\nThere are two major Python versions, Python 2 and Python 3. Python 2 and 3 are quite different. This tutorial uses Python 2,\r\n\t\t\t<\/li>\r\n\t\t\t<li class=\"mobile-hiden\">\r\n<h3>Our Services 4<\/h3>\r\nThere are two major Python versions, Python 2 and Python 3. Python 2 and 3 are quite different. This tutorial uses Python 2,\r\n\t\t\t<\/li>\r\n\t\t<\/ul>\r\n\t\t<\/div>\r\n\t\t\r\n\t\t<div class=\"width-40 mobile-hiden\"><img decoding=\"async\" src=\"http:\/\/vishmax.com\/demos\/images\/dummy-mob.png\" alt=\"\" itemprop=\"image\"><\/div>\r\n\t\t\r\n\t\t\r\n\t<\/div>\r\n\t\r\n\t<div class=\"menu menu4\">\r\n\t\t<h2 class=\"caption-child\">Contact Us<\/h2>\r\n<form id=\"form\" action=\"\" method=\"post\">\r\n <p>Use the form below to get in touch, or give us a call on xxx-xxx-xxx<\/p>\r\n <div>\r\n <label for='name'>Name <span class='required'>(required)<\/span><\/label>\r\n <input type='text' name='name' placeholder='your name here' required \/>\r\n <\/div>\r\n\r\n <div>\r\n <label for='tel'>Tel<\/label>\r\n <input type='tel' name='tel' placeholder='your telephone here' \/>\r\n <\/div>\r\n\r\n <div>\r\n <label for='email'>Email <span class='required'>(required)<\/span><\/label>\r\n <input type='email' name='email' placeholder='you@yourdomain.com' required \/>\r\n <\/div>\r\n\r\n <div>\r\n <label for='url'>Website<\/label>\r\n <input type='url' name='website' placeholder='http:\/\/' \/>\r\n <\/div>\r\n\r\n <div>\r\n <label for='message'>Message <span class='required'>(required)<\/span><\/label>\r\n <textarea name='message' required><\/textarea>\r\n <\/div>\r\n\r\n <div>\r\n <button type='submit'>Send Message<\/button>\r\n <\/div>\r\n<\/form>\r\n\t\t\r\n\r\n\t<\/div>\r\n\t\r\n<\/body>\r\n<\/html>\r\n\r\n\r\n<\/pre>\n<h2>CSS<\/h2>\n<pre lang=\"css\">\r\n\r\n\t\t* {\r\n\t\t\tmargin : 0;\r\n\t\t\tpadding : 0;\r\n\t\t}\r\n\t\tbody {\r\n\t\t\tfont-family:\"Open Sans\"; \r\n\t\t\tfont-size: 0.9em;\r\n\t\t\tline-height: 1.8;\r\n\t\t\toverflow : hidden;\r\n\t\t}\r\n\t\t#navi {\r\n\t\t\twidth : 40px;\r\n\t\t\ttop : 38%;\r\n\t\t\tposition : fixed;\r\n\t\t\tleft : 0;\r\n\t\t\tz-index : 9999;\r\n\t\t}\r\n\t\t#navi li {\r\n\t\t\theight : 20px;\r\n\t\t\twidth : 20px;\r\n\t\t\tmargin : 10px;\r\n\t\t\tlist-style : none;\r\n\t\t\tposition : relative;\r\n\t\t\tcolor : #fff;\r\n\t\t\tborder-radius : 50%;\r\n\t\t\tbox-shadow : 0 0 5px #000 inset;\r\n\t\t\ttransition : all 250ms ease;\r\n\t\t}\r\n\t\t#navi li span {\r\n\t\t\tmargin-left : 40px;\r\n\t\t\tposition : relative;\r\n\t\t\ttop : -22px;\r\n\t\t\theight : 24px;\r\n\t\t\twidth : 90px;\r\n\t\t\ttext-align : center;\r\n\t\t\tline-height : 24px;\r\n\t\t\tdisplay : block;\r\n\t\t\topacity : 0;\r\n\t\t\tbackground : #fff;\r\n\t\t\tcolor:#000;\r\n\t\t\tborder-radius : 2px;\r\n\t\t\ttransition : all 250ms ease;\r\n\t\t}\r\n\t\t#navi li span:after {\r\n\t\t\tcontent : '';\r\n\t\t\tposition : absolute;\r\n\t\t\theight : 10px;\r\n\t\t\twidth : 10px;\r\n\t\t\tleft : -4px;\r\n\t\t\ttop : 7px;\r\n\t\t\ttransform : rotate(45deg);\r\n\t\t\tbackground : #fff;\r\n\t\t}\r\n\t\t#navi li:hover span {\r\n\t\t\tmargin-left : 30px;\r\n\t\t\topacity : 1;\r\n\t\t}\r\n\t\t#navi li label {\r\n\t\t\tdisplay : block;\r\n\t\t\tcursor : pointer;\r\n\t\t\theight : 20px;\r\n\t\t\twidth : 20px;\r\n\t\t}\r\n\t\t#navi li label i.fa {\r\n\t\t\theight : 20px;\r\n\t\t\twidth : 20px;\r\n\t\t\ttext-align : center;\r\n\t\t\tline-height : 20px;\r\n\t\t\tfont-size : 16px;\r\n\t\t}\r\n\t\t.menu {\r\n\t\t\theight : 100%;\r\n\t\t\twidth : 100%;\r\n\t\t\tposition : absolute;\r\n\t\t\tbox-sizing : border-box;\r\n\t\t\ttransition : all 1000ms ease;\r\n\t\t\tpadding : 30px 50px;\r\n\t\t}\r\n\t\t.menu1 {\r\n\t\t\tbackground:#252e1b;\r\n\t\t\tbackground-size : 100% 100%;\r\n\t\t\ttop : 0%;\r\n\t\t}\r\n\t\t.menu2 {\r\n\t\t\tbackground:#417e5c;\r\n\t\t\ttop : 100%;\r\n\t\t}\r\n\t\t.menu3 {\r\n\t\t\tbackground:#11bac0;\r\n\t\t\ttop : 200%;\r\n\t\t}\r\n\t\t.menu4 {\r\n\t\t\tbackground:#496066;\r\n\t\t\ttop : 300%;\r\n\t\t}\r\n\t\tinput[type=\"radio\"] {\r\n\t\t\tdisplay : none;\r\n\t\t}\r\n\t\t#navi li:hover, #menu1:checked ~ #navi li:nth-child(1), #menu2:checked ~ #navi li:nth-child(2), #menu3:checked ~ #navi li:nth-child(3), #menu4:checked ~ #navi li:nth-child(4) {\r\n\t\t\tbox-shadow : 0 0 15px #000 inset;\r\n\t\t}\r\n\t\t#menu1:checked ~ .menu1 {\r\n\t\t\ttop : 0%;\r\n\t\t}\r\n\t\t#menu1:checked ~ .menu2 {\r\n\t\t\ttop : 100%;\r\n\t\t}\r\n\t\t#menu1:checked ~ .menu3 {\r\n\t\t\ttop : 200%;\r\n\t\t}\r\n\t\t#menu1:checked ~ .menu4 {\r\n\t\t\ttop : 300%;\r\n\t\t}\r\n\t\t#menu2:checked ~ .menu1 {\r\n\t\t\ttop : -100%;\r\n\t\t}\r\n\t\t#menu2:checked ~ .menu2 {\r\n\t\t\ttop : 0%;\r\n\t\t}\r\n\t\t#menu2:checked ~ .menu3 {\r\n\t\t\ttop : 100%;\r\n\t\t}\r\n\t\t#menu2:checked ~ .menu4 {\r\n\t\t\ttop : 200%;\r\n\t\t}\r\n\t\t#menu3:checked ~ .menu1 {\r\n\t\t\ttop : -200%;\r\n\t\t}\r\n\t\t#menu3:checked ~ .menu2 {\r\n\t\t\ttop : -100%;\r\n\t\t}\r\n\t\t#menu3:checked ~ .menu3 {\r\n\t\t\ttop : 0%;\r\n\t\t}\r\n\t\t#menu3:checked ~ .menu4 {\r\n\t\t\ttop : 100%;\r\n\t\t}\r\n\t\t#menu4:checked ~ .menu1 {\r\n\t\t\ttop : -300%;\r\n\t\t}\r\n\t\t#menu4:checked ~ .menu2 {\r\n\t\t\ttop : -200%;\r\n\t\t}\r\n\t\t#menu4:checked ~ .menu3 {\r\n\t\t\ttop : -100%;\r\n\t\t}\r\n\t\t#menu4:checked ~ .menu4 {\r\n\t\t\ttop : 0%;\r\n\t\t}\r\n\t\t.caption-home {\r\n\t\t\twidth: auto;\r\n\t\t\tmargin:5% 0 0 0;\r\n\t\t\ttext-align : center;\r\n\t\t\tline-height:1.1;\r\n\t\t\tposition : relative;\r\n\t\t\tcolor : #FFF;\r\n\t\t\tfont-size:500%;\r\n\t\t}\r\n\t\t.caption-child {\r\n\t\t\twidth: auto;\r\n\t\t\tmargin:3% 0 2px 0;\r\n\t\t\ttext-align : center;\r\n\t\t\tline-height : 40px;\r\n\t\t\tposition : relative;\r\n\t\t\tcolor : #FFF;\r\n\t\t\tfont-size:300%;\r\n\t\t\tfont-weight:300;\r\n\t\t}\r\n\t\t.description{\r\n\t\t\twidth: auto;\r\n\t\t\ttext-align : center;\r\n\t\t\tline-height:2.5;\r\n\t\t\tposition : relative;\r\n\t\t\tcolor : #ffF;\r\n\t\t\tfont-size:22px;\r\n\t\t\tfont-weight:300;\r\n\t\t}\r\n\t\t.width-50{\r\n\t\t\tfloat:left;\r\n\t\t\twidth:50%;\r\n\t\t\theight:auto;\r\n\t\t\tcolor:#fff;\r\n\t\t\tmargin:3% 0 0 2%;\r\n\t\t}\r\n\t\t.width-40{\r\n\t\t\tfloat:right;\r\n\t\t\twidth:40%;\r\n\t\t\theight:auto;\r\n\t\t\tcolor:#fff;\r\n\t\t\tmargin:3% 2% 0 0;\r\n\t\t}\r\n\t\t.width-50 ul, .width-40 ul{\r\n\t\t\tfloat:left;\r\n\t\t\twidth:100%;\r\n\t\t\theight:auto;\r\n\t\t}\r\n\t\t.width-50 ul li, .width-40 ul li{\r\n\t\t\tfloat:left;\r\n\t\t\twidth:100%;\r\n\t\t\tmargin:5px 0;\r\n\t\t\tpadding:10px 0;\r\n\t\t\tborder-bottom:1px solid #eee;\r\n\t\t}\r\n\t\t.width-50 img, .width-40 img{\r\n\t\t\tfloat:left;\r\n\t\t\twidth:90%;\r\n\t\t\theight:auto;\r\n\t\t\tmargin:15% 0 0 0;\r\n\t\t}\r\n\t\t.button {\r\n\t\t\twidth:200px;\r\n\t\t\tmargin: 3% 0 0 40%;\r\n\t\t\tcolor: #ffffff;\r\n\t\t\tfont-size: 20px;\r\n\t\t\tpadding: 10px 20px 10px 20px;\r\n\t\t\ttext-decoration: none;\r\n\t\t\ttext-align:center;\r\n\t\t\tbackground: #fad900;\r\n\t\t\tbackground-image: -webkit-linear-gradient(top, #fad900, #fab508);\r\n\t\t\tbackground-image: -moz-linear-gradient(top, #fad900, #fab508);\r\n\t\t\tbackground-image: -ms-linear-gradient(top, #fad900, #fab508);\r\n\t\t\tbackground-image: -o-linear-gradient(top, #fad900, #fab508);\r\n\t\t\tbackground-image: linear-gradient(to bottom, #fad900, #fab508);\r\n\t\t\t-webkit-border-radius: 28;\r\n\t\t\t-moz-border-radius: 28;\r\n\t\t\tborder-radius: 28px;\r\n\t\t}\r\n\t\t.button:hover {\r\n\t\t\tbackground: #fcfc3c;\r\n\t\t\tbackground-image: -webkit-linear-gradient(top, #fcfc3c, #d9cb34);\r\n\t\t\tbackground-image: -moz-linear-gradient(top, #fcfc3c, #d9cb34);\r\n\t\t\tbackground-image: -ms-linear-gradient(top, #fcfc3c, #d9cb34);\r\n\t\t\tbackground-image: -o-linear-gradient(top, #fcfc3c, #d9cb34);\r\n\t\t\tbackground-image: linear-gradient(to bottom, #fcfc3c, #d9cb34);\r\n\t\t\ttext-decoration: none;\r\n\t\t}\r\n\t\t#form {\r\n\t\t\tmin-width:300px;\r\n\t\t\tmax-width:600px;\r\n\t\t\tmargin:auto;\r\n\t\t\tpadding:20px;\r\n\t\t}\r\n\t\t#form h2 {\r\n\t\t\tcolor:#27748A;\r\n\t\t\tfont-size:35px;\r\n\t\t\tmargin:0;\r\n\t\t}\r\n\t\t#form p {\r\n\t\t\tfont-size:15px;\r\n\t\t\tcolor:#eee;\r\n\t\t}\r\n\t\t#form div {\r\n\t\t\tmargin-top:10px;\r\n\t\t}\r\n\t\t#form input, textarea, button {\r\n\t\t\twidth:100%;\r\n\t\t\tborder:1px solid #eee;\r\n\t\t\tpadding:8px 5px;\r\n\t\t}\r\n\t\t#form label {\r\n\t\t\tfont-weight:bold;\r\n\t\t\tfont-size:12px;\r\n\t\t\tcolor:#fff;\r\n\t\t}\r\n\t\t#form button{\r\n\t\t\tbackground-color: #fad900;\r\n\t\t\tcolor: #000;\r\n\t\t\tcursor:pointer;\r\n\t\t}\r\n\t\t#form button:hover {\r\n\t\t\tbackground-color: #fcfc3c;\r\n\t\t}\r\n\t\t.required{\r\n\t\t\tcolor: #FF6600;\r\n\t\t}\r\n\t\t\r\n\t\t@media (max-width:720px) {\r\n\t\t\t.menu {\r\n\t\t\t\tpadding : 10px 35px;\r\n\t\t\t}\r\n\t\t\t.width-50, .width-40{\r\n\t\t\t\twidth:92%;\r\n\t\t\t\tmargin: 15% 0 0 6%;\r\n\t\t\t}\r\n\t\t\t.width-50 img, .width-40 img{\r\n\t\t\t\twidth:100%;\r\n\t\t\t\tmargin:0 0 0 0;\r\n\t\t\t}\r\n\t\t\t.mobile-hiden{\r\n\t\t\t\tdisplay:none;\r\n\t\t\t}\r\n\t\t\r\n\t\t}\r\n\r\n\r\n<\/pre>\n<p><a class=\"external-download\" href=\"http:\/\/vishmax.com\/demos\/max-onepage-template.html\" target=\"_blank\">Demo<\/a> <a class=\"external-download\" href=\"http:\/\/vishmax.com\/demos\/max-onepage-template.zip\" target=\"_blank\">Download<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Onepage website is modern trend among internet and you can view many beautiful onepage driven websites there. One of the main advantage of these kind of website is it can give easy and enjoyable experience for users. It is suitable for those who have little bit of text on each topic. it will also give […]<\/p>\n","protected":false},"author":1,"featured_media":2624,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[44],"tags":[67,101,94],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.2.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to create a HTML5 and CSS3 onepage website, with demo - Vishmax.com<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-html5-and-css3-onepage-website-with-demo\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create a HTML5 and CSS3 onepage website, with demo - Vishmax.com\" \/>\n<meta property=\"og:description\" content=\"Onepage website is modern trend among internet and you can view many beautiful onepage driven websites there. One of the main advantage of these kind of website is it can give easy and enjoyable experience for users. It is suitable for those who have little bit of text on each topic. it will also give […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-html5-and-css3-onepage-website-with-demo\/\" \/>\n<meta property=\"og:site_name\" content=\"Vishmax.com\" \/>\n<meta property=\"article:published_time\" content=\"2015-05-13T11:09:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2015\/05\/html5-coding400x230.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"230\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-html5-and-css3-onepage-website-with-demo\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-html5-and-css3-onepage-website-with-demo\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93\"},\"headline\":\"How to create a HTML5 and CSS3 onepage website, with demo\",\"datePublished\":\"2015-05-13T11:09:27+00:00\",\"dateModified\":\"2015-05-13T11:09:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-html5-and-css3-onepage-website-with-demo\/\"},\"wordCount\":118,\"publisher\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\"},\"keywords\":[\"CSS\",\"Examples\",\"Web Design Tips\"],\"articleSection\":[\"Labs\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-html5-and-css3-onepage-website-with-demo\/\",\"url\":\"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-html5-and-css3-onepage-website-with-demo\/\",\"name\":\"How to create a HTML5 and CSS3 onepage website, with demo - Vishmax.com\",\"isPartOf\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#website\"},\"datePublished\":\"2015-05-13T11:09:27+00:00\",\"dateModified\":\"2015-05-13T11:09:27+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-html5-and-css3-onepage-website-with-demo\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-html5-and-css3-onepage-website-with-demo\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-html5-and-css3-onepage-website-with-demo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/www.vishmax.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create a HTML5 and CSS3 onepage website, with demo\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#website\",\"url\":\"http:\/\/www.vishmax.com\/en\/\",\"name\":\"Vishmax.com\",\"description\":\"Software Company in Calicut for Web Design and eCommerce\",\"publisher\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/www.vishmax.com\/en\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\",\"name\":\"Vishmax.com\",\"url\":\"http:\/\/www.vishmax.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png\",\"contentUrl\":\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png\",\"width\":150,\"height\":50,\"caption\":\"Vishmax.com\"},\"image\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g\",\"caption\":\"admin\"},\"url\":\"https:\/\/www.vishmax.com\/en\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create a HTML5 and CSS3 onepage website, with demo - Vishmax.com","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-html5-and-css3-onepage-website-with-demo\/","og_locale":"en_US","og_type":"article","og_title":"How to create a HTML5 and CSS3 onepage website, with demo - Vishmax.com","og_description":"Onepage website is modern trend among internet and you can view many beautiful onepage driven websites there. One of the main advantage of these kind of website is it can give easy and enjoyable experience for users. It is suitable for those who have little bit of text on each topic. it will also give […]","og_url":"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-html5-and-css3-onepage-website-with-demo\/","og_site_name":"Vishmax.com","article_published_time":"2015-05-13T11:09:27+00:00","og_image":[{"width":400,"height":230,"url":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2015\/05\/html5-coding400x230.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-html5-and-css3-onepage-website-with-demo\/#article","isPartOf":{"@id":"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-html5-and-css3-onepage-website-with-demo\/"},"author":{"name":"admin","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93"},"headline":"How to create a HTML5 and CSS3 onepage website, with demo","datePublished":"2015-05-13T11:09:27+00:00","dateModified":"2015-05-13T11:09:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-html5-and-css3-onepage-website-with-demo\/"},"wordCount":118,"publisher":{"@id":"http:\/\/www.vishmax.com\/en\/#organization"},"keywords":["CSS","Examples","Web Design Tips"],"articleSection":["Labs"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-html5-and-css3-onepage-website-with-demo\/","url":"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-html5-and-css3-onepage-website-with-demo\/","name":"How to create a HTML5 and CSS3 onepage website, with demo - Vishmax.com","isPartOf":{"@id":"http:\/\/www.vishmax.com\/en\/#website"},"datePublished":"2015-05-13T11:09:27+00:00","dateModified":"2015-05-13T11:09:27+00:00","breadcrumb":{"@id":"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-html5-and-css3-onepage-website-with-demo\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-html5-and-css3-onepage-website-with-demo\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-html5-and-css3-onepage-website-with-demo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/www.vishmax.com\/en\/"},{"@type":"ListItem","position":2,"name":"How to create a HTML5 and CSS3 onepage website, with demo"}]},{"@type":"WebSite","@id":"http:\/\/www.vishmax.com\/en\/#website","url":"http:\/\/www.vishmax.com\/en\/","name":"Vishmax.com","description":"Software Company in Calicut for Web Design and eCommerce","publisher":{"@id":"http:\/\/www.vishmax.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.vishmax.com\/en\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/www.vishmax.com\/en\/#organization","name":"Vishmax.com","url":"http:\/\/www.vishmax.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png","contentUrl":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png","width":150,"height":50,"caption":"Vishmax.com"},"image":{"@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g","caption":"admin"},"url":"https:\/\/www.vishmax.com\/en\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/2622"}],"collection":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/comments?post=2622"}],"version-history":[{"count":0,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/2622\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/media\/2624"}],"wp:attachment":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/media?parent=2622"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/categories?post=2622"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/tags?post=2622"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}