Posts

Showing posts from August, 2019

Day 317

Working with Wes Boss on CSS GRID today... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <style>     .container {       display: grid;       grid-gap: 20px;       /* Make the grid 10 columns wide, every other taking up twice the free space */       grid-template-columns: repeat(5, 1fr 2fr);       /* Make the grid have 10 explicit rows, 50px high each */       grid-template-rows: repeat(10, 50px);     }     /* With Item 1, start at col 3 and go until 5 */     .item1 {       grid-column: 3 / 5;     }     /* With Item 2, start at col 5 and go until the end */     .item2 {       grid-column: 5 / -1;     }     /* Make Item 5 double span 2 cols and rows */     .item5 {       grid-column: span 2;       grid-row: span 2;     }     /* Make Item 8 two rows high */     .item8 {       grid-row: span 2;     }     /* Make Item 15 span the entire grid width */     .item15 {       grid-column: 1 / -1;     }     /* Make item 18 span 4 widths, but end 9 */     .item18 {      
Post a Comment
Read more

Day 316

Thank you Brad for helping with my CSS Grid journey. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** /* Navigation */ .main-nav ul {   display: grid;   grid-gap: 20px;   padding: 0;   list-style: none;   grid-template-columns: repeat(4, 1fr); } .main-nav a {   background: var(--primary);   display: block;   text-decoration: none;   padding: 0.8rem;   text-align: center;   color: var(--dark);   text-transform: uppercase;   font-size: 1.1rem;   box-shadow: var(--shadow); } .main-nav a:hover {   background: var(--dark);   color: var(--light); }
Post a Comment
Read more

Day 315

Rebuilt the menu with CSS Grid and reduced the code by over 50%. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** header {   position: fixed;   width: 100%;   max-width: 1400px;   z-index: 5;   #header-nav {     display: grid;     grid-auto-flow: column;     grid-gap: 1rem;     padding: 0 1rem;     background: #000;     background-color: #000;     #left-side {       display: grid;       justify-content: start;       align-content: center;       #logo {         a {           img {             margin-top: 3px;             width: 105px;             border: 1px solid gray;             border-radius: 1rem;             &:hover {               -webkit-box-shadow: 1px 0px 57px -10px rgba(147, 247, 136, 1);               -moz-box-shadow: 1px 0px 57px -10px rgba(147, 247, 136, 1);               box-shadow: 1px 0px 57px -10px rgba(147, 247, 136, 1);             }           }         }       }     }     #center,     #right-side {       display: grid;       align-content: cen
Post a Comment
Read more

Day 314

Moved some code over to the about page to start building that one... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <link rel="stylesheet" href="css/main.css" />     <title>CodingPhase ARMY-about</title>   </head>   <body>     <header>       <div class="banner">         <div class="left-side">           <div class="logo">             <a href="index.html">               <img                 src="img/codingphasearmy-logo_white-on-black_small.jpg"                 alt="Logo for CodingPhase-Army"               />             </a>           </div>         </div>         <div class="ce
Post a Comment
Read more

Day 313

I sometimes wonder if I can realy learn how to do this... #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********     .wel-vid {         position: absolute;         top: 25%;         left: 47%;         iframe {           border: 2px solid green;           border-radius: 15px;           -webkit-box-shadow: 2px 4px 25px 1px rgba(0, 255, 0, 0.6);           -moz-box-shadow: 2px 4px 25px 1px rgba(0, 255, 0, 0.6);           box-shadow: 2px 4px 25px 1px rgba(0, 255, 0, 0.6);         }       }
Post a Comment
Read more

Day 312

Stylin!! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** .codingphase-link {         position: fixed;         width: 125px;         top: 8rem;         left: 6rem;         a {           text-decoration: none;           text-align: center;           // color: #fff;         }         img {           width: 125px;           border-radius: 1rem;         }         #first-p,         #second-p {           margin: 0 auto 3px;           font-weight: 600;           animation: blinkingText 5s infinite;         }         @keyframes blinkingText {           0% {             color: transparent;           }           12% {             color: rgb(170, 245, 31);           }           25% {             color: green;           }           37% {             color: rgb(86, 218, 56);           }           50% {             color: green;           }           62% {             color: rgb(170, 245, 31);           }           75% {             color: green;           }           87% {       
Post a Comment
Read more

Day 311

Finished the center menu... And deleted my main page... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** .center {         position: relative;         top: 0.6rem;         left: -5rem;         .center-menu {           #about,           #contact {             display: inline-block;             padding: 0 1rem;           }         }         #about > a,         #contact > a {           padding: 0.5rem 1rem;           border-radius: 0.5rem;           background: #cedce7; /* Old browsers */           background: -moz-radial-gradient(             center,             ellipse cover,             #cedce7 0%,             #596a72 100%           ); /* FF3.6-15 */           background: -webkit-radial-gradient(             center,             ellipse cover,             #cedce7 0%,             #596a72 100%           ); /* Chrome10-25,Safari5.1-6 */           background: radial-gradient(             ellipse at center,             #cedce7 0%,             #596a72 100%           )
Post a Comment
Read more

Day 310

Looking into Bulma.io for a second time... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** * {   margin: 0;   padding: 0; } #cpa-logo-small {   width: 7rem;   height: auto; } .button.is-black-sdc {   color: hsl(141, 71%, 48%); } .button.is-black-sdc:hover, .button.is-black-sdc.is-hovered {   color: hsl(141, 71%, 40%); }
Post a Comment
Read more

Day 309

The beginnings of the center menu... #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********         <div class="center">           <ul class="center-menu">             <li id="about">               <a href="#">About</a>             </li>             <li id="contact">               <a href="#">Contact</a>             </li>           </ul>         </div> *******************************************       .center {         .center-menu {           #about {           }           #contact {                       }         }       }
Post a Comment
Read more

Day 308

The right side of the menu is done... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** .right-side {         position: relative;         width: 300px;         .enlist {           position: absolute;           top: 1.6rem;           right: 13.5rem;           a {             padding: 0.5rem 1rem;             border-radius: 0.5rem;             // background: #aaa;             background: #cedce7; /* Old browsers */             background: -moz-radial-gradient(               center,               ellipse cover,               #cedce7 0%,               #596a72 100%             ); /* FF3.6-15 */             background: -webkit-radial-gradient(               center,               ellipse cover,               #cedce7 0%,               #596a72 100%             ); /* Chrome10-25,Safari5.1-6 */             background: radial-gradient(               ellipse at center,               #cedce7 0%,               #596a72 100%             ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Sa
Post a Comment
Read more

Day 307

This code works unless, it is run on a Windows 10 version 1903 machine. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** private void SWWSsave()         {             if (chkBxSWWS.Checked)             {                 if (Properties.Settings.Default.UPT)                 {                     reg.SetValue("Time Clock Entry 4", Application.ExecutablePath.ToString() + " RPT");  // Add program to startup with Windows RunProfileTimes                 }                 else if (Properties.Settings.Default.SNTAS)                 {                     reg.SetValue("Time Clock Entry 4", Application.ExecutablePath.ToString() + " RCT");  // Add program to startup with Windows RunCustomTimes                 }                 else                 {                     reg.SetValue("Time Clock Entry 4", Application.ExecutablePath.ToString());  // Add program to startup with Windows                 }             }             if (!
Post a Comment
Read more

Day 306

Issues, Issues... #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********       .codingphase-link > a {           position: absolute;           top: 0;           left: 8rem;           text-decoration: none;           p {             margin: -3px auto;             font-weight: 600;             color: red;           }           // .first-p {           //   position: absolute;           //   top: 0;           //   left: 8rem;           // }           img {             width: 80px;           }           // .second-p {           //   position: absolute;           //   top: 0;           //   left: 8rem;           // }         }
Post a Comment
Read more

Day 305

I am not a designer, damnit! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <section class="main section">       <div class="xback1"></div>       <div class="main-content">         <div class="main-content-left">           <h1>Main header</h1>           <h3>Main sub-header</h3>           <p>             Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit ex             nostrum quas a consectetur necessitatibus perspiciatis blanditiis,             explicabo ipsam voluptate deleniti dolorem est!           </p>         </div>         <div class="main-content-right">           <h1>Second header</h1>           <h3>Second sub-header</h3>           <p>             Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit ex             nostrum quas a consectetur necessitatibus perspiciatis blanditiis,
Post a Comment
Read more

Day 304

Finished the background layout... On to content and finish the menu. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** .main {     .xback1 {       margin: 0;       padding: 0;       background: linear-gradient(           to right,           rgba(76, 5, 113, 0.6) 0%,           rgba(76, 5, 113, 0.7) 100%         ),         url("/img/adults-chilling.jpg");       max-width: 100%;       min-height: 100vh;       background-size: cover;       clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15vw), 0 100%);       margin-bottom: -15vw;     }   }   .second {     max-width: 100%;     min-height: 120vh;     background: linear-gradient(45deg, #0455ff 1%, #ef37ee 100%) !important;   }
Post a Comment
Read more

Day 303

Getting frustrated... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** .main {     margin: 0;     padding: 0;     background: linear-gradient(         to right,         rgba(76, 5, 113, 0.7) 0%,         rgba(76, 5, 113, 0.8) 100%       ),       url("/img/adults-chilling.webp");     background-size: auto, auto;     background-size: cover;     .xback1 {       max-width: 100%;       min-height: 100vh;       background-image: url("/img/adults-chilling.jpg");       opacity: 0.7;     }   }   .second {     background: #ff6b6c;     position: relative;     z-index: 11;     clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%);     margin-bottom: -10vw;   }
Post a Comment
Read more

Day 302

Primary header is mostly done... Now to add in the last menu. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** header {   .top {     .banner {       width: 100%;       // max-width: 1200px;       margin: 0 auto;       height: 70px;       background: #000;       background-color: #000;       display: flex;       justify-content: space-between;       .left-side {         position: relative;         display: inline-block;         width: 350px;         .logo {           a {             img {               width: 100px;             }           }         }         .codingphase-link a {           position: absolute;           top: 1rem;           left: 7rem;           padding: 0.5rem 1rem;           border-radius: 0.5rem;           // background: #aaa;           background: #cedce7; /* Old browsers */           background: -moz-radial-gradient(             center,             ellipse cover,             #cedce7 0%,             #596a72 100%           ); /* FF3.6-15 */        
Post a Comment
Read more

Day 301

Fixed an issue by using flexbox today! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** .banner {       width: 100%;       // max-width: 1200px;       margin: 0 auto;       height: 70px;       background: #000;       background-color: #000;       display: flex;       justify-content: space-between;       .left-side {         position: relative;         display: inline-block;         width: 300px;         .logo {           a {             img {               width: 100px;             }           }         }         .codingphase-link > .visit > a {           position: absolute;           top: 1.5rem;           left: 7rem;           text-decoration: none;           font-weight: 600;           color: #fff;         }       }       .right-side {         position: relative;         width: 300px;         .enlist {           position: absolute;           top: 1.5rem;           right: 12rem;           a {             text-decoration: none;             font-weight: 600;  
Post a Comment
Read more

Day 300

Working on styling the header now... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** header {   .top {     .banner {       width: 100%;       // max-width: 1200px;       margin: 0 auto;       height: 70px;       background: #000;       background-color: #000;       .left-side {         position: relative;         display: inline-block;         width: 300px;         .logo {           a {             img {               width: 100px;             }           }         }         .codingphase-link > .visit > a {           position: absolute;           top: 1.5rem;           left: 7rem;           text-decoration: none;           font-weight: 600;           color: #fff;         }       }       .right-side {         position: relative;         // top: 0;         // right: 0;         display: inline-block;         width: 300px;         .enlist {         }         .report {           position: absolute;           top: 0;           right: 0;         }       }     }   } }
Post a Comment
Read more

Day 299

Finaly starting on my first major personal project... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <link rel="stylesheet" href="css/normalize.css" />     <link rel="stylesheet" href="css/main.scss" />     <title>CodingPhaseArmy</title>   </head>   <body>     <header>       <container class="top">         <div class="banner">           <div class="left-side">             <div class="logo">               <a href="index.html">                 <img                   src="img/codingphasearmy-logo_white-on-black_small.jpg"                   alt="Logo for CodingPhase-Army&quo
Post a Comment
Read more

Day 298

Test page to prove connection between VS Code and 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;       }     </st
Post a Comment
Read more

Day 297

Building the menu... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** .container {   max-width: 800px;   margin: 50px auto;    .menu {     & > li {       background: #555;       color: #fff;     }     li {       display: inline-block;       list-style: none;       padding: 20px;       border: 1px solid #000;       margin: 0;       position: relative;       ul.first {         position: absolute;         background: red;         top: 56px;         left : -1px;         display: block;         width: 150px;         text-align: center;         li {           display: block;           ul.second {             position: absolute;             background: purple;             top: -1px;             left : 100%;             display: block;             width: 150px;             text-align: center;             li {               display: block;               ul.third {                 position: absolute;                 background: green;                 top: -1px;         
Post a Comment
Read more

Day 296

Almost done with this course... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** HTML: <div class="header">   <ul>     <li>item</li>     <li>item</li>     <li>item</li>   </ul> </div> <div class="container">   <article>     Tacos mustache semiotics fashion axe etsy trust fund flexitarian. Raclette tacos master cleanse, readymade af crucifix dreamcatcher hexagon occupy lumbersexual seitan. Shoreditch pop-up raclette wayfarers, blue bottle tattooed banh mi beard fashion axe. Gentrify keffiyeh man braid portland brunch franzen paleo schlitz vaporware fixie, selvage single-origin coffee hammock tacos iceland. Fixie roof party DIY shabby chic portland banh mi migas 3 wolf moon mustache vape.     <br>     <div class="primary">       Primary     </div>     <div class="danger">       Danger     </div>     <div class="success&qu
Post a Comment
Read more

Day 295

Starting work on a dropdown menu in an animation CSS cource. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <link rel="stylesheet" href="css/main.css" />     <title>Document</title>   </head>   <body>     <div class="menu">       <ul class="level1">         <li>Item1</li>         <li>           Item2           <ul class="level2">             <li>Item2.1</li>             <li>Item2.2</li>             <li>Item2.3</li>             <li>               Item2.4               <!-- <ul class="level3">                 <li>                   Item2.4.1                   <ul cla
Post a Comment
Read more

Day 294

A simple button from the class.  Joe used a button element, but I built my button from parts... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** HTML: <div class="parent">     <div class="child">Button</div> </div> CSS: .parent {     margin: 25px 25px;     width: 200px;     height: 50px;     background: lightgrey;     border: 1px solid black;     border-radius: 10px;     cursor: pointer;     transition: background 1s ease-in-out;     &:hover {         background: red;     }     .child {         color: darkgreen;         text-align: center;         padding: 8px 0;         font-size: 2rem;         font-weight: 600;     } }
Post a Comment
Read more

Day 293

My first lesson in css animations. (using sass) #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** * {     box-sizing: border-box; } .parent {     background: yellow;     padding: 50px;     width: 100%;     opacity: 1;     transition: all 1.5s ease-in-out;     &:hover {         background: red;         width: 50%;         opacity: .5;         .child {             background: blue;         }     }     .child {         background: black;         padding: 100px;         transition: all 2s ease-in-out;     } }
Post a Comment
Read more

Day 292

Working on a menu for a new site... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <div id="navbarBasicExample" class="navbar-menu">                 <div class="navbar-start">                   <a class="navbar-item">                     Home                   </a>                               <a class="navbar-item">                     Documentation                   </a>                               <div class="navbar-item has-dropdown is-hoverable">                     <a class="navbar-link">                       More                     </a>                                 <div class="navbar-dropdown">                       <a class="navbar-item">                         About                       </a>                       <a class="navbar-item">                         Jobs       
Post a Comment
Read more

Day 291

MIXER>COM Clone four of four... FINISHED! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** @import url("reset.css"); @import url("https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&display=swap"); html, body {   font-family: "Open Sans Condensed", sans-serif;   background-image: linear-gradient(       to bottom,       rgba(37, 49, 65, 0.7) 0%,       #253141 75%,       #253141 100%     ),     url("http://feed4gamers.com/imgs/2016-10-19-21-33-33/halo-wars-2-image-1920.jpg");   background-size: cover;   background-position: center;   background-repeat: no-repeat;   header {     display: flex;     justify-content: space-between;     padding: 30px;     .left-menu {       display: flex;       .logo {         font-size: 2rem;         font-weight: 700;         color: #fff;       }       .menu {         display: flex;         justify-content: center;         align-items: center;         padding: 0 50px;         a
Post a Comment
Read more