Skip to content
Snippets Groups Projects
Commit 7d73ec26 authored by Sabba Petri's avatar Sabba Petri
Browse files

Added nicer download button + styling

parent 5f0103f9
No related branches found
No related tags found
1 merge request!591Press page
Hide whitespace changes
Inline Side-by-side
source/press/index.html
+ 73
− 23
View file @ 7d73ec26
@@ -18,108 +18,158 @@ extra_css:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12 images-column">
<h1>IMAGES</h1>
<h1>IMAGES & LOGOS</h1>
 
<div class="image-container">
<div class="text">
<span>Founders</span>
<p>Image Type: .png</p>
</div>
<a target="_blank" href="/images/press/founders.jpg">
<div class="image founders"></div>
</a>
<div class="download"><a href="/images/press/founders.jpg" download="gitlab_founders">Download</a></div>
<div class="download">
<a href="/images/press/founders.jpg" download="gitlab_founders">
<i class="fa fa-download">&nbsp;&nbsp;Download</i>
</a>
</div>
</div>
 
<div class="image-container">
<div class="text">
<span>White Raccoon Dog (.png)</span>
<span>White Raccoon Dog</span>
<p>Image Type: .png</p>
</div>
<a target="_blank" href="/images/press/logo/fox-white.png">
<div class="image fox"></div>
</a>
<div class="download"><a href="/images/press/logo/fox-white.png" download="gitlab_logo">Download</a></div>
<div class="download">
<a href="/images/press/logo/fox-white.png" download="gitlab_logo">
<i class="fa fa-download">&nbsp;&nbsp;Download</i>
</a>
</div>
</div>
 
<div class="image-container">
<div class="text">
<span>White Raccoon Dog (.eps)</span>
<span>White Raccoon Dog</span>
<p>Image Type: .eps</p>
</div>
<a target="_blank" href="/images/press/logo/fox.eps">
<div class="image fox"></div>
</a>
<div class="download"><a href="/images/press/logo/fox.eps" download="gitlab_logo_white">Download</a></div>
<div class="download">
<a href="/images/press/logo/fox.eps" download="gitlab_logo_white">
<i class="fa fa-download">&nbsp;&nbsp;Download</i>
</a>
</div>
</div>
 
<div class="image-container">
<div class="text">
<span>Transparent Raccoon Dog</span>
<p>Image Type: .png</p>
</div>
<a target="_blank" href="/images/press/logo/fox.png">
<div class="image fox"></div>
</a>
<div class="download"><a href="/images/press/logo/fox.png" download="gitlab_logo_trans">Download</a></div>
<div class="download">
<a href="/images/press/logo/fox.png" download="gitlab_logo_trans">
<i class="fa fa-download">&nbsp;&nbsp;Download</i>
</a>
</div>
</div>
 
<div class="image-container">
<div class="text">
<span>Diff View</span>
<span>Diff View</span>
<p>Image Type: .png</p>
</div>
<a target="_blank" href="/images/press/screenshots/diff.png">
<div class="image diff"></div>
</a>
<div class="download"><a href="/images/press/screenshots/diff.png" download="gitlab_diff_view">Download</a></div>
<div class="download">
<a href="/images/press/screenshots/diff.png" download="gitlab_diff_view">
<i class="fa fa-download">&nbsp;&nbsp;Download</i>
</a>
</div>
</div>
 
<div class="image-container">
<div class="text">
<span>File View</span>
<p>Image Type: .png</p>
</div>
<a target="_blank" href="/images/press/screenshots/file_view.png">
<div class="image file"></div>
</a>
<div class="download"><a href="/images/press/screenshots/file_view.png" download="gitlab_file_view">Download</a></div>
<div class="download">
<a href="/images/press/screenshots/file_view.png" download="gitlab_file_view">
<i class="fa fa-download">&nbsp;&nbsp;Download</i>
</a>
</div>
</div>
 
<div class="image-container">
<div class="text">
<span>Network Graph View</span>
<p>Image Type: .png</p>
</div>
<a target="_blank" href="/images/press/screenshots/network_graph.png">
<div class="image network-graph"></div>
</a>
<div class="download"><a href="/images/press/screenshots/network_graph.png" download="gitlab_network_graph _view">Download</a></div>
<div class="download">
<a href="/images/press/screenshots/network_graph.png" download="gitlab_network_graph _view">
<i class="fa fa-download">&nbsp;&nbsp;Download</i>
</a>
</div>
</div>
 
<div class="image-container">
<div class="text">
<span>Wordmark (.eps)</span>
<span>Wordmark</span>
<p>Image Type: .eps</p>
</div>
<a target="_blank" href="/images/press/wordmark/wordmark.eps">
<div class="image wordmark"></div>
</a>
<div class="download"><a href="/images/press/wordmark/wordmark.eps" download="gitlab_wordmark">Download</a></div>
<div class="download">
<a href="/images/press/wordmark/wordmark.eps" download="gitlab_wordmark">
<i class="fa fa-download">&nbsp;&nbsp;Download</i>
</a>
</div>
</div>
 
<div class="image-container">
<div class="text">
<span>Wordmark (.png)</span>
<span>Wordmark</span>
<p>Image Type: .png</p>
</div>
<a target="_blank" href="/images/press/wordmark/wordmark.png">
<a target="_blank" href="/images/press/wordmark/wordmark.png">
<div class="image wordmark"></div>
</a>
<div class="download"><a href="/images/press/wordmark/wordmark.png" download="gitlab_wordmark">Download</a></div>
<div class="download">
<a href="/images/press/wordmark/wordmark.png" download="gitlab_wordmark">
<i class="fa fa-download">&nbsp;&nbsp;Download</i>
</a>
</div>
</div>
 
<div class="image-container">
<div class="text">
<span>Large Wordmark (.png)</span>
</div>
<a target="_blank" href="/images/press/wordmark/wordmark_large.png">
<div class="image wordmark"></div>
<div class="image-container">
<div class="text">
<span>Large Wordmark</span>
<p>Image Type: .png</p>
</div>
<a target="_blank" href="/images/press/wordmark/wordmark_large.png">
<div class="image wordmark"></div>
</a>
<div class="download">
<a href="/images/press/wordmark/wordmark_large.png" download="gitlab_wordmark_large">
<i class="fa fa-download">&nbsp;&nbsp;Download</i>
</a>
<div class="download"><a href="/images/press/wordmark/wordmark_large.png" download="gitlab_wordmark_large">Download</a></div>
</div>
</div>
</div>
</div>
 
<hr class="divider" />
source/stylesheets/press.css
+ 25
− 7
View file @ 7d73ec26
@@ -110,15 +110,17 @@ h1 {
}
 
.image {
padding: 40px;
overflow: hidden;
background-repeat: no-repeat;
background-size: 100%;
padding: 40px;
margin: 0 36px 3px 36px;
width: 170px;
float: left;
border: 1px solid #548;
border-radius: 4px;
margin: 10px 36px 17px 36px;
border-right: 1px solid #548;
border-left: 1px solid #548;
border-top: 1px solid #548;
border-radius: 2px;
}
 
.recent-blog a {
@@ -174,17 +176,33 @@ h1 {
font-size: 18px;
}
 
.text span {
.image-container .text span {
font-size: 19px;
font-family: "Korolev-Light";
}
.image-container .text p {
color: #aaa;
margin: 0;
font-size: 11px;
margin-bottom: 7px;;
}
 
.download a {
border: 1px solid #548;
border-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
color: white;
background: #548;
padding: 7px;
padding: 7px 49px;
font-size: 12px;
transition: 0.5s ease;
}
.download a:hover {
background: white;
color: #548;
text-decoration: none;
}
 
.item {
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment