updated old client button
This commit is contained in:
Binary file not shown.
BIN
public/CCFaceFront-BoldItalic.woff2
Normal file
BIN
public/CCFaceFront-BoldItalic.woff2
Normal file
Binary file not shown.
15
public/oldclient-wave.svg
Normal file
15
public/oldclient-wave.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 20 KiB |
14
public/oldclient-wave2.svg
Normal file
14
public/oldclient-wave2.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 16 KiB |
@@ -3,6 +3,7 @@ import './buttonNew.scss'
|
|||||||
function ButtonNew() {
|
function ButtonNew() {
|
||||||
return (
|
return (
|
||||||
<div className="client newclient">
|
<div className="client newclient">
|
||||||
|
<div className="content"></div>
|
||||||
<div className="new-button">Start</div>
|
<div className="new-button">Start</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,10 +1,16 @@
|
|||||||
import './buttonOld.scss'
|
import './buttonOld.scss'
|
||||||
|
import oldclientWave from '/oldclient-wave.svg'
|
||||||
|
|
||||||
function ButtonOld() {
|
function ButtonOld() {
|
||||||
return (
|
return (
|
||||||
<div className="client oldclient">
|
<div className="client oldclient">
|
||||||
<div className="oldclient-inner">
|
<div className="oldclient-inner">
|
||||||
<div className="old-button">STA RT</div>
|
<div className="content">
|
||||||
|
<img src={oldclientWave} />
|
||||||
|
<div>JOIN WITH THE</div>
|
||||||
|
<div>OLD CLIENT</div>
|
||||||
|
</div>
|
||||||
|
<div className="old-button">START</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -8,12 +8,15 @@
|
|||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.new-button {
|
.new-button {
|
||||||
align-self: flex-end;
|
|
||||||
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
|
|||||||
@@ -1,11 +1,19 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'CCFaceFront Italic';
|
font-family: 'CCFaceFront Italic';
|
||||||
src: url('/CCFaceFront Italic.ttf') format('opentype');
|
src: url('/CCFaceFront-BoldItalic.woff2') format('opentype');
|
||||||
}
|
}
|
||||||
|
|
||||||
.oldclient {
|
.oldclient {
|
||||||
border: 10px solid #0062b6;
|
border: 10px solid #0062b6;
|
||||||
border-radius: 40px;
|
border-radius: 40px;
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
font-family: 'CCFaceFront Italic', Helvetica, Arial, sans-serif;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 30px;
|
||||||
|
font-style: italic;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
|
||||||
background: linear-gradient(0deg, #016ec1 0%, #0280cd 100%);
|
background: linear-gradient(0deg, #016ec1 0%, #0280cd 100%);
|
||||||
|
|
||||||
@@ -28,25 +36,29 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 70%;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.old-button {
|
.old-button {
|
||||||
align-self: flex-end;
|
|
||||||
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
color: white;
|
|
||||||
font-family: 'CCFaceFront Italic', Helvetica, Arial, sans-serif;
|
|
||||||
letter-spacing: -0.7rem;
|
|
||||||
word-spacing: 0.65rem;
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
font-style: italic;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
-webkit-text-stroke: 6px black;
|
-webkit-text-stroke: 6px black;
|
||||||
paint-order: stroke fill;
|
paint-order: stroke fill;
|
||||||
|
|
||||||
|
|||||||
@@ -9,8 +9,6 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
// background: #00529B;
|
|
||||||
|
|
||||||
.client {
|
.client {
|
||||||
width: 500px;
|
width: 500px;
|
||||||
height: 800px;
|
height: 800px;
|
||||||
|
|||||||
Reference in New Issue
Block a user