Posts

Showing posts from May, 2019

Day 225

Starting a new project for a local church. #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/main.css">     <title>New Journey Chuch - Sapulpa</title>   </head>   <body>     <header>       <div class="logo">         <div class="logo-image">           <a href="index.html">             <img src="img/three-crosses.jpg" alt="Three crosses logo image.">           </a>         </div> <!-- Close - logo-image -->         <h4 class="header-rejoice">Rejoice in the Lord always</h4>  
Post a Comment
Read more

Day 224

And the bonus continues... again. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #design-by {   position: relative;   top: -100px; } #design-by .design-container {   /* position: absolute; */ } #design-by .design-container .info-section {   background: #6066F2;   border-radius: 10px 0 0 10px;   width: 40%;   /* display: inline-block; */   float: left;   padding: 45px; } #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; } #design-by .design-container .info-section .info-list {   } #design-by .design-container .info-section .info-list li {   list-style: none; } #design-by .design-container .info-section a {   text-decoration: none; } #design-by .design-container .icon-section {   background: #fff;   border-radius: 0 10px 10px 0;   width: 60%;     /* dis
Post a Comment
Read more

Day 223

Continuing the bonus project. #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********     <section id="design-by">       <div class="container">         <div class="box-shadow-down">           <div class="info-section">             <h5>Design by</h5>             <h3>Headphone</h3>             <ul class="info-list">               <li>                 <span class="circle">                   <i class="far fa-check-square"></i>                 </span> 4 hours of playtime on one charge               </li>               <li>                 <span class="circle">                   <i class="far fa-check-square"></i>                 </span> Intuitive touch interface,with microphone               </li>               <li>                 <span class="circle&
Post a Comment
Read more

Day 222

Finish the top-jumbo section. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #top-jumbo {   padding: 0 0 400px 0;   background: #ffffff; /* Old browsers */   background: -moz-linear-gradient(-45deg, #ffffff 31%, #cd7af9 54%, #cd7af9 55%, #cd7af9 56%, #cd7af9 56%, #cd7af9 57%, #f2cbee 100%); /* FF3.6-15 */   background: -webkit-linear-gradient(-45deg, #ffffff 31%,#cd7af9 54%,#cd7af9 55%,#cd7af9 56%,#cd7af9 56%,#cd7af9 57%,#f2cbee 100%); /* Chrome10-25,Safari5.1-6 */   background: linear-gradient(135deg, #ffffff 31%,#cd7af9 54%,#cd7af9 55%,#cd7af9 56%,#cd7af9 56%,#cd7af9 57%,#f2cbee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } #top-jumbo:after {   content: "";   display: table;   clear: both; } #top-jumbo .left-side {   width: 40%;   /* display: inline-block; */   float: left; } #top-jumbo .left-side .large-number{   font-size: 325px;   font-weight: 700;   opacity: 0.1;   color: #4C44C1;   position: relative;   left: -26px;   top: 0;   z-
Post a Comment
Read more

Day 221

Welcome to the top-jumbo section.  I will finnish this one tommorow. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #top-jumbo {   padding: 0 0 400px 0;   background: #ffffff; /* Old browsers */   background: -moz-linear-gradient(-45deg, #ffffff 35%, #e87ae4 54%, #e87ae4 54%, #e87ae4 54%, #f4c1ef 100%); /* FF3.6-15 */   background: -webkit-linear-gradient(-45deg, #ffffff 35%,#e87ae4 54%,#e87ae4 54%,#e87ae4 54%,#f4c1ef 100%); /* Chrome10-25,Safari5.1-6 */   background: linear-gradient(135deg, #ffffff 35%,#e87ae4 54%,#e87ae4 54%,#e87ae4 54%,#f4c1ef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } #top-jumbo:after {   content: "";   display: table;   clear: both; } #top-jumbo .left-side {   width: 40%;   display: inline-block;   float: left; } #top-jumbo .left-side .large-number{   font-size: 325px;   font-weight: 700;   opacity: 0.1;   color: #4C44C1;   position: relative;   left: -26px;   top: 67px;   z-index: 1; } #top-jumbo .left-side .inf
Post a Comment
Read more

Day 220

Building the JUMBO... #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********     <section id="top-jumbo">       <div class="container">         <div class="left-side">           <div class="large-number">             B3           </div>           <div class="info-container">             <h1>               Premium, truly wireless               <br>               on-ear earphones             </h1>             <p>               Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, deleniti officiis quo dolorem ipsam ea enim aperiam asperiores ducimus deserunt!             </p>             <form class="email-area">               <i class="far fa-envelope"></i>               <input type="email" name="email" placeholder="Enter your email address.">               <button type=&quo
Post a Comment
Read more

Day 219

My first time linking css files by using import! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap'); @import "reset.css"; @import "header.css"; /* #FEA83B - Orange #6066F2 - Lightblue #B286F8 - Purple #4C44C1 - Blue #E6CDF9 - Light Purple */
Post a Comment
Read more

Day 218

More bonus... Bonus for days! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** header {   padding: 30px 20px;   font-size: 14px;   font-weight: 600; } header::after {   content: "";   display: table;   clear: both; } header a {   color: #4C44C1;   text-decoration: none; } header .logo {   display: inline-block;   float: left;   margin-right: 30px; } header .logo img {   width: 50px; } header .menu {   display: inline-block;   float: left;   position: relative;   top: 18px; } header .menu a {   text-transform: uppercase; } header .header-buttons {   display: inline-block;   float: right; } header .header-buttons .blue-btn { background: #4C44C1; margin: 20px; padding: 10px 35px; color: #fff; border-radius: 50px; text-transform: uppercase; position: relative; top: 18px; -webkit-box-shadow: 0px 17px 30px -10px rgba(0,0,0,0.3); -moz-box-shadow: 0px 17px 30px -10px rgba(0,0,0,0.3); box-shadow: 0px 17px 30px -10px rgba(0,0,0,0.3); } header .header-buttons .blue-bt
Post a Comment
Read more

Day 217

And the bonus project starts... #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="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">     <link rel="stylesheet" href="css/main.css">     <title>Headphones</title>   </head>   <body>     <header>       <div class="logo">         img       </div>       <div class="menu">         <a href="#">Features</a>         <a href="#">Gallery</a>         <a href="#">Tech Spec</a&g
Post a Comment
Read more

Day 216

Ready for bonus project part two... #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********          <div class="widget-box post">           <div class="head">             <div class="user-img-container">               <div class="user-img">               </div>             </div>             <div class="post-info">               <span class="user-info">                 <a href="#">Chloe Grace Moretz</a> shared a  <a href="#">link</a>.               </span>               <span class="post-date">Feb 19 at 10:35 AM Via Instagram</span>             </div>           </div>           <div class="body">             <div class="post-img">               <img src="img/meme.jpg" alt="">             </div>             <div class=&
Post a Comment
Read more

Day 215

Ready to start the bonus project... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #content-area .main-area .widget-box.post .body .post-form {   margin-bottom: 5px;   background: #fcfcfc;   padding: 10px 0 0 0;   border: 1px solid #EDEDED;   border-radius: 3px; } #content-area .main-area .widget-box.post .body .post-form .user-img {   width: 7%;   display: inline-block;   /* overflow: auto; */   float: left; } #content-area .main-area .widget-box.post .body .post-form::after {   content: " ";   clear: both;   display: table; } #content-area .main-area .widget-box.post .body .post-form .user-img img {   width: 40px;   height: 40px;   float: left;   border-radius: 50%; } #content-area .main-area .widget-box.post .body .post-form .form-info {   display: inline-block;   float: left;   width: 92%;   font-size: 14px;   padding: 10px 0;   border-bottom: 1px solid lightgray; } #content-area .main-area .widget-box.post .body .post-form .form-info input {   width:
Post a Comment
Read more

Day 214

Tornado coding day... yipeee! code... look out window while listening to sirens... code. #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********           <div class="widget-box post">             <div class="head">               <div class="user-img-container">                 <div class="user-img">                 </div>               </div>               <div class="post-info">                 <span class="user-info">                   <a href="#">Chloe Grace Moretz</a> shared a  <a href="#">link</a>.                 </span>                 <span class="post-date">Feb 19 at 10:35 AM Via Instagram</span>               </div>             </div>             <div class="body">               <div class="post-img">                 <img src="img/meme
Post a Comment
Read more

Day 213

More class... #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********           <div class="widget-box post">             <div class="head">               <div class="user-img-container">                 <div class="user-img">                 </div>               </div>               <div class="post-info">                 <span class="user-info">                   <a href="#">Chloe Grace Moretz</a> shared a  <a href="#">link</a>.                 </span>                 <span class="post-date">Feb 19 at 10:35 AM Via Instagram</span>               </div>             </div>             <div class="body">               <div class="post-img">                 image               </div>               <div class="top-icons">               
Post a Comment
Read more

Day 212

A little lost in this segment, but I will prevail. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #content-area .main-area .widget-box.post {   overflow: auto; } #content-area .main-area .widget-box.post .head .user-img-container {   width: 8%;   display: inline-block;   overflow: auto;   float: left; } #content-area .main-area .widget-box.post .head .user-img {   display: inline-block;   float: left;   background: url(https://pbs.twimg.com/profile_images/1108790938640531456/Bl2JvdG__400x400.png) no-repeat center center;   -webkit-background-size: cover;   -moz-background-size: cover;   -o-background-size: cover;   background-size: cover;   height: 40px;   width: 40px;   margin: 0;   border-radius: 50%; } #content-area .main-area .widget-box.post .head .post-info {   display: inline-block;   float: left;   width: 92%; } #content-area .main-area .widget-box.post .head::after {   content: " ";   clear: both;   display: table; } #content-area .main-area .wid
Post a Comment
Read more

Day 211

Classy! #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********         <div class="main-area">           <div class="widget-box submenu">             <ul>               <li>                 <i class="far fa-clock"></i>                 <span>timeline</span>               </li>               <li>                 <i class="far fa-address-card"></i>                 <span>about</span>               </li>               <li>                 <i class="fas fa-users"></i>                 <span>friends</span>               </li>               <li>                 <i class="fas fa-camera-retro"></i>                 <span>photos</span>               </li>               <li>                 <i class="fas fa-ellipsis-v"></i>                  
Post a Comment
Read more

Day 210

Sorry Joe... I like my menu better than yours. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #content-area .main-area .widget-box .submenu {   padding: 0;   margin: 0 0 5px 0; } #content-area .main-area .submenu ul {   padding: 0;   margin: 0; } #content-area .main-area .submenu ul li {   display: inline-block;   padding: 10px;   width: 20%;   float: left;   text-align: center;   border-bottom: 3px solid #fff;   transition: all .3s ease-in-out;   cursor: pointer; } #content-area .main-area .submenu ul li:hover {   border-bottom: 3px solid #2196F3;   color: #2196F3; } #content-area .main-area .submenu ul li:nth-child(5) { padding: 24px 0 25px; } #content-area .main-area .submenu ul li .fas, .far {   font-size: 20px; } #content-area .main-area .submenu ul li span { display: block; margin: 15px 0 0 0 ; font-size: 14px; text-transform: uppercase; }
Post a Comment
Read more

Day 209

Almost there...  not really though. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #content-area {   background: #FAFAFA;   overflow: auto;   padding: 50px 0; } #content-area .side-column {   float: left;   width:35%;   max-width: 360px;   margin: 0 2.5%; } #content-area .widget-box {   padding: 15px;   background: #fff;   margin: 0 0 15px 0;   border-radius: 3px;   -webkit-box-shadow: 0px 2px 5px -1px rgba(0,0,0,0.75);   -moz-box-shadow: 0px 2px 5px -1px rgba(0,0,0,0.75);   box-shadow: 0px 2px 5px -1px rgba(0,0,0,0.75);   overflow: auto; } #content-area .widget-box .head .widget-icon-container {   display: inline-block; } #content-area .widget-box .head .widget-icon {   background: #BFBFBF;;   height: 40px;   width: 40px;   border-radius: 50%;   color: #fff;   display: flex;   align-items: center;   justify-content: center; } #content-area .widget-box .head .widget-icon .fas {   /* max-width: 50%; */   font-size: 24px; } #content-area .widget-box .head .widget-tit
Post a Comment
Read more

Day 207

Class, class, class... #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********         <div class="main-area">           <div class="widget-box submenu">             <ul class="submenu-links">               <li><i class="far fa-clock"></i></li>               <li><i class="fas fa-address-card"></i></li>               <li><i class="fas fa-users"></i></li>               <li><i class="fas fa-camera-retro"></i></li>               <li><i class="fas fa-ellipsis-v"></i></li>             </ul>           </div>           <div class="widget-box post">             <div class="head">               <div class="widget-icon-container">                 <div class="widget-icon"><i class="fas fa-
Post a Comment
Read more

Day 206

A small chunk of today's lesson... #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********         <div class="widget-box photos">           <div class="head">             <div class="widget-img"> img </div>             <div class="widget-title"> Photos </div>           </div>           <div class="body">             <div style="             display: inline-block;             float: left;             width: 33.33%;             height: 110px;             background: url(http://i.imgur.com/Ug3uxTc.jpg) no-repeat center center;             -webkit-background-size: cover;             -moz-background-size: cover;             -o-background-size: cover;             background-size: cover;">             </div>           </div>         </div>
Post a Comment
Read more

Day 205

Coding, coding, coding... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <section id="top-area">       <div class="profile-info">          <div class="user-img">           <img src="https://pbs.twimg.com/profile_images/1108790938640531456/Bl2JvdG__400x400.png"  />          </div>          <div class="user-details">            <h3>Chloe Gracr Moretz</h3>            <a href="update.html">Update info</a>            <a href="view.html">View Activity</a>          </div>       </div>     </section>
Post a Comment
Read more

Day 204

More, more class.  With more to come. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** * {   box-sizing: border-box; } html {   font-family: sans-serif; } header {   background: #3B5998;   padding: 15px; } header a {   color:#fff;   text-decoration: none; } header .fas {   color: white;   font-size: 16px; } header .logo-area {   color: white;   display: inline-block;   width: 20%; } header .logo-area a {   color: white;   text-decoration: none;   text-transform: uppercase;   font-size: 30px;   font-weight: 500; } header .menu {   display: inline-block;   width: 20%;   border-right: 1px solid rgba(255, 255, 255, .3);   text-align: right;   padding-right: 20px;   font-size: 12px;   font-weight: 300; } header .menu ul li {   display: inline-block; } header .menu ul li a {   margin-right: 20px; } header .icon-links {   display: inline-block;   width: 20%;   padding-left: 20px; } header .icon-links ul li {   display: inline-block;   margin-right: 10px; } header .icon-link
Post a Comment
Read more

Day 203

More class... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html>   <head>     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">     <link rel="stylesheet" href="/css/reset.css">     <link rel="stylesheet" href="/css/main.css">     <title>Social Media</title>   </head>   <body>     <header>       <div class="logo-area">         <a href="index.html">Logo</a>       </div><div class="menu">         <ul>           <li>             <a href="chloe.html">Chloe</a>           </li>           <li>             <a href="chloe.html">Home</a>        
Post a Comment
Read more

Day 202

Here we go again... Long day at work means this class moves slowly... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** html {   font-family: sans-serif; } header {   background: #3B5998; } header .logo-area {   color: white;   display: inline-block; } header .logo-area a {   color: white;   text-decoration: none;   font-size: 20px; } header .menu {   display: inline-block; } header .menu ul li {   display: inline-block; } header .icon-links {   display: inline-block; } header .icon-links ul li {   display: inline-block; } header .icon-links .quick-options {   display: inline-block; } header .icon-links .privacy {   display: inline-block; } header .search-area {   display: inline-block; } header .search-area ul li {   display: inline-block; }
Post a Comment
Read more

Day 201

The header break-down... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html>   <head>     <link rel="stylesheet" href="/css/main.css">     <title>Social Media</title>   </head>   <body>     <header>       <div>         Logo       </div>       <div>         <ul>           <li>             <a href="chloe.html">Chloe</a>           </li>           <li>             <a href="chloe.html">Home</a>           </li>         </ul>       </div>       <div>         <ul>           <li>             <a href="chloe.html">               group             </a>           </li>           <li>             <a href="chloe.html">               message             </a>           </li>           <li>             <
Post a Comment
Read more

Day 200

Day two of CSS... Slow day #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html lang="en">   <head>     <title>All HTML Tags</title>     <meta name="description" content="Free Web tutorials">     <meta name="keywords" content="HTML, CSS, XML, JavaScript">     <meta name="author" content="Sean Connelly">     <meta name="viewport" content="width=device-width, initial-scale=1.0">         <style>       .menu {         background: white;         width: 500px;         margin: 50px auto;         padding: 0;       }       .menu li {         display: inline-block;         list-style: none;         color: #fff;       }       .menu-with-links {         color: #fff;       }       p {         margin: 0 auto;         width: 500px;         line-height: 1.5;         margin-bottom: 50px;       }       /* Using the styl
Post a Comment
Read more

Day 199

The last entry of the HTML section... Moving on to CSS #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <style>       .menu {         background: white;         width: 500px;         margin: 50px auto;         padding: 0;       }       .menu li {         display: inline-block;         list-style: none;         color: #fff;       }       .menu-with-links {         color: #fff;       }       p {         margin: 0 auto;         width: 500px;         line-height: 1.5;         margin-bottom: 50px;       }     </style>
Post a Comment
Read more

Day 198

Still on the HTML/CSS class... Will be for a few days probably. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html lang="en">   <head>     <title>All HTML Tags</title>     <meta name="description" content="Free Web tutorials">     <meta name="keywords" content="HTML, CSS, XML, JavaScript">     <meta name="author" content="Sean Connelly">     <meta name="viewport" content="width=device-width, initial-scale=1.0">    </head>   <body>     <!-- Text tags -->     <h1>THE PAGE!</h1>     <h2>THE PAGE!</h2>     <h3>THE PAGE!</h3>     <h4>THE PAGE!</h4>     <h5>THE PAGE!</h5>     <h6>THE PAGE!</h6>     <p> The <strong>Trade Commission</strong> is divided over the degree to which Mark Zuckerberg should be held
Post a Comment
Read more

Day 197

Working through the HTML section today... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html lang="en">   <head>     <title>All HTML Tags</title>     <meta name="description" content="Free Web tutorials">     <meta name="keywords" content="HTML, CSS, XML, JavaScript">     <meta name="author" content="Sean Connelly">     <meta name="viewport" content="width=device-width, initial-scale=1.0">    </head>   <body>     <!-- Text tags -->     <h1>THE PAGE!</h1>     <h2>THE PAGE!</h2>     <h3>THE PAGE!</h3>     <h4>THE PAGE!</h4>     <h5>THE PAGE!</h5>     <h6>THE PAGE!</h6>     <p> The <strong>Trade Commission</strong> is divided over the degree to which Mark Zuckerberg should be held liable for his company
Post a Comment
Read more