Posts

Showing posts with the label css3

My First webpage using Bootstrap Framework

Image
In this post you will learn to create your first webpage using Bootstrap Framework. Bootstrap framework is a responsive framework. It automatically adjust the site's layout according to the device in which it is viewed. Responsiveness is given highest priority now a days. This webpage using Bootstrap Framework uses basic components. Designing webpage using Bootstrap Framework is easy and need to less few lines of code. Components used Containers Jumbotron Well Panels You can view the demo of the  webpage using Bootstrap Framework by clicking here . The Code <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <div class="container"> <div class="jumbotron"> <h1>Page Title</h1> <h4>This is my first webpage in Bootstrap</h4> </div> </div> <div class="container"> <div class="row"> <div...

Display Time using Js and Css3

Image
This is a sample post in which you can create a Java script which can display the current time. Basically it fetches the local time from the system every 1 second using setInterval method. Things we have used : Css3 shadows and Hover Properties Date Class with toLocaleTimeString() method setInterval() method. Demo: As you can see when you hover the mouse over it, the color changes. This affect is added using css3. The Code: <html> <style> body { background-color:black; } #time{ display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; border: none; font: normal 48px/normal "Warnes", Helvetica, sans-serif; color: rgba(255,255,255,1); text-decoration: normal; text-align: center; -o-text-overflow: clip; text-overflow: clip; white-space: pre; text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0...