Posts

Showing posts from September, 2019

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-right: calc(-0.375em - 1px); } .button:hover, .button.is-hovered {   border-color: #b5b5b5;   color: #3636
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;     color: #fff;     hyphens: none; }   .footer-top .info-section > table > tbody > tr > th {     color: #fff;     font-weight: 600; }   .footer-top .info-section span {     padding-left: 10px; }   .footer-top .store-logos img {     height: 40px;     width: 12
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;         padding: 15px 0;       }       section {         width: 1200px;         height: 200px;         margin: 0 auto;         background: #999;       }       section div {         padding: 65px;       }       section div p {         margin: 0;         font-size: 1.5rem;         text-align: center;         color: navy;       }     </style>     <title>github
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: "Roboto", sans-serif;   list-style: none; } .submenu.sky ul {   padding: 0; } .submenu:hover {   background: yellow; } /*# sourceMappingURL=m
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;           background-size: cover;           background-repeat: no-repeat;           cursor: pointer;         }       }       .video:nth-child(1) .image,       .video:nth-child(5) .image {         position: relative;         .arrow {           height: 100%;           position: absolute;           background: rgba(0, 0, 0, 0.4);           display: flex;           justify-content: center;           align-items: center;           padding: 10px;     
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;   color: #fff;   display: inline-block;   padding: 15px 25px; } .box {   background: black;   width: 200px;   height: 200px;   transition: all 0.6s ease-in-out;   animation: moveRight .1s
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:       if ($(".box").hasClass("three")) {      
Post a Comment
Read more

Day 340

Finished the second project of this course.  Some things I am not getting though... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** * {   box-sizing: border-box; } .container {   max-width: 800px;   margin: 50px auto;   .menu {     background: black;     color: white;     padding: 0;     margin: 0 auto;     cursor: pointer;     .main {       border: 1px solid #000;     }     li {       border: 1px solid #000;       display: inline-block;       list-style: none;       padding: 20px;       margin: 0 -3px;       position: relative;       transition: all 0.3s ease-in-out;       &:hover {         & > ul.first {           visibility: visible;           opacity: 1;         }       }       ul.first {         background: red;         position: absolute;         top: 56px;         left: -1px;         width: 114px;         visibility: hidden;         opacity: 0;         transition: all 0.3s ease-in-out;         li {           display: block;           &:hover {      
Post a Comment
Read more

Day 339

Some days I just want to quit... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** * {   box-sizing: border-box; } .container {   max-width: 800px;   margin: 50px auto;   .menu {     background: black;     color: white;     padding: 0;     margin: 0 auto;     .main {       border: 1px solid #000;     }     li {       border: 1px solid #000;       display: inline-block;       list-style: none;       padding: 20px;       margin: 0 -3px;       position: relative;       ul.first {         background: red;         position: absolute;         top: 56px;         left: -1px;         width: 114px;         // display: block;         li {           display: block;           ul.second {             background: blue;             position: absolute;             top: -1px;             left: 121px;             width: 120px;             // display: block;             li {               display: block;               ul.third {                 background: green;                 position
Post a Comment
Read more

Day 338

Back to the CSS Animations course. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <button>Click Me</button> ********** * {   box-sizing: border-box; } button {   margin: 10px;   background: lightgrey;   color: darkgreen;   transition: all .2s ease;   &:hover {     background: red;     color: white;   } }
Post a Comment
Read more

Day 337

A day in the JS world and I am lost... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <script>   const secondHand = document.querySelector('.second-hand');   const minsHand = document.querySelector('.min-hand');   const hourHand = document.querySelector('.hour-hand');   function setDate() {     const now = new Date();     const seconds = now.getSeconds();     const secondsDegrees = ((seconds / 60) * 360) + 90;     secondHand.style.transform = `rotate(${secondsDegrees}deg)`;     const mins = now.getMinutes();     const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;     minsHand.style.transform = `rotate(${minsDegrees}deg)`;     const hour = now.getHours();     const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;     hourHand.style.transform = `rotate(${hourDegrees}deg)`;   }   setInterval(setDate, 1000);   setDate(); </script>
Post a Comment
Read more

Day 336

Continuing a 30 day javascript challenge... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** html {   font-size: 10px;   background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center;   background-size: cover; } body,html {   margin: 0;   padding: 0;   font-family: sans-serif; } .keys {   display: flex;   flex: 1;   min-height: 100vh;   align-items: center;   justify-content: center; } .key {   border: .4rem solid black;   border-radius: .5rem;   margin: 1rem;   font-size: 1.5rem;   padding: 1rem .5rem;   transition: all .07s ease;   width: 10rem;   text-align: center;   color: white;   background: rgba(0,0,0,0.4);   text-shadow: 0 0 .5rem black; } .playing {   transform: scale(1.1);   border-color: #ffc600;   box-shadow: 0 0 1rem #ffc600; } kbd {   display: block;   font-size: 4rem; } .sound {   font-size: 1.2rem;   text-transform: uppercase;   letter-spacing: .1rem;   color: #ffc600; }
Post a Comment
Read more

Day 335

Starting a 30 day javascript challenge... Good luck! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** html {   font-size: 10px;   background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center;   background-size: cover; } body,html {   margin: 0;   padding: 0;   font-family: sans-serif; } .keys {   display: flex;   flex: 1;   min-height: 100vh;   align-items: center;   justify-content: center; } .key {   border: .4rem solid black;   border-radius: .5rem;   margin: 1rem;   font-size: 1.5rem;   padding: 1rem .5rem;   transition: all .07s ease;   width: 10rem;   text-align: center;   color: white;   background: rgba(0,0,0,0.4);   text-shadow: 0 0 .5rem black; }
Post a Comment
Read more

Day 334

Finished the CSS Grid course! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <style>     :root {       --yellow: #ffc600;     }     html {       color: #444;       font-family: Cambria, Cochin, Georgia, 'Times New Roman', Times, serif;       font-size: 20px;     }     p {       line-height: 1.8;     }     img {       max-width: 100%;     }     a {       color: black;       text-decoration: underline wavy var(--yellow);     }     h1,     h2 {       font-size: 80px;       font-style: italic;       font-weight: 100;       margin: 0;     }     .post {       display: grid;       max-width: 1000px;       margin: 200px auto;       grid-gap: 10px 50px;       grid-template-columns: 3fr 12fr 5fr;     }     .post>* {       grid-column: 2 / -2;     }     .post>figure {       margin: 0;       grid-column: 1 / -1;     }     figcaption {       font-size: 10px;     }     .post>blockquote {       grid-column: 1 / -1;       font-size: 60px;       font-style: i
Post a Comment
Read more

Day 333

My third and last entry into the responsive CSS Grid realm... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** /* Features! */ .features {   display: grid;   grid-gap: 20px;   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .feature {   background: white;   padding: 10px;   border: 1px solid white;   text-align: center;   box-shadow: 0 0 4px  rgba(0,0,0,0.1); } .feature .icon {   font-size: 50px; } .feature p {   color: rgba(0,0,0,0.5); } /* About Section */ .about {   background: white;   padding:50px;   display: grid;   grid-template-columns: 400px 1fr;   align-items: center; } /* Gallery! */ .gallery {   display: grid;   grid-gap: 20px;   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .gallery img {   width: 100%; } .gallery h2 {   grid-column: 1 / -1;   display: grid;   grid-template-columns: 1fr auto 1fr;   grid-gap: 20px;   align-items: center; } .gallery h2:before, .gallery h2:after {   display: block;   content: '';   height:
Post a Comment
Read more

Day 332

My second entry into the responsive CSS Grid realm... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** .cta {   background: var(--yellow);   display: grid;   align-items: center;   justify-items: center;   align-content: center; } .cta p {   margin: 0; } .cta1 {   grid-area: cta1; } .cta2 {   grid-area: cta2; } .price {   font-size: 60px;   font-weight: 300; } /* Navigation */ .menu ul {   display: grid;   grid-gap: 10px;   padding: 0;   list-style: none;   grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } .menu a {   background: var(--yellow);   display: block;   text-decoration: none;   padding: 10px;   text-align: center;   color: var(--black);   text-transform: uppercase;   font-size: 20px; } [aria-controls="menu-list"] {   display: none; }
Post a Comment
Read more

Day 331

My first entry into the responsive CSS Grid realm... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** body {   font-size: 15px; } button {   background: #ffc600;   border: 0;   padding: 10px 20px; } img {   max-width: 100%; } /* .wrapper */ .wrapper {   display: grid;   grid-gap: 20px; } .top {   display: grid;   grid-gap: 20px;   grid-template-areas:     "hero hero cta1"     "hero hero cta2" } .hero {   grid-area: hero;   min-height: 400px;   background: white url(images/taco.jpg);   background-size: cover;   background-position: bottom right;   padding: 50px;   display: flex;   flex-direction: column;   align-items: start;   justify-content: center; } .hero > * {   background: var(--yellow);   padding: 5px; }
Post a Comment
Read more

Day 330

The last of the codepen build CSS #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** /* Buttons */ .button {   background: var(--grey);   border: 0;   color: white;   padding: 10px;   border-radius:5px;   font-size: 15px;   position: relative; } .button--small {   font-size: 12px;   padding: 4px; } .button--dirty:before {   background: #ffc600;   display: block;   content: '';   height: 2px;   width: calc(100% - 6px);   position: absolute;   left: 3px;   top: 3px; } .settings {   padding: 5px;   background: black;   border-top: 1px solid grey; }
Post a Comment
Read more

Day 329

The next piece of the codepen rebuild... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** .code {   display:grid;   grid-template-columns: repeat(3, 1fr);   background: #1b2b34; } .editor {   display: grid;   grid-template-rows: auto 1fr; } .editor__header {   display: grid;   grid-template-columns: auto 1fr auto;   align-items: center;   padding: 5px;   grid-gap: 5px;   background: rgba(0,0,0,0.1); } .editor__code {   display: grid;   grid-template-columns: auto 1fr; } .editor__number {   display: block;   padding: 0 10px; } .editor__input {   resize: none;   background: none;   border: 0;   color: grey;   font-size: 16px;   line-height: 19px; } /* Pen Header */ .pen {   display: grid;   grid-template-columns: 1fr;   grid-auto-flow: column;   align-items: center;   grid-gap: 10px;   background: black;   border-bottom: 5px solid var(--grey);   color: white;   padding: 10px; } .preview {   display: grid; }
Post a Comment
Read more

Day 328

Starting the project of re-creating codepen. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** :root {   --grey: #343436; } html {   box-sizing: border-box;   font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma,     Sans-Serif;   font-weight: normal;   color: #272727;   text-shadow: 0 2px 0 rgba(0, 0, 0, 0.07); } *, *:before, *:after {   box-sizing: inherit; } body {   margin: 0; } h1, h2, h3, h4, h5, h6 {   font-weight: normal;   margin: 0;   font-size: 1.5em; } .codepen {   display: grid;   grid-template-rows: auto 1fr 1fr auto;   height: 100vh;   color: white; } .codepen >* {   border:1px solid black; }
Post a Comment
Read more

Day 327

How to build an image gallery... #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********   <style>     * {       box-sizing: border-box;     }     body {       padding: 50px;       font-family: sans-serif;       background: linear-gradient(to right, #F93D66, #6D47D9);     }     h1,     h2,     h3,     h4,     h5,     h6 {       margin: 0 0 5px 0;     }     .close {       background: none;       color: black;       border: 0;     }     .gallery {       display: grid;       grid-template-columns: repeat(auto-fill, 100px);       grid-auto-rows: 100px;       grid-auto-flow: dense;     }     .item {       overflow: hidden;       display: grid;       grid-template-columns: 1;       grid-template-rows: 1;     }     .item img {       grid-column: 1 / -1;       grid-row: 1 / -1;       width: 100%;       height: 100%;       object-fit: cover;     }     .item__overlay {       background: #ffc60032;       grid-column: 1 / -1;       grid-row: 1 / -1;       position: relative;     
Post a Comment
Read more

Day 326

Working on implementing CefSharp on a work project. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** using System; using System.Windows.Forms; using CefSharp; using CefSharp.WinForms; namespace testingCEF {     public partial class Form1 : Form     {         public ChromiumWebBrowser chromeBrowser;         public Form1()         {             InitializeComponent();             // At the initialization, start cromium             InitializeChromium();         }         private void Form1_Load(object sender, EventArgs e)         {         }         private void InitializeChromium()         {             CefSettings settings = new CefSettings();             // Initialize ef with the provided settings             Cef.Initialize(settings);             // Create a browser component             // And provide a start web URL             chromeBrowser = new ChromiumWebBrowser("https://ew23.ultipro.com");             // Add the browser to the form             this.Co
Post a Comment
Read more

Day 325

Started the CPdotCOM animation course over... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** * {   box-sizing: border-box; } .parent {   background: yellow;   padding: 100px;   width: 100%;   margin: 0 auto;   transition: all 1s ease-in;   .child {     background: black;     height: 300px;     transition: all 1s ease-out;   } } #btn {   background: lightgray;   padding: 7px 25px;   font-weight: 600;   transition: all .5s ease-in;   &:hover {     background: purple;     color: white;     transition: all .5s ease-in;   } }
Post a Comment
Read more

Day 324

Nesting an album grid... #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********   <style>     .albums {       display: grid;       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));       grid-gap: 20px;     }     .album {       background: rgba(255, 255, 255, 0.2);       box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);       padding: 20px;       display: grid;       grid-template-columns: 150px 1fr;       grid-gap: 10px;       align-items: center;       color: white;       font-weight: 100;     }     .album__artwork {       width: 100%;     }   </style>
Post a Comment
Read more

Day 323

Reordering CSS GRid elements today #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********   <style>     .container {       display: grid;       grid-gap: 20px;       grid-template-columns: repeat(10, 1fr);     }     .logo {       grid-column: span 2;       order: 2;     }     .nav {       grid-column: span 8;       order: 1;     }     .content {       grid-column: 1 / -1;       order: 3;     }   </style>
Post a Comment
Read more

Day 322

CSS Grid centering methods... #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********   <style>     .container {       display: grid;       grid-gap: 20px;       height: 500px;       border: 10px solid var(--yellow);       grid-template-columns: repeat(5, 130px);       /* justify-items: center;       align-items: center; */       place-items: stretch stretch;       justify-content: space-between;       align-content: space-between;     }     .itm {       background: white;     }     .itm5 {       justify-self: center;       align-self: center;     }   </style>
Post a Comment
Read more

Day 321

And today we work on grid-auto-flow: dense #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********   <style>     .container {       display: grid;       grid-gap: 20px;       grid-template-columns: repeat(10, 1fr);       grid-auto-flow: dense;     }     .item:nth-child(6n) {       background: cornflowerblue;       grid-column: span 6;     }     .item:nth-child(8n) {       background: tomato;       grid-column: span 2;     }     .item:nth-child(9n) {       grid-row: span 2;     }     .item18 {       background: greenyellow !important;       grid-column-end: -1 !important;     }   </style>
Post a Comment
Read more

Day 320

Learning how to name CSS Grid lines... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <style>     .container {       display: grid;       grid-gap: 20px;       grid-template-columns: [sidebar-start site-left] 1fr [sidebar-end content-start] 500px [content-end] 1fr [site-right];       grid-template-rows: [content-top] repeat(10, auto) [content-bottom];     }     .item3 {       background: slateblue;       grid-column: content-start;       grid-row: content-top / content-bottom;     }   </style>
Post a Comment
Read more

Day 319

CSS Grid is getting a little less-bad... but not by much #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <style>     .container {       display: grid;       grid-gap: 20px;       grid-template-columns: 1fr 10fr 1fr;       grid-template-rows: 150px 150px 100px;       grid-template-areas:         "sidebar-1  content   sidebar-2"         "sidebar-1  content   sidebar-2"         "footer     footer    footer"     }     .footer {       grid-area: footer;     }     .item1 {       grid-area: sidebar-1;     }     .item2 {       grid-area: content;     }     .item3 {       grid-area: sidebar-2;     }     @media (max-width: 700px) {       .container {         grid-template-areas:           "content    content     content"           "sidebar-1  sidebar-1   sidebar-2"           "footer     footer      footer"       }     }   </style>
Post a Comment
Read more

Day 318

More CSS GRID... I am so confused... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <style>     .container {       display: grid;       grid-gap: 20px;       grid-template-columns: 1fr 10fr 1fr;       grid-template-rows: 150px 150px 100px;       grid-template-areas:         "sidebar-1  content   sidebar-2"         "sidebar-1  content   sidebar-2"         "footer     footer    footer"     }     .footer {       grid-area: footer;     }     .item1 {       grid-area: sidebar-1;     }     .item2 {       grid-area: content;     }     .item3 {       grid-area: sidebar-2;     }     @media (max-width: 700px) {       .container {         grid-template-areas:           "content    content     content"           "sidebar-1  sidebar-1   sidebar-2"           "footer     footer      footer"       }     }   </style>
Post a Comment
Read more