From 13609313d5bf0feb2e4d5722b86fdb59652d0af2 Mon Sep 17 00:00:00 2001
From: hoxhaj <indrit_hoxhaj@hotmail.com>
Date: Mon, 3 May 2021 23:33:44 +0200
Subject: [PATCH] UI changes

---
 .gitignore            |   4 ++
 assets/css/styles.css |  16 +++++-
 guide.html            |  16 +++---
 index.html            | 118 ++++++++++++++++++++++++++++--------------
 4 files changed, 106 insertions(+), 48 deletions(-)

diff --git a/.gitignore b/.gitignore
index 42bba817..060ca50f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,3 +13,7 @@ site/_site/
 coverage
 .ruby-version
 .sass-cache
+/.idea/.gitignore
+/.idea/dogecoin.com.iml
+/.idea/modules.xml
+/.idea/vcs.xml
diff --git a/assets/css/styles.css b/assets/css/styles.css
index 138202d3..e01f3541 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -199,7 +199,21 @@ h1, h2, h3, h4, h5, h6,
   line-height: 3rem;  
   color: #1abc9c; 
   opacity: 1; 
-} 
+}
+.img-holder {
+  margin-top: -100px;
+}
+.portfolio-img{
+  max-width: 150px;
+}
+@media (max-width: 767px) {
+  .porfolio-col {
+    margin-bottom: 100px !important;
+  }
+  .porfolio-col:last-child {
+    margin-bottom: 0px !important;
+  }
+}
 .floating-label-form-group {  
   position: relative; 
   border-bottom: 1px solid #e9ecef; 
diff --git a/guide.html b/guide.html
index 4f449f57..82858472 100644
--- a/guide.html
+++ b/guide.html
@@ -66,16 +66,16 @@
         <div class="container d-flex align-items-center flex-column">
             <div class="row">
                 <div class="col-md-12">
-                    <img class="masthead-avatar mb-1" style="margin-top:-3rem;" src="assets/img/doge.png" alt="" />
+                    <img class="masthead-avatar mb-5" style="margin-top:-3rem;" src="assets/img/doge.png" alt="" />
                     <!-- Masthead Subheading-->
                     <p class="masthead-subheading font-weight-light text-secondary mb-0"><span data-i18n="dgc-getting-started-desc">Getting started with Dogecoin</span> <span data-i18n="dgc-getting-started-is-123">is easy as 1, 2, 3</span></p>
-                    <p data-i18n="dgc-getting-started-choose" class="text-secondary">Please choose your operating system to begin</p>
-                    <div class="btn-holder">
-                     <div class="btn btn-md btn-info wallet-button" data-target="#windows"><span class="fab fa-windows"></span> Windows</div>
-                     <div class="btn btn-md btn-success wallet-button" data-target="#linux"><span class="fab fa-linux"></span> Linux</div>
-                     <div class="btn btn-md btn-secondary wallet-button" data-target="#osx"><span class="fab fa-apple"></span> macOS</div>
-                     <div class="btn btn-md btn-danger wallet-button" data-target="#android"><span class="fab fa-android"></span> Android</div>
-                 </div>
+                    <p data-i18n="dgc-getting-started-choose" class="text-secondary mb-5">Please choose your operating system to begin</p>
+                    <div class="btn-holder d-flex">
+                        <div class="btn btn-md btn-info wallet-button w-100 mr-1" data-target="#windows"><span class="fab fa-windows d-block"></span> Windows</div>
+                        <div class="btn btn-md btn-success wallet-button w-100 mr-1" data-target="#linux"><span class="fab fa-linux d-block"></span> Linux</div>
+                        <div class="btn btn-md btn-secondary wallet-button w-100 mr-1" data-target="#osx"><span class="fab fa-apple d-block"></span> macOS</div>
+                        <div class="btn btn-md btn-danger wallet-button w-100" data-target="#android"><span class="fab fa-android d-block"></span> Android</div>
+                    </div>
              </div>
          </div>
      </div>
diff --git a/index.html b/index.html
index 4e3cb611..701111b4 100755
--- a/index.html
+++ b/index.html
@@ -48,11 +48,16 @@
                 <i class="fas fa-bars"></i>
             </button>
             <div class="collapse navbar-collapse" id="navbarResponsive">
-                <ul class="navbar-nav ml-auto">
+                <ul class="navbar-nav ml-auto align-items-center">
                     <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#wallets">Wallets</a></li>
                     <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#about"><span data-i18n="dgc-what-is-doge">What is dogecoin</span></a></li>
                     <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#start"><span data-i18n="dgc-get-started-now">How to get started</span></a></li>
                     <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="guide.html"><span data-i18n="dgc-guide">Guide</span></a></li>
+                    <li class="nav-item mx-0 mx-lg-1">
+                        <a class="btn btn-outline-light btn-lg rounded-circle" href="https://github.com/dogecoin/dogecoin" target="_blank">
+                            <span class="fab fa-github"></span>
+                        </a>
+                    </li>
                 </ul>
             </div>
         </div>
@@ -70,8 +75,9 @@ <h2 class="text-secondary"><span id="curPrice_DOGE">1 Dogecoin =</span> <div id=
                     <!-- Masthead Subheading-->
                     <p data-i18n="dgc-header-desc" class="masthead-subheading font-weight-light text-secondary mb-0">Dogecoin is an open source peer-to-peer digital currency, favored by Shiba Inus worldwide.</p>
                     <div class="btn-holder mt-4">
-                        <a class="btn btn-secondary btn-lg js-scroll-trigger" href="#start"><span data-i18n="dgc-get-started-now">Get Dogecoin</a>&nbsp;
-                            <a class="btn btn-outline-secondary btn-lg" href="https://github.com/dogecoin/dogecoin" target="_blank"><span class="fab fa-github"></span> <span data-i18n="dgc-wallet-source">View on GitHub</span></a>
+                        <a class="btn btn-secondary btn-lg js-scroll-trigger" href="#start"><span data-i18n="dgc-get-started-now">
+                            Get Dogecoin
+                            </a>
                         </div>
                     </div>
                 </div>
@@ -94,42 +100,76 @@ <h2 data-i18n="dgc-choose-wallet" class="page-section-heading text-center text-u
                     <span data-i18n="dgc-windows-wallet-modal-full-wallet">Dogecoin Core, on the other hand, is a "full" wallet. It syncs by downloading it, providing a solid-working Dogecoin wallet.</span>
                 </p>
                 <!-- Portfolio Grid Items-->
-                <div class="row text-center justify-content-center">
-                    <div class="col-md-6 col-lg-6 mb-5">
-                        <div class="mx-auto">
-                            <div class="img-holder">
-                                <p class="lead">Multidoge</p>
-                                <img style="max-width: 150px;" src="assets/img/multidoge.png">
+                <div class="row text-center" style="margin-top: 100px;">
+                    <div class="col-md-4 col-lg-4 mb-4 porfolio-col">
+                        <div class="card card-body bg-primary h-100">
+                            <div class="img-holder mb-2">
+                                <img class="portfolio-img" src="assets/img/multidoge.png">
                             </div>
+                            <p class="lead">Multidoge</p>
                             <br>
-                            <a href="https://multidoge.org/?dl=win" target="_blank" class="btn btn-md btn-info wallet-button mb-2"><span class="fab fa-windows"></span> <span data-i18n="dgc-wallet-windows"> Windows</span></a>
-                            <br>
-                            <a href="https://multidoge.org/?dl=lin" target="_blank"  class="btn btn-md btn-success wallet-button mb-2"><span class="fab fa-linux"></span> <span data-i18n="dgc-wallet-linux"> Linux</span></a>
-                            <br>
-                            <a href="https://multidoge.org/?dl=osx" target="_blank"  class="btn btn-md btn-secondary wallet-button"><span class="fab fa-apple"></span> <span data-i18n="dgc-wallet-osx"> macOS</span></a>
+                            <a href="https://multidoge.org/?dl=win" target="_blank" class="btn btn-md btn-info wallet-button mb-2">
+                                <span class="fab fa-windows"></span>
+                                <span data-i18n="dgc-wallet-windows"> Windows</span>
+                            </a>
+                            <a href="https://multidoge.org/?dl=lin" target="_blank"  class="btn btn-md btn-success wallet-button mb-2">
+                                <span class="fab fa-linux"></span>
+                                <span data-i18n="dgc-wallet-linux"> Linux</span>
+                            </a>
+                            <a href="https://multidoge.org/?dl=osx" target="_blank"  class="btn btn-md btn-secondary wallet-button mb-2">
+                                <span class="fab fa-apple"></span>
+                                <span data-i18n="dgc-wallet-osx"> macOS</span>
+                            </a>
                         </div>
                     </div>
-                    <div class="col-md-6 col-lg-6 mb-5">
-                        <div class="mx-auto">
-                            <p class="lead">Dogecoin Core</p>
-                            <div class="img-holder">
-                                <img style="max-width: 150px;" src="assets/img/dogecoin-300.png">
+                    <div class="col-md-4 col-lg-4 mb-4 porfolio-col">
+                        <div class="card card-body bg-primary h-100">
+                            <div class="img-holder mb-2">
+                                <img class="portfolio-img" src="assets/img/dogecoin-300.png">
                             </div>
+                            <p class="lead">Dogecoin Core</p>
                             <br>
-                            <a href="https://github.com/dogecoin/dogecoin/releases/download/v1.14.3/dogecoin-1.14.3-win32-setup-unsigned.exe" target="_blank" class="btn btn-md btn-info wallet-button mb-2"><span class="fab fa-windows"></span> <span> Windows 32-bit</span></a>
-                            <a href="https://github.com/dogecoin/dogecoin/releases/download/v1.14.3/dogecoin-1.14.3-win64-setup-unsigned.exe" target="_blank" class="btn btn-md btn-info wallet-button mb-2"><span class="fab fa-windows"></span> <span> Windows 64-bit</span></a>
+                            <div class="d-flex">
+                                <a href="https://github.com/dogecoin/dogecoin/releases/download/v1.14.3/dogecoin-1.14.3-win32-setup-unsigned.exe" target="_blank" class="btn btn-block btn-md btn-info wallet-button mt-0 mr-1">
+                                    <span class="fab fa-windows d-block"></span>
+                                    <span class="d-none d-lg-block">Windows</span>
+                                    <span>32-bit</span>
+                                </a>
+                                <a href="https://github.com/dogecoin/dogecoin/releases/download/v1.14.3/dogecoin-1.14.3-win64-setup-unsigned.exe" target="_blank" class="btn btn-block btn-md btn-info wallet-button mt-0">
+                                    <span class="fab fa-windows d-block"></span>
+                                    <span class="d-none d-lg-block">Windows</span>
+                                    <span>64-bit</span>
+                                </a>
+                            </div>
                             <br>
-                            <a href="https://github.com/dogecoin/dogecoin/releases/download/v1.14.3/dogecoin-1.14.3-i686-pc-linux-gnu.tar.gz" target="_blank"  class="btn btn-md btn-success wallet-button mb-2"><span class="fab fa-linux"></span> <span> Linux 32-bit</span></a>
-                            <a href="https://github.com/dogecoin/dogecoin/releases/download/v1.14.3/dogecoin-1.14.3-x86_64-linux-gnu.tar.gz" target="_blank"  class="btn btn-md btn-success wallet-button mb-2"><span class="fab fa-linux"></span> <span> Linux 64-bit</span></a>
+                            <div class="d-flex">
+                                <a href="https://github.com/dogecoin/dogecoin/releases/download/v1.14.3/dogecoin-1.14.3-i686-pc-linux-gnu.tar.gz" target="_blank"  class="btn btn-block btn-md btn-success wallet-button mt-0 mr-1">
+                                    <span class="fab fa-linux d-block"></span>
+                                    <span class="d-none d-lg-block">Linux</span>
+                                    <span>32-bit</span>
+                                </a>
+                                <a href="https://github.com/dogecoin/dogecoin/releases/download/v1.14.3/dogecoin-1.14.3-x86_64-linux-gnu.tar.gz" target="_blank"  class="btn btn-block btn-md btn-success wallet-button mt-0">
+                                    <span class="fab fa-linux d-block"></span>
+                                    <span class="d-none d-lg-block">Linux</span>
+                                    <span>64-bit</span>
+                                </a>
+                            </div>
                             <br>
-                            <a href="https://github.com/dogecoin/dogecoin/releases/download/v1.14.3/dogecoin-1.14.3-osx.dmg" target="_blank"  class="btn btn-md btn-secondary wallet-button"><span class="fab fa-apple"></span> <span data-i18n="dgc-wallet-osx"> macOS</span></a>
+                            <a href="https://github.com/dogecoin/dogecoin/releases/download/v1.14.3/dogecoin-1.14.3-osx.dmg" target="_blank"  class="btn btn-md btn-secondary wallet-button">
+                                <span class="fab fa-apple"></span>
+                                <span data-i18n="dgc-wallet-osx"> macOS</span>
+                            </a>
                         </div>
                     </div>
-                    <div class="col-md-12 col-lg-12 mb-5">
-                        <div class="mx-auto">
+                    <div class="col-md-4 col-lg-4 mb-4 porfolio-col">
+                        <div class="card card-body bg-primary h-100">
+                            <div class="img-holder mb-2">
+                                <img class="portfolio-img" src="assets/img/multidoge.png">
+                            </div>
                             <p class="lead">Android Wallet</p>
-                            <a href="https://play.google.com/store/apps/details?id=de.langerhans.wallet&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-AC-global-none-all-co-pr-py-PartBadges-Oct1515-1" target="_blank" class="img-holder">
-                                <img style="max-width: 150px;" src="assets/img/google_play.png">
+                            <br>
+                            <a href="https://play.google.com/store/apps/details?id=de.langerhans.wallet&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-AC-global-none-all-co-pr-py-PartBadges-Oct1515-1" target="_blank">
+                                <img style="width: 220px; margin-top: -15px;" class="img-fluid mb-2" src="assets/img/google_play.png">
                             </a>
                         </div>
                     </div>
@@ -146,31 +186,31 @@ <h2 data-i18n="dgc-what-is-doge" class="page-section-heading text-center text-up
                     <div class="divider-custom-icon"><i class="fas fa-angle-down"></i></div>
                     <div class="divider-custom-line"></div>
                 </div>
-                <p data-i18n="dgc-header-desc" class="lead">Dogecoin is a decentralized, peer-to-peer digital currency that enables you to easily send money online. Think of it as "the internet currency."</p>
+                <p data-i18n="dgc-header-desc" class="lead text-center">Dogecoin is a decentralized, peer-to-peer digital currency that enables you to easily send money online. Think of it as "the internet currency."</p>
                 <div class="row">
-                    <div class="col-md-12">
-                     <div class="video-container">
-                        <iframe class="mt-5" src="https://www.youtube-nocookie.com/embed/_KVZmS_UO5I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                    <div class="col-md-12 mb-4">
+                        <div class="video-container">
+                            <iframe class="mt-5" src="https://www.youtube-nocookie.com/embed/_KVZmS_UO5I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                        </div>
                     </div>
-                </div>
-                <div class="col-md-6 mt-4">
+                    <div class="col-md-6 mt-4 mb-5">
                     <!-- About Section Heading-->
                     <h3 data-i18n="dgc-fun-currency" class="text-center text-uppercase text-secondary">The fun and friendly internet currency?</h3>
                     <!-- About Section Content-->
                     <div class="ml-auto"><p data-i18n="dgc-set-apart" class="lead">Dogecoin sets itself apart from other digital currencies with an amazing, vibrant community made up of friendly folks just like you."</p></div>
                     <!-- About Section Button-->
                     <div class="text-center mt-4">
-                        <a class="btn btn-secondary mb-2" target="_blank" href="https://www.reddit.com/r/dogecoin">
+                        <a class="btn btn-secondary w-75 mb-2" target="_blank" href="https://www.reddit.com/r/dogecoin">
                             <i class="fab fa-reddit mr-2"></i>
                             <span data-i18n="dgc-reddit">Join our Community</span>
                         </a>
                         <br>
-                        <a class="btn btn-secondary mb-2" target="_blank" href="https://discord.gg/dogecoin">
+                        <a class="btn btn-secondary w-75 mb-2" target="_blank" href="https://discord.gg/dogecoin">
                             <i class="fab fa-discord mr-2"></i>
                             <span>Discord Community</span>
                         </a>
                         <br>
-                        <a class="btn btn-outline-secondary" target="_blank" href="https://www.reddit.com/r/dogeducation">
+                        <a class="btn btn-outline-secondary w-75" target="_blank" href="https://www.reddit.com/r/dogeducation">
                             <i class="fab fa-reddit mr-2"></i>
                             <span data-i18n="dgc-dogeducation">Learn more</span>
                         </a>
@@ -183,11 +223,11 @@ <h3 data-i18n="dgc-what-with-dog" class="text-center text-uppercase text-seconda
                     <div class="ml-auto"><p data-i18n="dgc-doge-explained" class="lead">"Doge" is our fun, friendly mascot! The Shiba Inu is a Japanese breed of dog that was popularized as an online meme and represents Dogecoin.</p></div>
                     <!-- About Section Button-->
                     <div class="text-center mt-4">
-                        <a class="btn btn-secondary mb-2" href="https://knowyourmeme.com/memes/doge" target="_blank">
+                        <a class="btn btn-secondary w-75 mb-2" href="https://knowyourmeme.com/memes/doge" target="_blank">
                             <span data-i18n="dgc-doge-learn">Learn more about the Meme</span>
                         </a>
                         <br>
-                        <a class="btn btn-outline-secondary" href="https://en.wikipedia.org/wiki/Shiba_Inu" target="_blank">
+                        <a class="btn btn-outline-secondary w-75" href="https://en.wikipedia.org/wiki/Shiba_Inu" target="_blank">
                             <i class="fab fa-wikipedia-w mr-2"></i>
                             <span data-i18n="dgc-shiba-inu">Shiba Inu</span>
                         </a>