diff --git a/pages/index.html b/pages/index.html index a27c0c8..87f7dba 100644 --- a/pages/index.html +++ b/pages/index.html @@ -22,8 +22,26 @@ href="https://fonts.googleapis.com/css?family=Lato|Oxanium|Roboto&display=swap" rel="stylesheet" /> + Webarch - Architects of the Web - + +
+ + +
+ + + diff --git a/pages/index.js b/pages/index.js new file mode 100644 index 0000000..aca0c0e --- /dev/null +++ b/pages/index.js @@ -0,0 +1,21 @@ +var tabs = $('.tabs'); +var selector = $('.tabs').find('a').length; +//var selector = $(".tabs").find(".selector"); +var activeItem = tabs.find('.active'); +var activeWidth = activeItem.innerWidth(); +$(".selector").css({ + "left": activeItem.position.left + "px", + "width": activeWidth + "px" +}); + +$(".tabs").on("click","a",function(e){ + e.preventDefault(); + $('.tabs a').removeClass("active"); + $(this).addClass('active'); + var activeWidth = $(this).innerWidth(); + var itemPos = $(this).position(); + $(".selector").css({ + "left":itemPos.left + "px", + "width": activeWidth + "px" + }); +}); diff --git a/pages/styles.css b/pages/styles.css new file mode 100644 index 0000000..ea7809c --- /dev/null +++ b/pages/styles.css @@ -0,0 +1,76 @@ +@import url('https://fonts.googleapis.com/css?family=Roboto'); + +body{ + +background-color: #1b262c; +} + +h2{ + margin:0; + text-transform: uppercase; +} + +h6{ + margin:0; + color:#777; +} + +.wrapper{ +padding-left: 310px; + text-align:center; + margin:10px auto; + display:flex; + flex-direction:column; + justify-content:center; + align-items:center; + font-family: 'Roboto', sans-serif; +} + +.tabs{ + + font-size:15px; + padding:0; + list-style:none; + background:#dbedf3; + box-shadow:0 5px 20px rgba(0,0,0,0.1); + display:inline-block; + border-radius:50px; + position:relative; +} + +.tabs a{ + text-decoration:none; + color: #000000; + text-transform:uppercase; + padding:10px 40px; + display:inline-block; + position:relative; + z-index:1; + transition-duration:0.6s; +} + +.tabs .active{ + color:#fff; +} + +.tabs a i{ + margin-right:5px; +} + +.tabs .selector{ + height:100%; + display:inline-block; + position:absolute; + left:0; + top:0; + z-index:1; + border-radius:50px; + transition-duration:0.6s; + transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); + + background: #05abe0; + background: -moz-linear-gradient(45deg, #05abe0 0%, #8200f4 100%); + background: -webkit-linear-gradient(45deg, #05abe0 0%,#8200f4 100%); + background: linear-gradient(45deg, #05abe0 0%,#8200f4 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05abe0', endColorstr='#8200f4',GradientType=1 ); +}