Sean D Connelly - CP365 LOG

Posts

Showing posts from June, 2019

Day 255

June 30, 2019

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; } } form { display: block; max-width: 500px; margin: 0 auto; padding: 15px; } h3 { margin: 0 0 50px 0; font-size: 36px; text-align: center; text-decoration: underline; } .form-group { margin-bottom: 20px; } label { font-family: "Roboto", cursive; font-weight: 300; font-size: 24px; display: block;

Day 254

June 29, 2019

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"; font-size: 28px; font-weight: 100; text-transform: uppercase; } } } #all-tasks { background: url(

Day 253

June 28, 2019

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; text-transform: uppercase; } } .btn { width: 100%; padding: 10px 20px; te

Day 252

June 27, 2019

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>

Day 251

June 26, 2019

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) ... Processing triggers for man-db (2.8.3-2ubuntu0.1) ... smc@ThinkPad:~$ node -v v9

Day 250

June 25, 2019

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>

Day 249

June 24, 2019

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>

Day 248

June 23, 2019

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-section.active a:nth-child(1) { transform: translate3d(0, 0, 0); transition-delay: 0; } .box .content-area #s

Day 247

June 22, 2019

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; padding: 10px 20px; color: #5458f7; border-radius: 5px; cursor: pointer; text-decoration: none; } .box .con

Day 246

June 21, 2019

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; align-items: center; }

Day 245

June 20, 2019

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

Day 244

June 19, 2019

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; }

Day 243

June 18, 2019

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>

Day 242

June 17, 2019

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"> 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">

Day 241

June 16, 2019

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"

Day 240

June 15, 2019

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>

Day 239

June 14, 2019

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; */ } #latest .header .directions .move-right { -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px

Day 238

June 13, 2019

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>  <div class="move-right"> <i class="fas fa-chevron-right"></i> </div>  </div>  </div>  <div class="body"> <div class="column"> <div class="bg-square"> <img src="#" alt="">

Day 237

June 12, 2019

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>  <div class="circle circle2 box-shadow-down"> </div>  <div class="circle circle3 box-shadow-down"> </div>  </div>  <div class="info-box box-shadow-center"> <h2> <span class="orange">Th

Day 236

June 11, 2019

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; clear: both; } #color-collection .right-side .col-1 .swatch-area .circle { width: 70px; hei

Day 235

June 10, 2019

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-box; position: absolute; top: 130px; left: -10px; } #color-colle

Day 234

June 09, 2019

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>  <div class="right-side"> <div class="swatch-area box-shadow-center"> <div class="circle box-shadow-down"> </div>  </div>  <div class="info-box box-shadow-center"> <h2> <span class="orange">The</span> <span class="blue">Color</span> <span class="purple

Day 233

June 08, 2019

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-size: 1.3rem; font-weight: 600; text-transform: uppercase; } #design-by .design-container .icon-section .icon-box .fas {

Day 232

June 07, 2019

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; }

Day 231

June 06, 2019

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; }

Day 230

June 05, 2019

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; }

Day 229

June 04, 2019

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> <br> <p>Come be a part of this next great chapter as we preach & teach the Word of the Cross! <span>(1 Cor. 1:18)</span> </p> <br> <p>"An

Day 228

June 03, 2019

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: .5rem; } header .navigation .menu li a:hover { background: #777777; /* Old browsers */ background:

Day 227

June 02, 2019

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-size: 2rem; } main .jumbo .page .dashed { width: 35rem; margin: 0 auto; font-weight: 100; border-bottom: 1px dash

Day 226

June 01, 2019

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: 8rem; padding: 0.3rem 0; border: 1px solid rgb(190, 181, 181); border-radius: 10px; background: rgb(51, 55, 114); color: rg