@font-face { font-family: 'theFontNameHere'; src: url('theFontNameHere-webfont.woff2') format('woff2'), url('theFontNameHere-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } body.CN{ font-family: 'theFontNameHere'; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> </body> </html>
Responsive Elements
CSS Pre-processor
HTML pre-processor
javascript pre-processor
to read about web
Done:
https://www.youtube.com/watch?v=R52AsglN0DE https://colorlib.com/wp/html5-one-page-website-templates/ https://colorlib.com/wp/one-page-website-templates/ https://onepagelove.com/tag/html5 https://html5up.net/fractal https://designscrazed.org/flat-onepage-responsive-html5-templates/ https://designscrazed.org/free-responsive-html5-css3-templates/ http://www.informit.com/articles/article.aspx?p=1405555&seqNum=4 https://www.youtube.com/watch?v=FqMIyTH9wSg https://www.youtube.com/watch?v=gxM1XErjMrc https://www.youtube.com/watch?v=topjvXzjdYM https://www.youtube.com/results?sp=SBTqAwA%253D&q=fast+way+to+build+cross+platform+mobile+app https://www.youtube.com/channel/UCGp1zoGrCqT54f32L6tGgqg/videos https://www.youtube.com/watch?v=A6Jq7NVBVxU https://www.youtube.com/watch?v=KBPIRen9ABI https://www.youtube.com/watch?v=sCnGSOaaZFo https://www.youtube.com/watch?v=C-UwOWB9Io4 https://www.youtube.com/watch?v=jbopML8dnqg https://www.youtube.com/watch?v=PE81fyfEJUA
example
http://preview.themeforest.net/item/definity-multipurpose-onemulti-page-template/full_screen_preview/12379946?ref=cirvitis http://www.octarinethemes.com/demos/definity/#multipage http://www.octarinethemes.com/demos/definity/index-fs-slider-mp.html http://www.octarinethemes.com/demos/definity/index-fs-video-mp.html http://www.octarinethemes.com/demos/definity/index-kenburn-mp.html http://www.octarinethemes.com/demos/definity/index-fw-slider-mp.html http://www.octarinethemes.com/demos/definity/index-animated-mp.html http://www.octarinethemes.com/demos/definity/index-fw-video-mp.html http://www.octarinethemes.com/demos/definity/index-text-mp.html http://www.octarinethemes.com/demos/definity/index-freelancer-mp.html http://www.octarinethemes.com/demos/definity/index-agency-mp.html http://www.octarinethemes.com/demos/definity/index-agency2-mp.html http://www.octarinethemes.com/demos/definity/#onepage http://www.octarinethemes.com/demos/definity/#speciality
Video
<style> video#bgcover{ min-width:100%; min-height:100%; width: auto; height:auto; background: url(./image/my_video.png) no-repeat; background-size: cover; </style> <!-- if no poster, it will loop --> <video id='bgcover' autoplay poster='./image/my_video.png'> <source src='./image/my_video.ogv' type='video/ogv' /> <source src='./image/my_video.webm' type='video/webm' /> <source src='./image/my_video.mp4' type='video/mp4' /> </video>
center image in div
.div_name{ text-align: center; }
.img_name{ margin: auto; display: block;}
.div_name{ display: flex; justify-content: center; }
.div_name{ display: flex; justify-content: center; align-items: center; /* flex-start: align top, flex-end: align btm; */ }
Tutorial
Resource
Reference
App
Simulation
function toggleColor() { var myButtonClasses = document.getElementById("btn1").classList; if (myButtonClasses.contains("blue")) { myButtonClasses.remove("blue"); } else { myButtonClasses.add("blue"); } if (myButtonClasses.contains("red")) { myButtonClasses.remove("red"); } else { myButtonClasses.add("red"); } }
const choice_input = document.querySelector(".my_choice") choice_input.onchange = function(event){ choice_input.blur() // remove focus from this input } // also if you have onload function, you can add this to onload to reset last choice when refresh browser const tmp_choice_input= document.querySelector(".my_choice") tmp_choice_input.selectedIndex = "0";