Skip to content

Instantly share code, notes, and snippets.

@JefMari

JefMari/Lawfirm.html

Created February 20, 2019 08:22
Show Gist options
  • Save JefMari/52032ab0a08b799d06cf73eed71d7844 to your computer and use it in GitHub Desktop.
Save JefMari/52032ab0a08b799d06cf73eed71d7844 to your computer and use it in GitHub Desktop.
Download ZIP
Test Lawfirm
Raw
Lawfirm.html
<!DOCTYPE html>
<html>
<head>
<title>A Lawfirm Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">svg:not(:root).svg-inline--fa{overflow:visible}.svg-inline--fa{display:inline-block;font-size:inherit;height:1em;overflow:visible;vertical-align:-.125em}.svg-inline--fa.fa-lg{vertical-align:-.225em}.svg-inline--fa.fa-w-1{width:.0625em}.svg-inline--fa.fa-w-2{width:.125em}.svg-inline--fa.fa-w-3{width:.1875em}.svg-inline--fa.fa-w-4{width:.25em}.svg-inline--fa.fa-w-5{width:.3125em}.svg-inline--fa.fa-w-6{width:.375em}.svg-inline--fa.fa-w-7{width:.4375em}.svg-inline--fa.fa-w-8{width:.5em}.svg-inline--fa.fa-w-9{width:.5625em}.svg-inline--fa.fa-w-10{width:.625em}.svg-inline--fa.fa-w-11{width:.6875em}.svg-inline--fa.fa-w-12{width:.75em}.svg-inline--fa.fa-w-13{width:.8125em}.svg-inline--fa.fa-w-14{width:.875em}.svg-inline--fa.fa-w-15{width:.9375em}.svg-inline--fa.fa-w-16{width:1em}.svg-inline--fa.fa-w-17{width:1.0625em}.svg-inline--fa.fa-w-18{width:1.125em}.svg-inline--fa.fa-w-19{width:1.1875em}.svg-inline--fa.fa-w-20{width:1.25em}.svg-inline--fa.fa-pull-left{margin-right:.3em;width:auto}.svg-inline--fa.fa-pull-right{margin-left:.3em;width:auto}.svg-inline--fa.fa-border{height:1.5em}.svg-inline--fa.fa-li{width:2em}.svg-inline--fa.fa-fw{width:1.25em}.fa-layers svg.svg-inline--fa{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.fa-layers{display:inline-block;height:1em;position:relative;text-align:center;vertical-align:-.125em;width:1em}.fa-layers svg.svg-inline--fa{-webkit-transform-origin:center center;transform-origin:center center}.fa-layers-counter,.fa-layers-text{display:inline-block;position:absolute;text-align:center}.fa-layers-text{left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transform-origin:center center;transform-origin:center center}.fa-layers-counter{background-color:#ff253a;border-radius:1em;-webkit-box-sizing:border-box;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;right:0;text-overflow:ellipsis;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top right;transform-origin:top right}.fa-layers-bottom-right{bottom:0;right:0;top:auto;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:bottom right;transform-origin:bottom right}.fa-layers-bottom-left{bottom:0;left:0;right:auto;top:auto;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:bottom left;transform-origin:bottom left}.fa-layers-top-right{right:0;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top right;transform-origin:top right}.fa-layers-top-left{left:0;right:auto;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top left;transform-origin:top left}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:solid .08em #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.fa-rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-webkit-transform:scale(-1,1);transform:scale(-1,1)}.fa-flip-vertical{-webkit-transform:scale(1,-1);transform:scale(1,-1)}.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1,-1);transform:scale(-1,-1)}:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-rotate-90{-webkit-filter:none;filter:none}.fa-stack{display:inline-block;height:2em;position:relative;width:2.5em}.fa-stack-1x,.fa-stack-2x{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.svg-inline--fa.fa-stack-1x{height:1em;width:1.25em}.svg-inline--fa.fa-stack-2x{height:2em;width:2.5em}.fa-inverse{color:#fff}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/froala/design-blocks@master/dist/css/froala_blocks.min.css">
</head>
<style>
:root {
--peach: #ff4f5d;
--pink: pink;
--orange: orange;
}
.nav-item a {
color: var(--peach) !important;
}
.btn-outline-peach {
color: var(--peach);
border-color: var(--peach);
}
.btn-outline-white {
color: white;
border-color: white;
}
#sec1 {
background-image: linear-gradient(to right bottom, #ff4f5d, #ff7b66, #ff9e78, #ffbe95, #ffdab9);
}
#sec1 h1,
#sec1 .fa-gavel,
#sec1 .lead {
color: white;
}
#sec3 {
background-image: linear-gradient(to left top, #ff4f5d, #ff7b66, #ff9e78, #ffbe95, #ffdab9);
}
#sec5 {
background-image: radial-gradient(circle, #ffdab9, #ffbe95, #ff9e78, #ff7b66, #ff4f5d);
color: white;
}
</style>
<body>
<header data-block-type="headers">
<div class="container">
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#/">
<img src="https://punopenalaw.com/cms/wp-content/themes/tasty-showcase/images/logo.png" height="30" alt="image">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav3" aria-controls="navbarNav3" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link fr-view" href="#/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link fr-view" href="#/">Expertise</a>
</li>
<li class="nav-item">
<a class="nav-link fr-view" href="#/">Lawyers</a>
</li>
<li class="nav-item">
<a class="nav-link fr-view" href="#/">Articles</a>
</li>
<li class="nav-item">
<a class="nav-link fr-view" href="#/">About</a>
</li>
</ul>
<a class="btn btn-outline-primary btn-outline-peach ml-md-3 fr-view" href="#/">Login</a>
</div>
</nav>
</div>
</header>
<section class="fdb-block fdb-viewport" id="sec1">
<div class="container justify-content-center align-items-center d-flex">
<div class="row justify-content-center text-center">
<div class="col-12 col-md-8 innter-content">
<p>
<span class="fas fa-gavel fa-7x"></span>
</p>
<h1>A better law firm</h1>
<p class="lead">Our firm is composed of
individuals with varied interests and backgrounds, whose differences are
nurtured in a positive and productive working environment.</p>
<p class="mt-5"><a class="btn btn-outline-primary btn-outline-white" href="#/">Become a Client</a></p>
</div>
</div>
</div>
</section>
<section class="fdb-block" id="sec2">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-md-6 mb-4 mb-md-0"><p><img alt="image" class="img-fluid" src="https://images.unsplash.com/photo-1519955501004-97097a787c5a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1379&q=80"></p></div>
<div class="col-12 col-md-6 col-lg-5 ml-md-auto text-left">
<h1>Lorem</h1>
<p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima voluptas dolorum necessitatibus reprehenderit commodi alias atque officiis quos omnis velit</p>
<p><a class="btn btn-secondary mt-4" href="#/">Button</a></p>
</div>
</div>
</div>
</section>
<section class="fdb-block fdb-viewport" id="sec3">
<div class="container">
<div class="row">
<div class="col text-center fr-box" role="application">
<div class="fr-wrapper">
<div class="fr-element fr-view">
<h1>Lorem Ipsum Dolor</h1>
</div>
</div>
</div>
</div>
<div class="row-70"></div>
<div class="row text-center justify-content-sm-center no-gutters">
<div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-3 m-auto">
<div class="fdb-box fdb-touch">
<h2>Feature 1</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.</p>
<p class="mt-4"><a href="#/">Learn More </a></p>
</div>
</div>
<div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-3 m-auto pt-5 pt-xl-0"><div class="fdb-box fdb-touch">
<h2>Feature 2</h2>
<p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p class="mt-4"><a href="#/">Learn More</a></p>
</div>
</div>
<div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-3 m-auto pt-5 pt-xl-0">
<div class="fdb-box fdb-touch">
<h2>Feature 3</h2>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p class="mt-4"><a href="#/">Learn More</a></p>
</div>
</div>
</div>
</div>
</section>
<section class="fdb-block" id="sec4">
<div class="container">
<div class="row text-center">
<div class="col-12">
<h3><strong>You are in good lawfirm</strong></h3>
<div class="mt-5 justify-content-center">
<img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="https://cdn.jsdelivr.net/gh/froala/[email protected]/dist/imgs//customers/adobe.svg">
<img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="https://cdn.jsdelivr.net/gh/froala/[email protected]/dist/imgs//customers/amazon.svg">
<img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="https://cdn.jsdelivr.net/gh/froala/[email protected]/dist/imgs//customers/ebay.svg">
<img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="https://cdn.jsdelivr.net/gh/froala/[email protected]/dist/imgs//customers/samsung.svg">
<img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="https://cdn.jsdelivr.net/gh/froala/[email protected]/dist/imgs//customers/orange.svg">
<img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="https://cdn.jsdelivr.net/gh/froala/[email protected]/dist/imgs//customers/salesforce.svg">
</div>
<div class="mt-2 mt-md-5 justify-content-center">
<img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="https://cdn.jsdelivr.net/gh/froala/[email protected]/dist/imgs//customers/cisco.svg">
<img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="https://cdn.jsdelivr.net/gh/froala/[email protected]/dist/imgs//customers/apple.svg">
<img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="https://cdn.jsdelivr.net/gh/froala/[email protected]/dist/imgs//customers/ibm.svg">
<img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="https://cdn.jsdelivr.net/gh/froala/[email protected]/dist/imgs//customers/intel.svg">
<img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="https://cdn.jsdelivr.net/gh/froala/[email protected]/dist/imgs//customers/panasonic.svg">
</div>
</div>
</div>
</div>
</section>
<section class="fdb-block" id="sec5">
<div class="container">
<div class="row text-center">
<div class="col-12"><h1>Legal services for high growth companies</h1></div>
</div>
</div>
</section>
<section class="fdb-block team-4" id="sec6">
<div class="container">
<div class="row text-center justify-content-center">
<div class="col-8"><h1>Team</h1></div>
</div>
<div class="row text-center mt-5">
<div class="col-3"><p><img alt="image" class="img-fluid rounded" src="https://cdn.jsdelivr.net/gh/froala/[email protected]/dist/imgs//people/5.jpg"></p><h3><strong>Kenneth Smith</strong></h3><p>Position</p><p>A wonderful serenity has taken possession of my entire soul.</p></div>
<div class="col-3"><p><img alt="image" class="img-fluid rounded" src="https://cdn.jsdelivr.net/gh/froala/[email protected]/dist/imgs//people/6.jpg"></p><h3><strong>Joana Smith</strong></h3><p>Position</p><p>Pityful a rethoric question ran over her cheek.</p></div>
<div class="col-3"><p><img alt="image" class="img-fluid rounded" src="https://cdn.jsdelivr.net/gh/froala/[email protected]/dist/imgs//people/3.jpg"></p><h3><strong>Regie Smith</strong></h3><p>Position</p><p>And if she hasn’t been rewritten, then they are still using her.</p></div>
<div class="col-3"><p><img alt="image" class="img-fluid rounded" src="https://cdn.jsdelivr.net/gh/froala/[email protected]/dist/imgs//people/2.jpg"></p><h3><strong>Pappu Smith</strong></h3><p>Position</p><p>Wild Question Marks, but the Little Blind Text didn’t listen.</p></div>
</div>
</div>
</section>
<section class="fdb-block fp-active">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-sm-8 col-md-6 col-lg-6 text-center"><h2><strong>Long-term clientele relationships</strong></h2><p class="mt-5 mt-sm-4"><a class="btn btn-outline-primary btn-outline-peach" href="#/">Become a client</a></p></div>
</div>
</div>
</section>
<footer class="fdb-block footer-large">
<div class="container">
<div class="row align-items-top text-center">
<div class="col-12 col-sm-6 col-md-4 col-lg-3 text-sm-left">
<h3><strong>Group 1</strong></h3>
<nav class="nav flex-column">
<a class="nav-link active" href="#/">Home</a>
<a class="nav-link" href="#/">Expertise</a>
<a class="nav-link" href="#/">Lawyers</a>
<a class="nav-link" href="#/">Articles</a>
<a class="nav-link" href="#/">About</a>
</nav>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mt-5 mt-sm-0 text-sm-left">
<h3><strong>Group 2</strong></h3>
<nav class="nav flex-column">
<a class="nav-link active" href="#/">Privacy Policy</a>
<a class="nav-link" href="#/">Terms</a>
<a class="nav-link" href="#/">FAQ</a>
<a class="nav-link" href="#/">Support</a>
</nav>
</div>
<div class="col-12 col-md-4 col-lg-3 text-md-left mt-5 mt-md-0">
<h3><strong>About Us</strong></h3>
<p>The Firm specializes in mining and energy practice, corporate law and taxation, intellectual property, contracts, estate proceedings, retainer, counseling, and special projects.</p>
</div>
<div class="col-12 col-lg-2 ml-auto text-lg-left mt-4 mt-lg-0">
<h3><strong>Follow Us</strong></h3>
<p class="lead"><a class="mx-2" href="#/"></a>
<a class="mx-2" href="#/"></a>
<a class="mx-2" href="#/"></a>
<a class="mx-2" href="#/"></a><a class="mx-2" href="#/"></a>
</p>
</div>
</div>
<div class="row mt-3">
<div class="col text-center fr-box" role="application"><div class="fr-wrapper"><div class="fr-element fr-view" aria-disabled="false" spellcheck="true"><p>© 2019 A lawfirm site. All Rights Reserved</p></div></div></div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/froala_editor.pkgd.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment