mirror of
https://github.com/ivabus/www
synced 2024-11-22 20:15:05 +03:00
Progress
This commit is contained in:
Thomas Smith
parent
8d1359f376
commit
fb023a47bf
6 changed files with 147 additions and 72 deletions
|
|
@ -2,24 +2,47 @@
|
|||
|
||||
<!-- Hero Section -->
|
||||
|
||||
<section>
|
||||
<style>
|
||||
.hero{
|
||||
background-image: url("/Images/hero-background-mountains.png") !important;
|
||||
background-attachment: scroll;
|
||||
background-position: right;
|
||||
background-repeat: repeat-y;
|
||||
background-size: cover !important;
|
||||
}
|
||||
|
||||
.stats-top{
|
||||
background-image: url("/Images/gen-art/orange-pattern.jpg") !important;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-repeat: repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
code{
|
||||
color:white;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="row gx-5">
|
||||
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
|
||||
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
|
||||
<h1 class="display-1" style="z-index:3; position: relative;">Invisible yet <span class="callout white">powerful</span></h1>
|
||||
<p class="lead">Upgrade to Tea - the revolutionary, cross-platform package manager. Say goodbye to slow & clunky, and say hello to fast & smooth updates. From the creator of Brew.</p>
|
||||
<p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<div class="flex-start mb-3">
|
||||
<a href="https://github.com/teaxyz/cli" class="me-3 mb-3">
|
||||
<button class="hbtn hb-fill-right">INSTALL TEA (<span class="release" style="text-transform: lowercase;"></span>)</button>
|
||||
<a href="https://github.com/teaxyz/cli" class="me-3">
|
||||
<button class="hbtn hb-fill-right"><i class="icon-tea-logo-iconasset-1"></i>INSTALL TEA (<span class="release" style="text-transform: lowercase;"></span>)</button>
|
||||
</a>
|
||||
<a href="https://github.com/teaxyz/cli">
|
||||
<button class="hbtn hb-fill-right">INSTALL TEA (<span class="release" style="text-transform: lowercase;"></span>)</button>
|
||||
<button class="hbtn-light hb-light-fill-right"><i class="icon-github" style="position:relative;top:2px;"></i>GITHUB (☆<span class="stargazers" style="text-transform: lowercase;"></span>)</button>
|
||||
</a>
|
||||
</div>
|
||||
<p class="small dark-gray">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="small dark-gray mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
|
||||
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
|
||||
<a href="https://github.com/teaxyz/cli#teacli-0212" target="_blank">
|
||||
<div class="terminal flex">
|
||||
<div class="terminal-bar black-bg flex-start p-1 ps-3">
|
||||
|
|
@ -29,7 +52,7 @@
|
|||
</div>
|
||||
<div class="p-5">
|
||||
<div class="terminal-content">
|
||||
<p id="terminal-output"></p>
|
||||
<code id="terminal-output"></code>
|
||||
<p id="terminal-input"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -43,8 +66,6 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
{{- partial "hero-terminal-animation.html" -}}
|
||||
|
||||
<style>
|
||||
|
|
@ -81,7 +102,8 @@
|
|||
}
|
||||
|
||||
.terminal{
|
||||
height: 100%;
|
||||
height: auto;
|
||||
min-height: 40%;
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
|
|
@ -492,10 +514,28 @@
|
|||
<div class="row">
|
||||
<div class="col">
|
||||
<div>
|
||||
<h2 class="black display-4" style="z-index:2;">THIS ISN’T A PACKAGE MANAGER. TEA IS A UNIFIED PACKAGING INFRASTRUCTURE.</h2>
|
||||
<h2 class="black display-4 text-center" style="z-index:2;">THIS ISN’T A PACKAGE MANAGER. TEA IS A UNIFIED PACKAGING INFRASTRUCTURE.</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row one-box-up">
|
||||
<div class="col">
|
||||
<p class="text-center black">NO. OF REPOS</p>
|
||||
<h1 class="display-1 text-center black"><span id="stat-one">56,987</span></h1>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p class="text-center black">NO. OF MAINTAINERS</p>
|
||||
<h1 class="display-1 text-center black"><span id="stat-two">56,987</span></h1>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p class="text-center black">STAR COUNT</p>
|
||||
<a href="https://github.com/teaxyz/cli/stargazers" target="_blank"><h1 class="display-1 text-center black"><span class="stargazers">56,987</span></h1></a>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p class="text-center black">CURRENT RELEASE</p>
|
||||
<a href="https://github.com/teaxyz/cli/releases" target="_blank"><h1 class="display-1 text-center black"><span class="release" style="text-transform:lowercase;">56,987</span></h1></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -524,48 +564,51 @@
|
|||
|
||||
<!-- Features -->
|
||||
|
||||
<section>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<h2 class="display-3">TO CALL TEA ‘REVOLUTIONARY’ WOULD BE AN UNDERSTATEMENT. <a href="https://twitter.com/mxcl?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor">@MXCL</a> HAS SET A NEW BAR.</h2>
|
||||
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
|
||||
<!-- Homebrew -->
|
||||
|
||||
<div class="speed-terminal mb-3" style="box-shadow:none;">
|
||||
<div class="terminal-bar black-bg flex-start p-1 ps-3">
|
||||
<div class="traffic-light"></div>
|
||||
<div class="traffic-light"></div>
|
||||
<div class="traffic-light"></div>
|
||||
</div>
|
||||
<div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3">
|
||||
<p class="teal small"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- tea -->
|
||||
|
||||
<div class="speed-terminal">
|
||||
<div class="terminal-bar black-bg flex-start p-1 ps-3">
|
||||
<div class="traffic-light"></div>
|
||||
<div class="traffic-light"></div>
|
||||
<div class="traffic-light"></div>
|
||||
</div>
|
||||
<div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3">
|
||||
<p class="teal small"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Homebrew v. tea Section -->
|
||||
|
||||
<section class="features">
|
||||
<div class="container">
|
||||
<div class="row one-box">
|
||||
<div class="col">
|
||||
<h3 class="display-6 one-box-down">tea Features (<span class="release"></span>)</h3>
|
||||
<h2 class="display-3">TO CALL TEA ‘REVOLUTIONARY’ WOULD BE AN UNDERSTATEMENT. <a href="https://twitter.com/mxcl?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor">@MXCL</a> HAS SET A NEW BAR.</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row three-boxes-down">
|
||||
<div class="col">
|
||||
<div class="row speed-comparison">
|
||||
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-4 mb-sm-4 mb-4">
|
||||
<h3 class="dark-gray display-6">homebrew (slow)</h3>
|
||||
<div class="speed-terminal" style="box-shadow:none;">
|
||||
<div class="terminal-bar black-bg flex-start p-1 ps-3">
|
||||
<div class="traffic-light"></div>
|
||||
<div class="traffic-light"></div>
|
||||
<div class="traffic-light"></div>
|
||||
</div>
|
||||
<div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3">
|
||||
<p class="teal small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
|
||||
<h3 class="display-6">tea (fast)</h3>
|
||||
<div class="speed-terminal">
|
||||
<div class="terminal-bar black-bg flex-start p-1 ps-3">
|
||||
<div class="traffic-light"></div>
|
||||
<div class="traffic-light"></div>
|
||||
<div class="traffic-light"></div>
|
||||
</div>
|
||||
<div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3">
|
||||
<p class="teal small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- First -->
|
||||
|
||||
|
|
@ -596,7 +639,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- {{- partial "tea-magic-terminal-animation.html" -}} -->
|
||||
<hr>
|
||||
|
||||
<!-- Second -->
|
||||
|
||||
|
|
@ -689,7 +732,7 @@
|
|||
.speed-terminal{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: 400px;
|
||||
min-height: 50%;
|
||||
border: 2px solid gray;
|
||||
background-color: #1a1a1a;
|
||||
border-radius: 10px;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
padding: 8px 20px;
|
||||
width: 300px;
|
||||
text-align: center;
|
||||
border:none;
|
||||
border: 1px solid #8000ff;
|
||||
text-decoration: none;
|
||||
color: rgb(225, 225, 225);
|
||||
white-space: nowrap;
|
||||
|
|
@ -67,6 +67,56 @@
|
|||
transition: color 0.3s ease 0s, background 0s ease 0.3s;
|
||||
}
|
||||
|
||||
.hbtn-light {
|
||||
font-family: "pp-neue-machina";
|
||||
background: none !important;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
height: 60px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
padding: 8px 20px;
|
||||
width: 300px;
|
||||
text-align: center;
|
||||
border: 1px solid #e1e1e1;
|
||||
text-decoration: none;
|
||||
color: #e1e1e1;
|
||||
white-space: nowrap;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
|
||||
.hbtn-light i {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
|
||||
.hb-light-fill-right::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
background: #e1e1e1;
|
||||
transition-duration: 0.2s;
|
||||
z-index: -1;
|
||||
inset: 0px auto auto 0px;
|
||||
width: 0px;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
.hb-light-fill-right:hover::before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
.hb-light-fill-right:hover {
|
||||
color: #1a1a1a;
|
||||
background: rgb(91, 0, 184);
|
||||
transition: color 0.3s ease 0s, background 0s ease 0.3s;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</ul>
|
||||
|
|
|
|||
BIN
src/static/Images/hero-backgrond-grid.gif
Normal file
BIN
src/static/Images/hero-backgrond-grid.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
src/static/Images/hero-background-mountains.png
Normal file
BIN
src/static/Images/hero-background-mountains.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 386 KiB |
|
|
@ -137,14 +137,6 @@ mark{
|
|||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
|
||||
.hero-section{
|
||||
background-image: url("/Images/x-large-grid.svg") !important;
|
||||
background-attachment: scroll;
|
||||
background-position: top;
|
||||
background-repeat: repeat-y;
|
||||
background-size: cover !important;
|
||||
}
|
||||
|
||||
.lead-text-container{
|
||||
border: 1px solid #949494 !important;
|
||||
width: 600px;
|
||||
|
|
|
|||
|
|
@ -36,7 +36,6 @@ h1{
|
|||
font-family: "mona", sans-serif;
|
||||
color:#00ffd0;
|
||||
text-transform:uppercase;
|
||||
text-shadow: 0px 0px 4px #1a1a1a !important;
|
||||
}
|
||||
|
||||
h2{
|
||||
|
|
@ -47,7 +46,7 @@ h2{
|
|||
}
|
||||
|
||||
h3{
|
||||
font-family: "pp-neue-machina", sans-serif;
|
||||
font-family: "mona", sans-serif;
|
||||
color:#00ffd0;
|
||||
}
|
||||
|
||||
|
|
@ -103,9 +102,6 @@ a:hover{
|
|||
}
|
||||
|
||||
h1{
|
||||
font-size: 11.5vw;
|
||||
line-height: 12.4vw;
|
||||
margin-top: -1.116vw;
|
||||
}
|
||||
|
||||
h2{
|
||||
|
|
@ -143,9 +139,6 @@ a:hover{
|
|||
}
|
||||
|
||||
h1{
|
||||
font-size: 14vw;
|
||||
line-height: 15vw;
|
||||
margin-top: -0.3vw;
|
||||
}
|
||||
|
||||
h2{
|
||||
|
|
@ -182,9 +175,6 @@ a:hover{
|
|||
}
|
||||
|
||||
h1{
|
||||
font-size: 14vw;
|
||||
line-height: 15vw;
|
||||
margin-top: -0.3vw;
|
||||
}
|
||||
|
||||
h2{
|
||||
|
|
|
|||
Loading…
Reference in a new issue