Skip to content

G
gitcode.host

GitCode / gitcode.host

通知 5
Star 1
Fork 0
G
gitcode.host
提交 85c555b4 编写于 作者: C csdn
浏览文件
操作

refactor:pages首页

上级
隐藏空白更改
内联 并排
Showing with 774 addition and 0 deletion
css/index.css 0 → 100644
浏览文件 @ 85c555b4
html,
body {
padding: 0;
margin: 0;
overflow-x: hidden;
}
@keyframes circle {
0% {
opacity: 0.6;
width: 100%;
height: 100%;
}
25% {
opacity: 0.4;
width: 115%;
height: 115%;
}
50% {
opacity: 0.2;
width: 130%;
height: 130%;
}
75% {
opacity: 0.1;
width: 145%;
height: 145%;
}
100% {
opacity: 0;
width: 160%;
height: 160%;
}
}
.pages_index img {
display: block;
}
.pages_index a {
text-decoration: none;
}
.pages_index ul,
.pages_index li {
list-style: none;
}
.pages_index .w {
max-width: 1440px;
margin: 0 auto;
margin-top: -138px;
position: relative;
z-index: 2;
}
.pages_index .w2 {
max-width: 1024px;
margin: 0 auto;
}
.pages_index .banner {
position: relative;
}
.pages_index .banner .codechina {
position: absolute;
width: 8.2%;
height: 4.2%;
top: 2.8%;
left: 11.6%;
}
.pages_index .banner .help {
position: absolute;
width: 10%;
height: 4.2%;
top: 2.8%;
left: 23%;
}
.pages_index .title {
padding: 0 270px;
box-sizing: border-box;
background: url(../img/title_l.png) left no-repeat, url(../img/title_r.png) right no-repeat;
width: max-content;
margin: 80px auto;
font-size: 40px;
font-weight: 500;
margin-top: 120px;
}
.pages_index p {
font-size: 25px;
color: #172853;
text-align: center;
margin-bottom: 60px;
}
.pages_index .tab {
border: 2px solid #4e5595;
border-radius: 8px;
width: 650px;
height: 64px;
margin: 0 auto;
line-height: 64px;
display: flex;
justify-content: space-between;
}
.pages_index .tab .item {
color: #172853;
font-size: 25px;
width: 50%;
text-align: center;
height: 100%;
cursor: pointer;
}
.pages_index .tab .item.active {
background: #4e5595;
color: #fff;
}
.pages_index h3 {
text-align: center;
font-size: 30px;
color: #172853;
margin: 100px 0;
}
.pages_index .project_list {
display: flex;
justify-content: space-between;
}
.pages_index .project_list .item {
display: flex;
}
.pages_index .project_list .item img {
width: 200px;
height: 272px;
border-radius: 8px;
}
.pages_index .project_list .item ul {
flex: 1;
padding: 0 32px;
margin: 0;
}
.pages_index .project_list .item ul li {
font-size: 25px;
}
.pages_index .project_list .item ul li + li {
margin-top: 33px;
}
.pages_index .project_list .item ul .bookname {
font-size: 30px;
font-weight: 500;
color: #172853;
}
.pages_index .project_list .item ul a,
.pages_index .project_list .item ul span {
margin-left: 24px;
}
.pages_index .project_list .item ul a {
color: #409eff;
text-decoration: underline;
}
.pages_index .project_list .item ul .desc {
font-size: 16px;
color: #4c4c4c;
padding: 18px 22px;
background: rgba(251, 239, 216, 0.5);
border-radius: 8px;
}
.pages_index .steps {
margin-top: 100px;
}
.pages_index .steps .step_item {
border-left: 3px solid #4e5595;
position: relative;
padding-left: 70px;
color: #172853;
padding-bottom: 100px;
}
.pages_index .steps .step_item.hidden {
display: none;
}
.pages_index .steps .step_item:last-child {
border: none;
}
.pages_index .steps .step_item::before,
.pages_index .steps .step_item::after {
display: block;
content: "";
height: 1px;
}
.pages_index .steps .step_item img {
border: 2px solid #409eff;
border-radius: 8px;
margin-top: 50px;
}
.pages_index .steps .step_item .index {
position: absolute;
width: 64px;
height: 64px;
line-height: 64px;
text-align: center;
font-size: 30px;
color: #fff;
top: 0px;
left: -32px;
background: #4e5595;
border-radius: 50%;
}
.pages_index .steps .step_item h4 {
font-size: 25px;
margin: 14px 0;
}
.pages_index .steps .step_item p {
font-size: 20px;
text-align: left;
margin: 40px 0;
}
.pages_index .steps .step_item code {
display: block;
color: #fff;
background: #3d3d3d;
font-size: 20px;
position: relative;
border-radius: 8px;
border: 1px solid #3d3d3d;
overflow: hidden;
padding: 48px 20px 20px;
line-height: 36px;
}
.pages_index .steps .step_item code::before {
position: absolute;
content: "";
width: 100%;
height: 28px;
background: #c4c4c4;
top: 0;
left: 0;
}
.pages_index .visit {
width: 156px;
margin: 30px auto;
position: relative;
}
.pages_index .visit img {
width: 156px;
height: 156px;
border-radius: 50%;
cursor: pointer;
position: relative;
z-index: 9;
}
.pages_index .visit .circle {
width: 100%;
height: 100%;
border-radius: 50%;
border: 5px solid #4e5595;
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
animation: circle 4s linear infinite;
}
.pages_index .visit .circle.circle2 {
animation-delay: 1.3s;
}
.pages_index .visit .circle.circle3 {
animation-delay: 2.5s;
}
.pages_index .buttons {
display: flex;
justify-content: space-between;
margin: 100px auto 200px;
}
.pages_index .buttons .btn {
width: 288px;
height: 64px;
line-height: 64px;
text-align: center;
font-size: 25px;
color: #172853;
border: 2px solid #4e5595;
border-radius: 8px;
display: block;
box-sizing: border-box;
cursor: pointer;
font-weight: 500;
}
.pages_index .buttons .btn.active {
border: none;
background: linear-gradient(90deg, #78568c 0%, #4e5595 100%);
color: #fff;
}
.pages_index .footer {
width: 100%;
text-align: center;
color: #fff;
font-size: 20px;
height: 102px;
line-height: 102px;
background: #4e5595;
}
css/index.less 0 → 100644
浏览文件 @ 85c555b4
html,
body {
padding: 0;
margin: 0;
overflow-x: hidden;
}
@keyframes circle {
0% {
opacity: 0.6;
width: 100%;
height: 100%;
}
25% {
opacity: 0.4;
width: 115%;
height: 115%;
}
50% {
opacity: 0.2;
width: 130%;
height: 130%;
}
75% {
opacity: 0.1;
width: 145%;
height: 145%;
}
100% {
opacity: 0;
width: 160%;
height: 160%;
}
}
.pages_index {
img {
display: block;
}
a {
text-decoration: none;
}
ul,
li {
list-style: none;
}
.w {
max-width: 1440px;
margin: 0 auto;
margin-top: -138px;
position: relative;
z-index: 2;
}
.w2 {
max-width: 1024px;
margin: 0 auto;
}
.banner {
position: relative;
.codechina {
position: absolute;
width: 8.2%;
height: 4.2%;
top: 2.8%;
left: 11.6%;
}
.help {
position: absolute;
width: 10%;
height: 4.2%;
top: 2.8%;
left: 23%;
}
}
.title {
padding: 0 270px;
box-sizing: border-box;
background: url(../img/title_l.png) left no-repeat,
url(../img/title_r.png) right no-repeat;
width: max-content;
margin: 80px auto;
font-size: 40px;
font-weight: 500;
margin-top: 120px;
}
p {
font-size: 25px;
color: #172853;
text-align: center;
margin-bottom: 60px;
}
.tab {
border: 2px solid #4e5595;
border-radius: 8px;
width: 650px;
height: 64px;
margin: 0 auto;
line-height: 64px;
display: flex;
justify-content: space-between;
.item {
color: #172853;
font-size: 25px;
width: 50%;
text-align: center;
height: 100%;
cursor: pointer;
&.active {
background: #4e5595;
color: #fff;
}
}
}
h3 {
text-align: center;
font-size: 30px;
color: #172853;
margin: 100px 0;
}
.project_list {
display: flex;
justify-content: space-between;
.item {
display: flex;
img {
width: 200px;
height: 272px;
border-radius: 8px;
}
ul {
flex: 1;
padding: 0 32px;
margin: 0;
li {
font-size: 25px;
& + li {
margin-top: 33px;
}
}
.bookname {
font-size: 30px;
font-weight: 500;
color: #172853;
}
a,
span {
margin-left: 24px;
}
a {
color: #409eff;
text-decoration: underline;
}
.desc {
font-size: 16px;
color: #4c4c4c;
padding: 18px 22px;
background: rgba(251, 239, 216, 0.5);
border-radius: 8px;
}
}
}
}
.steps {
margin-top: 100px;
.step_item {
border-left: 3px solid #4e5595;
position: relative;
padding-left: 70px;
color: #172853;
padding-bottom: 100px;
&.hidden {
display: none;
}
&:last-child {
border: none;
}
&::before,
&::after {
display: block;
content: "";
height: 1px;
}
img {
border: 2px solid #409eff;
border-radius: 8px;
margin-top: 50px;
}
.index {
position: absolute;
width: 64px;
height: 64px;
line-height: 64px;
text-align: center;
font-size: 30px;
color: #fff;
top: 0px;
left: -32px;
background: #4e5595;
border-radius: 50%;
}
h4 {
font-size: 25px;
margin: 14px 0;
}
p {
font-size: 20px;
text-align: left;
margin: 40px 0;
}
code {
display: block;
color: #fff;
background: #3d3d3d;
font-size: 20px;
position: relative;
border-radius: 8px;
border: 1px solid #3d3d3d;
overflow: hidden;
padding: 48px 20px 20px;
line-height: 36px;
&::before {
position: absolute;
content: "";
width: 100%;
height: 28px;
background: #c4c4c4;
top: 0;
left: 0;
}
}
}
}
.visit {
width: 156px;
margin: 30px auto;
position: relative;
img {
width: 156px;
height: 156px;
border-radius: 50%;
cursor: pointer;
position: relative;
z-index: 9;
}
.circle {
width: 100%;
height: 100%;
border-radius: 50%;
border: 5px solid #4e5595;
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
animation: circle 4s linear infinite;
&.circle2 {
animation-delay: 1.3s;
}
&.circle3 {
animation-delay: 2.5s;
}
}
}
.buttons {
display: flex;
justify-content: space-between;
margin: 100px auto 200px;
.btn {
width: 288px;
height: 64px;
line-height: 64px;
text-align: center;
font-size: 25px;
color: #172853;
border: 2px solid #4e5595;
border-radius: 8px;
display: block;
box-sizing: border-box;
cursor: pointer;
font-weight: 500;
&.active {
border: none;
background: linear-gradient(90deg, #78568c 0%, #4e5595 100%);
color: #fff;
}
}
}
.footer {
width: 100%;
text-align: center;
color: #fff;
font-size: 20px;
height: 102px;
line-height: 102px;
background: #4e5595;
}
}
index.html 0 → 100644
浏览文件 @ 85c555b4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=1440, user-scalable=no, target-densitydpi=device-dpi"
/>
<link rel="stylesheet" href="./css/index.css" />
<link
rel="shortcut icon"
type="image/png"
href="https://codechina.csdn.net/uploads/-/system/appearance/favicon/1/logo_icon.png"
/>
<title>CODE CHINA</title>
</head>
<body class="pages_index">
<div class="banner">
<img src="./img/banner.png" width="100%" alt="" class="banner" />
<a
href="https://codechina.csdn.net"
class="codechina"
target="_blank"
></a>
<a
href="https://codechina.csdn.net/codechina/help-docs/-/wikis/home"
class="help"
target="_blank"
></a>
</div>
<div class="w">
<img src="./img/intro.png" width="100%" class="intro" alt="" />
<h2 class="title">Pages 项目</h2>
<div class="project_list">
<div class="item">
<img
src="https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture"
alt=""
/>
<ul>
<li class="bookname">《程序员》杂志 · 2017精华本</li>
<li>
Pages 地址：
<a
href="https://codechina.gitcode.host/programmer/2017/"
target="_blank"
>点击查看</a
>
<a
href="https://codechina.csdn.net/codechina/programmer/2017"
target="_blank"
>项目地址</a
>
</li>
<li>
Pages 模板：
<span>mdbook</span>
</li>
<li class="desc">
mdbook 可作为文档类/电子书等项目的pages模板来使用。
</li>
</ul>
</div>
<div class="item">
<img
src="https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture"
alt=""
/>
<ul>
<li class="bookname">程序员电子书</li>
<li>
Pages 地址：
<a
href="https://codechina.gitcode.host/programmer/mdbook/"
target="_blank"
>点击查看</a
>
<a
href="https://codechina.csdn.net/codechina/programmer"
target="_blank"
>项目地址</a
>
</li>
<li>
Pages 模板：
<span>hugo</span>
</li>
<li class="desc">Hugo 非常适合博客，文档等网站的生成。</li>
</ul>
</div>
</div>
<h2 class="title">Pages 使用介绍</h2>
<p>Pages 项目可以用于组织/个人的网站项目，也可以用于单独项目的Pages</p>
<div class="tab">
<div class="item active" data-index="1">组织或个人 Pages 项目</div>
<div class="item" data-index="2">项目 Pages</div>
</div>
<div class="steps w2">
<div class="step_item">
<span class="index">1</span>
<h4>创建 &lt;namespace&gt;.gitcode.host 项目</h4>
<p>
在新建项目时，请确保项目名称以及项目标识串均为&lt;namespace&gt;.gitcode.host
</p>
<img src="./img/create.png" width="100%" alt="" />
</div>
<div class="step_item">
<span class="index">2</span>
<h4>clone项目代码</h4>
<p>进入到你本地的项目目录，并 clone 刚创建好的项目</p>
<code>
~ $ git clone https://codechina.com/namespace/namespace.gitcode.host
</code>
</div>
<div class="step_item">
<span class="index">3</span>
<h4>编辑内容</h4>
<p>进入项目文件夹并编辑内容，比如创建一个 index.html</p>
<code>
~ $ cd namespace.gitcode.host <br />
~ $ echo "Hello Pages ~" > index.html
</code>
</div>
<div class="step_item">
<span class="index">4</span>
<h4>提交代码</h4>
<p>将刚才编辑过的内容提交到仓库，并推送到远程分支</p>
<code>
~ $ git add . <br />
~ $ git commit -m "Init" <br />
~ $ git push -u origin master
</code>
</div>
<div class="step_item">
<span class="index">5</span>
<h4>启用 Pages</h4>
<p>
进入 namespace.gitcode.host 项目中启用 Pages，等待 Pages 服务部署
</p>
<img src="./img/setting.png" width="100%" alt="" />
</div>
</div>
<div class="visit">
<a href="#">
<img src="./img/visit.png" alt="" />
</a>
<div class="circle circle1"></div>
<div class="circle circle2"></div>
<div class="circle circle3"></div>
</div>
<h3>开始使用 Pages</h3>
<div class="buttons w2">
<a
href="https://codechina.csdn.net/codechina/help-docs/-/wikis/docs/user/org/star-community-join-plan"
class="btn"
target="_blank"
>组织入驻</a
>
<a href="#" class="btn active">立即使用</a>
</div>
</div>
<div class="footer">湘ICP备2020020162号</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.2/jquery.min.js"></script>
<script>
$(".pages_index .tab").on("click", ".item", function () {
$(this).addClass("active").siblings().removeClass("active");
var index = $(this).data("index");
$(".pages_index .step_item")
.eq(0)
.css("display", +index === 1 ? "block" : "none");
$(".pages_index .step_item").each(function () {
$(this)
.find(".index")
.html(+index === 1 ? $(this).index() + 1 : $(this).index());
});
});
</script>
</body>
</html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或