Posts

Day 347

Customizing BULMA.IO again for a project. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** .button {   background-color: white;   border-color: #dbdbdb;   border-width: 1px;   color: #363636;   cursor: pointer;   justify-content: center;   padding-bottom: calc(0.375em - 1px);   padding-left: 0.75em;   padding-right: 0.75em;   padding-top: calc(0.375em - 1px);   text-align: center;   white-space: nowrap; } .button strong {   color: inherit; } .button .icon, .button .icon.is-small, .button .icon.is-medium, .button .icon.is-large {   height: 1.5em;   width: 1.5em; } .button .icon:first-child:not(:last-child) {   margin-left: calc(-0.375em - 1px);   margin-right: 0.1875em; } .button .icon:last-child:not(:first-child) {   margin-left: 0.1875em;   margin-right: calc(-0.375em - 1px); } .button .icon:first-child:last-child {   margin-left: calc(-0.375em - 1px);   margin-ri...
Post a Comment
Read more

Day 346

Project day #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** .footer-top {   background: #222d37;   background-color: #222d37;   color: #fff; }   .footer-top > tbody > tr {     vertical-align: middle; }   .footer-top > tbody > tr > th {     padding-top: 30px !important;     padding-bottom: 25px !important;     padding-left: 30px !important;     padding-right: 30px !important; }   .footer-top th {     padding-top: 0px;     padding-bottom: 0px; }   .footer-top .circle-logo {     display: block;     margin: 0 auto; }   .footer-top .call-to-action {     display: block;     font-size: 12px;     color: #fff;     hyphens: none; }   .footer-top .info {     display: block;     font-size: 10px; ...
Post a Comment
Read more

Day 345

Learning to set up GITHUB. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <style>       header {         width: 1200px;         height: 100px;         margin: 0 auto;         background: #555;       }       header h1 {         font-size: 3rem;         color: beige;         text-align: center;         padd...
Post a Comment
Read more

Day 344

Going back to some basic CSS... looking for something I lost. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** * {   -webkit-box-sizing: border-box;           box-sizing: border-box; } .header {   background: red; } .header ul {   padding: 0;   margin: 0; } .header ul li {   font-family: "Roboto", sans-serif;   display: inline-block;   padding: 10px 15px;   list-style: none; } .container {   width: 750px;   margin: 0 auto; } article {   width: 83.33333%;   float: left; } aside {   width: 16.66667%;   display: inline-block;   padding: 1.66667%; } aside img {   width: 100%; } .submenu {   -webkit-transition: background 0.5s ease-in;   transition: background 0.5s ease-in; } .submenu.blue {   background: blue; } .submenu.nav li {   display: inline-block;   padding: 10px 15px;   margin-bottom: 20px;   font-family: "R...
Post a Comment
Read more

Day 343

Workin, Workin, and a-Workin... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #featured {     padding: 10px 0 0 0;     .videos-section {       display: grid;       grid-template-columns: 1fr 2fr 620px 2fr 1fr;       grid-gap: 10px;       .video {         display: flex;         justify-content: center;         align-items: center;         .image {           width: 100%;           height: 300px;           background: url("https://i.ytimg.com/vi/yq1d_NHtwOI/maxresdefault.jpg");           background-position: center;  ...
Post a Comment
Read more

Day 342

First animations exercise... SHAKES! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <div class="parent">   <div class="button">Box has the shakes!</div>   <div class="box"></div> </div> ---------- CSS ---------- * {   box-sizing: border-box; } @keyframes moveRight {   0% {     transform: translate3d(0, 0, 0);   }   20% {     background: darkblue;     transform: translate3d(3px, 0, 0);   }   40% {     transform: translate3d(3px, 3px, 0);   }   60% {     background: darkgreen;     transform: translate3d(0, 3px, 0);   }   80% {     transform: translate3d(0, 0, 0);   }   100% {     transform: translate3d(3px, 3px, 0);   } } .parent {   text-align: center;   padding: 50px; } .button {   border-radius: 3px;   background: red; ...
Post a Comment
Read more

Day 341

Using jquery and classes to control transitions... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <div class="parent">   <div class="button">Click Me</div>   <div class="box"></div> </div> ---------- CSS ---------- * {   box-sizing: border-box; } .parent {   text-align: center;   padding: 50px; } .button {   border-radius: 3px;   background: red;   color: #fff;   display: inline-block;   padding: 15px 25px; } .box {   background: black;   width: 200px;   height: 200px;   transition: all 0.6s ease-in-out;   transform: translate3d(0, 0, 0); } .one {   transform: translate3d(500px, 0, 0); } .two {   transform: translate3d(500px, 500px, 0); } .three {   transform: translate3d(0, 500px, 0); } ---------- JS ---------- var stateLocation = 0; $(document).on("click", ".button", function() {   switch (stateLocation) {     case 0:  ...
Post a Comment
Read more