Llayout images and styling for register page

This commit is contained in:
Chad Scharf 2020-06-11 11:27:46 -04:00
parent 2b0c92a4ea
commit 5b02202efb
5 changed files with 196 additions and 111 deletions

View File

@ -1,15 +1,34 @@
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
<div class="layout" [ngClass]="['layout', layout]">
<header class="header" *ngIf="layout === 'enterprise2'">
<div class="container">
<div class="row">
<div class="col-7">
<img alt="Bitwarden" class="logo mb-2" src="../../images/register-layout/logo-horizontal-white.png">
</div>
</div>
</div>
</header>
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
<div class="row">
<div class="col-7" *ngIf="layout">
<div class="mt-5">
<div *ngIf="layout === 'enterprise2'">
<p>Companies globally trust Bitwarden for password management.</p>
<h2>Companies globally trust Bitwarden for password management.</h2>
<p>Start your 7-day free trial!</p>
<p>Quickly deploy your <b>organization</b></p>
<p class="highlight">Quickly deploy your <b>organization</b></p>
<p>Use Bitwarden across all platforms</p>
<p>Collaborate and share securely</p>
<p>"Bitwarden has become a popular choice among open-source software advocates. After using it for a
few months, I can see why." - February 2020</p>
<figure>
<figcaption>
<cite>
<img src="../../images/register-layout/wired-logo.png" alt="Wired">
</cite>
</figcaption>
<blockquote>
"Bitwarden has become a popular choice among open-source software advocates. After using it for a
few months, I can see why." - February 2020
</blockquote>
</figure>
</div>
<div *ngIf="layout === 'enterprise3'">
<p>Enterprise 3 layout</p>
@ -126,4 +145,5 @@
</div>
</div>
</div>
</form>
</form>
</div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

@ -0,0 +1,63 @@
.layout {
&.enterprise2 {
header {
color: $secondary;
background-color: $primary;
&:before {
content: "";
position: absolute;
z-index: -1;
width: 100%;
height: 340px;
left: 0;
transform: skewY(-3deg);
background: $primary;
}
img.logo {
margin: 12px 0 0;
width: 284px;
max-width: 284px;
height: auto;
}
}
h2 {
color: #ffffff;
font-size: 1.8rem;
margin: 100px 0 150px 0;
}
p {
margin: 20px 0 40px 0;
font-size: 1.4rem;
&:before {
content: "/";
padding-right: 12px;
}
&:not(.highlight) {
&:before {
color: $primary-accent;
}
}
b {
&:after {
content: "";
font-size: 2rem;
padding-left: 6px;
}
}
}
blockquote {
margin: 20px 0 0 0;
font-size: 1.4rem;
padding-right: 40px;
}
}
}

View File

@ -839,3 +839,5 @@ img.logo {
.cursor-move {
cursor: move !important;
}
@import "./register-layout";