added footer
This commit is contained in:
Nicolas Constant
parent
bb2e2cda73
commit
2f6c071eaa
|
|
@ -66,9 +66,12 @@ body {
|
|||
background-color: #f7f7f7;
|
||||
height: calc(100vh - 3rem);
|
||||
overflow: hidden; }
|
||||
@media (max-width: 56.25em) {
|
||||
.header {
|
||||
height: calc(100vh); } }
|
||||
.header__image {
|
||||
display: block;
|
||||
margin: 8vh auto 0 auto; }
|
||||
margin: 8.5vh auto 0 auto; }
|
||||
@media (max-width: 56.25em) {
|
||||
.header__image {
|
||||
display: none; } }
|
||||
|
|
@ -80,7 +83,8 @@ body {
|
|||
font-size: 2rem; }
|
||||
@media (max-width: 56.25em) {
|
||||
.header__download-box {
|
||||
margin: 10vh auto 0 auto; } }
|
||||
margin: 10vh auto 0 auto;
|
||||
width: calc(80%); } }
|
||||
.header__download-box--title {
|
||||
font-weight: 300;
|
||||
font-size: 5rem;
|
||||
|
|
@ -101,7 +105,8 @@ body {
|
|||
padding: 0 15px 2px 15px;
|
||||
font-size: 38px;
|
||||
color: #3f3f3f;
|
||||
text-decoration: none; }
|
||||
text-decoration: none;
|
||||
margin-bottom: 1rem; }
|
||||
.download-button:hover {
|
||||
color: #faa424; }
|
||||
.download-button__web {
|
||||
|
|
@ -129,3 +134,25 @@ body {
|
|||
.fa-apple {
|
||||
position: relative;
|
||||
top: -2px; }
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
background-color: #141414;
|
||||
color: white;
|
||||
height: 18rem;
|
||||
padding-top: 4em; }
|
||||
.footer__title {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: lighter;
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1.5rem; }
|
||||
.footer__buttons {
|
||||
margin: auto; }
|
||||
.footer__buttons--button {
|
||||
font-size: 4rem;
|
||||
color: whitesmoke;
|
||||
transition: all .2s; }
|
||||
.footer__buttons--button:not(:last-child) {
|
||||
margin-right: 2rem; }
|
||||
.footer__buttons--button:hover {
|
||||
color: #faa424; }
|
||||
|
|
|
|||
|
|
@ -4,9 +4,13 @@
|
|||
height: calc(100vh - 3rem);
|
||||
overflow: hidden;
|
||||
|
||||
@include respond(tab-port) {
|
||||
height: calc(100vh);
|
||||
}
|
||||
|
||||
&__image {
|
||||
display: block;
|
||||
margin: 8vh auto 0 auto;
|
||||
margin: 8.5vh auto 0 auto;
|
||||
|
||||
@include respond(tab-port) {
|
||||
display: none;
|
||||
|
|
@ -26,14 +30,14 @@
|
|||
|
||||
@include respond(tab-port) {
|
||||
margin: 10vh auto 0 auto;
|
||||
width: calc(80%);
|
||||
}
|
||||
|
||||
// position: relative;
|
||||
// top: 50%;
|
||||
// transform: translateY(-50%);
|
||||
|
||||
font-family: 'Open Sans',
|
||||
sans-serif;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 2rem;
|
||||
|
||||
&--title {
|
||||
|
|
@ -70,6 +74,7 @@
|
|||
//opacity: .80;
|
||||
text-decoration: none;
|
||||
// outline-color: rgb(141, 140, 140);
|
||||
margin-bottom: 1rem;
|
||||
|
||||
&:hover {
|
||||
color: rgb(250, 164, 36);
|
||||
|
|
@ -112,3 +117,37 @@
|
|||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
background-color: rgb(20, 20, 20);
|
||||
color: white;
|
||||
height: 18rem;
|
||||
padding-top: 4em;
|
||||
|
||||
&__title {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: lighter;
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
margin: auto;
|
||||
|
||||
&--button {
|
||||
font-size: 4rem;
|
||||
color:whitesmoke;
|
||||
transition: all .2s;
|
||||
|
||||
&:not(:last-child){
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color:rgb(250, 164, 36);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -35,18 +35,18 @@
|
|||
<div class="header__download-box--buttons">
|
||||
<p>
|
||||
<h4 class="header__download-box--subtitle">Try it in your browser!</h4>
|
||||
<a href="#" class="download-button download-button__web"
|
||||
<a href="#" class="download-button download-button__web" title="what are you waiting for? click!"
|
||||
onClick="window.open('http://sengi.nicolas-constant.com'+'?qt='+ (new Date()).getTime(),'Sengi','toolbar=no,location=no,status=no,menubar=no,scrollbars=no, resizable=yes,width=377,height=800'); return false;"
|
||||
class="button"><i class="fas fa-globe"></i><span class="download-button__web--label">launch!</span></a><br />
|
||||
class="button"><i class="fas fa-globe"></i><span
|
||||
class="download-button__web--label">launch!</span></a><br />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<h4 class="header__download-box--subtitle">Or download the desktop client:</h4>
|
||||
<a href="#" class="download-button"><i class="fab fa-windows"></i></a>
|
||||
<a href="#" class="download-button"><i class="fab fa-apple"></i></a>
|
||||
<a href="#" class="download-button"><i class="fab fa-ubuntu"></i></a>
|
||||
<a href="https://snapcraft.io/sengi"><img
|
||||
src="/images/[EN]-snap-store-white-uneditable@1x.png" /></a>
|
||||
<a href="#" class="download-button" title="download client for windows"><i class="fab fa-windows"></i></a>
|
||||
<a href="#" class="download-button" title="download client for mac"><i class="fab fa-apple"></i></a>
|
||||
<a href="#" class="download-button" title="download client for debian-based distrib"><i class="fab fa-ubuntu"></i></a>
|
||||
<a href="https://snapcraft.io/sengi" title="use Snap Store for linux"><img src="/images/[EN]-snap-store-white-uneditable@1x.png" /></a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -70,8 +70,13 @@
|
|||
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<footer class="footer">
|
||||
<h3 class="footer__title">Let's keep in touch!</h3>
|
||||
|
||||
<div class="footer__buttons">
|
||||
<a href="https://mastodon.social/@sengi_app" class="footer__buttons--button" title="open pleroma-compatible account"><i class="fab fa-mastodon"></i></a>
|
||||
<a href="https://github.com/NicolasConstant/sengi" class="footer__buttons--button" title="open microsoft github repository"><i class="fab fa-github"></i></a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue