Verified Commit c295b690 authored by Andres Betts's avatar Andres Betts 🏀 Committed by Carl Schwan

Update layout of the homepage

parent d489282a
......@@ -17,7 +17,7 @@ hr.blue-line {
main {
font-size: 16px;
section {
margin-bottom: 0;
margin-top: 0;
......@@ -25,6 +25,10 @@ main {
}
}
h1 {
font-weight: bold;
}
.container-application {
max-width: 1200px;
margin-left: auto;
......@@ -50,11 +54,12 @@ main {
}
.section-blue {
background: rgba(61,174,233,.1);
background: white;
}
.card {
padding: 0;
box-shadow: 1px 3px 8px #EFF0F1;
}
@media (min-width: 992px) {
......@@ -76,20 +81,24 @@ main {
}
.laptop-with-overlay {
max-width: 750px;
top: 50%;
justify-content: center;
}
.plasma-info {
display: flex;
flex-direction: column;
align-items: start;
align-items: center;
}
#plasma .container {
display: flex;
align-items: center;
text-align: center;
justify-content: center;
}
}
.app {
align-items: center;
.button {
margin-left: 10px;
}
......@@ -98,7 +107,7 @@ main {
align-items: center;
text-align: center;
order: 0;
div {
margin-left: auto;
margin-right: auto;
......@@ -114,14 +123,22 @@ main {
}
#plasma h1 {
margin-top: 0.3em;
margin-top: 0.1em;
margin-bottom: 10px;
font-size: 80px;
}
#plasma h2 {
margin-top: 0.1em;
margin-bottom: 40px;
}
.swiper-slide img, .screenshot img {
height: 50vw;
min-height: 300px;
max-height: 500px;
}
.swiper-slide h3 {
text-align: center;
}
......@@ -192,3 +209,36 @@ main {
#kde-connect {
background: rgba(246, 116, 0, 0.05);
}
.mt-1 {
text-align: left;
}
.col-12.col-lg-5.app-description.mt-4 {
text-align: left;
}
.container {
text-align: center;
}
#krita {
box-shadow: 0px 3px 3px 2px #BFBFBF;
border-radius: 4px;
}
#kdenlive {
box-shadow: 0px 3px 3px 2px #BFBFBF;
border-radius: 4px;
}
#kdevelop {
box-shadow: 0px 3px 3px 2px #BFBFBF;
border-radius: 4px;
}
#gcompris {
box-shadow: 0px 3px 3px 2px #BFBFBF;
border-radius: 4px;
margin-bottom: 30px;
}
......@@ -2,29 +2,29 @@
<main id="home">
<section class="section-blue" id="plasma">
<div class="container">
<div id="top-section" class="container">
<div>
<h1>Plasma</h1>
<h2>The next generation desktop for Linux</h2>
<h1 id="plasma-title">Plasma</h1>
<h2>The next generation desktop for Linux.</h2>
<div class="laptop-with-overlay d-inline-block">
<img class="laptop img-fluid mb-3" src="/content/plasma-desktop/laptop.png" alt="empty laptop with an overlay">
<img class="laptop img-fluid mb-4" src="/content/home/laptop.png" alt="empty laptop with an overlay">
<div class="laptop-overlay">
<img class="img-fluid mb-3" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="/content/home/kde-main.jpg" alt="Screenshot Plasma with Dolphin and system setting open" />
<img id="screenshot" class="img-fluid mb-4" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="/content/home/kde-main.png" alt="Screenshot Plasma with Dolphin and system setting open" />
</div>
</div>
</div>
<div class="plasma-info">
<a href="/distributions" class="learn-more button mb-3">Install on your computer</a>
<a href="/plasma-desktop" class="learn-more mb-3">Discover Plasma</a>
<a href="/hardware" class="learn-more mb-3">Buy a computer with Plasma</a>
</div>
</div>
<div class="plasma-info">
<a href="/distributions" class="learn-more button mb-3">Install Plasma on your computer</a>
<a href="/plasma-desktop" class="learn-more mb-3">Discover Plasma</a>
<a href="/hardware" class="learn-more mb-4">Buy a computer with Plasma</a>
</div>
</section>
<section id="kde-connect">
<div class="container">
<h1>KDE's Applications</h1>
<h2>Powerful, multi-platform and for all</h2>
<h2>Powerful, multi-platform and for all.</h2>
<p>Use KDE software to surf the web, keep in touch with colleagues, friends and family, manage your files, enjoy music and videos; and get creative and productive at work. The KDE community develops and maintains more than <strong>200</strong> applications which run on any Linux desktop, and often other platforms too.</p>
<p>
<a class="learn-more mt-3" href="/applications">See all applications</a>
......@@ -38,7 +38,7 @@
<p>Get creative and draw beautiful artwork with Krita. A professional grade painting application.</p>
</div>
</div>
<a href="https://krita.org" class="col-12 col-lg-7"><img class="img-fluid" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="https://krita.org/wp-content/uploads/2019/08/krita-ui-40.png" alt="Krita screenshot" /></a>
<a href="https://krita.org" class="col-12 col-lg-7"><img id="krita" class="img-fluid" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="https://krita.org/wp-content/uploads/2019/08/krita-ui-40.png" alt="Krita screenshot" /></a>
</div>
<div class="row mt-5 app" id="kdenlive-showcaste">
<div class="col-12 col-lg-5 app-description mt-4">
......@@ -48,7 +48,7 @@
<p>Kdenlive allows you to edit your videos and add special effects and transitions.</p>
</div>
</div>
<a href="https://kdenlive.org" class="col-12 col-lg-7"><img class="img-fluid" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="https://kde.org/applications/thumbnails/org.kde.kdenlive/k1.png" alt="Kdenlive screenshot"/></a>
<a href="https://kdenlive.org" class="col-12 col-lg-7"><img id="kdenlive" class="img-fluid" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="https://kde.org/applications/thumbnails/org.kde.kdenlive/k1.png" alt="Kdenlive screenshot"/></a>
</div>
<div class="row mt-5 app" id="kontact-showcaste">
<div class="col-12 col-lg-5 mt-4 app-description">
......@@ -68,7 +68,7 @@
<p>KDevelop is a cross-platform IDE for C, C++, Python, QML/JavaScript and PHP</p>
</div>
</div>
<a href="https://kdevelop.org" class="col-12 col-lg-7"><img class="img-fluid" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="https://www.kdevelop.org/sites/www.kdevelop.org/files/inline-images/kdevelop5-breeze_2.png" alt="KDevelop screenshot" /></a>
<a href="https://kdevelop.org" class="col-12 col-lg-7"><img id="kdevelop" class="img-fluid" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="https://www.kdevelop.org/sites/www.kdevelop.org/files/inline-images/kdevelop5-breeze_2.png" alt="KDevelop screenshot" /></a>
</div>
<div class="row app mt-5" id="gcompris-showcaste">
<div class="col-12 col-lg-5 mt-4 app-description">
......@@ -78,12 +78,12 @@
<p>GCompris is a high quality educational software suite, including a large number of activities for children aged 2 to 10.</p>
</div>
</div>
<a href="https://gcompris.net" class="col-12 col-lg-7"><img class="img-fluid" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="https://kde.org/applications/thumbnails/org.kde.gcompris/gcompris.png" alt="GCompris screenshot" /></a>
<a href="https://gcompris.net" class="col-12 col-lg-7"><img id="gcompris" class="img-fluid" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="https://kde.org/applications/thumbnails/org.kde.gcompris/gcompris.png" alt="GCompris screenshot" /></a>
</div>
</div>
</div>
</section>
<section class="section-blue">
<div class="container">
<h1>Hardware</h1>
......
Markdown is supported
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