Commit 3b270b54 authored by nursultan's avatar nursultan
Browse files

added post lists and social links in slide menu

parent 71b11512
@import url('https://fonts.googleapis.com/css?family=Exo+2&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
@font-face {
font-family: "Pirulen";
src: url("../fonts/pirulen.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
html {
scroll-behavior: smooth;
}
......@@ -33,17 +40,18 @@ object{
object-fit: contain;
background-image: linear-gradient(86deg, #bf222c 1%, #e31f26);
display: flex;
justify-content: space-between;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
z-index: 999;
}
#main-nav{
display: block;
display: flex;
justify-content: space-between;
position: fixed;
top: -100vh;
width: 100vw;
width: 100%;
height: calc(100vh - 100px);
background-color: rgba(0, 0, 0, .7);
-webkit-transition-duration: 0.3s;
......@@ -55,12 +63,12 @@ object{
#main-nav.active{
top: 100px;
}
#main-nav div{
padding: 10px 20px;
}
#main-nav div:first-child{
.page-nav{
margin-top: 50px;
}
.page-nav div{
padding: 10px 20px;
}
#main-nav a{
font-size: 24px;
color: #fff;
......@@ -81,12 +89,39 @@ object{
width: 100%;
left: 0;
}
.header-posts {
display: flex;
flex-direction: column;
margin-top: 50px;
padding: 10px 20px;
}
.header-posts--title {
max-width: max-content;
}
.header-posts .footer-links {
height: 35px;
margin-top: auto;
margin-bottom: 80px;
}
.header-posts--list {
padding-top: 30px;
}
.header-posts--list div{
display: flex;
align-items: center;
padding: 10px 20px;
}
.header-posts--list img{
width: 65px;
height: auto;
margin-right: 10px;
}
.header-hum{
width: 60px;
width: 150px;
margin-right: auto;
}
.header-logo{
width: 60%;
text-align: center;
width: auto;
}
.ham {
cursor: pointer;
......@@ -123,9 +158,8 @@ object{
stroke-dashoffset: -138px;
}
.main-lang{
display: flex;
width: 20%;
justify-content: flex-end;
width: 150px;
margin-left: auto;
}
.main-lang a, .header-posts a{
color: #ffffff;
......@@ -161,16 +195,28 @@ object{
position: absolute;
top: 5px;
}
.main-info p{
.main-info div{
position: relative;
width: 75%;
height: auto;
margin: auto;
}
.main-info p{
font-size: 40px;
line-height: 54px;
font-weight: bold;
text-align: center;
color: #ffffff;
margin: auto;
margin-bottom: 30px;
}
.main-info span{
width: 100%;
display: block;
font-size: 70px;
line-height: 90px;
font-family: "Pirulen", sans-serif;
text-align: center;
color: #ffffff;
}
.main--btn{
width: 270px;
......@@ -1146,25 +1192,25 @@ object{
display: flex;
flex-direction: column;
}
.footer-logo button, .footer-logo p{
.footer-logo a, .footer-logo p{
font-size: 25px;
line-height: 34px;
color: #ffffff;
}
.footer-logo button{
background-color: transparent;
border: none;
outline: none;
.footer-logo a{
text-align: left;
width: 380px;
width: auto;
max-width: max-content;
margin-top: 55px;
}
.footer-logo button:hover{
.footer-logo a:hover{
cursor: pointer;
text-decoration: underline;
}
.footer-links object{
padding: 0 10px;
width: 30px;
height: 30px;
}
.footer-address{
text-align: center;
......
......@@ -685,29 +685,29 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
opacity: 0;
width: 350px;
height: auto;
min-height: 200px;
min-height: 160px;
z-index: 3;
position: absolute;
top: 100%;
left: 0;
background-color: #d8d8d8;
background-color: #fff;
border-radius: 10px;
transition: width 1s, height 2s, background-color 2s, transform 2s;
border: 1px solid #e31f26;
}
.post-card-content::after{
.post-card-content::before{
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
top: -12%;
left: 42%;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid #d8d8d8;
border-top: 0;
position: relative;
width: 30px;
height: 30px;
background-color: #fff;
border-left: 1px solid #e31f26;
border-top: 1px solid #e31f26;
top: -16px;
left: 45%;
transform: rotate(45deg);
}
.post-card:hover .post-card-content {
......
......@@ -61,7 +61,7 @@ for (let lang of langs) {
}
})
}
const engText = ['Video', 'Faceplate in numbers', 'Manufacturing challenges', 'Faceplate solutions', 'Faceplate advantages', 'For whom', 'How it works', 'Contact'];
const engText = ['Video', 'Faceplate in numbers', 'Manufacturing challenges', 'Faceplate solutions', 'Faceplate advantages', 'For whom', 'How it works', 'Contact', 'Posts and news'];
const qazText = ['Vıdeo', 'Faceplate sandarmen', 'Óndiris máseleleri', 'Faceplate sheshimderi', 'Faceplate artyqshylyǵy', 'Kim úshin arnalǵan', 'Qalaı jumys isteıdi', 'Baılanys málimetteri'];
......@@ -131,11 +131,6 @@ if (benefitsDemoBtn) {
benefitsDemoBtn.addEventListener('click', showModal);
}
document.querySelector('.footer-btn--' + localStorage['lang']).addEventListener('click', function () {
document.body.style = "overflow:hidden";
document.querySelector('.private-police').classList.toggle('active');
});
if (learnMore) {
learnMore.removeAttribute('target');
learnMore.addEventListener('click', function () {
......
......@@ -14,13 +14,7 @@
{{ghost_head}}
</head>
<body class="{{body_class}}">
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-5JN5WXJ');</script>
<!-- End Google Tag Manager -->
<!------------- main section start ------------------------->
<section id="main">
<header id="header">
......@@ -33,9 +27,6 @@
d="m 30,67 h 40 c 12.796276,0 15.357889,-11.717785 15.357889,-26.851538 0,-15.133752 -4.786586,-27.274118 -16.667516,-27.274118 -11.88093,0 -18.499247,6.994427 -18.435284,17.125656 l 0.252538,40"/>
</svg>
</div>
<div class="header-posts">
<a href="/posts">Посты и новости</a>
</div>
<div class="header-logo">
<a href="/">
<object type="image/svg+xml" data="../assets/images/logo-white.svg"></object>
......@@ -48,14 +39,51 @@
</div>
</header>
<div id="main-nav">
<div><a href="#preview">Видео</a></div>
<div><a href="#statistic">Faceplate в цифрах</a></div>
<div><a href="#know-more">Проблемы на производстве</a></div>
<div><a href="#decision">Решение Faceplate </a></div>
<div><a href="#benefits">Преимущества Faceplate</a></div>
<div><a href="#usability">Для кого</a></div>
<div><a href="#howItWorks">Как это работает</a></div>
<div><a href="#feedback-main">Контакты</a></div>
<div class="page-nav">
<div><a href="#preview">Видео</a></div>
<div><a href="#statistic">Faceplate в цифрах</a></div>
<div><a href="#know-more">Проблемы на производстве</a></div>
<div><a href="#decision">Решение Faceplate </a></div>
<div><a href="#benefits">Преимущества Faceplate</a></div>
<div><a href="#usability">Для кого</a></div>
<div><a href="#howItWorks">Как это работает</a></div>
<div><a href="#feedback-main">Контакты</a></div>
</div>
<div class="header-posts">
<a href="/posts" class="header-posts--title">Посты и новости</a>
<div class="header-posts--list">
{{#get "posts" limit="3"}}
{{#foreach posts}}
{{!-- The tag below includes the markup for each post - partials/post-list.hbs --}}
{{> "post-list"}}
{{/foreach}}
{{/get}}
</div>
<div class="footer-links">
<a href="mailto:expert@faceplate.io" target="_blank">
<object type="image/svg+xml" data="../assets/images/email.svg"></object>
</a>
<a href="https://www.instagram.com/faceplate_iot/?igshid=16y4bjitw6svb" target="_blank">
<object type="image/svg+xml" data="../assets/images/instagram.svg"></object>
</a>
<a href="#" target="_blank">
<object type="image/svg+xml" data="../assets/images/whatsapp.svg"></object>
</a>
<a href="https://twitter.com/faceplate_iot" target="_blank">
<object type="image/svg+xml" data="../assets/images/twitter.svg"></object>
</a>
<a href="https://www.linkedin.com/company/42344520/" target="_blank">
<object type="image/svg+xml" data="../assets/images/linkedin.svg"></object>
</a>
<a href="https://www.facebook.com/faceplate.iot.3" target="_blank">
<object type="image/svg+xml" data="../assets/images/facebook.svg"></object>
</a>
<a href="https://www.youtube.com/channel/UC88cTVoQpGzRkeEetnQd_YA/featured" target="_blank">
<object type="image/svg+xml" data="../assets/images/youtube.svg"></object>
</a>
</div>
</div>
</div>
</section>
......@@ -69,15 +97,18 @@
<div class="footer-content">
<div class="footer-logo">
<object type="image/svg+xml" data="../assets/images/logo-white.svg"></object>
<button class="rus footer-btn--rus"> Политика конфиденциальности</button>
<button class="qaz footer-btn--qaz"> Derbes derekterdі óńdeý saıasaty</button>
<button class="eng footer-btn--eng"> Privacy policy</button>
<a href="/private-police-rus" class="rus footer-btn--rus"> Политика конфиденциальности</a>
<a href="/private-police-qaz" class="qaz footer-btn--qaz"> Derbes derekterdі óńdeý saıasaty</a>
<a href="/private-police-eng" class="eng footer-btn--eng"> Privacy policy</a>
</div>
<div class="footer-nav">
<div class="footer-links">
<a href="mailto:expert@faceplate.io" target="_blank">
<object type="image/svg+xml" data="../assets/images/email.svg"></object>
</a>
<a href="https://www.instagram.com/faceplate_iot/?igshid=16y4bjitw6svb" target="_blank">
<object type="image/svg+xml" data="../assets/images/instagram.svg"></object>
</a>
<a href="#" target="_blank">
<object type="image/svg+xml" data="../assets/images/whatsapp.svg"></object>
</a>
......
......@@ -33,9 +33,12 @@
</script>
<main id="site-main">
<div class="main-info">
<p>
Improve your overall equipment effectiveness (OEE), <br/> reduce the cost per unit <br/>with real-time control
</p>
<div>
<p>
Improve your overall equipment effectiveness (OEE), <br/> reduce the cost per unit <br/>with real-time control
</p>
<span>SCADA HMI IIoT MES</span>
</div>
<button class="main--btn">Contact us</button>
</div>
<!------------- preview section start ---------------------->
......
......@@ -35,9 +35,12 @@
<main id="site-main">
<div class="main-info">
<p>
Увеличение общей эффективности производства, <br/>снижение затрат на единицу продукции, <br/>управление в режиме реального времени
</p>
<div>
<p>
Увеличение общей эффективности производства, <br/>снижение затрат на единицу продукции, <br/>управление в режиме реального времени
</p>
<span>SCADA HMI IIoT MES</span>
</div>
<button class="main--btn">связаться с нами</button>
</div>
<!------------- preview section start ---------------------->
......
......@@ -34,9 +34,12 @@
</script>
<main id="site-main">
<div class="main-info">
<p>
Óndiristiń jalpy tıimdiligin arttyrý ,<br/> óndiriletin ónim birligine shyǵyndaryn azaıtý, <br/>naqty ýaqyt rejıminde baqylaý
</p>
<div>
<p>
Óndiristiń jalpy tıimdiligin arttyrý ,<br/> óndiriletin ónim birligine shyǵyndaryn azaıtý, <br/>naqty ýaqyt rejıminde baqylaý
</p>
<span>SCADA HMI IIoT MES</span>
</div>
<button class="main--btn">Bizben baılanysý</button>
</div>
<!------------- preview section start ---------------------->
......
......@@ -13,6 +13,14 @@
src="{{img_url feature_image size="m"}}"
alt="{{title}}"
/>
<header class="post-card-header">
{{#if primary_tag}}
{{#primary_tag}}
<div class="post-card-primary-tag">{{name}}</div>
{{/primary_tag}}
{{/if}}
<h2 class="post-card-title">{{title}}</h2>
</header>
</a>
{{/if}}
......@@ -20,15 +28,6 @@
<a class="post-card-content-link" href="{{url}}">
<header class="post-card-header">
{{#if primary_tag}}
{{#primary_tag}}
<div class="post-card-primary-tag">{{name}}</div>
{{/primary_tag}}
{{/if}}
<h2 class="post-card-title">{{title}}</h2>
</header>
<section class="post-card-excerpt">
{{#if feature_image}}
<p>{{excerpt words="30"}}</p>
......
<div class="{{post_class}} ">
<img src="{{img_url feature_image size="s"}}" alt="{{title}}" />
<a href="{{url}}">{{title}}</a>
</div>
\ No newline at end of file
......@@ -13,36 +13,12 @@ into the {body} of the default.hbs template --}}
<header class="post-full-header">
{{#if primary_tag}}
<section class="post-full-tags">
{{#primary_tag}}
<a href="{{url}}">{{name}}</a>
{{/primary_tag}}
</section>
{{/if}}
<h1 class="post-full-title">{{title}}</h1>
{{#if custom_excerpt}}
<p class="post-full-custom-excerpt">{{custom_excerpt}}</p>
{{/if}}
<div class="post-full-byline">
<section class="post-full-byline-content">
<section class="post-full-byline-meta">
<h4 class="author-name">{{authors}}</h4>
<div class="byline-meta-content">
<time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time>
<span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time}}</span>
</div>
</section>
</section>
</div>
</header>
{{#if feature_image}}
......
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