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 spa...
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;    ...
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        ...
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 {   ...
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;      ...
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> *******************************************  ...
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 */           ...
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                 }          ...
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;       ...
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!     ...
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;     }   } ...
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; ...
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 { ...
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 {            ...
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;        ...
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">             ...
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;   ...
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;    ...
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     <...
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>     ...
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;     ...
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    ...
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;    ...
Post a Comment
Read more