Skip to content

Instantly share code, notes, and snippets.

@dgb
Created July 23, 2015 03:44
Show Gist options
  • Save dgb/24b6ddb7a765b863cfe9 to your computer and use it in GitHub Desktop.
Save dgb/24b6ddb7a765b863cfe9 to your computer and use it in GitHub Desktop.
<!doctype html>
<html>
<head>
<title>Merus.me</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="style.css"></link>
</head>
<body>
<div class="jumbotron">
<nav class="navbar navbar-static-top">
<div class="container">
<a class="navbar-brand" href="/">Merus.me</a>
<ul class="nav navbar-nav navbar-right">
<li><a href="/signin.html">Log in</a>
</ul>
</div>
</nav>
<div class="container text-center">
<h1>Find a Brilliant Lawyer</h1>
<h3>Legal help is just a few clicks away</h3>
<form class="form-inline" action="/search.html">
<select class="form-control input-lg">
<optgroup label="Choose a practice area">
<option>Personal Injury</option>
<option>Workers' Compensation</option>
<option>Business Law</option>
</optgroup>
</select>
<button class="btn btn-primary btn-lg">Search</button>
</form>
</div>
</div>
<div class="jumbotron-footer">
<div class="container text-center">
<p class="lead">
<span class="lead-message">Are you a great lawyer?</span>
<a class="btn btn-lg btn-outline" href="/lawyers">Claim your profile</a>
</p>
</div>
</div>
<div class="container">
<div class="row splash text-center">
<div class="col-sm-4">
<span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
<h4>Real Client Reviews</h4>
<p>Choose the right lawyer with trusted reviews</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
<h4>Directly Email</h4>
<p>Contact your brilliant lawyer right from their profile</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
<h4>Receive Answers</h4>
<p>Quickly and securely</p>
</div>
</div>
<div class="row splash-areas">
<h3 class="text-center">Browse by Practice Area</h3>
<div class="row">
<div class="col-sm-1">
<p class="text-right">
<span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
</p>
</div>
<div class="col-sm-5">
<h4>Personal Injury</h4>
<p>Lawyers who provide legal representation to those who claim to have been injured, physically or psychologically, as a result of the negligence or wrongdoing.</p>
</div>
<div class="col-sm-1">
<p class="text-right">
<span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span>
</p>
</div>
<div class="col-sm-5">
<h4>Business</h4>
<p>Lawyers who advise in a variety of business matters, including contracts, employment, and taxes. A business lawyer can help you with general matters or refer you to a specialist.</p>
</div>
</div>
<div class="row">
<div class="col-sm-1">
<p class="text-right">
<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
</p>
</div>
<div class="col-sm-5">
<h4>Family</h4>
<p>An area of law that deals with family matters and domestic relations, including: marriage, civil unions, and domestic partnerships; adoption and surrogacy; child abuse and child abduction.</p>
</div>
<div class="col-sm-1">
<p class="text-right">
<span class="glyphicon glyphicon-globe" aria-hidden="true"></span>
</p>
</div>
<div class="col-sm-5">
<h4>Immigration</h4>
<p>Lawyers who can assist with visa and naturalization issues, travel arrangements, deportation, foreign taxes and other issues.</p>
</div>
</div>
</div>
</div>
<footer class="page-footer row text-center">
<span>&copy; 2015, Merus Inc.</span>
</footer>
</body>
</body>
.navbar-nav a,
.navbar-brand {
color: white;
}
.navbar a:hover,
.navbar-brand:hover {
color: #eee;
}
.navbar-nav > li > a:hover {
background-color: transparent;
}
nav {
background-color: #333;
}
.jumbotron nav {
background-color: transparent;
}
.jumbotron {
color: white;
background-image:url(images/bg9.jpg);
background-size: cover;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 72px;
}
.jumbotron h1,
.jumbotron h3 {
text-shadow: 0 0 6pt #333;
}
.jumbotron form {
margin-top: 20px;
display: inline-block;
padding: 0.5em;
background-color:rgba(0,0,0,0.33);
border-radius: 5px;
}
.jumbotron .btn-primary {
border-color: darkorange;
background-color: darkorange;
}
.jumbotron .btn-primary:hover {
border-color: orange;
background-color: orange;
}
.jumbotron-footer {
color: white;
background-color: #333;
}
.jumbotron-footer .lead {
margin-top: 10px;
margin-bottom: 10px;
}
.jumbotron-footer .lead-message {
margin-right: 9pt;
}
.btn-outline {
color: white;
border: 2px solid white;
}
.jumbotron-footer .btn {
padding-top: 9px;
padding-bottom: 9px;
}
.jumbotron .navbar-btn:hover,
.jumbotron-footer .btn:hover {
border-color: #EEE;
color: #EEE;
}
.splash {
padding-top: 80px;
padding-bottom: 40px;
}
.splash .glyphicon {
color: darkorange;
font-size: 50px;
}
.splash-areas h3 {
margin-bottom: 30px;
}
.splash-areas .glyphicon {
margin-top: 8px;
font-size: 20px;
}
.splash-areas {
padding-bottom: 40px;
}
.page-footer {
padding: 20px 0;
background-color: #333;
color: white;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment