Index: trunk/www/sites/www/fundraisers/yearend2017/.git/COMMIT_EDITMSG =================================================================== --- trunk/www/sites/www/fundraisers/yearend2017/.git/COMMIT_EDITMSG (revision 1505762) +++ trunk/www/sites/www/fundraisers/yearend2017/.git/COMMIT_EDITMSG (revision 1505763) @@ -1,11 +1,12 @@ -Revert "Comment database related code" +Fix styling for mobile and desktop -This reverts commit 3876ffd2b5b423bce9c06334ee2d85eab6234ada. +Signed-off-by: Lays Rodrigues # Please enter the commit message for your changes. Lines starting # with '#' will be ignored, and an empty message aborts the commit. # # On branch master # Changes to be committed: # modified: index.php +# modified: static/css/styles.css # Index: trunk/www/sites/www/fundraisers/yearend2017/.git/index =================================================================== Cannot display: file marked as a binary type. svn:mime-type = application/octet-stream Index: trunk/www/sites/www/fundraisers/yearend2017/.git/logs/HEAD =================================================================== --- trunk/www/sites/www/fundraisers/yearend2017/.git/logs/HEAD (revision 1505762) +++ trunk/www/sites/www/fundraisers/yearend2017/.git/logs/HEAD (revision 1505763) @@ -1,43 +1,50 @@ 0000000000000000000000000000000000000000 3116420cdf5f9c5efa443049f7073e2945b7c717 Lays Rodrigues 1511665409 -0200 commit (initial): First Commit 3116420cdf5f9c5efa443049f7073e2945b7c717 cea548e2c017cd370770416103df3980e299c00b Lays Rodrigues 1511665681 -0200 commit: Add gitignore cea548e2c017cd370770416103df3980e299c00b 2621f09874ddb529a683edd250826c2e43c5a5ed Lays Rodrigues 1511665746 -0200 commit: Add tox, setup.py and readme 2621f09874ddb529a683edd250826c2e43c5a5ed af60dbb203aa62d14cec5f9ff4c0f17f3120cc84 Lays Rodrigues 1511666234 -0200 commit: Add heroku procfile af60dbb203aa62d14cec5f9ff4c0f17f3120cc84 0e8685a6014a7c916eaad9abe627609f36c7dcf0 Lays Rodrigues 1511666314 -0200 commit: Add gunicorn as dependence 0e8685a6014a7c916eaad9abe627609f36c7dcf0 f17ea2a8a477b8c6e5f020dc640e7d7337d52633 Lays Rodrigues 1511666422 -0200 commit: a f17ea2a8a477b8c6e5f020dc640e7d7337d52633 b688de8aa3d897062f2f78b46aa2de2c509d2cf6 Lays Rodrigues 1511666639 -0200 commit: a b688de8aa3d897062f2f78b46aa2de2c509d2cf6 324aca5672f395ca7d7d50d74a094a25e2f14699 Lays Rodrigues 1511666964 -0200 commit: a 324aca5672f395ca7d7d50d74a094a25e2f14699 a2c5aed063633f88803576a71de693c6dcb3b546 Lays Rodrigues 1511667657 -0200 commit: a a2c5aed063633f88803576a71de693c6dcb3b546 cdbf3d09e2a24f0faf4ae02dc02c537e829b23f1 Lays Rodrigues 1511717650 -0200 commit: a cdbf3d09e2a24f0faf4ae02dc02c537e829b23f1 2c46cbd8a911a7c6d93a82124e52842a29774fcf Lays Rodrigues 1511717756 -0200 commit: a 2c46cbd8a911a7c6d93a82124e52842a29774fcf af60dbb203aa62d14cec5f9ff4c0f17f3120cc84 Lays Rodrigues 1511717994 -0200 rebase -i (start): checkout HEAD~8 af60dbb203aa62d14cec5f9ff4c0f17f3120cc84 32b51a355ed659082a40b2bbddffc9835bea8b40 Lays Rodrigues 1511717994 -0200 rebase -i (squash): # This is a combination of 2 commits. 32b51a355ed659082a40b2bbddffc9835bea8b40 bd6d057d11372eb6c56a7cd573efc49b963ac199 Lays Rodrigues 1511717994 -0200 rebase -i (squash): # This is a combination of 3 commits. bd6d057d11372eb6c56a7cd573efc49b963ac199 59547973b83dd55d1eec7a8eab2b989752dbef26 Lays Rodrigues 1511717994 -0200 rebase -i (squash): # This is a combination of 4 commits. 59547973b83dd55d1eec7a8eab2b989752dbef26 256d73b67e6fb9d1a271dd7e68b4d4e13caab415 Lays Rodrigues 1511717994 -0200 rebase -i (squash): # This is a combination of 5 commits. 256d73b67e6fb9d1a271dd7e68b4d4e13caab415 f2b9d9b1b653c0ce9b48b35f1a3f7fbb8734fcf7 Lays Rodrigues 1511717994 -0200 rebase -i (squash): # This is a combination of 6 commits. f2b9d9b1b653c0ce9b48b35f1a3f7fbb8734fcf7 c04972fb47ab39af97e9fe0ebba1f75561847e29 Lays Rodrigues 1511717994 -0200 rebase -i (squash): # This is a combination of 7 commits. c04972fb47ab39af97e9fe0ebba1f75561847e29 7ee7052092421cd6a686654650e333e16878ed29 Lays Rodrigues 1511717994 -0200 rebase -i (squash): Add heroku procfile 7ee7052092421cd6a686654650e333e16878ed29 7ee7052092421cd6a686654650e333e16878ed29 Lays Rodrigues 1511718007 -0200 rebase -i (finish): returning to refs/heads/master 7ee7052092421cd6a686654650e333e16878ed29 e3ddb54883daa0d1c5595360e3e7fce03af63ca8 Lays Rodrigues 1511724562 -0200 commit: Add __init__.py e3ddb54883daa0d1c5595360e3e7fce03af63ca8 e3ddb54883daa0d1c5595360e3e7fce03af63ca8 Lays Rodrigues 1511727368 -0200 checkout: moving from master to turn_into_php e3ddb54883daa0d1c5595360e3e7fce03af63ca8 ed84c943d1468e582b3aa06a9481ab912bc384f3 Lays Rodrigues 1511727676 -0200 commit: Remove Python files ed84c943d1468e582b3aa06a9481ab912bc384f3 40891068576c8a0c172a73e7f680ed6bdbe82665 Lays Rodrigues 1511727732 -0200 commit: Move index to root of project 40891068576c8a0c172a73e7f680ed6bdbe82665 2046027461571d7166d27a8a13d333c4f3d4e3a8 Lays Rodrigues 1511727747 -0200 commit: Turn html -> php 2046027461571d7166d27a8a13d333c4f3d4e3a8 4bcfbb92cd8c90dc0004dc8823783b1d22c30615 Lays Rodrigues 1511728004 -0200 commit: Add PHP/Paypal Files 4bcfbb92cd8c90dc0004dc8823783b1d22c30615 f01a568292bfc89e58f27b831ec5fb853634e9da Lays Rodrigues 1511728417 -0200 commit: Revert use of python/flask urls for static files f01a568292bfc89e58f27b831ec5fb853634e9da 85589eaa700991f30d6700e48398ae4205957f79 Lays Rodrigues 1511728823 -0200 commit: Add get on db to load the donations 85589eaa700991f30d6700e48398ae4205957f79 6c3a9fdd7a887e1e3fedb45f1ed2b926b93295d3 Lays Rodrigues 1511734055 -0200 commit: Add end-date and update of amount of backers 6c3a9fdd7a887e1e3fedb45f1ed2b926b93295d3 fdf4a44d1b86849310f7aeac681f6ddc93e0ca0c Lays Rodrigues 1511734567 -0200 commit: Remove not used images fdf4a44d1b86849310f7aeac681f6ddc93e0ca0c 6c3a9fdd7a887e1e3fedb45f1ed2b926b93295d3 Lays Rodrigues 1511734578 -0200 reset: moving to HEAD~ 6c3a9fdd7a887e1e3fedb45f1ed2b926b93295d3 c55c9691d6c3c8733515673da5de4211062f617f Lays Rodrigues 1511734585 -0200 commit: Remove not used images c55c9691d6c3c8733515673da5de4211062f617f 3e1b79141c32b7bb972bfb91696eebb368bc8009 Lays Rodrigues 1511734605 -0200 commit: Change order of sections 3e1b79141c32b7bb972bfb91696eebb368bc8009 09bc36947a2f9fb0c3d6eaf2595f6616b25978be Lays Rodrigues 1511735607 -0200 commit: Remove not used images 09bc36947a2f9fb0c3d6eaf2595f6616b25978be b0733b4b62737f9bcd208c8f03088e0b6b0999b2 Lays Rodrigues 1511735644 -0200 commit: Add some kde images b0733b4b62737f9bcd208c8f03088e0b6b0999b2 4d493d68262d27b3634d4aa6eb2f22c948d3484a Lays Rodrigues 1511735649 -0200 commit: Add new images to template and add modal to open video 4d493d68262d27b3634d4aa6eb2f22c948d3484a e3ddb54883daa0d1c5595360e3e7fce03af63ca8 Lays Rodrigues 1511735812 -0200 checkout: moving from turn_into_php to master e3ddb54883daa0d1c5595360e3e7fce03af63ca8 4d493d68262d27b3634d4aa6eb2f22c948d3484a Lays Rodrigues 1511735816 -0200 rebase: checkout turn_into_php 4d493d68262d27b3634d4aa6eb2f22c948d3484a 4d493d68262d27b3634d4aa6eb2f22c948d3484a Lays Rodrigues 1511735816 -0200 rebase finished: returning to refs/heads/master 4d493d68262d27b3634d4aa6eb2f22c948d3484a 0fd4c8cf7a9f04b609a47e5049c9235d07af20c4 Lays Rodrigues 1511735898 -0200 commit: Change structure of project 0fd4c8cf7a9f04b609a47e5049c9235d07af20c4 3876ffd2b5b423bce9c06334ee2d85eab6234ada Lays Rodrigues 1511736724 -0200 commit: Comment database related code 3876ffd2b5b423bce9c06334ee2d85eab6234ada f8e1b504e967d56e6ffdffa622c4c271aabb6c2a Lays Rodrigues 1511736831 -0200 commit: Clean css f8e1b504e967d56e6ffdffa622c4c271aabb6c2a efac3f09570800e1ef52a5f5d0de45e64b6f0e53 Lays Rodrigues 1511832152 -0200 revert: Revert "Comment database related code" +efac3f09570800e1ef52a5f5d0de45e64b6f0e53 a1e0abf859f2f58e42e42f8bb45ca470ac919817 Lays Rodrigues 1512334137 -0200 commit: Add new images and update info +a1e0abf859f2f58e42e42f8bb45ca470ac919817 01d8e6a3e72ba24dbd8888944ee38c19e558eb36 Lays Rodrigues 1512334198 -0200 commit: Fix header spacing too large +01d8e6a3e72ba24dbd8888944ee38c19e558eb36 f84c1dd5c0265d22fdb90adddc59f0f390a17a3d Lays Rodrigues 1512335908 -0200 commit: Fix error with progress bar +f84c1dd5c0265d22fdb90adddc59f0f390a17a3d 86e4c887de805deb25a230a816fccde7fedc46a2 Lays Rodrigues 1512335987 -0200 commit: Remove support us section +86e4c887de805deb25a230a816fccde7fedc46a2 74645039202bf870256e92a7ceae8649a1a1a422 Lays Rodrigues 1512337444 -0200 commit: Fix cards +74645039202bf870256e92a7ceae8649a1a1a422 c4343ae8c23208c690db784184f760b649befcde Lays Rodrigues 1512339110 -0200 commit: Cleaning and fix of styles +c4343ae8c23208c690db784184f760b649befcde 6bef4aa629a77c8833cfe8666e58b6d2f754748c Lays Rodrigues 1512342738 -0200 commit: Fix styling for mobile and desktop Index: trunk/www/sites/www/fundraisers/yearend2017/.git/logs/refs/heads/master =================================================================== --- trunk/www/sites/www/fundraisers/yearend2017/.git/logs/refs/heads/master (revision 1505762) +++ trunk/www/sites/www/fundraisers/yearend2017/.git/logs/refs/heads/master (revision 1505763) @@ -1,18 +1,25 @@ 0000000000000000000000000000000000000000 3116420cdf5f9c5efa443049f7073e2945b7c717 Lays Rodrigues 1511665409 -0200 commit (initial): First Commit 3116420cdf5f9c5efa443049f7073e2945b7c717 cea548e2c017cd370770416103df3980e299c00b Lays Rodrigues 1511665681 -0200 commit: Add gitignore cea548e2c017cd370770416103df3980e299c00b 2621f09874ddb529a683edd250826c2e43c5a5ed Lays Rodrigues 1511665746 -0200 commit: Add tox, setup.py and readme 2621f09874ddb529a683edd250826c2e43c5a5ed af60dbb203aa62d14cec5f9ff4c0f17f3120cc84 Lays Rodrigues 1511666234 -0200 commit: Add heroku procfile af60dbb203aa62d14cec5f9ff4c0f17f3120cc84 0e8685a6014a7c916eaad9abe627609f36c7dcf0 Lays Rodrigues 1511666314 -0200 commit: Add gunicorn as dependence 0e8685a6014a7c916eaad9abe627609f36c7dcf0 f17ea2a8a477b8c6e5f020dc640e7d7337d52633 Lays Rodrigues 1511666422 -0200 commit: a f17ea2a8a477b8c6e5f020dc640e7d7337d52633 b688de8aa3d897062f2f78b46aa2de2c509d2cf6 Lays Rodrigues 1511666639 -0200 commit: a b688de8aa3d897062f2f78b46aa2de2c509d2cf6 324aca5672f395ca7d7d50d74a094a25e2f14699 Lays Rodrigues 1511666964 -0200 commit: a 324aca5672f395ca7d7d50d74a094a25e2f14699 a2c5aed063633f88803576a71de693c6dcb3b546 Lays Rodrigues 1511667657 -0200 commit: a a2c5aed063633f88803576a71de693c6dcb3b546 cdbf3d09e2a24f0faf4ae02dc02c537e829b23f1 Lays Rodrigues 1511717650 -0200 commit: a cdbf3d09e2a24f0faf4ae02dc02c537e829b23f1 2c46cbd8a911a7c6d93a82124e52842a29774fcf Lays Rodrigues 1511717756 -0200 commit: a 2c46cbd8a911a7c6d93a82124e52842a29774fcf 7ee7052092421cd6a686654650e333e16878ed29 Lays Rodrigues 1511718007 -0200 rebase -i (finish): refs/heads/master onto 2621f09874ddb529a683edd250826c2e43c5a5ed 7ee7052092421cd6a686654650e333e16878ed29 e3ddb54883daa0d1c5595360e3e7fce03af63ca8 Lays Rodrigues 1511724562 -0200 commit: Add __init__.py e3ddb54883daa0d1c5595360e3e7fce03af63ca8 4d493d68262d27b3634d4aa6eb2f22c948d3484a Lays Rodrigues 1511735816 -0200 rebase finished: refs/heads/master onto 4d493d68262d27b3634d4aa6eb2f22c948d3484a 4d493d68262d27b3634d4aa6eb2f22c948d3484a 0fd4c8cf7a9f04b609a47e5049c9235d07af20c4 Lays Rodrigues 1511735898 -0200 commit: Change structure of project 0fd4c8cf7a9f04b609a47e5049c9235d07af20c4 3876ffd2b5b423bce9c06334ee2d85eab6234ada Lays Rodrigues 1511736724 -0200 commit: Comment database related code 3876ffd2b5b423bce9c06334ee2d85eab6234ada f8e1b504e967d56e6ffdffa622c4c271aabb6c2a Lays Rodrigues 1511736831 -0200 commit: Clean css f8e1b504e967d56e6ffdffa622c4c271aabb6c2a efac3f09570800e1ef52a5f5d0de45e64b6f0e53 Lays Rodrigues 1511832152 -0200 revert: Revert "Comment database related code" +efac3f09570800e1ef52a5f5d0de45e64b6f0e53 a1e0abf859f2f58e42e42f8bb45ca470ac919817 Lays Rodrigues 1512334137 -0200 commit: Add new images and update info +a1e0abf859f2f58e42e42f8bb45ca470ac919817 01d8e6a3e72ba24dbd8888944ee38c19e558eb36 Lays Rodrigues 1512334198 -0200 commit: Fix header spacing too large +01d8e6a3e72ba24dbd8888944ee38c19e558eb36 f84c1dd5c0265d22fdb90adddc59f0f390a17a3d Lays Rodrigues 1512335908 -0200 commit: Fix error with progress bar +f84c1dd5c0265d22fdb90adddc59f0f390a17a3d 86e4c887de805deb25a230a816fccde7fedc46a2 Lays Rodrigues 1512335987 -0200 commit: Remove support us section +86e4c887de805deb25a230a816fccde7fedc46a2 74645039202bf870256e92a7ceae8649a1a1a422 Lays Rodrigues 1512337444 -0200 commit: Fix cards +74645039202bf870256e92a7ceae8649a1a1a422 c4343ae8c23208c690db784184f760b649befcde Lays Rodrigues 1512339110 -0200 commit: Cleaning and fix of styles +c4343ae8c23208c690db784184f760b649befcde 6bef4aa629a77c8833cfe8666e58b6d2f754748c Lays Rodrigues 1512342738 -0200 commit: Fix styling for mobile and desktop Index: trunk/www/sites/www/fundraisers/yearend2017/.git/refs/heads/master =================================================================== --- trunk/www/sites/www/fundraisers/yearend2017/.git/refs/heads/master (revision 1505762) +++ trunk/www/sites/www/fundraisers/yearend2017/.git/refs/heads/master (revision 1505763) @@ -1 +1 @@ -efac3f09570800e1ef52a5f5d0de45e64b6f0e53 +6bef4aa629a77c8833cfe8666e58b6d2f754748c Index: trunk/www/sites/www/fundraisers/yearend2017/index.php =================================================================== --- trunk/www/sites/www/fundraisers/yearend2017/index.php (revision 1505762) +++ trunk/www/sites/www/fundraisers/yearend2017/index.php (revision 1505763) @@ -1,396 +1,381 @@ KDE - End of Year 2017
-
+

