Styling progress

This commit is contained in:
Thomas Smith 2022-09-08 18:15:24 -04:00
parent eeb53a8976
commit e85c33da9f
4 changed files with 77 additions and 54 deletions

View file

@ -1,5 +1,42 @@
<style>
.btn-primary{
padding: 44px 75px;
border-radius: 0px !important;
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
font-size: 38px;
border-left: 2px solid #949494 !important;
border-right: 2px solid #949494 !important;
background-color: #1a1a1a !important;
outline: none !important;
box-shadow: none !important;
text-align: left;
border-top-color:#1a1a1a;
border-bottom-color: #1a1a1a;
transition: 0.2s linear;
}
.btn-primary:hover{
background-color: #00ffd0 !important;
color: #1a1a1a;
border-top-color:#00ffd0;
border-bottom-color:#00ffd0;
border-left-color:#00ffd0;
border-right-color:#00ffd0;
box-shadow: inset 0px 0px 0px 10px #1a1a1a !important;
padding: 44px 100px;
border-top-color:#1a1a1a;
border-bottom-color: #1a1a1a;
}
.button-container{
padding: 0px 160px;
}
</style>
<hr>
<div class="row button-container">
<a href="#" role="button" class="btn btn-primary auth-btn mt-lg-0 mt-md-0 mt-sm-4 mt-4" id="nav-cta">Authenticate with tea</a>
<a href="#" role="button" class="btn btn-primary auth-btn mt-lg-0 mt-md-0 mt-sm-4 mt-4" id="nav-cta">Authenticate with tea<span class="vertical-center" style="float:right; font-size:1.2rem;"><u id="count1"></u> devs authenticated</span></a>
</div>
<hr>

View file

@ -0,0 +1,11 @@
<svg id="enter-desktop" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40.03" height="36.587" viewBox="0 0 40.03 36.587">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_449" data-name="Rectangle 449" width="40.03" height="36.587" fill="#fff"/>
</clipPath>
</defs>
<g id="Group_45" data-name="Group 45" clip-path="url(#clip-path)">
<path id="Path_11" data-name="Path 11" d="M36.734,27.14H1.036A1.036,1.036,0,0,1,0,26.1V1.036a1.037,1.037,0,0,1,2.073,0V25.067h34.66a1.037,1.037,0,0,1,0,2.073" transform="translate(0 0)" fill="#fff"/>
<path id="Path_12" data-name="Path 12" d="M38.13,26.6a3.1,3.1,0,0,1-.925.779L23.146,35.462a1,1,0,0,1-.5.158.923.923,0,0,1-.733-.361,1.312,1.312,0,0,1-.3-.879,1.166,1.166,0,0,1,.4-.97,4.48,4.48,0,0,1,.869-.543l13.36-7.717-13.36-7.742a4.425,4.425,0,0,1-.869-.542,1.2,1.2,0,0,1-.4-.992,1.271,1.271,0,0,1,.3-.869.938.938,0,0,1,.733-.351,1.137,1.137,0,0,1,.5.135l14.059,8.1a3.66,3.66,0,0,1,.925.778,2.011,2.011,0,0,1,.474,1.389v.134A2.1,2.1,0,0,1,38.13,26.6" transform="translate(1.425 0.966)" fill="#fff"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View file

@ -1,5 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="640.5" height="320.5" viewBox="0 0 640.5 320.5">
<g id="Group_1194" data-name="Group 1194" transform="translate(0.25 -1039.75)">
<svg xmlns="http://www.w3.org/2000/svg" width="1920.25" height="320.5" viewBox="0 0 1920.25 320.5">
<g id="Group_1223" data-name="Group 1223" transform="translate(0.25 -1039.75)">
<rect id="Rectangle_3348" data-name="Rectangle 3348" width="1920" height="320" transform="translate(0 1040)" fill="#fff" opacity="0"/>
<g id="Group_1194" data-name="Group 1194">
<path id="Rectangle_3128" data-name="Rectangle 3128" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(0 1040)"/>
<path id="Rectangle_3136" data-name="Rectangle 3136" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(0 1120)"/>
<path id="Rectangle_3139" data-name="Rectangle 3139" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(0 1200)"/>
@ -15,4 +17,5 @@
<path id="Rectangle_3134" data-name="Rectangle 3134" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(480 1040)"/>
<path id="Rectangle_3135" data-name="Rectangle 3135" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(560 1040)"/>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

View file

@ -4,7 +4,7 @@ body{
background-color: #1a1a1a;
max-width: 1920px;
background-image: url("/Images/x-large-grid.svg");
background-size: auto;
background-size: contain;
}
/*
@ -22,7 +22,7 @@ body{
@media only screen and (min-width: 1280px) {
.container{
padding: 160px 132px 0px 132px;
padding: 128px 150px 10px 132px;
}
}
@ -167,14 +167,13 @@ p{
@media only screen and (min-width: 1280px) {
h1{
font-size: 224px;
line-height: 240px;
margin-top: -18px;
font-size: 13.25rem;
line-height: 14rem;
}
h2{
font-size: 110px;
line-height: 160px;
font-size: 6rem;
line-height: 8rem;
}
h3{
@ -190,6 +189,7 @@ p{
.lead{
font-size: 28px !important;
line-height: 29px !important;
margin-top: -23px !important;
}
p{
@ -198,35 +198,6 @@ p{
}
/* Buttons */
.btn-primary{
padding: 65px 80px;
border-radius: 0px !important;
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
font-size: 38px;
border-left: 2px solid #949494 !important;
border-right: 2px solid #949494 !important;
background-color: #1a1a1a !important;
outline: none !important;
box-shadow: none !important;
text-align: left;
border-top-color:#1a1a1a;
border-bottom-color: #1a1a1a;
}
.btn-primary:hover{
background-color: #00ffd0 !important;
color: #1a1a1a;
border-top-color:#00ffd0;
border-bottom-color:#00ffd0;
}
.button-container{
padding: 0px 160px;
}
/* Spacers & Dividers */
hr{
@ -240,7 +211,7 @@ hr{
@media only screen and (min-width: 1280px) {
.hero-section{
margin-bottom: 80px;
margin-bottom: 75px;
}
.impact-section{
@ -253,5 +224,6 @@ hr{
.grid-element{
z-index: 1;
position: absolute;
width:600px;
}
}