Skip to content

Instantly share code, notes, and snippets.

@kurthumes

kurthumes/listStyling.html

Last active April 27, 2021 16:21
Show Gist options
  • Save kurthumes/1674443 to your computer and use it in GitHub Desktop.
Save kurthumes/1674443 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
listStyling.html
<html>
<head>
<title>List Styling</title>
<style type="text/css">
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
"Helvetica Neue", Helvetica, Arial, "Lucida Grande",
sans-serif;
font-weight: 300;
}
div {
float: left;
}
div {
margin-left: 10px;
font-weight:bold;
font-size:24px;
font-style:normal;
color:#ffffff;
background:#1568db;
border:0px solid #ffffff;
text-shadow:0px -1px 1px #222222;
box-shadow:2px 2px 5px #000000;
-moz-box-shadow:2px 2px 5px #000000;
-webkit-box-shadow:2px 2px 5px #000000;
border-radius:10px 10px 10px 10px;
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
}
ul {
list-style: none;
margin-left: 0;
padding-left: 0;
text-indent: -1em;
}
div header {
padding-right: 1em;
text-indent: 1em;
background-color: black;
border-radius:10px 10px 0px 0px;
-moz-border-radius:10px 10px 0px 0px;
-webkit-border-radius:10px 10px 0px 0px;
}
ul li {
padding-right: 1em;
text-indent: 1em;
}
ul li a {
color: #ffffff;
}
</style>
</head>
<body>
<div>
<header>List 1 Heading</header>
<ul>
<li><a href="#">List Item</a>
<button>a</button><button>b</button></li>
<li><a href="#">List Item</a>
<button>a</button><button>b</button></li>
<li><a href="#">List Item</a>
<button>a</button><button>b</button></li>
</ul>
</div>
<div>
<header>List 2 Heading</header>
<ul>
<li><a href="#">List Item</a>
<button>a</button><button>b</button></li>
<li><a href="#">List Item</a>
<button>a</button><button>b</button></li>
<li><a href="#">List Item</a>
<button>a</button><button>b</button></li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment