How to accomplish this layout with CSS and HTML?
Question
I would like to accomplish this layout with CSS and HTML.
I started a fiddle which is a start, but I don't know how to make the fonts look more like the goal.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Register</title>
<script src="/scripts/jquery/jquery-1.9.1.js" type="text/javascript"></script>
<script src="/scripts/application.js" type="text/javascript"></script>
<link href="/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h3 class="marg-left title"><img src="/images/logga.png"> Account Administration</h3>
<hr />
<a href="/admin/adduser">Add new account</a> <br> <a href="/admin/search">Search account</a> <br> <a href="/admin/search">Export</a> <br> <a href="/admin/search">Import</a> <br> <a href="/admin/search">Setup</a> <br> <a href="/admin/adminmenu">Log out</a>
</body>
</html>
2 answers
solution1
2 ACCPTED 2013-12-13 11:30:37
I created a fiddle that closely matches your UI mockup. Unfortunately futura is not a very freely accessible web font, so I have instead used a google font called Raleway .
For the single button links on the sidebar I have created button modules, just add or delete these as you wish. Hope you find it useful!
<!-- SINGLE BUTTON MODULE -->
<a href="#"><div class="navigation-button">
<div class="navigation-header">Add new account</div>
<div class="navigation-desc">Add new user account</div>
</div></a>
solution2
1 2013-12-13 10:48:33
I don't think futura is a default font. You need to include the fonts you want to use. I recommend google fonts since it worked great for me in the past, but there're many services like this. Here's a brief how-to for including it in your page:
Go here:
Find the font you want (futura is not in google, it is external).
Click in "add to collection".
Click "use" on the bottom right of the page
Then copy something like this in your webpage (before the css):
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC' rel='stylesheet' type='text/css'>Finally put this in your css:
font-family: 'Alegreya Sans SC', sans-serif;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.