Skip to content

Commit

Permalink
changed bottom ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@pythongiant
pythongiant committed Jun 27, 2018
1 parent 55bb551 commit 42e6e48
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 143 deletions.
85 changes: 31 additions & 54 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,69 +101,46 @@ a {
font-size: 2rem;
}

/* modules/image.css */
ul{
list-style-type: none;

svg {
max-width: 100%;
}

/* modules/navigation.css */

.navigation {
background-color: rgba(255, 255, 255, 1);
border-radius: 0.25rem;
-webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .3);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .3);
ul li {
display: inline;
font-size: 200%;
padding:2vw;

}

.navigation ul {
list-style: none;
margin: 0;
padding: 0;
i{
color:white;
transition: all .2s ease-in-out;
}

.navigation a {
display: block;
padding: 24px;
padding: 1.5rem;
position: relative;
text-decoration: none;
#telegram:hover{

color: #0088cc;
border-radius: 49%;
background-color: white;
transform: scale(1.5);
}

.navigation a:focus::after,
.navigation a:hover::after {
opacity: 1;
}
#gitter:hover{

color: #f4015e;

.navigation a::after {
-webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .3);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .3);
content: '';
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
width: 100%;
transform: scale(1.5);
}

.navigation--inline ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.Telegram:hover svg {
fill: #0088cc
}
.Gitter:hover svg {
fill: #ed1965
}
.Github:hover svg {
fill: #000000
}
.Join:hover svg {
fill: #0078D7
#github:hover{

color: black;
border-radius: 50%;
background-color: white;
transform: scale(1.5);
}

#biz:hover{

color: white;
transform: scale(1.5);
}
95 changes: 6 additions & 89 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Neuton|Oswald'>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Neuton|Oswald'>

<style>
/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
Expand Down Expand Up @@ -42,99 +43,15 @@
<section class="align">
<nav class="navigation navigation--inline">
<ul>
<!--
<li>
<a href="#">
<svg class="icon icon--2x"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#home">
<span class="invisible">Home</span>
</a>
</li>
-->
<li>
<a href="https://t.me/yogdaan" class="Telegram">
<svg class="icon icon--2x"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Telegram">
<span class="invisible">Telegram</span>
</a>
</li>
<li>
<a href="https://gitter.im/yogdaan/Lobby" class="Gitter">
<svg class="icon icon--2x"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Gitter">
<span class="invisible">Gitter</span>
</a>
</li>
<li>
<a href="https://github.com/yogdaan" class="Github">
<svg class="icon icon--2x"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Github">
<span class="invisible">Github</span>
</a>
</li>
<li>
<a href="https://orgmanager.miguelpiedrafita.com/join/38074740" class="Join">
<svg class="icon icon--2x"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Join">
<span class="invisible">Join</span>
</a>
</li>
<li><a href="https://t.me/yogdaan"><i id="telegram" class="fab fa-telegram"></i></a></li>
<li><a href="https://gitter.im/yogdaan/Lobby"><i id="gitter" class="fab fa-gitter"></i></a></i></li>
<li><a href="https://github.com/yogdaan"><i id="github" class="fab fa-github"></i></a></li>
<li><a href="https://orgmanager.miguelpiedrafita.com/join/38074740"><i id="biz" class="fas fa-users"></i></a></li>
</ul>
</nav>
</section>
</section>

<svg xmlns="http://www.w3.org/2000/svg" class="icons">
<symbol id="Github" viewBox="0 0 92 92">

<path stroke="null" id="svg_1" d="m46.5,3c-24.02288,0 -43.5,19.24321 -43.5,42.97757c0,20.13857 14.036,36.98936 32.9585,41.65243c-0.203,-0.5802 -0.3335,-1.25351 -0.3335,-2.08799l0,-7.34558c-1.76537,0 -4.72337,0 -5.4665,0c-2.97613,0 -5.62237,-1.26426 -6.90563,-3.6137c-1.42462,-2.61089 -1.67112,-6.60422 -5.20187,-9.04678c-1.04763,-0.81299 -0.25013,-1.74059 0.957,-1.61524c2.22938,0.62317 4.07813,2.13455 5.81813,4.37655c1.73275,2.24558 2.54837,2.75415 5.7855,2.75415c1.56963,0 3.91862,-0.08954 6.12987,-0.43336c1.189,-2.98336 3.24437,-5.73034 5.7565,-7.02683c-14.4855,-1.47198 -21.39838,-8.59193 -21.39838,-18.2583c0,-4.16166 1.79437,-8.18723 4.843,-11.57887c-1.0005,-3.36658 -2.25838,-10.23224 0.38425,-12.84671c6.51775,0 10.45813,4.17599 11.40425,5.30415c3.248,-1.09951 6.815,-1.72268 10.56325,-1.72268c3.7555,0 7.337,0.62317 10.59225,1.72985c0.93525,-1.121 4.87925,-5.31131 11.4115,-5.31131c2.6535,2.61805 1.38113,9.51237 0.36975,12.87178c3.0305,3.38448 4.814,7.39931 4.814,11.5538c0,9.65921 -6.902,16.77558 -21.36575,18.25472c3.98025,2.05218 6.88388,7.81834 6.88388,12.16265l0,9.79172c0,0.37247 -0.08338,0.64108 -0.12687,0.95983c16.9505,-5.87002 29.12687,-21.77172 29.12687,-40.52427c0,-23.73436 -19.47713,-42.97757 -43.5,-42.97757z"/>
</symbol>
<symbol id="Gitter" viewBox="0 0 384 512"><path d="M66.4 322.5H16V0h50.4v322.5zM166.9 76.1h-50.4V512h50.4V76.1zm100.6 0h-50.4V512h50.4V76.1zM368 76h-50.4v247H368V76z"/>
</symbol>

</symbol>
<symbol id="Telegram" <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm121.8 169.9l-40.7 191.8c-3 13.6-11.1 16.9-22.4 10.5l-62-45.7-29.9 28.8c-3.3 3.3-6.1 6.1-12.5 6.1l4.4-63.1 114.9-103.8c5-4.4-1.1-6.9-7.7-2.5l-142 89.4-61.2-19.1c-13.3-4.2-13.6-13.3 2.8-19.7l239.1-92.2c11.1-4 20.8 2.7 17.2 19.5z"/>


</symbol>
<symbol id="Join" <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M497,421H328.237c-6.213-17.422-22.707-30-42.237-30h-15v-60h90v-45c0-38.39-20.94-71.686-51.78-90
c-15.665,9.302-33.719,15-53.22,15c-19.501,0-37.555-5.698-53.22-15C171.94,214.314,151,247.61,151,286v45h90v60h-15
c-19.53,0-36.024,12.578-42.237,30H15c-8.291,0-15,6.709-15,15c0,8.291,6.709,15,15,15h168.763c6.213,17.422,22.707,30,42.237,30
h60c19.53,0,36.024-12.578,42.237-30H497c8.291,0,15-6.709,15-15C512,427.709,505.291,421,497,421z"/>
</g>
</g>
<g>
<g>
<path d="M256,31c-41.353,0-75,33.647-75,75c0,41.353,33.647,75,75,75c41.353,0,75-33.647,75-75C331,64.647,297.353,31,256,31z"/>
</g>
</g>
<g>
<g>
<path d="M406,31c-41.353,0-75,33.647-75,75c0,41.353,33.647,75,75,75c41.353,0,75-33.647,75-75C481,64.647,447.353,31,406,31z"/>
</g>
</g>
<g>
<g>
<path d="M106,31c-41.353,0-75,33.647-75,75c0,41.353,33.647,75,75,75c41.353,0,75-33.647,75-75C181,64.647,147.353,31,106,31z"/>
</g>
</g>
<g>
<g>
<path d="M106,211c-28.499,0-54.313-11.501-73.251-30C13.217,200.08,0,226.608,0,256v60c0,8.291,6.709,15,15,15h106v-45
c0-33.102,12.147-63.252,32.073-86.658C138.849,206.552,123.005,211,106,211z"/>
</g>
</g>
<g>
<g>
<path d="M479.251,181c-18.939,18.499-44.753,30-73.251,30c-17.005,0-32.849-4.448-47.073-11.658
C378.853,222.748,391,252.898,391,286v45h106c8.291,0,15-6.709,15-15v-60C512,226.608,498.783,200.08,479.251,181z"/>
</g>


</svg>
</symbol>



<!-- Bottom bar -->

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
Expand Down

0 comments on commit 42e6e48

Please sign in to comment.