End of Year Fundraising

Help us build a world in which everyone has control over their digital life and enjoys freedom and privacy!

Donate!
-
-
-
-

Status

-
- +
+

Status

+
+ prepare("SELECT *, UNIX_TIMESTAMP(CREATED_AT) AS date_t FROM endofyear2017donations ORDER BY CREATED_AT DESC;") or die ($dbConnection->error); + $stmt = $dbConnection->prepare("SELECT *, UNIX_TIMESTAMP(CREATED_AT) AS date_t FROM endofyear2017donations ORDER BY CREATED_AT DESC;") or die($dbConnection->error); $stmt->execute(); $result = $stmt->get_result(); $stmt->close(); $count = $result->num_rows; ?> -
- -
-
- - - - - - -
90%
-
- -
- -
-
-
- -
Days
-
-
- -
Hours
-
-
- -
Minutes
-
-
- -
Seconds
+ Anonymous donation"; + } + $total += $row["amount"]; + + $table.=""; + $table.="".$n.""; + $table.="".date("jS F Y", $row["date_t"]).""; + $table.="€".number_format($row["amount"], 2).""; + $table.="".$name.""; + $table.=""; + $n--; + } + $table.=""; + mysqli_close($dbConnection); + $goal_fmt=number_format(20000); + $goal=20000; + $percent=round($total * 100 / $goal); + $percent=min($percent, 100); + ?> +
+ +
+
> + + + + + + +
+
+ %
+ of 20.000€ +
+
+
-
+ +
+
+
+ +
Days
+
+
+ +
Hours
+
+
+ +
Minutes
+
+
-
- -
-
-
- ".$count."" ?> -
Backers
+
+ +
+
+
+ ".$count."" ?> +
Backers
+
+
-
-
-
-
- -
+ + -
-
-

2017 Retrospective

-
-
- -
-
-
-
-
-
- - +
+

2017 Retrospective

+
+ +
+
+
+
+
+ +
-

Akademy

-

Click to check out what happened at Akademy this year!

+

Set up of Goals

+

KDE Goals 2018 and Beyond!

 -
-
-
-
- - +
+
+
+
+ +

Randa Meetings

Randa was all about Accessibility

-
-
-
-
- - -
-

Set up of Goals

-

?

- -
-
-
-
-
-
- - +
+
+
+ +
-

Qt World Summit

-

Power Up! With KDE at QtWS 2017

+

Akademy

+

Click to check out what happened at Akademy this year!

 -
-
-
-
- +
+
+
+
+
+
+

Google Summer of Code

Fun, Features, Bugs, Blogs

 -
-
-
-
- - +
+
+
+
+ +
-

KDevelop

-

?

+

Qt World Summit

+

Power Up! With KDE at QtWS 2017

-
-
+
+
+
+
+ + +
+

Randa Meetings

+

Randa was all about Accessibility

+
+ +
+
+
+
-
- -
- -
-
-

List of Donations

-
-
-
- Anonymous donation"; - $total += $row["amount"]; - - $table.=""; - $table.="".$n.""; - $table.="".date("jS F Y", $row["date_t"]).""; - $table.="€".number_format($row["amount"],2).""; - $table.="".$name.""; - $table.=""; - $n--; - } - $table.=""; - mysqli_close($dbConnection); - ?> - - - - - - - - - - - - -
#Date Amount Donor Name
-
- + +
+

List of Donations

+
+
+ + + + + + + + + + + + +
#Date Amount Donor Name
+
+ - -
- Index: trunk/www/sites/www/fundraisers/yearend2017/static/css/progress.css =================================================================== --- trunk/www/sites/www/fundraisers/yearend2017/static/css/progress.css (revision 1505762) +++ trunk/www/sites/www/fundraisers/yearend2017/static/css/progress.css (revision 1505763) @@ -1,149 +1,684 @@ -.progress{ - width: 150px; - height: 150px; - line-height: 150px; - background: none; - margin: 0 auto; - box-shadow: none; - position: relative; -} -.progress:after{ - content: ""; - width: 100%; - height: 100%; - border-radius: 50%; - border: 12px solid #fff; - position: absolute; - top: 0; - left: 0; -} -.progress > span{ - width: 50%; - height: 100%; - overflow: hidden; - position: absolute; - top: 0; - z-index: 1; -} -.progress .progress-left{ - left: 0; -} -.progress .progress-bar{ - width: 100%; - height: 100%; - background: none; - border-width: 12px; - border-style: solid; - position: absolute; - top: 0; -} -.progress .progress-left .progress-bar{ - left: 100%; - border-top-right-radius: 80px; - border-bottom-right-radius: 80px; - border-left: 0; - -webkit-transform-origin: center left; - transform-origin: center left; -} -.progress .progress-right{ - right: 0; -} -.progress .progress-right .progress-bar{ - left: -100%; - border-top-left-radius: 80px; - border-bottom-left-radius: 80px; - border-right: 0; - -webkit-transform-origin: center right; - transform-origin: center right; - animation: loading-1 1.8s linear forwards; -} -.progress .progress-value{ - width: 90%; - height: 90%; - border-radius: 50%; - background: #44484b; - font-size: 24px; - color: #fff; - line-height: 135px; - text-align: center; - position: absolute; - top: 5%; - left: 5%; -} -.progress.blue .progress-bar{ - border-color: rgba(5, 180, 249, .9); -} -.progress.blue .progress-left .progress-bar{ - animation: loading-2 1.5s linear forwards 1.8s; -} -.progress.yellow .progress-bar{ - border-color: #fdba04; -} -.progress.yellow .progress-left .progress-bar{ - animation: loading-3 1s linear forwards 1.8s; -} -.progress.pink .progress-bar{ - border-color: #ed687c; -} -.progress.pink .progress-left .progress-bar{ - animation: loading-4 0.4s linear forwards 1.8s; -} -.progress.green .progress-bar{ - border-color: #1abc9c; -} -.progress.green .progress-left .progress-bar{ - animation: loading-5 1.2s linear forwards 1.8s; -} -@keyframes loading-1{ - 0%{ - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100%{ - -webkit-transform: rotate(180deg); - transform: rotate(180deg); - } -} -@keyframes loading-2{ - 0%{ - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100%{ - -webkit-transform: rotate(144deg); - transform: rotate(144deg); - } -} -@keyframes loading-3{ - 0%{ - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100%{ - -webkit-transform: rotate(90deg); - transform: rotate(90deg); - } -} -@keyframes loading-4{ - 0%{ - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100%{ - -webkit-transform: rotate(36deg); - transform: rotate(36deg); - } -} -@keyframes loading-5{ - 0%{ - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100%{ - -webkit-transform: rotate(126deg); - transform: rotate(126deg); - } +.progress { + width: 150px; + height: 150px; + line-height: 150px; + background: none; + margin: 0 auto; + box-shadow: none; + position: relative; +} +.progress:after { + content: ""; + width: 100%; + height: 100%; + border-radius: 50%; + border: 7px solid #eee; + position: absolute; + top: 0; + left: 0; +} +.progress > span { + width: 50%; + height: 100%; + overflow: hidden; + position: absolute; + top: 0; + z-index: 1; +} +.progress .progress-left { + left: 0; +} +.progress .progress-bar { + width: 100%; + height: 100%; + background: none; + border-width: 7px; + border-style: solid; + position: absolute; + top: 0; + border-color: rgba(5, 180, 249, 0.9); +} +.progress .progress-left .progress-bar { + left: 100%; + border-top-right-radius: 75px; + border-bottom-right-radius: 75px; + border-left: 0; + -webkit-transform-origin: center left; + transform-origin: center left; +} +.progress .progress-right { + right: 0; +} +.progress .progress-right .progress-bar { + left: -100%; + border-top-left-radius: 75px; + border-bottom-left-radius: 75px; + border-right: 0; + -webkit-transform-origin: center right; + transform-origin: center right; +} +.progress .progress-value { + display: flex; + border-radius: 50%; + font-size: 36px; + text-align: center; + line-height: 20px; + align-items: center; + justify-content: center; + height: 100%; + font-weight: 300; +} +.progress .progress-value div { + margin-top: 10px; +} +.progress .progress-value span { + font-size: 12px; + text-transform: uppercase; +} + +/* This for loop creates the necessary css animation names +Due to the split circle of progress-left and progress right, we must use the animations on each side. +*/ +.progress[data-percentage="2"] .progress-right .progress-bar { + animation: loading-1 1.5s linear forwards; +} +.progress[data-percentage="2"] .progress-left .progress-bar { + animation: 0; +} + +.progress[data-percentage="4"] .progress-right .progress-bar { + animation: loading-2 1.5s linear forwards; +} +.progress[data-percentage="4"] .progress-left .progress-bar { + animation: 0; +} + +.progress[data-percentage="6"] .progress-right .progress-bar { + animation: loading-3 1.5s linear forwards; +} +.progress[data-percentage="6"] .progress-left .progress-bar { + animation: 0; +} + +.progress[data-percentage="8"] .progress-right .progress-bar { + animation: loading-4 1.5s linear forwards; +} +.progress[data-percentage="8"] .progress-left .progress-bar { + animation: 0; +} + +.progress[data-percentage="10"] .progress-right .progress-bar { + animation: loading-5 1.5s linear forwards; +} +.progress[data-percentage="10"] .progress-left .progress-bar { + animation: 0; +} + +.progress[data-percentage="12"] .progress-right .progress-bar { + animation: loading-6 1.5s linear forwards; +} +.progress[data-percentage="12"] .progress-left .progress-bar { + animation: 0; +} + +.progress[data-percentage="14"] .progress-right .progress-bar { + animation: loading-7 1.5s linear forwards; +} +.progress[data-percentage="14"] .progress-left .progress-bar { + animation: 0; +} + +.progress[data-percentage="16"] .progress-right .progress-bar { + animation: loading-8 1.5s linear forwards; +} +.progress[data-percentage="16"] .progress-left .progress-bar { + animation: 0; +} + +.progress[data-percentage="18"] .progress-right .progress-bar { + animation: loading-9 1.5s linear forwards; +} +.progress[data-percentage="18"] .progress-left .progress-bar { + animation: 0; +} + +.progress[data-percentage="20"] .progress-right .progress-bar { + animation: loading-10 1.5s linear forwards; +} +.progress[data-percentage="20"] .progress-left .progress-bar { + animation: 0; +} + +.progress[data-percentage="22"] .progress-right .progress-bar { + animation: loading-11 1.5s linear forwards; +} +.progress[data-percentage="22"] .progress-left .progress-bar { + animation: 0; +} + +.progress[data-percentage="24"] .progress-right .progress-bar { + animation: loading-12 1.5s linear forwards; +} +.progress[data-percentage="24"] .progress-left .progress-bar { + animation: 0; +} + +.progress[data-percentage="26"] .progress-right .progress-bar { + animation: loading-13 1.5s linear forwards; +} +.progress[data-percentage="26"] .progress-left .progress-bar { + animation: 0; +} + +.progress[data-percentage="28"] .progress-right .progress-bar { + animation: loading-14 1.5s linear forwards; +} +.progress[data-percentage="28"] .progress-left .progress-bar { + animation: 0; +} + +.progress[data-percentage="30"] .progress-right .progress-bar { + animation: loading-15 1.5s linear forwards; +} +.progress[data-percentage="30"] .progress-left .progress-bar { + animation: 0; +} + +.progress[data-percentage="32"] .progress-right .progress-bar { + animation: loading-16 1.5s linear forwards; +} +.progress[data-percentage="32"] .progress-left .progress-bar { + animation: 0; +} + +.progress[data-percentage="34"] .progress-right .progress-bar { + animation: loading-17 1.5s linear forwards; +} +.progress[data-percentage="34"] .progress-left .progress-bar { + animation: 0; +} + +.progress[data-percentage="36"] .progress-right .progress-bar { + animation: loading-18 1.5s linear forwards; +} +.progress[data-percentage="36"] .progress-left .progress-bar { + animation: 0; +} + +.progress[data-percentage="38"] .progress-right .progress-bar { + animation: loading-19 1.5s linear forwards; +} +.progress[data-percentage="38"] .progress-left .progress-bar { + animation: 0; +} + +.progress[data-percentage="40"] .progress-right .progress-bar { + animation: loading-20 1.5s linear forwards; +} +.progress[data-percentage="40"] .progress-left .progress-bar { + animation: 0; +} + +.progress[data-percentage="42"] .progress-right .progress-bar { + animation: loading-21 1.5s linear forwards; +} +.progress[data-percentage="42"] .progress-left .progress-bar { + animation: 0; +} + +.progress[data-percentage="44"] .progress-right .progress-bar { + animation: loading-22 1.5s linear forwards; +} +.progress[data-percentage="44"] .progress-left .progress-bar { + animation: 0; +} + +.progress[data-percentage="46"] .progress-right .progress-bar { + animation: loading-23 1.5s linear forwards; +} +.progress[data-percentage="46"] .progress-left .progress-bar { + animation: 0; +} + +.progress[data-percentage="48"] .progress-right .progress-bar { + animation: loading-24 1.5s linear forwards; +} +.progress[data-percentage="48"] .progress-left .progress-bar { + animation: 0; +} + +.progress[data-percentage="50"] .progress-right .progress-bar { + animation: loading-25 1.5s linear forwards; +} +.progress[data-percentage="50"] .progress-left .progress-bar { + animation: 0; +} + +.progress[data-percentage="52"] .progress-right .progress-bar { + animation: loading-25 1.5s linear forwards; +} +.progress[data-percentage="52"] .progress-left .progress-bar { + animation: loading-1 1.5s linear forwards 1.5s; +} + +.progress[data-percentage="54"] .progress-right .progress-bar { + animation: loading-25 1.5s linear forwards; +} +.progress[data-percentage="54"] .progress-left .progress-bar { + animation: loading-2 1.5s linear forwards 1.5s; +} + +.progress[data-percentage="56"] .progress-right .progress-bar { + animation: loading-25 1.5s linear forwards; +} +.progress[data-percentage="56"] .progress-left .progress-bar { + animation: loading-3 1.5s linear forwards 1.5s; +} + +.progress[data-percentage="58"] .progress-right .progress-bar { + animation: loading-25 1.5s linear forwards; +} +.progress[data-percentage="58"] .progress-left .progress-bar { + animation: loading-4 1.5s linear forwards 1.5s; +} + +.progress[data-percentage="60"] .progress-right .progress-bar { + animation: loading-25 1.5s linear forwards; +} +.progress[data-percentage="60"] .progress-left .progress-bar { + animation: loading-5 1.5s linear forwards 1.5s; +} + +.progress[data-percentage="62"] .progress-right .progress-bar { + animation: loading-25 1.5s linear forwards; +} +.progress[data-percentage="62"] .progress-left .progress-bar { + animation: loading-6 1.5s linear forwards 1.5s; +} + +.progress[data-percentage="64"] .progress-right .progress-bar { + animation: loading-25 1.5s linear forwards; +} +.progress[data-percentage="64"] .progress-left .progress-bar { + animation: loading-7 1.5s linear forwards 1.5s; +} + +.progress[data-percentage="66"] .progress-right .progress-bar { + animation: loading-25 1.5s linear forwards; +} +.progress[data-percentage="66"] .progress-left .progress-bar { + animation: loading-8 1.5s linear forwards 1.5s; +} + +.progress[data-percentage="68"] .progress-right .progress-bar { + animation: loading-25 1.5s linear forwards; +} +.progress[data-percentage="68"] .progress-left .progress-bar { + animation: loading-9 1.5s linear forwards 1.5s; +} + +.progress[data-percentage="70"] .progress-right .progress-bar { + animation: loading-25 1.5s linear forwards; +} +.progress[data-percentage="70"] .progress-left .progress-bar { + animation: loading-10 1.5s linear forwards 1.5s; +} + +.progress[data-percentage="72"] .progress-right .progress-bar { + animation: loading-25 1.5s linear forwards; +} +.progress[data-percentage="72"] .progress-left .progress-bar { + animation: loading-11 1.5s linear forwards 1.5s; +} + +.progress[data-percentage="74"] .progress-right .progress-bar { + animation: loading-25 1.5s linear forwards; +} +.progress[data-percentage="74"] .progress-left .progress-bar { + animation: loading-12 1.5s linear forwards 1.5s; +} + +.progress[data-percentage="76"] .progress-right .progress-bar { + animation: loading-25 1.5s linear forwards; +} +.progress[data-percentage="76"] .progress-left .progress-bar { + animation: loading-13 1.5s linear forwards 1.5s; +} + +.progress[data-percentage="78"] .progress-right .progress-bar { + animation: loading-25 1.5s linear forwards; +} +.progress[data-percentage="78"] .progress-left .progress-bar { + animation: loading-14 1.5s linear forwards 1.5s; +} + +.progress[data-percentage="80"] .progress-right .progress-bar { + animation: loading-25 1.5s linear forwards; +} +.progress[data-percentage="80"] .progress-left .progress-bar { + animation: loading-15 1.5s linear forwards 1.5s; +} + +.progress[data-percentage="82"] .progress-right .progress-bar { + animation: loading-25 1.5s linear forwards; +} +.progress[data-percentage="82"] .progress-left .progress-bar { + animation: loading-16 1.5s linear forwards 1.5s; +} + +.progress[data-percentage="84"] .progress-right .progress-bar { + animation: loading-25 1.5s linear forwards; +} +.progress[data-percentage="84"] .progress-left .progress-bar { + animation: loading-17 1.5s linear forwards 1.5s; +} + +.progress[data-percentage="86"] .progress-right .progress-bar { + animation: loading-25 1.5s linear forwards; +} +.progress[data-percentage="86"] .progress-left .progress-bar { + animation: loading-18 1.5s linear forwards 1.5s; +} + +.progress[data-percentage="88"] .progress-right .progress-bar { + animation: loading-25 1.5s linear forwards; +} +.progress[data-percentage="88"] .progress-left .progress-bar { + animation: loading-19 1.5s linear forwards 1.5s; +} + +.progress[data-percentage="90"] .progress-right .progress-bar { + animation: loading-25 1.5s linear forwards; +} +.progress[data-percentage="90"] .progress-left .progress-bar { + animation: loading-20 1.5s linear forwards 1.5s; +} + +.progress[data-percentage="92"] .progress-right .progress-bar { + animation: loading-25 1.5s linear forwards; +} +.progress[data-percentage="92"] .progress-left .progress-bar { + animation: loading-21 1.5s linear forwards 1.5s; +} + +.progress[data-percentage="94"] .progress-right .progress-bar { + animation: loading-25 1.5s linear forwards; +} +.progress[data-percentage="94"] .progress-left .progress-bar { + animation: loading-22 1.5s linear forwards 1.5s; +} + +.progress[data-percentage="96"] .progress-right .progress-bar { + animation: loading-25 1.5s linear forwards; +} +.progress[data-percentage="96"] .progress-left .progress-bar { + animation: loading-23 1.5s linear forwards 1.5s; +} + +.progress[data-percentage="98"] .progress-right .progress-bar { + animation: loading-25 1.5s linear forwards; +} +.progress[data-percentage="98"] .progress-left .progress-bar { + animation: loading-24 1.5s linear forwards 1.5s; +} + +.progress[data-percentage="100"] .progress-right .progress-bar { + animation: loading-25 1.5s linear forwards; +} +.progress[data-percentage="100"] .progress-left .progress-bar { + animation: loading-25 1.5s linear forwards 1.5s; +} + +@keyframes loading-1 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(7.2); + transform: rotate(7.2deg); + } +} +@keyframes loading-2 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(14.4); + transform: rotate(14.4deg); + } +} +@keyframes loading-3 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(21.6); + transform: rotate(21.6deg); + } +} +@keyframes loading-4 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(28.8); + transform: rotate(28.8deg); + } +} +@keyframes loading-5 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(36); + transform: rotate(36deg); + } +} +@keyframes loading-6 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(43.2); + transform: rotate(43.2deg); + } +} +@keyframes loading-7 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(50.4); + transform: rotate(50.4deg); + } +} +@keyframes loading-8 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(57.6); + transform: rotate(57.6deg); + } +} +@keyframes loading-9 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(64.8); + transform: rotate(64.8deg); + } +} +@keyframes loading-10 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(72); + transform: rotate(72deg); + } +} +@keyframes loading-11 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(79.2); + transform: rotate(79.2deg); + } +} +@keyframes loading-12 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(86.4); + transform: rotate(86.4deg); + } +} +@keyframes loading-13 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(93.6); + transform: rotate(93.6deg); + } +} +@keyframes loading-14 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(100.8); + transform: rotate(100.8deg); + } +} +@keyframes loading-15 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(108); + transform: rotate(108deg); + } +} +@keyframes loading-16 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(115.2); + transform: rotate(115.2deg); + } +} +@keyframes loading-17 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(122.4); + transform: rotate(122.4deg); + } +} +@keyframes loading-18 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(129.6); + transform: rotate(129.6deg); + } +} +@keyframes loading-19 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(136.8); + transform: rotate(136.8deg); + } +} +@keyframes loading-20 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(144); + transform: rotate(144deg); + } +} +@keyframes loading-21 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(151.2); + transform: rotate(151.2deg); + } +} +@keyframes loading-22 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(158.4); + transform: rotate(158.4deg); + } +} +@keyframes loading-23 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(165.6); + transform: rotate(165.6deg); + } +} +@keyframes loading-24 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(172.8); + transform: rotate(172.8deg); + } +} +@keyframes loading-25 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(180); + transform: rotate(180deg); + } } -@media only screen and (max-width: 990px){ - .progress{ margin-bottom: 20px; } +.progress { + margin-bottom: 1em; } Index: trunk/www/sites/www/fundraisers/yearend2017/static/css/styles.css =================================================================== --- trunk/www/sites/www/fundraisers/yearend2017/static/css/styles.css (revision 1505762) +++ trunk/www/sites/www/fundraisers/yearend2017/static/css/styles.css (revision 1505763) @@ -1,794 +1,792 @@ +.cards{ + padding-bottom: 10px; +} @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url(fonts/Roboto-Regular.ttf); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url(fonts/Roboto-Bold.ttf); } @font-face { font-family: 'Roboto-Light'; font-style: normal; font-weight: 300; src: url(fonts/Roboto-Light.ttf); } @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(../../assets/iconfont/MaterialIcons-Regular.ttf); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; display: inline-block; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; } body{ font-family: "Roboto", sans-serif; line-height: 1.8; } html,body { width: 100%; height: 100%; margin: 0px; padding: 0px; overflow-x: hidden; } a:hover, a:focus{ text-decoration: none; } button:focus{ outline: none; } .main-wrapper{ width: 1600px; margin: 0 auto; } @media (max-width: 1599px) { .main-wrapper{ width:100%; margin: 0 auto; }} @media (min-width: 768px) { .container{ width:600px; margin: 0 auto; }} @media (min-width: 992px) { .container{ width:720px; margin: 0 auto; }} @media (min-width: 1200px) { .container{ width:1400px; margin: 0 auto; }} .header--bg{ -webkit-clip-path: polygon(0 0, 100% 0, 100% 82%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 82%, 0% 100%); background: url("../images/header-background.png") no-repeat; - height: 420px; + /*height: 420px;*/ position: relative; background-size: cover; + padding-bottom: 80px; } .header--bg:after{ content: ''; position: absolute; width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(5, 180, 249, .9); z-index: -1; } .header .navbar{ padding-top: 30px; margin-bottom: 25px; } @media screen and (max-width: 450px) { .header .navbar{ margin-bottom: 150px; } } .header .navbar-brand{ font-size: 26px; font-weight: bold; } .header .nav li a{ font-size: 15px; color: #fff; } .header__content__title{ font-size: 50px; font-weight: bold; color: #fff; - letter-spacing: 13px; + letter-spacing: 5px; margin-bottom: 25px; } .header__content__paragraph{ font-size: 16px; color: #f8f8f8; max-width: 530px; margin-right: auto; margin-left: auto; font-family: Roboto-Light; margin-bottom: 50px; } .header .navbar .navbar-nav > li > a, .header .navbar .navbar-brand, .header .navbar .navbar-nav > li > a:focus{ background-color: transparent; color: #fff; } .navbar-header button{ background-color: #ddd; } .navbar-header .icon-bar{ background-color: #fff !important; } @media screen and (max-width: 768px){ .navbar-collapse{ float: left; } .header .button{ margin-bottom: 10px; } .header .header__content__title{ letter-spacing: 6px; } } .button{ padding: 9px 40px; border-radius: 30px; font-size: 16px; color: #fff; border: 1px solid #fff; display: inline-block; background-color: transparent; position: relative; } .button--donation{ padding: 9px 40px; border-radius: 30px; font-size: 16px; color: rgba(5, 180, 249, .9); border: 1px solid rgba(5, 180, 249, .9); display: inline-block; background-color: transparent; position: relative; } .button--donation:hover{ background-color: rgba(5, 180, 249, .9); color: #fff; -webkit-box-shadow: 2.5px 4.33px 10px 0px rgba(0, 0, 0, 0.13); box-shadow: 2.5px 4.33px 10px 0px rgba(0, 0, 0, 0.13); } .button:after{ content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: inherit; border: inherit; -webkit-filter: drop-shadow(1px 1px 6px rgba(0, 0, 0, 0.77)); filter: drop-shadow(1px 1px 6px rgba(0, 0, 0, 0.77)); } .button--hover:hover{ border: inherit !important; } .button:hover{ background-color: #FFFFFF; color: #00aafe; -webkit-box-shadow: 2.5px 4.33px 10px 0px rgba(0, 0, 0, 0.13); box-shadow: 2.5px 4.33px 10px 0px rgba(0, 0, 0, 0.13); } .button--light{ padding: 9px 35px; border-radius: 30px; font-size: 16px; display: inline-block; background-color: #00AAFE; color: #fff; -webkit-box-shadow: 2.5px 4.33px 10px 0px rgba(0, 0, 0, 0.13); box-shadow: 2.5px 4.33px 10px 0px rgba(0, 0, 0, 0.13); } .button--light:hover{ color: #fff; } .button--margin-right{ margin-right: 15px; } .panel__button{ display: inline-block; font-size: 15px; color: #7d7d7d; padding: 8px 35px; border: 2px solid #7d7d7d; border-radius: 30px; font-family: Roboto-Light; font-weight: bold; } .Ellipse_ { border-radius: 50%; background-color: rgb( 0, 170, 254 ); -webkit-box-shadow: 0px 0px 15px 0px rgb( 0, 170, 254 ); box-shadow: 0px 0px 15px 0px rgb( 0, 170, 254 ); position: absolute; left: 284px; top: 1154px; width: 71px; height: 71px; z-index: 437; } .page-section{ padding-top: 10px; - padding-bottom: 90px; + margin-left: -5px; + /*margin-right:40px;*/ } @media screen and (max-width: 900px){ .page-section{ padding-top: 50px; - padding-bottom: 50px } } .page-section--large{ padding-top: 220px; padding-bottom: 135px; } @media screen and (max-width: 900px){ .page-section--large{ padding-top: 110px; padding-bottom: 80px } + .page-section{ + margin-left: auto; + margin-right: auto; } + } .page-section--small{ padding-top: 50px; padding-bottom: 140px; } .page-section--less-b-padding{ padding-bottom: 80px; } .page-section__title{ font-size: 30px; font-weight: bold; color: #556a87; margin-bottom: 25px; } .page-section__title--white{ font-size: 35px; font-weight: bold; color: #fff; - margin-top: 30px; + /*margin-top: 30px;*/ } -@media screen and (max-width: 670px) { - .page-section__title--white{ - margin-top: 105px; - } - } - -.page-section__title--white--less-margin{ - margin-top: 60px; - } - .page-section__paragraph{ font-size: 16px; color: #7d7d7d; max-width: 590px; margin-right: auto; margin-left: auto; padding-bottom: 70px; } .page-section__paragraph--less-padding{ padding-bottom: 30px; color: #f1f1f1; } .page-section__paragraph--white{ font-size: 18px; color: #f1f1f1; font-family: Roboto-Light; margin-bottom: 50px; } .container--bg{ background-color: rgba(5, 180, 249, .9); height: 130px; position: relative; background-size: cover; margin-bottom: 15px; + position: relative; + top: 50%; + text-align: center; } .container--bg:after{ content: ''; position: absolute; width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(5, 180, 249, .9); z-index: -1; } - +.container--bg h2{ + position: relative; + top: 40%; +} .about--narrow{ max-width: 1230px; margin-right: auto; margin-left: auto; } .about__content-title{ font-size: 20px; color: #4f4f4f; font-weight: bold; line-height: 1.5; margin-top: 0; padding-top: 10px; } .about__content-subTitle{ font-size: 17px; color: #848484; font-family: Roboto-Light; font-weight: bold; margin-top: 25px; margin-bottom: 40px; } .about__content-paragraph{ font-size: 16px; color: #7d7d7d; margin-bottom: 30px; } @media screen and (max-width: 770px) { .about__extra-padding{ padding: 0px 20px; } } .gutters-50.row{ margin-right: -25px; margin-left: -25px; } .gutters-50 > [class^="col-"], .gutters-50 > [class^="col-"]{ padding-right: 25px; - padding-left: 25px; + padding-left: 20px; } .project .thumbnail{ border: 0; padding: 0; -webkit-box-shadow:0px 1.732px 5px 0px rgba(218, 213, 213, 0.42); box-shadow:0px 1.732px 5px 0px rgba(218, 213, 213, 0.42); margin-bottom: 50px; } .project .thumbnail:hover{ -webkit-box-shadow: 2.5px 4.33px 11px 0px rgba(136, 136, 136, 0.24); box-shadow: 2.5px 4.33px 11px 0px rgba(136, 136, 136, 0.24); } .project .thumbnail:hover .project__title{ color: #00aafe; } .project .thumbnail img{ - width: 100%; + width: 90%; + height: 200px; } .project .thumbnail .caption{ padding-left: 15px; } .project__title{ font-size: 16px; color: #4f4f4f; font-weight: bold; } .project__paragraph{ font-size: 16px; color: #7d7d7d; } .slider__image{ margin-right: auto; margin-left: auto; padding-top: 25px; padding-bottom: 15px; display: inline-block; } .slider__paragraph{ font-size: 16px; color: #7e7e7e; max-width: 750px; display: inline-block; } .slider__name{ font-size: 18px; color: #4f4f4f; font-weight: bold; } .slider__title{ font-size: 15px; color: #7e7e7e; padding-bottom: 25px; } .slider .carousel-control.left, .slider .carousel-control.right{ background: none !important; -webkit-filter: progid:none !important; filter: progid:none !important; opacity: 1; } .slider .material-icons{ width: 60px; height: 60px; display: inline-block; color: rgb( 79, 79, 79 ); -webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.08); box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.08); font-size: 22px; line-height: 2.8; border-radius: 50%; text-shadow: none; } .slider #myCarousel .carousel-inner{ max-width: 900px; margin-right: auto; margin-left: auto; } @media screen and (max-width: 1000px){ .slider #myCarousel .carousel-inner{ max-width: 600px } } .slider #myCarousel .left{ margin-left: 30px; } @media screen and (max-width: 1200px){ .slider #myCarousel .left{ margin-left: 0; width: 30px; height: 30px } } .slider #myCarousel .right{ margin-right: 30px; } @media screen and (max-width: 1200px){ .slider #myCarousel .right{ width: 30px; height: 30px } } .slider #myCarousel .item{ -webkit-box-shadow: 0px 0px 16px 0px rgba(86, 77, 77, 0.21); box-shadow: 0px 0px 16px 0px rgba(86, 77, 77, 0.21); margin-top: 10px; margin-bottom: 20px; margin-right: 20px; margin-left: 20px; overflow: hidden; } .slider #myCarousel .carousel-control{ top: 41%; height: 20%; } .footer--bg{ background-color: rgba(5, 180, 249, .9); - height: 250px; + height: 200px; position: relative; } @media screen and (max-width: 1199px) { .footer--bg{ height: auto; } } -@media screen and (max-width: 991px) { - .footer--bg{ - -webkit-clip-path: polygon(0 9%, 100% 0%, 100% 100%, 0 100%); - clip-path: polygon(0 9%, 100% 0%, 100% 100%, 0 100%); - } - } - .footer--bg:after{ content: ''; position: absolute; width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0; background-color: #001F37; z-index: -1; } .footer__title{ font-size: 20px; color: #fff; font-family: Roboto-Light; font-weight: bold; /*margin-bottom: 25px;*/ } .footer ul{ padding-left: 0; } .footer ul li{ list-style-type: none; } .footer ul li a{ font-size: 15px; color: #fff; } .footer__first{ position: relative; left: 20px; } .footer-first__paragraph{ font-size: 15px; color: #cecece; margin-bottom: 20px; } .footer-first__social-icons li{ display: inline-block; padding-right: 15px; } @media screen and (max-width: 991px) { .footer__second{ padding-left: 20px; } } .footer__second ul li{ padding-bottom: 10px; } .footer__third li{ padding-bottom: 10px; } .footer__third .glyphicon-envelope, .footer__third .glyphicon-earphone{ color: #fff; padding-right: 10px; } .footer__third .form-control{ padding: 21px 18px; border-radius: 24px; } @media screen and (max-width: 1199px) { .footer__third{ padding-left: 20px; } } .footer__subscribe__title{ font-size: 17px; color: #fff; margin-bottom: 20px; } .footer .subscribe-section{ position: relative; } .footer .subscribe-section__button{ background-color: transparent; border: 0; position: absolute; top: 8px; right: 15px; } @media screen and (max-width: 991px) { .footer__fourth{ padding-left: 20px; } } .footer__fourth ul{ padding-left: 15px; margin-bottom: 3px; } .footer__fourth ul li{ display: inline-block; } .footer__horizontal-bar{ border-top: 1px solid #123953; max-width: 830px; - margin-top: 40px; + margin-top: 30px; } .footer__bottom-paragraph{ font-size: 15px; color: #fff; text-align: center; } .gutters-100.row{ margin-right: -50px; margin-left: -50px; } .gutters-100 > [class^="col-"], .gutters-100 > [class^="col-"]{ padding-right: 50px; padding-left: 50px; } .footer [class^="flaticon-"]:before, [class*=" flaticon-"]:before{ margin-left: 0; } .flaticon-facebook-letter-logo:hover, .flaticon-twitter-logo:hover, .flaticon-dribbble-logo:hover, .flaticon-behance-logo:hover{ color: #00AAFE; } .subscribe-section input[type="email"]{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 42px; margin-bottom: 30px; padding: 0 20px; } .service .thumbnail{ border: none; -webkit-box-shadow: 0px 0px 5px 0px rgba(168, 157, 157, 0.31); box-shadow: 0px 0px 5px 0px rgba(168, 157, 157, 0.31); padding: 35px 20px; margin-bottom: 60px; } .service .thumbnail:hover{ -webkit-box-shadow: 2px 5.66px 20px 0px rgba(136, 136, 136, 0.2); box-shadow: 2px 5.66px 20px 0px rgba(136, 136, 136, 0.2); } .service .thumbnail:hover .service__title{ color: #00aafe; } .service .thumbnail:hover .material-icons{ background-color: rgb( 0, 170, 254 ); -webkit-box-shadow: 0px 0px 15px 0px rgb( 0, 170, 254 ); box-shadow: 0px 0px 15px 0px rgb( 0, 170, 254 ); color: #fff; } .service__title{ font-size: 22px; font-weight: bold; color: #4f4f4f; margin-top: 25px; margin-bottom: 15px; } .service .material-icons{ width: 70px; height: 70px; border-radius: 50%; background-color: rgb( 235, 248, 255 ); color: rgb( 0, 170, 254 ); font-size: 30px; line-height: 0.933; line-height: 2.3; } .service__paragraph{ font-size: 15px; color: #8a8a8a; } .service .gutters-40.row{ margin-right: -20px; margin-left: -20px; } .service .gutters-40 > [class^="col-"], .service .gutters-40 > [class^="col-"]{ padding-right: 20px; padding-left: 20px; }