94 lines
2.1 KiB
Vue
94 lines
2.1 KiB
Vue
<template>
|
|
<div class="intro-container">
|
|
<h1 class="title">
|
|
<img
|
|
src="@/assets/img/about/gameWeb_aboutP1_title.png"
|
|
alt="Background"
|
|
/>
|
|
</h1>
|
|
<p class="description">
|
|
Counter Fire is the
|
|
<span class="highlight">highly-anticipated blockchain-based game</span> to
|
|
offer a unique combination of MOBA and Battle Royale gameplay. With
|
|
funding from over 13 institutional investors, Players can choose from a
|
|
range of unique characters and battle it out in a highly competitive
|
|
arena.
|
|
</p>
|
|
<div class="line"></div>
|
|
<p class="description">
|
|
The game leverages the power of
|
|
<span class="highlight">blockchain technology</span> to offer secure,
|
|
decentralized gameplay, where players can own and trade in-game assets.
|
|
With an in-game economy, regular tournaments, and a range of other
|
|
features,Counter Fire offers an immersive and engaging gaming experience
|
|
for players who enjoy action-packed battles and competitive gameplay.
|
|
</p>
|
|
<img
|
|
class="background-image"
|
|
src="@/assets/img/about/gameWeb_aboutP1_bg1.png"
|
|
alt="Background"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "CounterFireIntro",
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.intro-container {
|
|
width: 100%;
|
|
position: relative;
|
|
height: 100%;
|
|
padding-top: 84px;
|
|
padding-left: 215px;
|
|
z-index: 1;
|
|
color: #fff;
|
|
|
|
.title {
|
|
font-size: 36px;
|
|
text-align: left;
|
|
margin-top: 51px;
|
|
font-weight: bold;
|
|
img{
|
|
width: 596px;
|
|
}
|
|
}
|
|
|
|
.description {
|
|
width: 845px;
|
|
margin: 20px 0;
|
|
padding: 10px;
|
|
padding-right: 0px;
|
|
border-radius: 0px 20px 0px 20px;
|
|
font-size: 26px;
|
|
font-family: "Poppins-Regular";
|
|
font-weight: 400;
|
|
color: #f3f0ff;
|
|
line-height: 36px;
|
|
text-align: left;
|
|
.highlight {
|
|
color: #BB7FFF;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.line {
|
|
width: 845px;
|
|
height: 3px;
|
|
background: #4A415C;
|
|
}
|
|
|
|
.background-image {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
</style>
|