I'm new to UI and web development and I'm trying to create simple web pages. I found the http://ionicframework.com/getting-started/ page and I'm attempting to replicate it in my demo application. I've divided my page into three parts: header, content, and footer. I started working on the header section but encountered a few problems.
- In the header, there are options like "products, getting started, docs" that turn white when hovered over. Can anyone advise me on how to achieve this effect in my demo?
- How can I align the "products, getting started, docs" to the right side of the header?
- Lastly, how do I add a search input field in the lower part of the header? Here is my current code snippet.
http://codepen.io/anon/pen/rabRoO
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Ionic List Directive</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body >
<div >
<div class="header">
<a href="#">product</a>
<a href="#">Getting Started</a>
<a href="#">docs</a>
<a href="#">showcase</a>
<a href="#">forum</a>
<a href="#">Blog</a>
</div>
<div class ="container">
<h1>Getting Started with Ionic</h1>
<p>Build mobile apps faster with the web technologies you know and love</p>
<div class ="smallheader">
<div class="col-sm-8 news-col">
Questions? Head over to our <a href="http://forum.ionicframework.com/">Community Forum</a> to chat with others using the framework.
</div>
</div>
</div>
</div>
</body>
</html>