Sean D Connelly - CP365 LOG

Should be day 4 but I was sick yesterday and missed it... #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********     <section id="experience">       <div class="container">         <div class="large-title">           Experience         </div>         <div class="experience-container">           <div class="large-icons">             <div class="square">               <div class="blue-box">                 Experience               </div>             </div>             <div class="circle">               Awards             </div>             <div class="triangle">               Work             </div>           </div>           <div class="info">             <div class="info-box">               <h4>Graphic Artist - SMCWEBDEV</h4>               <span clas

This day two past the 365 challenge. #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********     <section id="portfolio">       <div class="container">         <div class="title">           <div class="circle"></div>           <h1>Portfolio</h1>         </div>         <div class="portfolio-container">           <a href="portfolio/#" class="box image1"></a>           <a href="portfolio/#" class="box image2"></a>           <a href="portfolio/#" class="box image3"></a>           <a href="portfolio/#" class="box image4"></a>           <a href="portfolio/#" class="box image5"></a>           <a href="portfolio/#" class="box image6"></a>           <a href="portfolio/#&q

Finished plus one!  Just because... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** .services-container {     display: grid;     grid-template-columns: 1fr 1fr 1fr;     grid-gap: 40px;     .box {       background: rgba(255, 255, 255, 0);       padding: 40px;       margin-bottom: 10px;       transition: all 0.2s ease-in-out;       cursor: pointer;       .icon {       }       .fa {         font-size: 2rem;         margin-bottom: 2rem;       }       h5 {         font-size: 1rem;         font-weight: 700;         text-transform: uppercase;         letter-spacing: 2px;         margin-bottom: 2rem;       }       p {         color: #b3b3b3;         font-size: 0.9rem;         line-height: 1.5;       }       &:hover {         background: rgba(255, 255, 255, 1);         -webkit-box-shadow: 0px 35px 74px 24px rgba(0, 0, 0, 0.07);         -moz-box-shadow: 0px 35px 74px 24px rgba(0, 0, 0, 0.07);         box-shadow: 0px 35px 74px 24px rgba(0, 0, 0, 0.07);       }     }     .b

Annnd, DONE! #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********   .services-container {     display: grid;     grid-template-columns: 1fr 1fr 1fr;     grid-gap: 40px;     .box {       background: rgba(255, 255, 255, 0);       padding: 40px;       transition: all 0.2s ease-in-out;       .icon {       }       h5 {         font-size: 1rem;         font-weight: 700;         text-transform: uppercase;         letter-spacing: 2px;         margin-bottom: 2rem;       }       p {         color: #b3b3b3;         font-size: 0.9rem;         line-height: 1.5;       }       &:hover {         background: rgba(255, 255, 255, 1);       }     }     .blue {       border-bottom: 2px solid #52b8ff;     }     .red {       border-bottom: 2px solid #ff5253;     }     .yellow {       border-bottom: 2px solid #ffc853;     }   }

One day left... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #services {   padding-bottom: 80px 15px;   .title {     position: relative;     width: 200px;     height: 200px;     display: flex;     justify-content: center;     align-items: center;     margin: 0 auto;     .circle {       background: #eef9ff;       width: 150px;       height: 150px;       border-radius: 50%;       position: absolute;     }     h1 {       position: relative;       font-size: 2.5rem;       text-transform: uppercase;       font-weight: 700;       color: #16171b;       z-index: 1;       letter-spacing: 4px;     }   } }

Down to the last two days now... #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********     <section id="services">       <div class="container">         <div class="title">           <div class="circle"></div>           <h1>Services</h1>         </div>         <div class="services-container">           <div class="box blue">             <div class="icon"></div>             <H5>Best Ever Quality</H5>             <p>               Lorem ipsum, dolor sit amet consectetur adipisicing elit. Est               aperiam incidunt et sint quia necessitatibus modi impedit               provident!             </p>           </div>           <div class="box red">             <div class="icon"></div>             <H5>Best Ever Quality</H5>             <p>         

Only three days left now! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #top {   .container {     display: grid;     grid-template-columns: 1fr 1fr;     padding: 80px 0;     align-items: center;   }   .info {     padding: 15px;     position: relative;     .blue-square {       border: #dbf1ff solid 25px;       width: 300px;       height: 300px;       position: absolute;       z-index: 0;       top: -30%;       left: -27%;     }     h1 {       position: relative;       font-size: 2rem;       text-transform: uppercase;       font-weight: 700;       color: #16171b;       margin-bottom: 2rem;       z-index: 1;     }     p {       position: relative;       color: #919191;       text-transform: capitalize;       margin-bottom: 4rem;       z-index: 1;     }     a {       position: relative;       color: #16171b;       font-weight: 700;       font-size: 0.9rem;       text-transform: uppercase;       text-decoration: none;       letter-spacing: 2px;       padding-bottom: 5p

Just a few days left... #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>     <section id="top">       <div class="container">         <div class="info">           <div class="blue-square"></div>           <h1>Sean Devlin Connelly</h1>           <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>           <a href="#">Latest Works</a>         </div>         <div class="img">           <div class="background-img"></div>         </div>

The first installment of the building a personal portfolio course. #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>     <section id="home">       <div class="blue-square"></div>       <div class="info">         <h1>Sean Devlin Connelly</h1>         <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>         <a href="#">Latest Works</a>       </div>       <div class="img">         <img           src="http://frontmodels.co.uk/fmdls/uploads/2017/09/male-model2.jpg"  

The last of the css for the music site... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #tour {   background: #000;   position: relative;   z-index: 4;   #top-img {     background-image: url("/img/group.png");     background-repeat: no-repeat;     background-size: cover;     background-position: center center;     filter: saturate(10%) contrast(125%);     height: 300px;   }   #tourdates {     background: #000;     display: flex;     flex-direction: column;     align-items: center;     padding: 50px;     .title {       color: #fff;       font-size: 2rem;       text-align: center;       margin: 0 0 50px;     }     .dates {       display: grid;       grid-template-columns: repeat(3, 1fr);       max-width: 800px;       grid-gap: 1.2rem;       li {         color: #fff;         font-size: 1.3rem;         span {           padding: 0 3px;         }         .city {           font-weight: 700;         }         .location {           font-size: 1rem;           font

The final HTML for the music site. #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********     <section id="tour">       <div id="top-img"></div>       <div class="container">         <div id="tourdates">           <div class="title">             TOUR DATES           </div>           <ul class="dates">             <li>               <span class="city">NYC</span>               <span class="location">Best Buy Center</span>               <span class="date">6/14</span>             </li>             <li>               <span class="city">NYC</span>               <span class="location">Best Buy Center</span>               <span class="date">6/14</span>             </li>             <li>               <span class=

And today is my favorite number... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #music {   padding: 80px 0;   position: relative;   #bluredbg {     background-image: linear-gradient(         45deg,         rgba(255, 253, 60, 1) 0%,         rgba(255, 253, 60, 1) 33%,         rgba(255, 253, 60, 0.96) 36%,         rgba(255, 253, 60, 0.86) 43%,         rgba(176, 38, 183, 0.57) 62%,         rgba(125, 185, 232, 0) 100%       ),       url("/img/album69.jpg");     background-size: cover;     height: 100%;     width: 100%;     filter: blur(50px) saturate(150%);     position: absolute;     z-index: 1;   }   .container {     display: flex;     padding: 0 50px;     position: relative;     z-index: 3;   }   #info {     width: 50%;     display: flex;     flex-direction: column;     justify-content: center;     align-items: center;     #title {       font-size: 3rem;       font-weight: 700;       text-align: center;       margin-bottom: 15px;     }     #sub-title {   

A quick day of music site building... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #music {   .container {     display: flex;     #info {       width: 50%;       #title {         font-size: 2rem;         font-weight: 700;         text-align: center;       }       #sub-title {         font-size: 0.7rem;         font-weight: 300;         text-align: center;       }       #singles {         display: grid;         grid-template-columns: 50% 50%;       }     }     #album-cover {       width: 50%;       display: flex;       justify-content: center;       align-items: center;       img {         width: 50%;       }     }   } }

Part two of the google.com rebuild. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** @import "reset"; * {   box-sizing: border-box;   font-family: Arial, sans-serif;   font-size: 16px; } #container {   max-width: 100%;   height: 100vh;   background-color: aliceblue;   header {     background: yellow;     display: flex;     height: 40px;     flex-direction: row;     flex-wrap: nowrap;     justify-content: space-between;     align-items: center;     .topmenu-ul {       font-family: Arial, sans-serif;       font-size: 0.8rem;       li {         display: inline-block;         a {           text-decoration: none;           color: rgb(148, 143, 143);         }       }     }     .menutop-left {       ul {         li {           padding-left: 15px;         }       }     }     .menutop-right {       ul {         li {           // display: inline-block;           padding-right: 15px;           .fa-th {             font-size: 1.1rem;           }         }       }    

Beginning my rebuild of google.com #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       href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"       rel="stylesheet"       integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"       crossorigin="anonymous"     />     <link rel="stylesheet" href="css/style.css" />     <title>Document</title>   </head>   <body>     <header>       <div class="menutop-left">         <ul>           <li>About</li>           <li>Store</li>         </ul>       </div>       <div class="menutop

Not much going on today... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #music {   .container {     display: flex;   }   #info {   }   #album-cover {   } }

I might finish this one tomorrow... #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********     <section id="music">       <div class="container">         <div id="info">           <div id="title">             DAY 69           </div>           <ul id="singles">             <li>Gummo</li>             <li>Gotti</li>             <li>Kooda</li>             <li>Rondo</li>             <li>Keke</li>             <li>Billy</li>           </ul>           <ul id="logos">             <li><img src="" /></li>             <li><img src="" /></li>             <li><img src="" /></li>             <li><img src="" /></li>             <li><img src="" /></li>             <li>&

Taking longer than expected... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** .container {   max-width: 1400px;   margin: 0 auto; } #bio {   background: #000;   position: relative;   z-index: 3;   padding: 100px 0;   .container {     display: flex;   }   p {     width: 50%;     color: #fff;     line-height: 1.8;     font-size: 0.9rem;     padding: 50px;   }   #logo-centered {     width: 50%;     display: flex;     justify-content: center;     align-items: center;     padding: 50px;   } } #media {   background-image: url("/img/original.jpeg");   background-size: cover;   padding: 100px 0;   #title {     background: #000;     font-size: 1.1rem;     font-weight: 400;     color: #fff;     text-transform: uppercase;     text-align: center;     padding: 20px;     width: 100%;     max-width: 500px;     margin: 0 auto 80px;     // margin: 0 0 0 80px 0;   }   #videos {     padding: 0 50px;     display: grid;     grid-template-columns: 50% 50%;     grid-gap: 50px;

Plugin away... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <title></title>     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <link rel="stylesheet" href="css/main.css" />   </head>   <body>     <header>       <div id="logo">         <a href="">           <img src="img/logo.png" />         </a>       </div>       <nav>         <a href="">BIO</a>         <a href="">MEDIA</a>         <a href="">TOUR</a>         <a href="">MUSIC</a>         <a href="">SHOP</a>       </nav>     </header>     <section id="top-section">       <div id=&quo

Working through a music site... should finish it up tomorrow. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** @import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700"); @import "reset"; * {   box-sizing: border-box; } body {   font-family: "Roboto", sans-serif;   background: #19202a; } header {   position: absolute;   z-index: 3;   padding: 15px;   display: flex;   width: 100%;   justify-content: space-between;   #logo {     width: 50px;     img {       width: 100%;     }   }   nav {     align-self: center;     a {       color: #fff;       text-decoration: none;       font-size: 1.2rem;       font-weight: 300;       padding: 0 10px;     }   } } #top-section {   position: relative;   height: 100vh;   #bluredbg {     background-image: linear-gradient(         45deg,         rgba(25, 32, 42, 1) 0%,         rgba(25, 32, 42, 1) 33%,         rgba(25, 32, 42, 0.96) 36%,         rgba(25, 32, 42, 0.86) 43%,         rgba(1

Having issues with this class and tools so, going through it manually. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** @import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700"); @import "reset"; body {   font-family: "Roboto", sans-serif; } #top-section {   background: url("/img/top.jpg");   background-size: cover;   height: 100vh;   width: 100%; }