Страница проектов, поправил прозрачность
This commit is contained in:
parent
b9a2912359
commit
88c4edbfc4
6 changed files with 104 additions and 35 deletions
|
@ -30,7 +30,7 @@ steps:
|
|||
path: /var/run/docker.sock
|
||||
environment:
|
||||
WAKATIME_APIKEY:
|
||||
from_secret: BOT_TOKEN
|
||||
from_secret: WAKATIME_APIKEY
|
||||
commands:
|
||||
- WAKATIME_APIKEY=$$WAKATIME_APIKEY
|
||||
- docker-compose -p mootfrost-dev up -d
|
||||
|
|
|
@ -75,7 +75,7 @@
|
|||
background-color: white;
|
||||
background-repeat: no-repeat;
|
||||
transition: 0.3s;
|
||||
opacity: 0.2;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.lower-buttons a::after {
|
||||
|
@ -90,7 +90,7 @@
|
|||
background-color: white;
|
||||
background-repeat: no-repeat;
|
||||
transition: 0.3s;
|
||||
opacity: 0.2;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.lower-buttons a:hover::before {
|
||||
|
|
65
static/resources/styles/projects.style.css
Normal file
65
static/resources/styles/projects.style.css
Normal file
|
@ -0,0 +1,65 @@
|
|||
@import url(style.css);
|
||||
|
||||
.wrapper {
|
||||
width: 40%;
|
||||
position: relative;
|
||||
margin-top: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
background: #272727;
|
||||
border-radius: 5px;
|
||||
margin: 7px;
|
||||
padding: 5px;
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.divider {
|
||||
background-color: white;
|
||||
width: 80%;
|
||||
border-top: 2px solid #bbb;
|
||||
border-radius: 8px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.project-title {
|
||||
margin: 0;
|
||||
font-size: 1.7em;
|
||||
}
|
||||
|
||||
.project-description {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-goto {
|
||||
font-family: Comfortaa, sans-serif;
|
||||
width: 120px;
|
||||
height: 35px;
|
||||
background: #272727;
|
||||
border-radius: 5px;
|
||||
padding: 10px 15px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 6px 6px -3px rgba(0,0,0,.2),0 10px 14px 1px rgba(0,0,0,.14),0 4px 18px 3px rgba(0,0,0,.12) !important;
|
||||
transition: 0.3s;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.btn-goto:hover {
|
||||
background: #383838;
|
||||
color: white;
|
||||
transition: 0.3s;
|
||||
}
|
|
@ -18,14 +18,14 @@
|
|||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Mootfrost — обо мне</title>
|
||||
<meta name="description" content="About me">
|
||||
<title>Mootfrost DEV</title>
|
||||
<meta name="description" content="Обо мне">
|
||||
<link rel="stylesheet" type="text/css" href="/static/resources/styles/about.style.css"/>
|
||||
<link href="/static/resources/bootstrap/css/bootstrap.css" rel="stylesheet">
|
||||
<link rel="icon" type="image/x-icon" href="/static/resources/images/favicon.png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body ondragstart="return false;" ondrop="return false;">
|
||||
<div id="background"></div>
|
||||
<div id="particles-js"><canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="768" height="922"></canvas></div>
|
||||
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Mootfrost</title>
|
||||
<title>Mootfrost DEV</title>
|
||||
<meta name="description" content="Mootfrost">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
@ -32,7 +32,7 @@
|
|||
<div id="particles-js"><canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="768" height="922"></canvas></div>
|
||||
|
||||
<div class="d-flex flex-column min-vh-100 justify-content-center align-items-center overlay pe-none">
|
||||
<div class="main-title text-uppercase">
|
||||
<div class="main-title text-uppercase text-wrap">
|
||||
<span>mootfrost</span>
|
||||
<p class="thin">Development</p>
|
||||
</div>
|
||||
|
@ -81,7 +81,7 @@
|
|||
<script src="/static/resources/scripts/particles.js"></script>
|
||||
<script src="/static/resources/scripts/app.js"></script>
|
||||
<script src="/static/resources/bootstrap/js/bootstrap.js"></script>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
|
|
@ -17,37 +17,38 @@
|
|||
<!-- /Yandex.Metrika counter -->
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="/static/resources/styles/projects.style.css"/>
|
||||
<link rel="icon" type="image/x-icon" href="/static/resources/images/favicon.png">
|
||||
<title>Mootfrost - проекты</title>
|
||||
<meta name="description" content="My projects">
|
||||
<meta charset="utf-8">
|
||||
<title>Mootfrost DEV</title>
|
||||
<meta name="description" content="Проекты">
|
||||
<link rel="stylesheet" type="text/css" href="/static/resources/styles/projects.style.css"/>
|
||||
<link href="/static/resources/bootstrap/css/bootstrap.css" rel="stylesheet">
|
||||
<link rel="icon" type="image/x-icon" href="/static/resources/images/favicon.png">
|
||||
</head>
|
||||
<body id="particles-js" ondragstart="return false;" ondrop="return false;">
|
||||
<div class="title-menu top">
|
||||
<div class="title-div title-container">
|
||||
<h1 class="title unselectable">проекты:</h1>
|
||||
<div class="contents-div projects-container horizontal-container" id="projects-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p class="footer-text">v0.6</p>
|
||||
</footer>
|
||||
</body>
|
||||
<body ondragstart="return false;" ondrop="return false;">
|
||||
<div id="background"></div>
|
||||
<div id="particles-js"><canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="768" height="922"></canvas></div>
|
||||
|
||||
<a class="btn-back" href="https://mootfrost.ru">
|
||||
<svg ID="back-s" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="40px" height="40px">
|
||||
<path id="pathBack" d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256S114.6 512 256 512s256-114.6 256-256zM271 135c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-87 87 87 87c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L167 273c-9.4-9.4-9.4-24.6 0-33.9L271 135z" fill="#ffffff" style="fill: rgb(255, 255, 255);"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<div id="projects-container" class="wrapper pe-none">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<template id="project-card-template">
|
||||
<a class="projects-contents" id="link" href="https://google.com/">
|
||||
<div class="button-div project-container">
|
||||
<h2 class="projects-title" id="title">Name</h2>
|
||||
<hr class="rounded">
|
||||
<p class="projects-contents" id="description">Description</p>
|
||||
</div>
|
||||
</a>
|
||||
<div class="project-card d-flex flex-column justify-content-center align-items-center">
|
||||
<h2 class="project-title" id="title">Name</h2>
|
||||
<p class="project-description" id="description">Description</p>
|
||||
<hr class="divider">
|
||||
<a id="link" class="btn-goto pe-auto"><span class="text-uppercase">Перейти</span></a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="/static/resources/scripts/plugins/particles/particles.min.js"></script>
|
||||
<script src="/static/resources/scripts/script.js"></script>
|
||||
<script>
|
||||
async function load_projects()
|
||||
{
|
||||
|
@ -63,11 +64,14 @@
|
|||
card.querySelector('#title').innerText = projects[i].name
|
||||
card.querySelector('#description').innerText = projects[i].description
|
||||
|
||||
document.getElementById('projects-list').appendChild(card)
|
||||
document.getElementById('projects-container').appendChild(card)
|
||||
}
|
||||
}
|
||||
load_projects()
|
||||
</script>
|
||||
<script src="/static/resources/scripts/particles.js"></script>
|
||||
<script src="/static/resources/scripts/app.js"></script>
|
||||
<script src="/static/resources/bootstrap/js/bootstrap.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue