Avalonia updates

This commit is contained in:
TheXamlGuy
2024-06-22 22:44:17 +01:00
parent e202370811
commit ae9b4dbf31
100 changed files with 10683 additions and 228 deletions
+234
View File
@@ -0,0 +1,234 @@
@charset "UTF-8";
/*!
* animate.css -https://daneden.github.io/animate.css/
* Version - 3.7.2
* Licensed under the MIT license - http://opensource.org/licenses/MIT
*
* Copyright (c) 2019 Daniel Eden
*/
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.delay-1s {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.animated.delay-2s {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.animated.delay-3s {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.animated.delay-4s {
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.animated.delay-5s {
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.animated.fast {
-webkit-animation-duration: 800ms;
animation-duration: 800ms;
}
.animated.faster {
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
}
.animated.slow {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.slower {
-webkit-animation-duration: 3s;
animation-duration: 3s;
}
@media (print), (prefers-reduced-motion: reduce) {
.animated {
-webkit-animation-duration: 1ms !important;
animation-duration: 1ms !important;
-webkit-transition-duration: 1ms !important;
transition-duration: 1ms !important;
-webkit-animation-iteration-count: 1 !important;
animation-iteration-count: 1 !important;
}
}
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
Binary file not shown.
File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 580 KiB

Binary file not shown.
Binary file not shown.
Binary file not shown.
+1
View File
@@ -0,0 +1 @@
<svg fill="none" height="46" viewBox="0 0 46 46" width="46" xmlns="http://www.w3.org/2000/svg"><g fill="#3056d3" fill-opacity=".44"><circle cx="1.39737" cy="44.6026" r="1.39737" transform="matrix(0 -1 1 0 -43.20523 45.99997)"/><circle cx="1.39737" cy="7.99124" r="1.39737" transform="matrix(0 -1 1 0 -6.59387 9.38861)"/><circle cx="13.6943" cy="44.6026" r="1.39737" transform="matrix(0 -1 1 0 -30.9083 58.2969)"/><circle cx="13.6943" cy="7.99124" r="1.39737" transform="matrix(0 -1 1 0 5.70306 21.68554)"/><circle cx="25.9911" cy="44.6026" r="1.39737" transform="matrix(0 -1 1 0 -18.6115 70.5937)"/><circle cx="25.9911" cy="7.99124" r="1.39737" transform="matrix(0 -1 1 0 17.99986 33.98234)"/><circle cx="38.288" cy="44.6026" r="1.39737" transform="matrix(0 -1 1 0 -6.3146 82.8906)"/><circle cx="38.288" cy="7.99124" r="1.39737" transform="matrix(0 -1 1 0 30.29676 46.27924)"/><circle cx="1.39737" cy="32.3058" r="1.39737" transform="matrix(0 -1 1 0 -30.90843 33.70317)"/><circle cx="13.6943" cy="32.3058" r="1.39737" transform="matrix(0 -1 1 0 -18.6115 46.0001)"/><circle cx="25.9911" cy="32.3058" r="1.39737" transform="matrix(0 -1 1 0 -6.3147 58.2969)"/><circle cx="38.288" cy="32.3058" r="1.39737" transform="matrix(0 -1 1 0 5.9822 70.5938)"/><circle cx="1.39737" cy="20.0087" r="1.39737" transform="matrix(0 -1 1 0 -18.61133 21.40607)"/><circle cx="13.6943" cy="20.0087" r="1.39737" transform="matrix(0 -1 1 0 -6.3144 33.703)"/><circle cx="25.9911" cy="20.0087" r="1.39737" transform="matrix(0 -1 1 0 5.9824 45.9998)"/><circle cx="38.288" cy="20.0087" r="1.39737" transform="matrix(0 -1 1 0 18.2793 58.2967)"/></g></svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

+4
View File
@@ -0,0 +1,4 @@
<svg width="156" height="343" viewBox="0 0 156 343" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="-213" y="175.925" width="352.265" height="175.956" rx="37" transform="rotate(-47.3095 -213 175.925)" fill="#13C296"/>
<rect x="-225" y="222.925" width="352.265" height="175.956" rx="29" transform="rotate(-47.3095 -225 222.925)" stroke="#13C296" stroke-width="2"/>
</svg>

After

Width:  |  Height:  |  Size: 380 B

+4
View File
@@ -0,0 +1,4 @@
<svg width="215" height="157" viewBox="0 0 215 157" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="255.253" y="448.005" width="359.574" height="236.524" rx="22" transform="rotate(-135 255.253 448.005)" fill="#13C296"/>
<rect x="307.164" y="343.427" width="342.167" height="143.513" rx="31" transform="rotate(-135 307.164 343.427)" stroke="#13C296" stroke-width="2"/>
</svg>

After

Width:  |  Height:  |  Size: 384 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 257 KiB

+1
View File
@@ -0,0 +1 @@
<svg fill="none" height="470" viewBox="0 0 1440 470" width="1440" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1=".000019" x2="1521" y1="383.5" y2="-35.5"><stop offset="0" stop-color="#13c296"/><stop offset="1" stop-color="#3056d3"/></linearGradient><mask id="b" height="470" maskUnits="userSpaceOnUse" width="1440" x="0" y="0"><path d="m0 0h1440v470h-1440z" fill="url(#a)"/></mask><g mask="url(#b)" stroke="#fff"><g stroke-opacity=".04"><circle cx="1409" cy="5" r="138" stroke-width="50"/><circle cx="55" cy="442" r="138" stroke-width="50"/><circle cx="996" cy="470" r="39" stroke-width="20"/><circle cx="446" r="39" stroke-width="20"/></g><path d="m1169.39 226.701 50.42-13.509-13.51 50.415z" stroke-opacity=".06" stroke-width="13"/><path d="m245.406 137.609-11.421-42.6238 42.624 11.4208z" stroke-opacity=".08" stroke-width="12"/></g></svg>

After

Width:  |  Height:  |  Size: 931 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 132 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

+1
View File
@@ -0,0 +1 @@
<svg fill="none" height="46" viewBox="0 0 46 46" width="46" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" fill-opacity=".44"><circle cx="1.39737" cy="44.6026" r="1.39737" transform="matrix(0 -1 1 0 -43.20523 45.99997)"/><circle cx="1.39737" cy="7.99124" r="1.39737" transform="matrix(0 -1 1 0 -6.59387 9.38861)"/><circle cx="13.6943" cy="44.6026" r="1.39737" transform="matrix(0 -1 1 0 -30.9083 58.2969)"/><circle cx="13.6943" cy="7.99124" r="1.39737" transform="matrix(0 -1 1 0 5.70306 21.68554)"/><circle cx="25.9911" cy="44.6026" r="1.39737" transform="matrix(0 -1 1 0 -18.6115 70.5937)"/><circle cx="25.9911" cy="7.99124" r="1.39737" transform="matrix(0 -1 1 0 17.99986 33.98234)"/><circle cx="38.288" cy="44.6026" r="1.39737" transform="matrix(0 -1 1 0 -6.3146 82.8906)"/><circle cx="38.288" cy="7.99124" r="1.39737" transform="matrix(0 -1 1 0 30.29676 46.27924)"/><circle cx="1.39737" cy="32.3058" r="1.39737" transform="matrix(0 -1 1 0 -30.90843 33.70317)"/><circle cx="13.6943" cy="32.3058" r="1.39737" transform="matrix(0 -1 1 0 -18.6115 46.0001)"/><circle cx="25.9911" cy="32.3058" r="1.39737" transform="matrix(0 -1 1 0 -6.3147 58.2969)"/><circle cx="38.288" cy="32.3058" r="1.39737" transform="matrix(0 -1 1 0 5.9822 70.5938)"/><circle cx="1.39737" cy="20.0087" r="1.39737" transform="matrix(0 -1 1 0 -18.61133 21.40607)"/><circle cx="13.6943" cy="20.0087" r="1.39737" transform="matrix(0 -1 1 0 -6.3144 33.703)"/><circle cx="25.9911" cy="20.0087" r="1.39737" transform="matrix(0 -1 1 0 5.9824 45.9998)"/><circle cx="38.288" cy="20.0087" r="1.39737" transform="matrix(0 -1 1 0 18.2793 58.2967)"/></g></svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

+1
View File
@@ -0,0 +1 @@
<svg fill="none" height="251" viewBox="0 0 745 251" width="745" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a"><stop offset="0" stop-color="#3056d3" stop-opacity=".15"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="-101.591" x2="49.1618" xlink:href="#a" y1="-50.4346" y2="-49.6518"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="643.409" x2="794.162" xlink:href="#a" y1="196.565" y2="197.348"/><mask id="d" height="251" maskUnits="userSpaceOnUse" width="745" x="0" y="0"><rect fill="#3056d3" height="251" rx="5" width="745"/></mask><rect fill="#3056d3" fill-opacity=".05" height="251" rx="5" width="745"/><g mask="url(#d)"><ellipse cx=".483916" cy="3.5" fill="url(#b)" rx="102.075" ry="105.5" transform="matrix(-1 0 0 -1 .967832 7)"/><ellipse cx="745.484" cy="250.5" fill="url(#c)" rx="102.075" ry="105.5"/></g></svg>

After

Width:  |  Height:  |  Size: 965 B

+1
View File
@@ -0,0 +1 @@
<svg fill="none" height="52" viewBox="0 0 200 52" width="200" xmlns="http://www.w3.org/2000/svg"><path d="m19.3545 4.27083c0-2.35963 1.9247-4.27083 4.3011-4.27083h2.1505c14.2527 0 25.8065 11.4725 25.8065 25.625v21.3542c0 2.3596-1.9247 4.2708-4.3011 4.2708h-2.1505c-14.2527 0-25.8065-11.4725-25.8065-25.625z" fill="#4a6cf7" opacity=".56"/><path d="m21.5054 51.25c11.8771 0 21.5054-9.5606 21.5054-21.3542s-9.6283-21.35417-21.5054-21.35417c-11.87711 0-21.5054 9.56057-21.5054 21.35417s9.62829 21.3542 21.5054 21.3542z" fill="#4a6cf7" opacity=".88"/><path d="m81.0229 40.7165h7.1753l-10.0737-27.904h-7.8441l-10.0656 27.904h7.0931l1.6677-4.9289h10.379zm-3.4102-10.1758h-6.8532l3.4016-10.2156zm23.8303 1.8681-5.1115-13.8724h-7.5715l9 21.4248-5.0779 11.2888h7.2989l13.872-32.7136h-7.332zm21.633-1.9874c0-3.8159 1.866-4.9289 5.079-4.9289h1.857v-7.1946c-2.972 0-5.392 1.59-6.936 3.9352v-3.6967h-6.779v22.1801h6.779zm31.815-.795c0-7.0356-4.987-11.408-11.494-11.408-6.457 0-11.494 4.3724-11.494 11.408 0 7.0357 4.922 11.408 11.42 11.408s11.568-4.3723 11.568-11.408zm-16.085 0c0-3.7762 2.139-5.5251 4.591-5.5251 2.378 0 4.6 1.7489 4.6 5.5251 0 3.7364-2.255 5.5252-4.674 5.5252-2.461 0-4.517-1.7888-4.517-5.5252zm30.766.8745c0 7.1946 4.674 10.4938 10.388 10.4938 5.705 0 10.421-3.2992 10.421-10.4938v-17.4896h-3.609v17.5294c0 5.0879-2.692 7.2741-6.779 7.2741-4.079 0-6.812-2.1862-6.812-7.2741v-17.5294h-3.609zm26.828 10.2156h3.6v-27.7052h-3.6z" fill="#2d2d2d"/></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 12 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 10 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.7 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 8.5 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.5 KiB

+1
View File
@@ -0,0 +1 @@
<svg fill="none" height="886" viewBox="0 0 1440 886" width="1440" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="1308.65" x2="602.827" y1="1142.58" y2="-418.681"><stop offset="0" stop-color="#3056d3" stop-opacity=".36"/><stop offset="1" stop-color="#f5f2fd" stop-opacity="0"/><stop offset="1" stop-color="#f5f2fd" stop-opacity=".096144"/></linearGradient><path d="m193.307-273.321 1287.563 1287.561-359.02 359.02s-390.105-390.029-643.337-643.333c-252.537-252.61-644.227-644.2277-644.227-644.2277z" fill="url(#a)" opacity=".5"/></svg>

After

Width:  |  Height:  |  Size: 622 B

+1
View File
@@ -0,0 +1 @@
<svg fill="none" height="40" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg"><path d="m20 40c11.0457 0 20-8.9543 20-20s-8.9543-20-20-20-20 8.9543-20 20 8.9543 20 20 20z" fill="#fff"/><path clip-rule="evenodd" d="m11.2311 8c-1.71175 0-2.97838 1.49826-2.92168 3.1231.05445 1.5609-.01629 3.5827-.52522 5.2314-.51076 1.6533-1.37397 2.701-2.7842 2.8355v1.5183c1.41023.1348 2.27344 1.1819 2.78414 2.8355.50899 1.6487.57967 3.6704.52522 5.2314-.0567 1.6246 1.20993 3.1231 2.92194 3.1231h17.5399c1.7118 0 2.9782-1.4983 2.9214-3.1231-.0544-1.561.0163-3.5827.5253-5.2314.5107-1.6536 1.3718-2.7012 2.7821-2.8355v-1.5183c-1.4102-.1348-2.2713-1.1819-2.7821-2.8355-.5091-1.6485-.5797-3.6705-.5253-5.2314.0568-1.62463-1.2096-3.1231-2.9214-3.1231zm14.1079 14.7109c0 2.2374-1.6688 3.5942-4.4382 3.5942h-4.7144c-.1348 0-.2641-.0536-.3595-.1489-.0954-.0954-.1489-.2247-.1489-.3596v-11.6949c0-.1348.0535-.2642.1489-.3595.0954-.0954.2247-.1489.3595-.1489h4.6875c2.3093 0 3.8248 1.2508 3.8248 3.1713 0 1.3479-1.0195 2.5547-2.3184 2.7661v.0703c1.7681.1939 2.9587 1.4185 2.9587 3.1099zm-4.9523-7.5058h-2.688v3.7969h2.264c1.7502 0 2.7152-.7048 2.7152-1.9645-.0002-1.1805-.8298-1.8324-2.2912-1.8324zm-2.688 5.3034v4.1842h2.7869c1.8223 0 2.7875-.7312 2.7875-2.1053s-.9923-2.0791-2.9047-2.0791z" fill="#3056d3" fill-rule="evenodd"/></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@@ -0,0 +1 @@
<svg fill="none" height="52" viewBox="0 0 200 52" width="200" xmlns="http://www.w3.org/2000/svg"><path d="m19.3545 4.27083c0-2.35963 1.9247-4.27083 4.3011-4.27083h2.1505c14.2527 0 25.8065 11.4725 25.8065 25.625v21.3542c0 2.3596-1.9247 4.2708-4.3011 4.2708h-2.1505c-14.2527 0-25.8065-11.4725-25.8065-25.625z" fill="#4a6cf7" opacity=".56"/><path d="m21.5054 51.25c11.8771 0 21.5054-9.5606 21.5054-21.3542s-9.6283-21.35417-21.5054-21.35417c-11.87711 0-21.5054 9.56057-21.5054 21.35417s9.62829 21.3542 21.5054 21.3542z" fill="#4a6cf7" opacity=".88"/><path d="m81.0229 40.7165h7.1753l-10.0737-27.904h-7.8441l-10.0656 27.904h7.0931l1.6677-4.9289h10.379zm-3.4102-10.1758h-6.8532l3.4016-10.2156zm23.8303 1.8681-5.1115-13.8724h-7.5715l9 21.4248-5.0779 11.2888h7.2989l13.872-32.7136h-7.332zm21.633-1.9874c0-3.8159 1.866-4.9289 5.079-4.9289h1.857v-7.1946c-2.972 0-5.392 1.59-6.936 3.9352v-3.6967h-6.779v22.1801h6.779zm31.815-.795c0-7.0356-4.987-11.408-11.494-11.408-6.457 0-11.494 4.3724-11.494 11.408 0 7.0357 4.922 11.408 11.42 11.408s11.568-4.3723 11.568-11.408zm-16.085 0c0-3.7762 2.139-5.5251 4.591-5.5251 2.378 0 4.6 1.7489 4.6 5.5251 0 3.7364-2.255 5.5252-4.674 5.5252-2.461 0-4.517-1.7888-4.517-5.5252zm30.766.8745c0 7.1946 4.674 10.4938 10.388 10.4938 5.705 0 10.421-3.2992 10.421-10.4938v-17.4896h-3.609v17.5294c0 5.0879-2.692 7.2741-6.779 7.2741-4.079 0-6.812-2.1862-6.812-7.2741v-17.5294h-3.609zm26.828 10.2156h3.6v-27.7052h-3.6z" fill="#fff"/></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 12 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 11 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.9 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.4 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 8.5 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.5 KiB

+9
View File
@@ -0,0 +1,9 @@
<svg width="570" height="492" viewBox="0 0 570 492" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="55" cy="350" rx="364" ry="364" transform="rotate(-45 55 350)" fill="url(#paint0_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="55" y1="-14" x2="55" y2="714" gradientUnits="userSpaceOnUse">
<stop stop-color="#13C296" stop-opacity="0.4"/>
<stop offset="1" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 429 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 8.3 KiB

+9
View File
@@ -0,0 +1,9 @@
<svg width="372" height="264" viewBox="0 0 372 264" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="244.343" cy="243.965" rx="199.017" ry="199.017" transform="rotate(-75 244.343 243.965)" fill="url(#paint0_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="244.343" y1="44.9479" x2="244.343" y2="442.982" gradientUnits="userSpaceOnUse">
<stop stop-color="#3056D3" stop-opacity="0.32"/>
<stop offset="1" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 474 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 57 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.2 KiB

+1
View File
@@ -0,0 +1 @@
<svg fill="none" height="22" viewBox="0 0 22 22" width="22" xmlns="http://www.w3.org/2000/svg"><path d="m21.5 21.5h-20.994299c.261905-11.477 9.517299-20.732396 20.994299-20.994303z" stroke="#13c296"/></svg>

After

Width:  |  Height:  |  Size: 206 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.0 KiB

File diff suppressed because one or more lines are too long
+93
View File
@@ -0,0 +1,93 @@
(function () {
"use strict";
// ======= Sticky
window.onscroll = function () {
const ud_header = document.querySelector(".ud-header");
const sticky = ud_header.offsetTop;
const logo = document.querySelector(".navbar-brand img");
if (window.pageYOffset > sticky) {
ud_header.classList.add("sticky");
} else {
ud_header.classList.remove("sticky");
}
// === logo change
if (ud_header.classList.contains("sticky")) {
logo.src = "assets/images/logo/logo.svg";
} else {
logo.src = "assets/images/logo/logo.svg";
}
// show or hide the back-top-top button
const backToTop = document.querySelector(".back-to-top");
if (
document.body.scrollTop > 50 ||
document.documentElement.scrollTop > 50
) {
backToTop.style.display = "flex";
} else {
backToTop.style.display = "none";
}
};
//===== close navbar-collapse when a clicked
let navbarToggler = document.querySelector(".navbar-toggler");
const navbarCollapse = document.querySelector(".navbar-collapse");
document.querySelectorAll(".ud-menu-scroll").forEach((e) =>
e.addEventListener("click", () => {
navbarToggler.classList.remove("active");
navbarCollapse.classList.remove("show");
})
);
navbarToggler.addEventListener("click", function () {
navbarToggler.classList.toggle("active");
navbarCollapse.classList.toggle("show");
});
// ===== submenu
const submenuButton = document.querySelectorAll(".nav-item-has-children");
submenuButton.forEach((elem) => {
elem.querySelector("a").addEventListener("click", () => {
elem.querySelector(".ud-submenu").classList.toggle("show");
});
});
// ===== wow js
new WOW().init();
// ====== scroll top js
function scrollTo(element, to = 0, duration = 500) {
const start = element.scrollTop;
const change = to - start;
const increment = 20;
let currentTime = 0;
const animateScroll = () => {
currentTime += increment;
const val = Math.easeInOutQuad(currentTime, start, change, duration);
element.scrollTop = val;
if (currentTime < duration) {
setTimeout(animateScroll, increment);
}
};
animateScroll();
}
Math.easeInOutQuad = function (t, b, c, d) {
t /= d / 2;
if (t < 1) return (c / 2) * t * t + b;
t--;
return (-c / 2) * (t * (t - 2) - 1) + b;
};
document.querySelector(".back-to-top").onclick = () => {
scrollTo(document.documentElement);
};
})();
File diff suppressed because one or more lines are too long
+99
View File
@@ -0,0 +1,99 @@
/* ====== Error 404 CSS ======= */
.ud-404 {
padding-top: 120px;
padding-bottom: 120px;
@media #{$xs} {
padding-top: 80px;
padding-bottom: 80px;
}
}
.ud-404-wrapper {
text-align: center;
max-width: 850px;
margin: 0px auto;
background: var(--white);
padding: 100px 60px;
box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.1);
border-radius: 10px;
position: relative;
overflow: hidden;
z-index: 1;
@media #{$xs} {
padding: 50px 30px;
}
.shape {
position: absolute;
z-index: -1;
&.shape-1 {
top: 0;
left: 0;
}
&.shape-2 {
right: 0;
bottom: 0;
}
}
}
.ud-404-title {
font-size: 42px;
font-weight: 700;
margin-bottom: 30px;
@media #{$md} {
font-size: 35px;
}
@media #{$xs} {
font-size: 30px;
}
}
.ud-404-subtitle {
font-size: 24px;
font-weight: 400;
margin-bottom: 30px;
@media #{$md} {
font-size: 22px;
}
@media #{$xs} {
font-size: 18px;
}
}
.ud-404-links {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
a {
font-size: 16px;
font-weight: 500;
padding: 12px 24px;
color: var(--heading-color);
background: rgba(48, 86, 211, 0.06);
border-radius: 5px;
margin: 5px 10px;
&:hover {
background: var(--heading-color);
color: var(--white);
}
@media #{$xs} {
margin: 5px 10px;
font-size: 14px;
padding: 10px 20px;
}
}
}
+78
View File
@@ -0,0 +1,78 @@
/* ===== About CSS ===== */
.ud-about {
background: #f3f4fe;
padding: 120px 0;
@media #{$xs} {
padding: 80px 0;
}
}
.ud-about-wrapper {
background: var(--white);
border: 1px solid rgba(0, 0, 0, 0.08);
display: flex;
justify-content: space-between;
@media #{$md, $xs} {
display: block;
}
}
.ud-about-content-wrapper {
padding: 70px;
@media #{$xs} {
padding: 50px 30px;
}
@media #{$sm} {
padding: 50px;
}
}
.ud-about-content {
max-width: 500px;
.tag {
font-weight: 500;
font-size: 14px;
color: var(--white);
background: var(--primary-color);
padding: 5px 20px;
display: inline-block;
margin-bottom: 20px;
}
h2 {
font-weight: bold;
font-size: 36px;
line-height: 45px;
margin-bottom: 30px;
@media #{$xs} {
font-size: 26px;
line-height: 38px;
}
}
p {
font-size: 16px;
line-height: 28px;
margin-bottom: 40px;
}
.ud-main-btn {
&:hover {
background: #2748b4;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
}
}
.ud-about-image {
@media #{$md, $xs} {
text-align: center;
}
}
+22
View File
@@ -0,0 +1,22 @@
/* ====== Banner CSS ======= */
.ud-page-banner {
padding-top: 130px;
padding-bottom: 80px;
background: var(--primary-color);
background-image: url("../images/banner/banner-bg.svg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.ud-banner-content {
text-align: center;
max-width: 600px;
margin: auto;
h1 {
color: var(--white);
font-size: 38px;
font-weight: 600;
}
}
+502
View File
@@ -0,0 +1,502 @@
/* ====== Blog Details CSS ====== */
.ud-blog-details {
padding-top: 120px;
@media #{$xs} {
padding-top: 80px;
}
}
.ud-blog-details-image {
position: relative;
border-radius: 5px;
overflow: hidden;
height: 500px;
@media #{$xs} {
height: 300px;
}
& > img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
}
.ud-blog-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
background: linear-gradient(
180deg,
rgba(48, 86, 211, 0) 46.88%,
rgba(13, 21, 49, 0.72) 93.23%
);
border-radius: 5px;
padding: 30px;
}
.ud-blog-overlay-content {
display: flex;
align-items: center;
@media #{$xs} {
flex-direction: column;
align-items: flex-start;
}
.ud-blog-author {
display: flex;
align-items: center;
margin-right: 40px;
@media #{$xs} {
margin-right: 0px;
margin-bottom: 20px;
}
img {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
margin-right: 15px;
}
span {
font-weight: 500;
font-size: 14px;
line-height: 28px;
color: #ffffff;
}
a {
color: inherit;
&:hover {
color: var(--primary-color);
}
}
}
.ud-blog-meta {
display: flex;
align-items: center;
p {
display: flex;
align-items: center;
font-weight: 500;
font-size: 14px;
line-height: 28px;
color: #ffffff;
margin-right: 30px;
&:last-child {
margin-right: 0px;
}
i {
font-size: 16px;
margin-right: 10px;
}
}
}
}
.ud-blog-details-content {
padding-top: 60px;
@media #{$desktop, $laptop} {
padding-right: 50px;
}
}
.ud-blog-details-title {
font-weight: 700;
font-size: 35px;
line-height: 50px;
margin-bottom: 35px;
@media #{$xs} {
font-size: 26px;
line-height: 35px;
}
@media #{$sm} {
font-size: 30px;
line-height: 40px;
}
}
.ud-blog-details-para {
font-size: 16px;
line-height: 28px;
margin-bottom: 30px;
}
.ud-blog-details-subtitle {
font-weight: 700;
font-size: 26px;
margin-bottom: 30px;
@media #{$xs} {
font-size: 22px;
margin-bottom: 25px;
}
}
.ud-blog-quote {
background-image: url("../images/blog/quote-bg.svg");
background-repeat: no-repeat;
background-size: cover;
padding: 40px;
text-align: center;
margin-bottom: 40px;
@media #{$xs} {
padding: 30px;
}
i {
font-size: 40px;
font-weight: 700;
color: var(--primary-color);
line-height: 1;
margin-bottom: 20px;
@media #{$xs} {
margin-bottom: 15px;
}
}
p {
font-style: italic;
font-weight: 600;
font-size: 16px;
line-height: 27px;
text-align: center;
color: var(--heading-color);
margin-bottom: 15px;
@media #{$xs} {
font-size: 14px;
line-height: 24px;
}
}
h6 {
color: var(--body-color);
font-style: italic;
font-weight: 500;
font-size: 12px;
line-height: 20px;
text-align: center;
}
}
.ud-blog-details-action {
display: flex;
align-items: center;
justify-content: space-between;
@media #{$xs} {
flex-direction: column;
align-items: flex-start;
}
}
.ud-blog-tags {
display: flex;
align-items: center;
@media #{$xs} {
margin-bottom: 20px;
}
li {
margin-right: 14px;
&:last-child {
margin-right: 0px;
}
}
a {
padding: 8px 16px;
font-size: 12px;
font-weight: 500;
color: var(--primary-color);
background: rgba(48, 86, 211, 0.06);
border-radius: 3px;
&:hover {
background: var(--primary-color);
color: var(--white);
}
}
}
.ud-blog-share {
display: flex;
align-items: center;
h6 {
font-weight: 500;
font-size: 12px;
color: var(--body-color);
margin-right: 20px;
}
}
.ud-blog-share-links {
display: flex;
align-items: center;
li {
margin-right: 14px;
&:last-child {
margin-right: 0px;
}
}
a {
font-size: 18px;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--white);
&.facebook {
background: #4064ac;
&:hover {
background: #315294;
}
}
&.twitter {
background: #1c9cea;
&:hover {
background: #0f8bd8;
}
}
&.linkedin {
background: #007ab9;
&:hover {
background: #03689b;
}
}
}
}
.ud-blog-sidebar {
padding-top: 60px;
}
.ud-newsletter-box {
background: var(--primary-color);
padding: 60px 45px;
position: relative;
z-index: 1;
text-align: center;
border-radius: 5px;
margin-bottom: 50px;
@media #{$lg, $xs} {
padding: 50px 30px;
}
@media #{$sm} {
padding: 60px 45px;
}
.shape {
position: absolute;
z-index: -1;
&.shape-1 {
top: 0;
right: 0;
}
&.shape-2 {
left: 0;
bottom: 0;
}
}
.ud-newsletter-title {
font-weight: 600;
font-size: 25px;
color: var(--white);
margin-bottom: 5px;
@media #{$lg } {
font-size: 23px;
}
}
p {
font-size: 16px;
line-height: 24px;
color: var(--white);
}
.ud-newsletter-form {
margin-top: 30px;
input {
width: 100%;
box-shadow: 0px 4px 42px rgba(0, 0, 0, 0.01);
border-radius: 5px;
background: rgba(255, 255, 255, 0.2);
color: var(--white);
text-align: center;
margin-bottom: 15px;
border: 2px solid transparent;
padding: 12px 20px;
&::placeholder {
color: var(--white);
opacity: 1;
}
&:focus {
border-color: var(--white);
}
}
.ud-main-btn {
background: #13c296;
box-shadow: 0px 4px 42px rgba(0, 0, 0, 0.01);
border-radius: 5px;
width: 100%;
margin-bottom: 24px;
&:hover {
background: var(--heading-color);
}
}
.ud-newsletter-note {
font-weight: 500;
font-size: 14px;
line-height: 22px;
}
}
}
.ud-articles-box {
margin-bottom: 50px;
.ud-articles-box-title {
font-weight: 600;
font-size: 28px;
padding-bottom: 25px;
position: relative;
margin-bottom: 20px;
&::after {
content: "";
position: absolute;
width: 80px;
height: 2px;
background: var(--primary-color);
left: 0;
bottom: 0;
}
}
.ud-articles-list {
li {
padding: 20px 0;
border-bottom: 1px solid #f2f3f8;
display: flex;
align-items: center;
&:last-child {
padding-bottom: 0px;
border-bottom: 0px;
}
}
.ud-article-image {
max-width: 80px;
width: 100%;
height: 80px;
border-radius: 50%;
overflow: hidden;
margin-right: 20px;
@media #{$lg, $xs} {
max-width: 65px;
height: 65px;
}
@media #{$sm} {
max-width: 80px;
height: 80px;
}
img {
width: 100%;
}
}
.ud-article-title {
font-weight: 500;
font-size: 18px;
line-height: 22px;
margin-bottom: 5px;
@media #{$lg} {
font-size: 16px;
}
a {
color: inherit;
&:hover {
color: var(--primary-color);
}
}
}
.ud-article-author {
font-size: 14px;
}
}
}
.ud-banner-ad {
border-radius: 5px;
overflow: hidden;
a {
display: block;
}
img {
width: 100%;
}
}
+97
View File
@@ -0,0 +1,97 @@
/* ====== Blog CSS ====== */
.ud-blog-grids {
padding-top: 120px;
padding-bottom: 80px;
&.ud-related-articles {
padding-top: 100px;
}
@media #{$xs} {
padding-top: 80px;
padding-bottom: 40px;
}
}
.ud-single-blog {
margin-bottom: 40px;
&:hover {
.ud-blog-image {
img {
@include transform(scale(1.1) rotate(3deg));
}
}
}
.ud-blog-image {
border-radius: 4px;
overflow: hidden;
margin-bottom: 30px;
a {
display: block;
}
img {
width: 100%;
@include transition(0.3s);
}
}
.ud-blog-date {
display: inline-flex;
font-size: 12px;
font-weight: 600;
padding: 8px 16px;
background: var(--primary-color);
color: var(--white);
border-radius: 5px;
margin-bottom: 20px;
}
.ud-blog-title {
font-weight: 600;
font-size: 24px;
line-height: 32px;
margin-bottom: 15px;
@media #{$lg} {
font-size: 20px;
line-height: 28px;
}
a {
color: inherit;
&:hover {
color: var(--primary-color);
}
}
}
.ud-blog-desc {
font-size: 16px;
line-height: 28px;
}
}
.ud-related-articles-title {
font-weight: 800;
font-size: 28px;
padding-bottom: 25px;
position: relative;
margin-bottom: 50px;
&::after {
content: "";
position: absolute;
width: 80px;
height: 2px;
background: var(--primary-color);
left: 0;
bottom: 0;
}
}
+179
View File
@@ -0,0 +1,179 @@
/*===========================
COMMON css
===========================*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap");
:root {
--font: "Inter", sans-serif;
--body-color: #637381;
--heading-color: #212b36;
--primary-color: #3056d3;
--white: #ffffff;
}
body {
font-family: var(--font);
font-weight: normal;
font-style: normal;
color: var(--body-color);
overflow-x: hidden;
}
* {
margin: 0;
padding: 0;
@include box-sizing(border-box);
}
img {
max-width: 100%;
}
a,
button,
input,
textarea {
@include transition(0.3s);
}
a,
a:focus,
input:focus,
textarea:focus,
button:focus,
.navbar-toggler:focus {
text-decoration: none;
outline: none;
box-shadow: none;
}
a:focus,
a:hover {
text-decoration: none;
}
i,
span,
a {
display: inline-block;
}
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
color: var(--heading-color);
margin: 0px;
}
h1 {
font-size: 48px;
}
h2 {
font-size: 36px;
}
h3 {
font-size: 28px;
}
h4 {
font-size: 22px;
}
h5 {
font-size: 18px;
}
h6 {
font-size: 16px;
}
ul,
ol {
margin: 0px;
padding: 0px;
list-style-type: none;
}
p {
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: var(--body-color);
margin: 0px;
}
.bg_cover {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
/*===== All Button Style =====*/
.ud-main-btn {
display: inline-block;
text-align: center;
white-space: nowrap;
vertical-align: middle;
font-weight: 500;
font-size: 16px;
border-radius: 5px;
padding: 15px 25px;
border: 1px solid transparent;
color: var(--white);
cursor: pointer;
z-index: 5;
@include transition(0.4s);
background: var(--primary-color);
&:hover {
color: var(--white);
background: var(--heading-color);
}
}
.container {
@media #{$xs} {
padding-left: 40px;
padding-right: 40px;
}
@media #{$sm} {
padding-left: 20px;
padding-right: 20px;
}
}
.back-to-top {
width: 40px;
height: 40px;
line-height: 40px;
background: var(--primary-color);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
text-align: center;
justify-content: center;
align-items: center;
border-radius: 5px;
position: fixed;
right: 30px;
bottom: 30px;
z-index: 99;
color: var(--white);
&:hover {
color: var(--white);
background: var(--heading-color);
}
}
+132
View File
@@ -0,0 +1,132 @@
/* ===== Contact CSS ===== */
.ud-contact {
padding: 120px 0px;
position: relative;
@media #{$xs} {
padding: 80px 0;
}
&::after {
content: "";
position: absolute;
z-index: -1;
width: 100%;
top: 0;
left: 0;
height: 50%;
background: #f3f4fe;
@media #{$lg} {
height: 45%;
}
}
}
.ud-contact-title {
margin-bottom: 150px;
@media #{$md, $xs} {
margin-bottom: 50px;
}
span {
color: var(--heading-color);
font-weight: 600;
font-size: 15px;
margin-bottom: 20px;
}
h2 {
font-weight: 600;
font-size: 35px;
line-height: 41px;
}
}
.ud-contact-info-wrapper {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
@media #{$md, $xs} {
margin-bottom: 50px;
}
.ud-single-info {
display: flex;
max-width: 100%;
width: 330px;
margin-bottom: 30px;
}
.ud-info-icon {
font-size: 32px;
color: var(--primary-color);
margin-right: 24px;
}
.ud-info-meta {
h5 {
font-weight: 600;
font-size: 18px;
margin-bottom: 15px;
}
p {
font-size: 15px;
line-height: 24px;
}
}
}
.ud-contact-form-wrapper {
box-shadow: 0px 4px 28px rgba(0, 0, 0, 0.05);
border-radius: 8px;
background: var(--white);
padding: 60px;
@media #{$xs} {
padding: 40px 30px;
}
@media #{$laptop, $lg, $sm} {
padding: 50px 40px;
}
.ud-contact-form-title {
font-style: normal;
font-weight: 600;
font-size: 28px;
margin-bottom: 30px;
@media #{$xs} {
font-size: 24px;
}
}
.ud-form-group {
margin-bottom: 25px;
label {
display: block;
font-weight: normal;
font-size: 12px;
}
input,
textarea {
display: block;
width: 100%;
padding: 15px 0;
border: none;
outline: none;
border-bottom: 1px solid #f1f1f1;
resize: none;
&:focus {
border-color: var(--primary-color);
}
}
}
}
+31
View File
@@ -0,0 +1,31 @@
/* ======================
DEFAULT CSS
========================= */
// Margin-top
@for $i from 1 through 45 {
.mt-#{5 * $i} {
margin-top: 5px * $i;
}
}
// Margin-bottom
@for $i from 1 through 45 {
.mb-#{5 * $i} {
margin-bottom: 5px * $i;
}
}
// Padding-top
@for $i from 1 through 45 {
.pt-#{5 * $i} {
padding-top: 5px * $i;
}
}
// Padding-bottom
@for $i from 1 through 45 {
.pb-#{5 * $i} {
padding-bottom: 5px * $i;
}
}
+81
View File
@@ -0,0 +1,81 @@
/* ===== FAQ CSS ===== */
.ud-faq {
padding-top: 120px;
padding-bottom: 90px;
background: #f3f4fe;
position: relative;
z-index: 1;
@media #{$xs } {
padding-top: 80px;
padding-bottom: 50px;
}
.shape {
position: absolute;
z-index: -1;
left: 0;
bottom: 0;
}
}
.ud-single-faq {
background: var(--white);
border: 1px solid #f3f4fe;
box-shadow: 0px 20px 95px rgba(201, 203, 204, 0.3);
border-radius: 10px;
margin-bottom: 30px;
.ud-faq-btn {
text-align: left;
display: flex;
width: 100%;
align-items: center;
border: none;
background: transparent;
font-weight: 600;
font-size: 18px;
color: var(--heading-color);
opacity: 0.88;
padding: 30px;
@media #{$lg, $xs} {
padding: 15px;
}
&.collapsed {
span.icon i {
@include transform(rotate(0deg));
}
}
span.icon {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
background: rgba(48, 86, 211, 0.06);
border-radius: 10px;
color: var(--primary-color);
margin-right: 24px;
i {
@include transform(rotate(180deg));
transition: all 0.3s;
font-size: 14px;
font-weight: 700;
}
}
}
.ud-faq-body {
padding: 0px 30px 40px 95px;
@media #{$lg, $xs} {
padding: 0px 16px 20px 82px;
}
}
}
+110
View File
@@ -0,0 +1,110 @@
/* ===== Features CSS ===== */
.ud-features {
padding-top: 120px;
padding-bottom: 90px;
@media #{$xs} {
padding-top: 80px;
padding-bottom: 40px;
}
}
.ud-section-title {
max-width: 620px;
margin-bottom: 70px;
span {
font-weight: 600;
font-size: 18px;
color: var(--primary-color);
margin-bottom: 10px;
}
h2 {
font-weight: 700;
font-size: 42px;
line-height: 55px;
text-transform: capitalize;
color: var(--heading-color);
margin-bottom: 20px;
}
p {
font-size: 20px;
line-height: 30px;
@media #{$xs} {
font-size: 16px;
line-height: 26px;
}
}
}
.ud-single-feature {
margin-bottom: 40px;
&:hover {
.ud-feature-icon::before {
@include transform(rotate(45deg));
}
}
.ud-feature-icon {
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: var(--primary-color);
font-size: 32px;
color: var(--white);
position: relative;
z-index: 1;
text-align: center;
margin-bottom: 40px;
&::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 14px;
background: var(--primary-color);
opacity: 0.2;
z-index: -1;
@include transform(rotate(23deg));
@include transition(0.3s);
}
}
.ud-feature-title {
font-weight: 700;
font-size: 20px;
line-height: 28px;
margin-bottom: 12px;
@media #{$lg} {
font-size: 18px;
line-height: 26px;
}
}
.ud-feature-desc {
font-size: 16px;
line-height: 24px;
margin-bottom: 40px;
}
.ud-feature-link {
font-weight: 500;
color: var(--body-color);
&:hover {
color: var(--primary-color);
}
}
}
+155
View File
@@ -0,0 +1,155 @@
/* ===== Footer CSS ===== */
.ud-footer {
background: var(--heading-color);
padding-top: 100px;
position: relative;
z-index: 1;
overflow: hidden;
.shape {
position: absolute;
z-index: -1;
&.shape-1 {
top: 0;
left: 0;
}
&.shape-2 {
top: 0;
right: 0;
}
&.shape-3 {
bottom: 0;
right: 0;
}
}
}
.ud-widget {
margin-bottom: 50px;
.ud-footer-logo {
max-width: 160px;
display: block;
margin-bottom: 10px;
img {
width: 100%;
}
}
.ud-widget-desc {
font-size: 15px;
line-height: 24px;
color: #f3f4fe;
margin-bottom: 30px;
max-width: 260px;
}
.ud-widget-socials {
display: flex;
align-items: center;
a {
font-size: 16px;
color: #dddddd;
margin-right: 20px;
&:hover {
color: var(--primary-color);
}
}
}
.ud-widget-title {
font-weight: 600;
font-size: 18px;
margin-bottom: 35px;
color: var(--white);
}
.ud-widget-links {
a {
display: inline-block;
margin-bottom: 12px;
font-size: 15px;
line-height: 30px;
color: #f3f4fe;
&:hover {
color: var(--primary-color);
padding-left: 10px;
}
}
}
.ud-widget-brands {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
a {
display: block;
max-width: 120px;
margin-bottom: 20px;
margin-right: 20px;
@media #{$laptop} {
max-width: 100px;
}
}
}
}
.ud-footer-bottom {
padding: 35px 0;
border-top: 1px solid rgba(136, 144, 164, 0.43);
.ud-footer-bottom-left {
display: flex;
align-items: center;
@media #{$xs} {
justify-content: center;
}
a {
font-weight: normal;
font-size: 15px;
color: #f3f4fe;
margin-right: 30px;
display: inline-block;
@media #{$xs} {
margin: 0px 8px 8px;
}
&:hover {
color: var(--primary-color);
}
}
}
.ud-footer-bottom-right {
text-align: right;
font-weight: normal;
font-size: 15px;
color: #f3f4fe;
a {
color: var(--primary-color);
&:hover {
text-decoration: underline;
}
}
@media #{$xs} {
text-align: center;
margin-top: 10px;
}
}
}
+297
View File
@@ -0,0 +1,297 @@
/* ===== Header CSS ===== */
.ud-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 99;
@include transition(0.3s);
}
.sticky {
position: fixed;
z-index: 99;
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(5px);
@include box-shadow(inset 0 -1px 0 0 rgba(0, 0, 0, 0.1));
@include transition(0.3s);
& .navbar {
padding: 0;
}
}
.navbar {
padding: 0px 0;
border-radius: 5px;
position: relative;
@include transition(0.3s);
}
.navbar-brand {
padding: 0;
@media #{$md, $xs} {
padding: 5px 0px;
}
img {
max-width: 160px;
}
}
.navbar-toggler {
padding: 0;
& .toggler-icon {
width: 30px;
height: 2px;
background-color: var(--white);
display: block;
margin: 5px 0;
position: relative;
@include transition(0.3s);
}
&.active {
& .toggler-icon {
&:nth-of-type(1) {
@include transform(rotate(45deg));
top: 7px;
}
&:nth-of-type(2) {
opacity: 0;
}
&:nth-of-type(3) {
@include transform(rotate(135deg));
top: -7px;
}
}
}
}
.navbar-collapse {
@media #{$md, $xs} {
position: absolute;
top: 100%;
right: 0;
max-width: 300px;
width: 100%;
background-color: var(--white);
z-index: 9;
@include box-shadow(0px 15px 20px 0px rgba(0, 0, 0, 0.1));
padding: 0px;
display: none;
border-radius: 5px;
&.show {
display: block;
}
}
}
.navbar-nav {
@media #{$md, $xs} {
padding: 20px 30px;
}
& .nav-item {
position: relative;
padding: 0px 20px;
@media #{$lg} {
padding: 0px 12px;
}
@media #{$md, $xs} {
padding: 0px;
}
& > a {
font-size: 16px;
font-weight: 400;
color: var(--white);
@include transition(0.3s);
padding: 25px 8px;
position: relative;
@media #{$md, $xs} {
display: block;
padding: 8px 0;
color: var(--heading-color);
}
&:hover,
&.active {
color: var(--white);
opacity: 0.5;
@media #{$md, $xs} {
color: var(--primary-color);
opacity: 1;
}
}
}
.ud-submenu {
position: absolute;
width: 250px;
background: var(--white);
top: 110%;
padding: 20px 30px;
box-shadow: 0 15px 44px rgba(140, 140, 140, 0.18);
border-radius: 5px;
opacity: 0;
visibility: hidden;
@include transition(0.3s);
@media #{$md, $xs} {
position: static;
box-shadow: none;
width: 100%;
padding: 0px;
opacity: 1;
visibility: visible;
display: none;
}
&.show {
display: block;
}
.ud-submenu-link {
padding: 7px 0;
color: var(--heading-color);
font-size: 14px;
&:hover {
color: var(--primary-color);
}
}
}
&:hover {
& > a {
color: var(--white);
opacity: 0.5;
@media #{$md, $xs} {
color: var(--primary-color);
opacity: 1;
}
}
& > .ud-submenu {
opacity: 1;
visibility: visible;
top: 100%;
}
}
&.nav-item-has-children {
& > a {
position: relative;
&::after {
content: "";
box-sizing: border-box;
position: absolute;
width: 10px;
height: 10px;
border-bottom: 2px solid;
border-right: 2px solid;
transform: rotate(45deg) translateY(-50%);
right: -15px;
top: 50%;
margin-top: -2px;
@media #{$md, $xs} {
right: 5px;
}
}
}
}
}
}
.navbar-btn {
@media #{$md, $xs} {
position: absolute;
top: 50%;
right: 50px;
@include transform(translateY(-50%));
}
.ud-main-btn {
padding: 8px 16px;
background: transparent;
}
.ud-login-btn {
&:hover {
opacity: 0.5;
}
}
.ud-white-btn {
background: rgba(255, 255, 255, 0.2);
&:hover {
background: rgba(255, 255, 255, 1);
color: var(--heading-color);
}
}
}
.sticky {
& .navbar-toggler {
& .toggler-icon {
background-color: var(--heading-color);
}
}
& .navbar-nav {
& .nav-item {
&:hover {
& > a {
color: var(--primary-color);
opacity: 1;
}
}
& a {
color: var(--heading-color);
&.active,
&:hover {
color: var(--primary-color);
opacity: 1;
}
}
}
}
.navbar-btn {
.ud-main-btn {
&.ud-login-btn {
color: var(--heading-color);
&:hover {
color: var(--primary-color);
opacity: 1;
}
}
}
.ud-white-btn {
background: var(--primary-color);
color: var(--white);
&:hover {
background: var(--heading-color);
}
}
}
}
+138
View File
@@ -0,0 +1,138 @@
/* ===== Hero CSS ===== */
.ud-hero {
background: var(--primary-color);
padding-top: 180px;
@media #{$md} {
padding-top: 160px;
}
@media #{$xs} {
padding-top: 130px;
}
}
.ud-hero-content {
max-width: 780px;
margin: auto;
margin-bottom: 30px;
.ud-hero-title {
color: var(--white);
font-weight: 700;
font-size: 45px;
line-height: 60px;
text-align: center;
margin-bottom: 30px;
@media #{$md} {
font-size: 38px;
line-height: 50px;
}
@media #{$xs} {
font-size: 26px;
line-height: 38px;
}
}
.ud-hero-desc {
font-weight: normal;
font-size: 20px;
line-height: 35px;
text-align: center;
color: var(--white);
opacity: 0.8;
max-width: 600px;
margin: auto;
margin-bottom: 30px;
@media #{$xs} {
font-size: 16px;
line-height: 30px;
}
}
}
.ud-hero-buttons {
display: flex;
align-items: center;
justify-content: center;
.ud-main-btn {
margin: 8px;
@media #{$xs} {
margin: 5px;
}
}
.ud-main-btn {
@media #{$xs} {
padding: 12px 16px;
}
}
.ud-white-btn {
background: var(--white);
color: var(--heading-color);
&:hover {
box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.2);
background: #fefefe;
color: var(--primary-color);
}
}
.ud-link-btn {
&:hover {
color: var(--white);
background: transparent;
opacity: 0.5;
}
}
}
.ud-hero-brands-wrapper {
text-align: center;
margin-bottom: 40px;
img {
transition: all 0.3s;
opacity: 0.5;
max-width: 250px;
&:hover {
opacity: 1;
}
}
}
.ud-hero-image {
max-width: 845px;
margin: auto;
text-align: center;
position: relative;
z-index: 1;
img {
max-width: 100%;
text-align: center;
}
.shape {
position: absolute;
z-index: -1;
&.shape-1 {
bottom: 0;
left: -30px;
}
&.shape-2 {
top: -20px;
right: -20px;
}
}
}
+110
View File
@@ -0,0 +1,110 @@
/* ====== Login CSS ====== */
.ud-login {
padding-top: 80px;
padding-bottom: 80px;
}
.ud-login-wrapper {
max-width: 500px;
margin: auto;
background: var(--white);
text-align: center;
padding: 60px;
box-shadow: 0px 10px 35px rgba(0, 0, 0, 0.05);
.ud-login-logo {
margin-bottom: 30px;
}
}
.ud-login-form {
.ud-form-group {
margin-bottom: 25px;
input {
width: 100%;
border: 2px solid #dddddd;
border-radius: 4px;
padding: 12px 24px;
background: #fcfdfe;
color: var(--body-color);
&:focus {
border-color: var(--primary-color);
}
}
}
}
.ud-socials-connect {
padding-top: 10px;
padding-bottom: 30px;
p {
font-size: 16px;
color: var(--body-color);
margin-bottom: 10px;
}
ul {
display: flex;
align-items: center;
margin-left: -10px;
margin-right: -10px;
li {
width: 100%;
a {
height: 45px;
background: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
border-radius: 6px;
color: var(--white);
font-size: 20px;
&.facebook {
background: #4064ac;
&:hover {
background: #315294;
}
}
&.twitter {
background: #1c9cea;
&:hover {
background: #0f8bd8;
}
}
&.google {
background: #d64937;
&:hover {
background: #c53b29;
}
}
}
}
}
}
.forget-pass {
font-size: 16px;
color: var(--body-color);
margin-bottom: 8px;
}
.signup-option {
color: var(--body-color);
font-size: 16px;
a {
color: var(--primary-color);
}
}
+73
View File
@@ -0,0 +1,73 @@
@mixin transition($time) {
-webkit-transition: all $time ease-out 0s;
-moz-transition: all $time ease-out 0s;
-ms-transition: all $time ease-out 0s;
-o-transition: all $time ease-out 0s;
transition: all $time ease-out 0s;
}
@mixin transform($value) {
-webkit-transform: $value;
-moz-transform: $value;
-ms-transform: $value;
-o-transform: $value;
transform: $value;
}
@mixin user-select($value) {
-webkit-user-select: $value;
-moz-user-select: $value;
-ms-user-select: $value;
user-select: $value;
}
@mixin box-sizing($value) {
-webkit-box-sizing: $value;
-moz-box-sizing: $value;
box-sizing: $value;
}
@mixin animation($value) {
-webkit-animation: $value;
-moz-animation: $value;
-o-animation: $value;
animation: $value;
}
@mixin animation-delay($value) {
-webkit-animation-delay: $value;
-moz-animation-delay: $value;
-o-animation-delay: $value;
animation-delay: $value;
}
@mixin box-shadow($value) {
-webkit-box-shadow: $value;
-moz-box-shadow: $value;
box-shadow: $value;
}
// Placeholder Mixins
@mixin placeholder {
&::placeholder { @content; }
&::-moz-placeholder { @content; }
&::-moz-placeholder { @content; }
&::-webkit-input-placeholder { @content; }
}
+122
View File
@@ -0,0 +1,122 @@
/* ===== Pricing CSS ===== */
.ud-pricing {
padding-top: 120px;
padding-bottom: 90px;
@media #{$xs} {
padding-top: 80px;
padding-bottom: 40px;
}
}
.ud-single-pricing {
margin-bottom: 40px;
background: var(--white);
border: 2px solid #d4deff;
border-radius: 8px;
text-align: center;
padding: 45px 30px;
position: relative;
&.active {
background: linear-gradient(180deg, #3056d3 0%, #179bee 100%);
border: none;
padding: 55px 30px;
.ud-pricing-header {
h3,
h4 {
color: var(--white);
}
}
.ud-pricing-body {
li {
color: var(--white);
}
}
}
&.first-item::after,
&.last-item::after {
content: "";
position: absolute;
width: 55px;
height: 55px;
z-index: 1;
}
&.first-item::after {
background: var(--primary-color);
left: -2px;
bottom: -2px;
border-radius: 0px 55px 0px 8px;
}
&.last-item::after {
background: #13c296;
top: -2px;
right: -2px;
border-radius: 0px 8px 0px 55px;
}
.ud-popular-tag {
display: inline-block;
padding: 10px 25px;
background: var(--white);
border-radius: 30px;
color: var(--primary-color);
margin-bottom: 20px;
font-weight: 600;
}
.ud-pricing-header {
h3 {
font-weight: 500;
font-size: 15px;
margin-bottom: 8px;
}
h4 {
font-weight: 600;
font-size: 26px;
color: var(--primary-color);
margin-bottom: 40px;
}
}
.ud-pricing-body {
margin-bottom: 40px;
li {
font-weight: 500;
font-size: 15px;
margin-bottom: 18px;
}
}
.ud-main-btn {
border-radius: 30px;
padding: 15px 40px;
}
.ud-border-btn {
border: 1px solid #d4deff;
color: var(--primary-color);
background: var(--white);
&:hover {
color: var(--white);
border-color: var(--primary-color);
background: var(--primary-color);
}
}
.ud-white-btn {
background: var(--white);
color: var(--heading-color);
&:hover {
color: var(--white);
background: var(--heading-color);
}
}
}
+81
View File
@@ -0,0 +1,81 @@
/* ===== Team CSS ===== */
.ud-team {
padding-top: 120px;
padding-bottom: 80px;
@media #{$xs} {
padding-top: 80px;
padding-bottom: 40px;
}
}
.ud-single-team {
margin-bottom: 40px;
.ud-team-image-wrapper {
width: 170px;
height: 170px;
position: relative;
margin: 0px auto 25px;
}
.ud-team-image {
border-radius: 50%;
img {
width: 100%;
border-radius: 50%;
}
}
.shape {
position: absolute;
z-index: -1;
&.shape-1 {
top: 0;
left: 0;
}
&.shape-2 {
bottom: 0;
right: 0;
}
}
.ud-team-info {
text-align: center;
margin-bottom: 20px;
h5 {
font-weight: 500;
font-size: 18px;
text-transform: capitalize;
margin-bottom: 10px;
}
h6 {
font-weight: 500;
font-size: 12px;
color: var(--body-color);
}
}
.ud-team-socials {
display: flex;
align-items: center;
justify-content: center;
a {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
margin: 0px 10px;
color: #cdced6;
&:hover {
color: var(--primary-color);
}
}
}
}
+106
View File
@@ -0,0 +1,106 @@
/* ===== Testimonials CSS ===== */
.ud-testimonials {
padding-top: 120px;
@media #{$xs} {
padding-top: 80px;
}
}
.ud-single-testimonial {
padding: 30px;
box-shadow: 0px 60px 120px -20px #ebeffd;
background: var(--white);
margin-bottom: 50px;
.ud-testimonial-ratings {
margin-bottom: 10px;
i {
color: #fbb040;
}
}
.ud-testimonial-content {
margin-bottom: 25px;
p {
font-size: 16px;
line-height: 30px;
color: #637381;
}
}
.ud-testimonial-info {
display: flex;
align-items: center;
.ud-testimonial-image {
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
margin-right: 20px;
}
.ud-testimonial-meta {
h4 {
font-weight: 600;
font-size: 14px;
}
p {
font-size: 12px;
color: #969696;
}
}
}
}
.ud-brands {
.ud-title {
margin-bottom: 30px;
h6 {
font-weight: normal;
font-size: 12px;
color: var(--body-color);
display: inline-block;
position: relative;
&::after {
content: "";
position: absolute;
width: 30px;
height: 1px;
background: #afb2b5;
right: -40px;
top: 50%;
}
}
}
.ud-brands-logo {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-right: -40px;
.ud-single-logo {
margin-right: 40px;
margin-bottom: 20px;
max-width: 140px;
&:hover {
img {
filter: none;
}
}
img {
filter: grayscale(1);
@include transition(0.3s);
}
}
}
}
+8
View File
@@ -0,0 +1,8 @@
// Responsive Variables
$xl-desktop: "only screen and (min-width: 1921px)";
$desktop: "only screen and (min-width: 1400px) and (max-width: 1920px)";
$laptop: "only screen and (min-width: 1200px) and (max-width: 1399px)";
$lg: "only screen and (min-width: 992px) and (max-width: 1199px)";
$md: "only screen and (min-width: 768px) and (max-width: 991px)";
$xs: "(max-width: 767px)";
$sm: "only screen and (min-width: 576px) and (max-width: 767px)";
+29
View File
@@ -0,0 +1,29 @@
/* =======
Template Name: Play Bootstrap
Author: UIdeck
Author URI: https://uideck.com/
Support: https://github.com/uideck/
Version: 1.0
======== */
@import "variables";
@import "mixin";
@import "common";
@import "header";
@import "hero";
@import "features";
@import "about";
@import "pricing";
@import "faq";
@import "testimonials";
@import "team";
@import "contact";
@import "footer";
@import "banner";
@import "login";
@import "blog";
@import "blog-details";
@import "404";
// @import "default";