Skip to content

Commit

Permalink
fix_2_fonts
Browse files Browse the repository at this point in the history
  • Loading branch information
@0ndrec
0ndrec authored Mar 16, 2024
1 parent 88d6094 commit 9da2b4e
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 46 deletions.
84 changes: 59 additions & 25 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<title>ONCHAIN.RU - Trusted PoS Validator</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Geo:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<script src="anime.min.js"></script>
Expand All @@ -16,7 +17,7 @@
<h1>
ONCHAIN.RUN
</h1>
<h2 class="subheader">
<h2>
Stake with us!
</h2>
</div>
Expand All @@ -29,10 +30,13 @@ <h2 class="subheader">
</div>
</div>

<h3 class="caption">
Reliability, Efficiency, Security
</h3>
<div class="container_hero">
<h3>
<h4>
Our team of blockchain validators leverages cutting-edge hardware to ensure maximum uptime, delivering unparalleled network reliability and performance. We proactively monitor drive wear using our unique, proprietary monitoring systems, ensuring optimal operation and longevity. Trust us to maintain the highest standards of efficiency and security for your blockchain needs.
</h3>
</h4>
<div class="hero">
<img src="img\cpu.webp" alt="">
</div>
Expand Down Expand Up @@ -72,16 +76,16 @@ <h3 class="name">SIDE</h3>
</div>


<h2 class="info_main">
Let's grow together!
</h2>
<h3 class="caption">
Let's grow together
</h3>
<div class="container_info">
<div class="hero">
<img src="img\comm.webp" alt="">
</div>
<h3>
<h4>
Is your project interested in attracting an audience? Or are you looking for talent in the field of content creation? We also offer unparalleled access to deeply engaged communities in blockchain and Web3, with large Telegram and Twitter groups at our disposal. Our platforms are ideal for promoting projects and connecting with a dedicated audience keen on innovation in this space. Join us to elevate your project's visibility and reach passionate enthusiasts today.
</h3>
</h4>
</div>

<footer>
Expand All @@ -91,30 +95,60 @@ <h3>

</body>

<!-- Displaying the appearance of elements from bottom to top "project_item" -->
<script>
anime({
targets: '.project_item',
translateY: [-100, 0],
opacity: [0, 1],
delay: anime.stagger(100),
easing: 'easeOutExpo',
duration: 1000
// Auto scroll page by presing the button services to down maximum
document.querySelector('.navbar a').addEventListener('click', function (e) {
e.preventDefault();
document.querySelector('.container_info').scrollIntoView({
behavior: 'smooth'
});
});

</script>

<!-- Displaying the like 3d flip loop animation with pause to "h2" -->
<!-- Hendle a pressing button in "project_item". Open new tab -->
<script>
anime({
targets: '.subheader',
rotateX: '360deg',
loop: true,
direction: 'alternate',
easing: 'easeInOutSine',
duration: 500,
delay: 1500
const buttons = document.querySelectorAll('.project_item .button');
const projects_dict = {
'AVAIL': '',
'STREAMR': '',
'WARDEN': 'https://warden-explorer.paranorm.pro/warden/staking/wardenvaloper144nqxgt6jdrm4srzzgx4dvz04hd8q2e8hlu6gq',
'SIDE': ''
};
buttons.forEach((button, index) => {
button.addEventListener('click', function () {
if (projects_dict[button.parentElement.querySelector('.name').textContent].length < 6) {
return;
}
window.open(projects_dict[button.parentElement.querySelector('.name').textContent]);
});
});
</script>

<!-- Displaying the animation endless running strip from right to lest "h2" -->
<script>
const textWrapper = document.querySelector('.header h2');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline({
loop: true
})
.add({
targets: '.header h2 .letter',
translateX: [40, 0],
translateZ: 0,
opacity: [0, 1],
easing: "easeOutExpo",
duration: 1200,
delay: (el, i) => 500 + 30 * i
}).add({
targets: '.header h2 .letter',
translateX: [0, -30],
opacity: [1, 0],
easing: "easeInExpo",
duration: 1100,
delay: (el, i) => 100 + 30 * i
});
</script>


</html>
64 changes: 43 additions & 21 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,14 @@ body {
color: #fff;
line-height: 1.5;
padding-top: 2rem;
font-family: "Pixelify Sans", sans-serif;
font-optical-sizing: auto;

font-family: "Geo", sans-serif;
font-weight: 400;
font-style: normal;
/* font-family: "Pixelify Sans", sans-serif; */
font-optical-sizing: auto;
}

.header {
justify-content: center;
display: flex;
flex-direction: column;
}


h1 {
Expand All @@ -25,6 +23,14 @@ h1 {
line-height: 1;
}


.header {
font-family: "Pixelify Sans", sans-serif !important;
justify-content: center;
display: flex;
flex-direction: column;
}

footer {
/* Fix footer to down */
background-color: #232323;
Expand All @@ -42,7 +48,7 @@ footer img {


h2 {
color: #f6b73e;
color: #ffffff;
font-size: 1.5rem;
text-align: center;
letter-spacing: 0.4rem;
Expand All @@ -51,13 +57,15 @@ h2 {
line-height: 1;
}



p {
text-align: center;
margin-bottom: 2rem;
}

.container_navbar {

font-family: "Pixelify Sans", sans-serif !important;
margin-top: 2rem;
display: flex;
flex-direction: column;
Expand All @@ -79,12 +87,21 @@ p {
text-decoration: none;
transition: all 0.3s;
font-size: 20px;
font-family: "Pixelify Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
}

.caption {
color: #f6b73e;
font-size: 2.7rem;
text-align: center;
letter-spacing: 0.4rem;
text-transform: uppercase;
margin-bottom: 1rem;
line-height: 1;
}

.container_hero {
align-items: center;
padding-left: 2rem;
Expand All @@ -95,11 +112,11 @@ p {
margin-bottom: 2rem;
}

.container_hero h3 {
.container_hero h4 {
text-align: left;
border-left: 2px dashed #32c146;
font-weight: 100;
font-size: 20px;
font-size: 1.5rem;
max-width: 40%;
padding: 0.7rem;
}
Expand Down Expand Up @@ -130,6 +147,7 @@ p {
}

.project_item .button {
font-family: "Pixelify Sans", sans-serif !important;
border-bottom: #32c146 2px solid;
text-transform: uppercase;
background: #232323;
Expand All @@ -149,7 +167,7 @@ p {
transition: all 0.3s;
}

.project h3 {
.project h4 {
color: hsl(0, 0%, 100%);
text-align: center;
}
Expand All @@ -170,11 +188,11 @@ p {
margin-bottom: 2rem;
}

.container_info h3 {
.container_info h4 {
text-align: right;
border-right: 2px dashed #32c146;
font-weight: 100;
font-size: 20px;
font-size: 1.5rem;
max-width: 40%;
padding: 0.7rem;
}
Expand Down Expand Up @@ -208,14 +226,14 @@ p {
}

h2 {
color: #f6b73e;
font-size: 1.5rem;
font-size: calc(1.3vw + 1.3vh + 2vmin);
text-align: center;
text-transform: uppercase;
margin-bottom: 1rem;
line-height: 1;
}


.navbar {
padding-top: 4rem;
justify-content: space-evenly;
Expand All @@ -239,15 +257,16 @@ p {
justify-content: center;
margin-bottom: 2rem;
}
.container_hero h3 {
.container_hero h4 {
font-size: calc(1.3vw + 1.3vh + 2vmin);
text-align: center;
border-left: none;
border-bottom: #32c146 2px dashed;
font-weight: auto;
max-width: 99%;
padding: 1.2rem;
padding-bottom: 3rem;
}

.container_hero img {
width: calc(20vw + 15vh + 2vmin);
height: auto;
Expand All @@ -262,7 +281,8 @@ p {
justify-content: center;
margin-bottom: 2rem;
}
.container_info h3 {
.container_info h4 {
font-size: calc(1.3vw + 1.3vh + 2vmin);
text-align: center;
border-right: none;
border-bottom: #32c146 2px dashed;
Expand All @@ -271,20 +291,22 @@ p {
padding: 1.2rem;
padding-bottom: 3rem;
}

.container_info img {
width: calc(20vw + 15vh + 2vmin);
height: auto;
}

.project_item {
border: none;
border-bottom: #32c146 2px solid;
width: 90%;
flex-direction: row;
justify-content: space-between;
font-size: inherit;
}
.container_projects {
border-bottom: #32c146 2px dashed;
border-top: #32c146 2px dashed;
font-size: calc(1.3vw + 1.3vh + 2vmin);
flex-direction: column;
}
Expand Down

0 comments on commit 9da2b4e

Please sign in to comment.