Add github ribbon

This commit is contained in:
Dany LE 2023-01-03 22:52:17 +01:00
parent ff87c3d7aa
commit 2b8d609134
4 changed files with 79 additions and 11 deletions

62
css/github-ribbon.css Normal file
View File

@ -0,0 +1,62 @@
#forkongithub a{
background:#5856D6;
color:#fff;
text-decoration:none;
font-family:Ubuntu,sans-serif;
text-align:center;
font-weight:bold;
padding:5px 40px;
/*font-size:1rem;*/
line-height:2rem;
position:relative;
transition:0.5s;
}
#forkongithub a:hover{
background:#ff8800;
color:#fff;
}
#forkongithub a::before,#forkongithub a::after{
content:"";
width:100%;
display:block;
position:absolute;
top:1px;
left:0;
height:1px;
background:transparent;
border-top: 1px dashed #fff;
}
#forkongithub a::after{
bottom:1px;
top:auto;
}
@media screen and (min-width:321px) {
#forkongithub {
position:absolute;
display:block;
top:0;
right:0;
width:150px;
overflow:hidden;
height:150px;
z-index:970;
}
#forkongithub a{
width:200px;
position:absolute;
top:20px;
right:-60px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
box-shadow:4px 4px 10px rgba(0,0,0,0.8);
}
}
@media (max-width: 320px) {
#forkongithub {
display: none;
}
}

View File

@ -20,7 +20,7 @@
@import url(normalize.css); @import url(normalize.css);
@import url(owl.carousel.min.css); @import url(owl.carousel.min.css);
@import url(github-ribbon.css);
/* /*
@import url(font-awesome.min.css); @import url(font-awesome.min.css);
@import url(normalize.css); @import url(normalize.css);
@ -146,7 +146,7 @@ p {
} }
a { a {
color: rgb(28, 63, 135); color: #5856D6;
text-decoration: none; text-decoration: none;
outline: none !important; outline: none !important;
} }
@ -309,6 +309,8 @@ a.article:hover {
ul.btn { ul.btn {
float: right; float: right;
padding-right: 100px;
padding-top: 20px;
} }
ul.btn li { ul.btn li {
@ -372,7 +374,7 @@ ul.btn li.down_btn:hover a {
.header { .header {
width: 100%; width: 100%;
background: #11aeef; background: #5e548e;
padding: 30px 30px 0px 30px; padding: 30px 30px 0px 30px;
position: relative; position: relative;
z-index: 960; z-index: 960;
@ -395,7 +397,7 @@ ul.btn li.down_btn:hover a {
/** banner section **/ /** banner section **/
.banner_main { .banner_main {
background: #11aeef; background: #5e548e;
padding: 0 0 90px 0; padding: 0 0 90px 0;
} }
@ -656,9 +658,12 @@ ul.easy li a:hover {
/** work section **/ /** work section **/
.work { .work {
background: #0192c8;; background: #5e548e;
padding: 50px 0; padding: 50px 0;
} }
.work a{
color: #D69856;
}
.work .titlepage { .work .titlepage {
@ -931,7 +936,7 @@ ul.social_icon li a i:hover {
.copyright { .copyright {
margin-top: 30px; margin-top: 30px;
padding: 15px 0; padding: 15px 0;
background: #0192c8; background: #5e548e;
} }
.copyright p { .copyright p {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 677 B

After

Width:  |  Height:  |  Size: 704 B

View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="initial-scale=1, maximum-scale=1"> <meta name="viewport" content="initial-scale=1, maximum-scale=1">
<!-- site metas --> <!-- site metas -->
<title>AntOS Cloud-based working environment</title> <title>AntOS Cloud-based web desktop</title>
<meta name="keywords" content=""> <meta name="keywords" content="">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
@ -29,6 +29,7 @@
<!-- body --> <!-- body -->
<body class="main-layout"> <body class="main-layout">
<div class="wrapper"> <div class="wrapper">
<span id="forkongithub"><a href="https://github.com/lxsang/antos"><i class="fa fa-github" aria-hidden="true"></i> Fork me</a></span>
<!-- end loader --> <!-- end loader -->
<div id="content"> <div id="content">
<!-- header --> <!-- header -->
@ -48,9 +49,9 @@
</div> </div>
<div class="col-xl-9 col-lg-9 col-md-9 col-sm-9"> <div class="col-xl-9 col-lg-9 col-md-9 col-sm-9">
<ul class="btn"> <ul class="btn">
<li class="down_btn"><a href="#about"><i class="fa fa-play" aria-hidden="true"></i> Download</a></li> <li ><a href="#about"><i class="fa fa-cloud-download" aria-hidden="true"></i> Download</a></li>
<li ><a href="#work"><i class="fa fa-book" aria-hidden="true"></i> Documentation</a></li> <li ><a href="#work"><i class="fa fa-book" aria-hidden="true"></i> Documentation</a></li>
<li><a href="https://github.com/lxsang/antos">Github <i class="fa fa-github" aria-hidden="true"></i></a></li> <!--li><a href="https://github.com/lxsang/antos">Github <i class="fa fa-github" aria-hidden="true"></i></a></li-->
</ul> </ul>
</div> </div>
</div> </div>
@ -73,7 +74,7 @@
<div class="row"> <div class="row">
<div class="col-xl-5 col-lg-5 col-md-5 col-sm-12"> <div class="col-xl-5 col-lg-5 col-md-5 col-sm-12">
<div class="text-bg"> <div class="text-bg">
<h1>Your Cloud-Based, Self-Hosted Working Environment</h1> <h1>Cloud-Based, Self-Hosted Web desktop</h1>
<p> <p>
AntOS is a web-based desktop platform that provides an all-in-one solution for setting up a cloud-based, self-hosted working environment. AntOS is a web-based desktop platform that provides an all-in-one solution for setting up a cloud-based, self-hosted working environment.
It features backend API and services, a front-end web-based window manager, application APIs, a GUI toolkit, and file system abstractions. It features backend API and services, a front-end web-based window manager, application APIs, a GUI toolkit, and file system abstractions.