Landing page revision #0
This commit is contained in:
Joseph Schorr
parent
2d69e2b031
commit
a903d36623
6 changed files with 227 additions and 2 deletions
BIN
static/containers-back-black.jpg
Normal file
BIN
static/containers-back-black.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
static/containers-back-black.psd
Normal file
BIN
static/containers-back-black.psd
Normal file
Binary file not shown.
BIN
static/containers.jpg
Normal file
BIN
static/containers.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 531 KiB |
|
|
@ -1,3 +1,164 @@
|
|||
.landing {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 562px;
|
||||
|
||||
padding: 10px;
|
||||
|
||||
color: white;
|
||||
margin-top: -19px;
|
||||
}
|
||||
|
||||
.landing .message-container {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 50px;
|
||||
width: 600px;
|
||||
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.landing .signup-container {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
right: 50px;
|
||||
width: 350px;
|
||||
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.landing .signup-container input {
|
||||
margin: 12px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.landing .message {
|
||||
font-size: 3.4em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.landing .message b {
|
||||
color: #94C9F7;
|
||||
}
|
||||
|
||||
.landing .sub-message {
|
||||
font-size: 1.8em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.landing .sub-message b {
|
||||
color: #94C9F7;
|
||||
}
|
||||
|
||||
.landing .sellcall {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
.landing .shoutouts {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
text-align: center;
|
||||
z-index: 3;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.landing .shoutout {
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
width: 300px;
|
||||
vertical-align: top;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.landing .shoutout i {
|
||||
font-size: 36px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.landing .shoutout b {
|
||||
font-size: 22px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.landing .background-mask {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
|
||||
height: 562px;
|
||||
|
||||
background: -moz-linear-gradient(top, #141414 0%, transparent 15%, transparent 85%, #141414 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#141414), color-stop(15%,transparent), color-stop(85%,transparent), color-stop(100%,#141414));
|
||||
background: -webkit-linear-gradient(top, #141414 0%,transparent 15%,transparent 85%,#141414 100%);
|
||||
background: -o-linear-gradient(top, #141414 0%,transparent 15%,transparent 85%,#141414 100%);
|
||||
background: -ms-linear-gradient(top, #141414 0%,transparent 15%,transparent 85%,#141414 100%);
|
||||
background: linear-gradient(to bottom, #141414 0%,transparent 15%,transparent 85%,#141414 100%);
|
||||
|
||||
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.landing .background {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
|
||||
background-color: #1d1d1d;
|
||||
background-position: left;
|
||||
background-image: url(../containers-back-black.jpg);
|
||||
background-repeat: no-repeat;
|
||||
|
||||
height: 562px;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.landing-footer {
|
||||
padding: 20px;
|
||||
|
||||
position: absolute;
|
||||
top: 610px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
|
||||
min-height: 138px;
|
||||
border-radius: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.landing-footer .footer-column {
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
margin-left: 20px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.landing-footer .footer-column ul {
|
||||
list-style-type: none;
|
||||
margin: 0px;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.landing-footer .footer-column li {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.landing-footer .dt-logo {
|
||||
float: right;
|
||||
margin-top: 30px;
|
||||
margin-right: 10px;
|
||||
vertical-align: center;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
#repoSearch {
|
||||
width: 400px;
|
||||
}
|
||||
|
|
|
|||
BIN
static/dt-logo.png
Normal file
BIN
static/dt-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
|
|
@ -1,3 +1,67 @@
|
|||
<div class="container">
|
||||
<a ng-href="#/repository">Repositories</a>
|
||||
<div class="landing">
|
||||
<div class="background"></div>
|
||||
<div class="background-mask"></div>
|
||||
<div class="message-container">
|
||||
<div class="message">Secure hosting for <b>private</b> docker containers</div>
|
||||
<div class="sub-message">Use the docker images <b>your team</b> needs with the safety of <b>private</b> storage</div>
|
||||
<div class="sellcall"><a href="">Starting at $7/mo</a></div>
|
||||
</div>
|
||||
|
||||
<div class="signup-container">
|
||||
<form method="post" class="form-signup">
|
||||
<input type="text" class="form-control" placeholder="Create a username" name="username" autofocus>
|
||||
<input type="text" class="form-control" placeholder="Email address" name="email" autofocus>
|
||||
<input type="password" class="form-control" placeholder="Create a password" name="password">
|
||||
<button class="btn btn-lg btn-primary btn-block" type="submit">Get Started!</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="shoutouts">
|
||||
<div class="shoutout">
|
||||
<i class="icon-lock"></i>
|
||||
<b>Secure</b>
|
||||
Store your private docker containers securely where only you and your team
|
||||
can access it
|
||||
</div>
|
||||
|
||||
<div class="shoutout">
|
||||
<i class="icon-cloud"></i>
|
||||
<b>Cloud Hosted</b>
|
||||
Accessible from anywhere, anytime
|
||||
</div>
|
||||
|
||||
<div class="shoutout">
|
||||
<i class="icon-share-sign"></i>
|
||||
<b>Shareable</b>
|
||||
Have to share a container? No problem! Share with anyone you choose
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar landing-footer">
|
||||
<div class="footer-column">
|
||||
<h4>About</h4>
|
||||
<ul>
|
||||
<li><a href="">Blog</a></li>
|
||||
<li><a href="">About Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-column">
|
||||
<h4>Legal</h4>
|
||||
<ul>
|
||||
<li><a href="">Terms of Service</a></li>
|
||||
<li><a href="">Privacy Policy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-column">
|
||||
<h4>Support</h4>
|
||||
<ul>
|
||||
<li><a href="">Contact Support</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<a href="https://devtable.com"><img class="dt-logo" src="/static/dt-logo.png"></a>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Reference in a new issue