Posts

Showing posts from June, 2019

Day 255

Almost done with this course... One more class. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** .task-form {     background: $darkBlue;     position: absolute;     z-index: 100;     top: 0;     bottom: 0;     width: 100%;     color: $white;     padding: 50px 0;     transform: translate(0, 100%);     transition: all 0.5s ease-in-out;     &.active {       transform: translate(0, 0);     }     .close-btn {       position: absolute;       top: 35px;       right: 35px;       padding: 15px;       cursor: pointer;       .fa {         font-size: 36px;    ...
Post a Comment
Read more

Day 254

Just plugging away at it... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** // @import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700"); @import "reset"; $white: #ffffff; $darkBlue: #3a4793; $lightBlue: #25b3ec; $lightPurple: #9787ee; $yellow: #ffbf3e; *, h1, h2, h3, h4, h5, h6, p, span, div {   font-family: "Roboto";   box-sizing: border-box;   color: white; } html, body {   background: white;   height: 100%; } #home {   background: url("/img/forestmountain.jpg") center center;   background-repeat: no-repeat;   width: 100%;   height: 100%;   background-size: cover;   display: flex;   align-items: center;   justify-content: center;   .welcome-box {     background: rgba(0, 0, 0, 0.3);     padding: 40px 15px;     text-align: center;     h1 {       // font-family: "Roboto";    ...
Post a Comment
Read more

Day 253

FINALLY working on the next course! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** @import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700"); @import "reset"; $white: #ffffff; $darkBlue: #3a4793; $lightBlue: #25b3ec; $lightPurple: #9787ee; $yellow: #ffbf3e; *, h1, h2, h3, h4, h5, h6, p, span, div {   font-family: "Roboto";   box-sizing: border-box;   color: white; } html, body {   background: white;   height: 100%; } #home {   background: url("/img/forestmountain.jpg") center center;   background-repeat: no-repeat;   width: 100%;   height: 100%;   background-size: cover;   display: flex;   align-items: center;   justify-content: center; } .welcome-box {   background: rgba(0, 0, 0, 0.3);   padding: 40px 15px;   text-align: center;   h1 {     // font-family: "Roboto";     font-size: 28px;     font-weight: 100;  ...
Post a Comment
Read more

Day 252

Starting the responsive website course today... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html>   <head>     <meta charset="utf-8" />     <title>Testing</title>     <meta name="viewport" content="width=device-width, initial-scale=1" />     <link rel="stylesheet" href="/css/main.css" />     <script async defer src="https://buttons.github.io/buttons.js"></script>   </head>   <body></body> </html>
Post a Comment
Read more

Day 251

The command that finally fixed my environment! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** smc@ThinkPad:~$ sudo apt-get install -y nodejs [sudo] password for smc:           Reading package lists... Done Building dependency tree       Reading state information... Done The following NEW packages will be installed:   nodejs 0 upgraded, 1 newly installed, 0 to remove and 8 not upgraded. Need to get 12.4 MB of archives. After this operation, 61.3 MB of additional disk space will be used. Get:1 https://deb.nodesource.com/node_9.x bionic/main i386 nodejs i386 9.11.2-1nodesource1 [12.4 MB] Fetched 12.4 MB in 4s (3,296 kB/s) Selecting previously unselected package nodejs. (Reading database ... 288468 files and directories currently installed.) Preparing to unpack .../nodejs_9.11.2-1nodesource1_i386.deb ... Unpacking nodejs (9.11.2-1nodesource1) ... Setting up nodejs (9.11.2-1nodesource1) ...
Post a Comment
Read more

Day 250

Just another day-o-shit with the POS computer. #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">   <title>Working on it!</title> </head> <body>   <p>Today I am working on getting Joes Web Developer Starter kit working on my computer.</p>   <p>POS computer...</p> </body> </html>
Post a Comment
Read more

Day 249

Cheat DAY #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">     <title>Cheap-Out</title> </head> <body>     <h1>Cheat day today</h1>     <p>Today I am watching a movie with my wife after re-building my computer...</p> </body> </html>
Post a Comment
Read more

Day 248

Another day of code... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ******** .box .content-area #social-media-section {   display: flex;   justify-content: center;   align-items: center;   height: 0;   overflow: hidden;   transition: all 0.4s ease-in; } .box .content-area #social-media-section.active {   height: 50px; } .box .content-area #social-media-section a {   display: flex;   justify-content: center;   align-items: center;   height: 50px;   width: 50px;   background: #eeeefe;   margin-right: 20px;   text-decoration: none;   border-radius: 5px;   color: 5458f7;   position: relative;   transition: all 0.4s ease-in;   transform: translate3d(0, -50px, 0); } .box .content-area #social-media-section a:hover {   background: #feeeee;   color: #f75454; } .box .content-area #social-media-section a:nth-child(4) {   margin-right: 0; } .box .content-area #social-media...
Post a Comment
Read more

Day 247

Slow day for coding... It is, however, my 26 wedding anniversary. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** .box .content-area .info-section .name {   font-size: 2rem;   text-align: center; } .box .content-area .info-section .position {   font-size: 0.8rem;   font-family: sans-serif;   color: grey;   text-align: center;   margin-bottom: 20px; } .box .content-area .contact-section {   display: flex;   justify-content: center;   margin-bottom: 20px; } .box .content-area .contact-section #follow-button {   font-family: sans-serif;   font-size: 0.9rem;   background: #5458f7;   border: 1px solid #fff;   padding: 10px 40px;   color: white;   border-radius: 5px;   margin-right: 20px;   cursor: pointer; } .box .content-area .contact-section .email-button {   font-family: sans-serif;   font-size: 0.9rem;   background: white;   border: 1px solid #d0d0d0; ...
Post a Comment
Read more

Day 246

My second run-threw of the Build-a-Website course... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** * {   box-sizing: border-box;   font-family: sans-serif; } html, body {   background: #eff2f9; } #home {   min-height: 100vh;   display: flex;   justify-content: center;   align-items: center; } .box {   background: white;   width: 100%;   max-width: 400px;   border-radius: 10px;   overflow: hidden;   box-shadow: 0 10px 41px -17px rgba(84, 88, 247, 1); } .box .background-image {   background: url('https://vacationrentalssmithmountainlake.com/wp-content/uploads/2018/01/mountain-lake-1.jpeg');   background-position: center bottom;   background-size: cover;   background-repeat: none;   height: 100px; } .box .content-area {   padding: 20px; } .box .content-area .user-image {   height: 40px;   position: relative;   display: flex;   justify-content: center; ...
Post a Comment
Read more

Day 245

How to config GIT in VS Code... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** [core]     repositoryformatversion = 0     filemode = true     bare = false     logallrefupdates = true [remote "origin"]     url = https://**********:**********@github.com/**********/git-course.git     fetch = +refs/heads/*:refs/remotes/origin/* [branch "master"]     remote = origin     merge = refs/heads/master
Post a Comment
Read more

Day 244

A piece of a reset css file I am customizing.  I got it from Joe's web-dev starter kit. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {     display: block; } body {     line-height: 1; } ol, ul {     list-style: none; } blockquote, q {     quotes: none; } blockquote:before, blockquote:after, q:before, q:after {     content: '';     content: none; } table {     border-collapse: collapse;     border-spacing: 0; }
Post a Comment
Read more

Day 243

The first 27% of the GIT class complete... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html lang="en">     <head>         <link rel="stylesheet" href="css/main.css">         <title>GIT Course</title>     </head>     <body>         <h1>First Page</h1>         <p>Test paragraph</p>     </body> </html>
Post a Comment
Read more

Day 242

Re-visiting an idea for codingphase... #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********               <div id="navbarBasicExample" class="navbar-menu">                 <div class="navbar-start">                   <a class="navbar-item">                     Home                   </a>                               <a class="navbar-item">            ...
Post a Comment
Read more

Day 241

Starting over with a sample social-media landing page. #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" />   <link rel="stylesheet" href="css/reset.css" />   <link rel="stylesheet" href="css/main.css" />   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">   <title>Static Template</title> </head> <body>   <div id="home">     <div class="box">       <div class="background-image...
Post a Comment
Read more

Day 240

The code says it all... #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">     <title>Screwed The Pooch Today</title> </head> <body>     <p> I managed to delete every line of code I have written in the last two months...</p>     <p>Time to start over tomorrow.</p> </body> </html>
Post a Comment
Read more

Day 239

Part one of the latest CSS... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #latest {   padding: 50px 0; } #latest .header {   padding: 25px 0; } #latest .header:after {   content: "";   display: table;   clear: both; } #latest .header h1 {   color: #6066F2;   font-size: 3rem;   max-width: 400px;   width: 100%;   display: inline-block; } #latest .header .directions {   float: right;   position: relative;   top: 15px; } #latest .header .directions .move-left {   -webkit-border-top-left-radius: 5px;   -webkit-border-bottom-left-radius: 5px;   -moz-border-radius-topleft: 5px;   -moz-border-radius-bottomleft: 5px;   border-top-left-radius: 5px;   border-bottom-left-radius: 5px;   float: left;   padding: 15px 50px;   font-size: 2rem;   background: rgba(96, 102, 242, 0.7);   color: #fff;   border: 2px solid #6066F2;   /* width: 40px; */ } #lat...
Post a Comment
Read more

Day 238

Today I build the "latest" section... #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********     <section id="latest">       <div class="header">         <h1>Our latest headphones</h1>         <div class="directions">           <div class="move-left">             <i class="fas fa-chevron-left"></i>           </div> <!-- Close "move-left" -->           <div class="move-right">             <i class="fas fa-chevron-right"></i>           </div> <!-- Close "move-right" -->     ...
Post a Comment
Read more

Day 237

The color selector HTML #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********         <div class="right-side">           <div class="col-1">             <div class="swatch-area box-shadow-center">               <div class="circle circle1 box-shadow-down">                 </div> <!-- Close "circle circle1 box-shadow-down" -->               <div class="circle circle2 box-shadow-down">                 </div> <!-- Close "circle circle2 box-shadow-down" -->            ...
Post a Comment
Read more

Day 236

BONUS color collection css. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #color-collection {   padding: 0 0 100px; } #color-collection .container:after {   content: "";   display: table;   clear: both; } #color-collection .left-side {   width: 60%;   /* display: inline-block; */   float: left;   text-align: center; } #color-collection .left-side img {   width: 80%;   /* margin: 0 auto; */ } #color-collection .right-side {   width: 40%;   /* display: inline-block; */   float: left; } #color-collection .right-side:after {   content: "";   display: table;   clear: both; } #color-collection .right-side .col-1 .swatch-area {   background: #fff;   padding: 13px;   border-radius: 50px;   display: inline-block;   margin-top: 140px;   margin-bottom: 40px; } #color-collection .right-side .col-1 .swatch-area:after {   content: "";   display: table;   c...
Post a Comment
Read more

Day 235

Color picker css. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #color-collection .right-side .col-2 .color-slider {   position: relative;   width: 20px;   height: 600px;   border-radius: 50px;   background: #ff0000; /* Old browsers */   background: -moz-linear-gradient(top, #ff0000 0%, #ff8c00 19%, #faff00 37%, #1dff00 47%, #00fffa 59%, #0015ff 72%, #ff00ff 89%); /* FF3.6-15 */   background: -webkit-linear-gradient(top, #ff0000 0%,#ff8c00 19%,#faff00 37%,#1dff00 47%,#00fffa 59%,#0015ff 72%,#ff00ff 89%); /* Chrome10-25,Safari5.1-6 */   background: linear-gradient(to bottom, #ff0000 0%,#ff8c00 19%,#faff00 37%,#1dff00 47%,#00fffa 59%,#0015ff 72%,#ff00ff 89%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } #color-collection .right-side .col-2 .color-slider .picker {   width: 20px;   height: 20px;   border-radius: 50%;   background: #FEA83B;   border:10px solid #fff;   box-sizing: content-b...
Post a Comment
Read more

Day 234

Color picker for the bonus... #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********     <section id="color-collection">       <div class="container">         <div class="left-side">           <img src="img/headphones.png" alt="">         </div> <!-- Close "left-side" -->         <div class="right-side">           <div class="swatch-area box-shadow-center">             <div class="circle box-shadow-down">             </div> <!-- Close "circle box-shadow-down" -->           </div> <!-- Close "swatch-area box-shadow-cen...
Post a Comment
Read more

Day 233

BONUS! BONUS! BONUS! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #design-by .design-container .icon-section {   width: 60%;   background: #fff;   /* display: inline-block; */   float: left;   position: relative; } #design-by .design-container .icon-section .refresh-circle {   position: absolute;   left: 45%;   top: 41%;   width: 80px;   height: 80px;   background: rgb(227, 225, 247);   border-radius: 50%; } #design-by .design-container .icon-section .refresh-circle .fas {   /* position: absolute; */   position: relative;   color: #FEA83B;   font-size: 2.5rem;   top: 20px;   left: 20px; } #design-by .design-container .icon-section .icon-box {   width: 50%;   height: 222px;   /* display: inline-block; */   float: left;   text-align: center;   border: 1px solid rgba(0, 0, 0, .1);   color: #6066F2;   font...
Post a Comment
Read more

Day 232

Back on the bonus project from Joe HTML/CSS #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #design-by {   position: relative;   top: -100px; } #design-by .design-container {   position: relative; } #design-by .design-container .bg-image{   position: absolute;   width: 500px;   z-index: 0; } #design-by .design-container .info-section {   background: #6066F2;   border-radius: 10px 0 0 10px;   width: 40%;   /* display: inline-block; */   float: left;   padding: 45px;   position: relative;   z-index: 2; } #design-by .design-container .info-section h5 {   color: #FEA83B;   font-size: 1.5rem;   text-transform: uppercase;   font-weight: 400;   margin-bottom: 30px; } #design-by .design-container .info-section h3 {   color: #fff;   font-size: 2.5rem;   margin-bottom: 30px; }
Post a Comment
Read more

Day 231

Constructing the main template style for the website. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** main .jumbo {   max-width:100%;   height: calc(100vh - 115px);   margin: 0 auto;   position: relative; } main .jumbo .page {   /* background-image: url("/img/background-main.jpg"); */   background-image: url("/img/background-main-2.png");   height: 100%;   z-index: 1; } /* **************************************************************** */ main .jumbo .foot {   width: 100%;   height: 10rem;   margin: 0 auto;   background: rgba(0, 0, 0, .5);   position: absolute;   bottom: 0; }
Post a Comment
Read more

Day 230

About styles... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** main .jumbo .page h1 {   font-family: 'Abril Fatface', cursive;   color: #fff;   text-shadow: 2px 2px 3px #000000;   text-align: center;   padding: 3rem 0;   font-size: 4rem; } main .jumbo .page p {   width: 40rem;   margin: 1rem auto;   color: rgb(253,131,131);   /* color: rgb(133,207,127); */   /* color: #fff; */   text-align: center;   font-size: 1.5rem;   font-weight: 400;   text-shadow: 1px 1px 2px #201e3d; } main .jumbo .page p span {   display: block;   margin: 5px 0; }
Post a Comment
Read more

Day 229

The About Us page... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <main>       <section class="jumbo">         <div class="page">           <h1>About Us</h1>           <p>We are a spirit-filled Bible believing church for all ages! Formerly known as June Rose Assembly of God, we are taking the next steps in creating a God-centered atmosphere where people come to worship and praise the Lord. We have an exciting vision that includes you and your family! We firmly believe in the next generation and that is why we place strong emphasis on "training up a child in the way he should go".             <span>(Proverbs 22:6)</span>           </p>      ...
Post a Comment
Read more

Day 228

Refining the menu... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** header .navigation .menu {   position: absolute;   /* top: 0; */   top: 40px;   right: 0; } header .navigation .menu li {   float: left;   margin: 0.2rem; } header .navigation .menu li a {   display: block;   text-align: center;   width: 8rem;   padding: 0.4rem 0;   transition: all .3s ease-in-out;   border: 1px solid rgb(25, 25, 25);   border-radius: 5px;   background: #424242; /* Old browsers */   background: -moz-linear-gradient(top, #424242 0%, #000000 100%); /* FF3.6-15 */   background: -webkit-linear-gradient(top, #424242 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */   background: linear-gradient(to bottom, #424242 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */   color: rgb(190, 181, 181); } header .navigation .menu li a .fas {   font-size: .75rem;   margin-left: .5re...
Post a Comment
Read more

Day 227

To church we go... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** main .jumbo {   height: calc(100vh - 115px);   margin: 0 auto;   position: relative; } main .jumbo .page {   background-image: url("/img/background-main.jpg");   height: 100%;   z-index: 1; } main .jumbo .page h1 {   font-family: 'Abril Fatface', cursive;   color: #fff;   text-shadow: 5px 5px 5px #000000;   text-align: center;   padding-top: 2rem;   font-size: 5rem; } main .jumbo .page h2 {   color: #fff;   font-weight: 500;   text-transform: uppercase;   text-shadow: 1px 1px 5px #000000;   text-align: center;   padding-top: 10rem;   font-size: 3rem; } main .jumbo .page h3 {   margin: 0 auto;   color: #fff;   font-weight: 200;   text-transform: uppercase;   text-shadow: 1px 1px 5px #000000;   text-align: center;   padding-top: 3rem;   padding-bottom: 5rem;   font-...
Post a Comment
Read more

Day 226

Continuing the church project #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** @import "reset.css"; body {   margin: 0 auto;   max-width: 1400px;   background: rgb(247, 243, 243); } header {   height: 115px;   margin: 0 auto;   position: relative;   background: #000; } header .logo-image img {   width: 105px;   margin: 22px 22px;   float: left; } header .logo .header-rejoice {   color: #fff;   font-size: 1.5rem;   font-weight: 400;   position: absolute;   top: 35px;   left: 150px; } header .logo .header-love {   color: rgb(190, 181, 181);   font-size: 1rem;   position: absolute;   top: 65px;   left: 190px; } header .navigation .menu {   position: absolute;   top: 40px;   right: 0; } header .navigation .menu li {   float: left;   margin: 0.2rem; } header .navigation .menu li a {   display: block;   text-align: center;   width:...
Post a Comment
Read more