15308555518/ website
1
0
Fork 0
mirror of https://github.com/kubesphere/website.git synced 2025-12-26 00:12:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add case/partner css

This commit is contained in:
liuboaibc 2020-06-12 11:14:07 +08:00
parent b352341564
commit 9d73a8b6ed
5 changed files with 81 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
assets/scss/case-detail.scss
View File

@ -1,36 +1,21 @@
@import 'variables';
.section-1 {
height: 300px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
padding-top: 129px;
padding-bottom: 60px;
div {
position: relative;
width: 1160px;
margin: -162px auto 0;
h1 {
height: 40px;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
font-size: 40px;
font-weight: bold;
line-height: 1;
letter-spacing: -0.11px;
color: #ffffff;
}
p {
width: 733px;
margin-top: 12px;
opacity: 0.8;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.04px;
color: #ffffff;
@media only screen and (max-width: $mobile-max-width) {
width: 100%;
}
}
}
}
@ -42,17 +27,24 @@
top: 320px;
left: 50%;
transform: translateX(400px);
@media only screen and (max-width: $mobile-max-width) {
display: none;
}
}
& > div {
position: relative;
width: 1160px;
margin: 0 auto;
padding-top: 56px;
z-index: 2;
.ul-left {
width: 668px;
@media only screen and (max-width: $mobile-max-width) {
width: 100%;
margin-top: 40px;
}
& > li + li {
margin-top: 30px;
}
@ -84,23 +76,31 @@
font-size: 0;
border-radius: 8px;
overflow: hidden;
@media only screen and (max-width: $mobile-max-width) {
width: 100%;
}
li {
position: relative;
display: inline-block;
box-sizing: border-box;
width: 220px;
height: 126px;
height: 100%;
padding: 35px 30px;
@media only screen and (max-width: $mobile-max-width) {
display: block;
width: 100%;
margin: 10px auto;
padding: 20px;
border-radius: 8px;
}
p {
position: absolute;
width: 160px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 16px;
line-height: 1.75;
text-align: center;
color: #ffffff;
}
}
li:nth-child(1) {
@ -152,17 +152,29 @@
box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
background-color: #ffffff;
@media only screen and (max-width: $mobile-max-width) {
width: 100%;
max-width: 400px;
position: relative;
right: 0;
top: 0px;
margin: 0 auto;
}
img {
display: block;
width: 293px;
margin: 0 auto;
height: 120px;
width: 100%;
object-fit: contain;
border-radius: 10px;
}
.ul-right {
padding: 4px 60px 26px;
@media only screen and (max-width: $mobile-max-width) {
padding: 4px 40px 26px;
}
li + li {
margin-top: 16px;
}

8
assets/scss/partner.scss
View File

@ -170,6 +170,14 @@
}
}
.section-iframe {
iframe {
@media only screen and (max-width: $mobile-max-width) {
width: 100%;
}
}
}
.section-3 {
padding-top: 54px;
background-image: url('/images/partner/oval-4.svg');

2
content/en/partner/request.md
View File

@ -8,7 +8,7 @@ css: "scss/partner.scss"
section1:
title: 'Join the Revolution,Partner with KubeSphere'
content: 'We look forward to your joining KubeSphere partner to improve the ecosystem of both, and grow your business. KubeSphere provide resources and rights for partners to help them increase their expertise, deliver open source technology, and resell product.'
topImage: 'images/partner/partner-top.jpg'
topImage: '/images/partner/partner-top.jpg'
section2:
title: 'Together, build partnership for success all over the world'

43
layouts/case/single.html
View File

@ -1,18 +1,30 @@
{{ define "main" }}
<section class='section-1'>
{{ with .Params.section1}}
<img src="/images/case/case-detail-bg.png" alt="">
<div>
<h1>{{ .title }}</h1>
<p>{{ .content }}</p>
</div>
{{ end }}
{{ with .Params.section1 }}
<section class="section-1 bg-cover" style='background-image: url("/images/case/case-detail-bg.png");'>
<div class="common-layout">
<h1 class="title-h1">{{ .title }}</h1>
<p class="common-p">{{ .content }}</p>
</div>
</section>
{{ end }}
<section class='section-2'>
{{ with .Params.section2 }}
<div>
<div class="common-layout">
<div>
{{ with .rightPart}}
<img src="{{ .icon }}" alt="">
<ul class='ul-right'>
{{ range .list }}
<li>
<p class='p1'>{{ .title }}</p>
<p class='p2'>{{ .content }}</p>
</li>
{{ end }}
</ul>
{{ end }}
</div>
<ul class='ul-left'>
{{ range .listLeft}}
<li>
@ -42,19 +54,6 @@
</li>
{{ end }}
</ul>
<div>
{{ with .rightPart}}
<img src="{{ .icon }}" alt="">
<ul class='ul-right'>
{{ range .list }}
<li>
<p class='p1'>{{ .title }}</p>
<p class='p2'>{{ .content }}</p>
</li>
{{ end }}
</ul>
{{ end }}
</div>
</div>
<img src="/images/common/hexagon.svg" alt="">
{{ end }}

13
layouts/partner/request.html
View File

@ -1,14 +1,13 @@
{{ define "main" }}
<section class="section-1">
{{ with .Params.section1 }}
<img class="top-cover-img" src="{{ .topImage | absURL }}" alt="">
<div class="title-div">
{{ with .Params.section1 }}
<section class="section-1 bg-cover" style='background-image: url("{{ .topImage }}");'>
<div class="title-div common-layout">
<h1 class="title-center-h1">{{ .title }}</h1>
<p class="common-p">{{ .content }}</p>
</div>
{{ end }}
</section>
{{ end }}
<section class="section-2">
{{ with .Params.section2 }}
@ -45,11 +44,11 @@
{{ end }}
</section>
<section>
<section class='section-iframe'>
{{ with .Params.section3 }}
<div class="common-layout">
<h2 style="margin: 40px 0;" class="title-black-h2">{{ .title }}</h2>
<iframe src="{{ .googleFormUrl }}" width="640" height="1491" frameborder="0" marginheight="0" marginwidth="0">正在加载…</iframe>
<iframe src="{{ .googleFormUrl }}" width="640" height="1000" frameborder="0" marginheight="0" marginwidth="0">正在加载…</iframe>
</div>
{{ end }}
</section>