Saturday, February 10, 2018

Uncategories Learn Website Designing From Scratch To Professional

Learn Website Designing From Scratch To Professional

Simant Dhakal 8:54:00 AM Leave a Reply
Sample of Upcoming Tutorial on Website Designing Using HTML and CSS



Many of us surf a lot of website to seek some information from the internet.  Have you ever wonder, how those website is created? This tutorial is a sample of Webpage Designing which will be covered later on our tutorials. So before we start our tutorial, I will like you to suggest some of the Website where you can learn the basic language like HTML and style called CSS. HTML is the Standard Markup Language use for creating a webpage and web application While CSS define as cascading style sheet which is used to design the webpage.   


You can learn HTML and CSS from below link:
Hope you guys have a good knowledge on html and css. If not, follow the below steps exactly the same.


Step 1

Open your source code editor (Example: Notepad, Notepad++, Dreamweaver or Sublime). Personally, I prefer sublime. Now create a new file and copy the below code and save it as "index.html". 








































<!DOCTYPE html> <html> <head> <link rel="icon" href="images/icon.png" /><title>Welcome on mySchool Website</title> <link rel="stylesheet" type="text/css" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Dosis|Roboto" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Antic+Slab|Jura" rel="stylesheet"> </head> <body> <div class="container"> <div class="header"> <div class="left-header"> <h2 class="logo"><a href=""> mySchool </a></h2> </div> <!-- left-header div end here --> <div class="right-header"> <ul class="nav-header"> <li><a href=""> HOME </a></li> <li><a href=""> FEATURES </a></li> <li><a href=""> FACULTY </a></li> <li><a href=""> COURSES </a></li> <li><a href=""> CONTACT </a></li> </ul> <!-- nav-header div end here --> </div> <!-- right-header div end here --> <div class="clear"></div> </div> <!-- header div end here --> <div class="intro-header"> <div class="fullscreen-bg"> <video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video"> <source src="videos/collegevideo.mp4" type="video/webm"> <source src="videos/collegevideo.mp4" type="video/mp4"> <source src="videos/collegevideo.mp4" type="video/ogg"> </video> </div> <!-- fullscreen-bg div end here --> <div class="mini-container"> <p class="gly">DELIVERING QUALITY EDUCATION</p> <p class="tyt">UNMATCHED APPROACH</p> <legend class="esmo"></legend> <ul class="intro-button"> <li class="rget"><a href=""> FEATURES </a></li> <li class="fget"><a href=""> DOWNLOAD </a></li> </ul> <!-- nav-header div end here --> </div> <!-- mini-container div end here --> </div> <!-- intro-header div end here --> <div class="main-line"> <div class="left-main"> <p class="jhomu">Search Faculty </p> <p>Inqury Your Desire Subject</p> </div> <!-- left-header div end here --> <div class="right-main"> <p>Avalaible Course:</p> <select class="subj"> <option value="volvo">Information Technology</option> <option value="saab">Hotel Management</option> <option value="opel">Electric Engineering</option> <option value="audi">BSC. Nursing</option> </select> <p>Program:</p> <select class="subjk"> <option value="volvo">Desiging</option> <option value="saab">Programming</option> <option value="opel">Gaming</option> <option value="audi">Developer</option> </select> <p>Semester Start:</p> <select class="subjk"> <option value="volvo">May 15, 2018</option> <option value="saab">Aug 18, 2018</option> <option value="opel">Nov 25, 2018</option> <option value="audi">Jan 12, 2019</option> </select> <button class="btn checklist">Inqury Now</button> </div> <!-- right-header div end here --> <div class="clear"></div> </div> <!-- main-line div end here --> <!-- amin-line div end here --> <div class="container-fluid"> </div> <!-- container-fluid div end here --> </div> <!-- container div end here --> </body>
</html>



Step 2

Create a new file and named it as "style.css". Copy the below code and paste it in style.css file.






































































































































/* ------------ Website Design By ------------ */ 
/* Website Theme: mySchool; 
Designed By: www.simanttutorial.blogspot.com 
In case, if you want to use this template code, 
Remove the credit and used it for your personal project 
/*  
/* ------------ style [mySchool] ------------- */ 

 * { 
 padding: 0; 
 margin: 0; } 

 body { 
 font-family: 'Roboto', sans-serif;
font-family: 'Dosis', sans-serif; 
 color: #565252; 
 background-image: url(images/wallpaper.jpg); } 

.clear { 
 clear: both; } 

 a { 
 cursor: pointer; 
 text-decoration: none; 
 color: #565252; } 

 img { 
 width: 100%; 
 height: 100%; } 

/* -------------- body style start ------------------ */ 

 .container { 
 width: 100%; 
 max-width: 100%; 
 height: auto; } 

 .header { 
 background-color: rgba(28,43,75,1); 
 margin: 0 auto; z-index: 999; 
 padding: 20px; height: 30px; 
 width: 100%; 
 position: fixed; } 

 .header a { 
 color: #fff !important; } 

 .left-header { 
 color: #fff; 
 padding-left: 20px; 
 width: 300px; 
 float: left; } 

 .logo { 
 font-family: 'Jura', sans-serif; } 

 .right-header { 
 color: #fff; 
 text-align: right; 
 width: 800px; 
 padding-right: 40px; 
 float: right; } 

 .nav-header li { 
 list-style: none; 
 display: inline-block; 
 text-decoration: none; } 

 .nav-header li a { 
 color: #fff !important; 
 padding: 20px 20px; 
 cursor: pointer; } 

 .intro-header { 
 width: 100%; 
 padding-top: 70px; } 

 .mini-container { 
 margin: 0 auto; 
 font-family: 'Antic Slab', serif; 
 text-align: center; 
 line-height: 60px; 
 color: #fff; 
 padding: 80px; } 

 .gly { 
 font-size: 25px; } 

 .tyt { 
 font-size: 50px; 
 padding-bottom: 10px; } 

 .esmo { 
 height: 7px; 
 width: 190px; 
 background-color: #1bad96; 
 margin: 0 auto; } 

 .intro-button { 
 padding-top: 40px; 
 font-family: 'Antic Slab', serif; } 

 .intro-button li { 
 list-style: none; 
 margin-top: 40px; 
 margin-bottom: 40px; 
 border-radius: 14px; 
 display: inline-block; 
 text-decoration: none; } 

 .rget { 
 cursor: pointer; 
 color: #fff; 
 background-color: #428bca; 
 margin-right: 20px; } 

 .rget:hover { 
 cursor: pointer; 
 color: #fff; 
 padding: 0px 20px; 
 transition: all ease 1s; 
 background-color: #175992; 
 margin-right: 20px; } 

 .intro-button li a { 
 color: #fff !important; 
 padding: 15px 55px; 
 cursor: pointer; } 

 .fget { 
 color: #fff; 
 cursor: pointer; 
 margin-left: 20px; 
 background-color: #c9302c; } 

 .fget:hover { 
 color: #fff; 
 transition: all ease 1s; 
 cursor: pointer; 
 padding: 0px 20px; 
 margin-left: 20px; 
 background-color: #921916; } 

/****** video code *****/ 
.fullscreen-bg { 
 position: fixed; 
 top: 0; 
 right: 0; 
 width: 100%; 
 bottom: 0; 
 left: 0; 
 overflow: hidden; 
 z-index: -100; } 

 .fullscreen-bg__video { 
 position: absolute; 
 top: 0; 
 left: 0;
 width: 100%; 
 height: 100%; } 

 @media (min-aspect-ratio: 16/9) { 
 .fullscreen-bg__video { 
 height: 300%; 
 top: -100%; } 
} @media (max-aspect-ratio: 16/9) { 
 .fullscreen-bg__video { 
 width: 300%; 
 left: -100%; } 
} @media (max-width: 767px) { 
 .fullscreen-bg { 
 background: url('../img/videoframe.jpg') center center / cover no-repeat;
 } .fullscreen-bg__video { 
 display: none; } 
} 

 /****** video code end ****/ 

 .main-line { 
 background-color: #fff; } 

 .checklist { 
 background-color: #daa520; 
 padding: 12px; 
 color: #fff; 
 font-size: 14px; 
 border-radius: 9px; 
 border:none; cursor: pointer; } 

 .checklist:hover { 
 cursor: pointer; 
 background-color: #bb8c16; 
 color: #fff; 
 transition: all ease 1s; } 

 .left-main { 
 padding-left: 20px; 
 color: #fff; 
 padding: 32px; 
 width: 20%; 
 float: left; 
 background-color: #daa520; } 

 .jhomu { 
 font-size: 28px; } 

 .right-main { 
 text-align: -webkit-auto; 
 width: 69%; 
 padding-right: 40px; 
 float: right; 
 padding: 40px; } 

 .right-main p{ 
 display: inline-block; } 

 .subj { 
 width: 170px; 
 color: #333; 
 height: 35px; 
 margin-right: 30px; 
 text-align: center; 
 font-size: 16px; } 

 .subjk { 
 width: 120px; 
 color: #333; 
 height: 35px; 
 margin-right: 30px; 
 text-align: center; 
 font-size: 16px; }



Step 3


Now create two new folder in my drive and name it as "images" and "video". Here in images folder, we save our required images and likewise in videos folder we save videos. Here is my screenshot of the following images and video folder including index.html and style.css
The required images can be download from the below link:
Hope you guys have enjoyed this tutorial. You can see the demo of our tutorial just below:


Tags:
Previous Post
Next Post
Simant Dhakal

0 comments:

Post a Comment