ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-23 00:15:05 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Styling progress

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/layouts/partials/full-width-cta.html
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> <hr>
<div class="row button-container"> <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> </div>
<hr> <hr>

11
src/static/Images/enter-icon.svg Normal file
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>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

35
src/static/Images/grid-left-corner.svg
View file

@ -1,18 +1,21 @@
<svg xmlns="http://www.w3.org/2000/svg" width="640.5" height="320.5" viewBox="0 0 640.5 320.5"> <svg xmlns="http://www.w3.org/2000/svg" width="1920.25" height="320.5" viewBox="0 0 1920.25 320.5">
<g id="Group_1194" data-name="Group 1194" transform="translate(0.25 -1039.75)"> <g id="Group_1223" data-name="Group 1223" transform="translate(0.25 -1039.75)">
<path id="Rectangle_3128" data-name="Rectangle 3128" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(0 1040)"/> <rect id="Rectangle_3348" data-name="Rectangle 3348" width="1920" height="320" transform="translate(0 1040)" fill="#fff" opacity="0"/>
<path id="Rectangle_3136" data-name="Rectangle 3136" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(0 1120)"/> <g id="Group_1194" data-name="Group 1194">
<path id="Rectangle_3139" data-name="Rectangle 3139" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(0 1200)"/> <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_3141" data-name="Rectangle 3141" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(0 1280)"/> <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_3129" data-name="Rectangle 3129" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(80 1040)"/> <path id="Rectangle_3139" data-name="Rectangle 3139" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(0 1200)"/>
<path id="Rectangle_3137" data-name="Rectangle 3137" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(80 1120)"/> <path id="Rectangle_3141" data-name="Rectangle 3141" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(0 1280)"/>
<path id="Rectangle_3140" data-name="Rectangle 3140" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(80 1200)"/> <path id="Rectangle_3129" data-name="Rectangle 3129" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(80 1040)"/>
<path id="Rectangle_3130" data-name="Rectangle 3130" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(160 1040)"/> <path id="Rectangle_3137" data-name="Rectangle 3137" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(80 1120)"/>
<path id="Rectangle_3138" data-name="Rectangle 3138" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(160 1120)"/> <path id="Rectangle_3140" data-name="Rectangle 3140" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(80 1200)"/>
<path id="Rectangle_3131" data-name="Rectangle 3131" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(240 1040)"/> <path id="Rectangle_3130" data-name="Rectangle 3130" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(160 1040)"/>
<path id="Rectangle_3132" data-name="Rectangle 3132" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(320 1040)"/> <path id="Rectangle_3138" data-name="Rectangle 3138" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(160 1120)"/>
<path id="Rectangle_3133" data-name="Rectangle 3133" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(400 1040)"/> <path id="Rectangle_3131" data-name="Rectangle 3131" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(240 1040)"/>
<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_3132" data-name="Rectangle 3132" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(320 1040)"/>
<path id="Rectangle_3135" data-name="Rectangle 3135" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(560 1040)"/> <path id="Rectangle_3133" data-name="Rectangle 3133" d="M-.25-.25h80.5v80.5H-.25Zm80,.5H.25v79.5h79.5Z" transform="translate(400 1040)"/>
<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> </g>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

46
src/static/css/style.css
View file

@ -4,7 +4,7 @@ body{
background-color: #1a1a1a; background-color: #1a1a1a;
max-width: 1920px; max-width: 1920px;
background-image: url("/Images/x-large-grid.svg"); 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) { @media only screen and (min-width: 1280px) {
.container{ .container{
padding: 160px 132px 0px 132px; padding: 128px 150px 10px 132px;
} }
} }
@ -167,14 +167,13 @@ p{
@media only screen and (min-width: 1280px) { @media only screen and (min-width: 1280px) {
h1{ h1{
font-size: 224px; font-size: 13.25rem;
line-height: 240px; line-height: 14rem;
margin-top: -18px;
} }
h2{ h2{
font-size: 110px; font-size: 6rem;
line-height: 160px; line-height: 8rem;
} }
h3{ h3{
@ -190,6 +189,7 @@ p{
.lead{ .lead{
font-size: 28px !important; font-size: 28px !important;
line-height: 29px !important; line-height: 29px !important;
margin-top: -23px !important;
} }
p{ 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 */ /* Spacers & Dividers */
hr{ hr{
@ -240,7 +211,7 @@ hr{
@media only screen and (min-width: 1280px) { @media only screen and (min-width: 1280px) {
.hero-section{ .hero-section{
margin-bottom: 80px; margin-bottom: 75px;
} }
.impact-section{ .impact-section{
@ -253,5 +224,6 @@ hr{
.grid-element{ .grid-element{
z-index: 1; z-index: 1;
position: absolute; position: absolute;
width:600px;
} }
} }