Posts

Showing posts from January, 2019

Day 104

I finally am starting to like how this site is coming together... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <div id="main-bg-img">         <img id="bg-img" src="img/main-bg-425.jpg" alt="">         <div id="tittle-box">           <h2 style="">Professional Family</h2>           <h3>Photography</h3>           <h4>Photography for Oklahoma</h4>           <hr class="style2">           <br>           <p><a href="https://www.oklahomaweddingphotography.com/" target="_blank">READ MORE</a></p>         </div>       </div>
Post a Comment
Read more

Day 103

Working on a cool menu animation... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** .site-nav {   position: absolute;   top: 100%;   right: 0%;   background: #464655;   clip-path: circle(0px at top right);   transition: clip-path ease-in-out 500ms;   /* overflow: hidden; */ } .site-nav--open {   clip-path: circle(145% at top right); }
Post a Comment
Read more

Day 102

My first lines on Javascript... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <script type="text/javascript">   $('.menu-toggle').click(function() {     $('.site-nav').toggleClass('site-nav--open', 500);     $(this).toggleClass('open');   }) </script>
Post a Comment
Read more

Day 101

Learning responsive dropdown menus today... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** ul li {   list-style: none;   width: 200px;   line-height: 50px;   position: relative;   background: #fff;   box-shadow: 0px 2px 3px 0px grey;   text-align: center;   float: left;   background: linear-gradient(white 20%, rgb(196, 193, 193) 80%); }
Post a Comment
Read more

Day 100

And today we add dropdown menus using HTML and CSS... #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********         <ul id="main-menu">           <li class="menu-item" id="menu-current">             <a href="index.html">Home</a>                  </li>           <li class="menu-item" id="menu-booking">             <a href="photos.html">Book With Me</a>             <ul>               <li>                 <a href="#">Weddings</a>               </li>               <li>                 <a href="#"...
Post a Comment
Read more

Day 99

Making changes and coding the customer's site... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** * { font-size: 16px; box-sizing: border-box; } body {   background-color: #fff;; } #main-body {   margin: auto;   max-width: 960px; } #image-header {   display: block;   width: 100%;   height: 11rem;   margin: 0 auto;   /* border: 1px solid red; */ } #main-menu {   width: 100%;   text-align: center;   margin: 0 auto; } #main-menu .menu-item {   display: inline-block;   float: none;   padding: 3px 20px; } #main-menu .menu-item a {   text-decoration: none;   color: darkblue; } #main-menu #menu-current a {   color: red; } #main-menu .menu-item a:hover {   color: darkgreen; }
Post a Comment
Read more

Day 98

Another day working on the new client site! #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********    <head>     <!-- Disable right-click to protect images -->     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>Fresh Feature Photography</title>     <meta name="description" content="Professional photography in Oklahoma">     <meta name="viewport" content="width=device-width, initial-scale=1">     <link rel="stylesheet" href="css/main.css">   </head>
Post a Comment
Read more

Day 97

Creating a complete site for a customer is dificult! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <div id="main-box">         <div id="picture-div">           <img id="picture" src="img/norwegian-nature-wallpapers-6792032.jpg" alt="">           <div id="tittle-box">             <h2 style="">Professional Family</h2>             <h3>Photography</h3>             <h4>Photography for Oklahoma</h4>             <hr class="style2">             <br>             <p><a href="#" target="_blank">READ MORE</a></p>           </div>         </div>       ...
Post a Comment
Read more

Day 96

Working on a site for a new client! #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********     <div id="navigation">       <ul id="main-menu">         <li class="menu-item">           <a id="menu-home" href="#">Home</a>                </li>         <li class="menu-item" id="menu-photos">           <a href="#">Photos</a>         </li>         <li class="menu-item" id="menu-pricing">           <a href="#">Pricing</a>         </li>         <li class="menu-item" id="menu-consult">           <a href="#">The Consultation</a>         </li>       ...
Post a Comment
Read more

Day 95

And this is how the Account page begins... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html> <head> <title>Account</title> </head> <body> </body> </html>
Post a Comment
Read more

Day 94

One page at a time... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html> <head> <title>Email Vault - Main</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="main-div"> <!-- Main body div --> <div id="header-div"> <!-- Main header div --> <h1>Email Vault</h1> <ul id="main-nav"> <li class="left"><a href="index.html">Home</a></li> <li class="left"><a href="about.html">About</a></li> <li class="right"><a href="faq.html">F A Q</a></li> <li class="right"><a href="contact.html">...
Post a Comment
Read more

Day 93

Project day again...  Having fun! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html> <head> <title>Email Vault - Main</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="main-div"> <!-- Main body div --> <div id="header-div"> <!-- Main header div --> <h1>Email Vault</h1> <ul id="main-nav"> <li class="left"><a href="#">Home</a></li> <li class="left"><a href="#">About</a></li> <li class="right"><a href="#">F A Q</a></li> <li class="right"><a href="#">Contact</a></li...
Post a Comment
Read more

Day 92

Still plugging at the vault... #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********           <div id="aliasRegName">             <label>Alias First Name</label>             <input type="text" name="afirstName" size="10" maxlength="12" />             <label>Alias Middle Initial</label>             <input type="text" name="amInitial" size="1" maxlength="1" />             <label>Alias Last Name</label>             <input type="text" name="alastName" size="11" maxlength="15" />           </div>           <br>           <div>             <label>Email</label>   ...
Post a Comment
Read more

Day 91

Day 91!  The first day of month three in this challenge! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html> <head> <title>Email Vault - Main</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="main-div"> <!-- Main body div --> <div id="header-div"> <!-- Main header div --> <h1>Email Vault</h1> <ul id="main-nav"> <li class="left"><a href="#">Home</a></li> <li class="left"><a href="#">About</a></li> <li class="right"><a href="#">F A Q</a></li> <li class="right"><a href="#">C...
Post a Comment
Read more

Day 90

90 days of code!  I expected to be further than I am...  Howdy life! #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********         <div class="widget-box photos">           <div class="head">             <div class="widget-img">                 <i class="fa fa-camera-retro" aria-hidden="true"></i>             </div>             <div class="widget-title"> Photos </div>           </div>           <div class="photos-body">             <div class="box-photos"></div>             <div class="box-photos"></div>             <div class="box-photos"></div> ...
Post a Comment
Read more

Day 89

Building, building, building... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <div class="widget-box friends">           <div class="head">             <div class="widget-img">                 <i class="fa fa-users" aria-hidden="true"></i>             </div>             <div class="widget-title">Friends</div>           </div>           <div class="friends-body">             <div class="friends-photos"></div>             <div class="friends-photos"></div>             <div class="friends-photos"></div>             <div class="friends-photo...
Post a Comment
Read more

Day 88

I changed the code from the class and condensed it down to this.  It was 18 times more code. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** .box-photos, .friends-photos {   display: inline-block;   margin: 1px;   float: left;   width: 32.7%;   height:110px;   background: url(https://www.wallpaperup.com/uploads/wallpapers/2015/04/02/653105/09d95a6f0e5f6e6a79bcbc58aa1222ad-700.jpg) no-repeat center center;   -webkit-background-size: cover;   -moz-background-size: cover;   -o-background-size: cover;   background-size: cover; }
Post a Comment
Read more

Day 87

The beginings of the content section... #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********     <section id="content-area">       <div class="side-colomn">         <div class="widget-box intro"></div>         <div class="widget-box photos"></div>         <div class="widget-box friends"></div>       </div>       <div class="main-area">       </div>     </section>
Post a Comment
Read more

Day 86

Back to the social media project with Joe! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #top-area {   padding: 150px 15px 90px 15px;   background: url(https://www.wallpaperup.com/uploads/wallpapers/2015/04/02/653105/09d95a6f0e5f6e6a79bcbc58aa1222ad-700.jpg) no-repeat center center;   -webkit-background-size: cover;   -moz-background-size: cover;   -o-background-size: cover;   background-size: cover; } #top-area .profile-info .user-img {   padding: 10px;   display: inline-block; } #top-area .profile-info .user-img img {   width: 150px;   border-radius: 50%; } #top-area .profile-info .user-details {   display: inline-block;   vertical-align: top;   padding-left: 20px; } #top-area .profile-info .user-details h3 {   color: white;   font-size: 24px;   font-weight: 300;   margin-top: 50px;   margin-bottom: 10px; } #top-area .profile-info .user-detai...
Post a Comment
Read more

Day 85

Tables with Steff #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********         <table> <tr> <th>Band Name</th>     <th>Rank  </th> <th>Style of Music</th> </tr> <tfoot>     <tr><td colspan='3'>May 2016 - all rights reserved.</td></td>     </tfoot> <tr> <td>The Beatles</td>   <td>#1 Fav</td> <td>Psychedelic Rock</td> </tr> <tr> <td>Led Zepp   </td>   <td>#2 Fav</td> <td>Hard Rock/Heavy Metal</td> </tr> <tr> <td>Nirvana   </td>    <td>#3 Fav</td> <td>Grunge (depressing, but fun!)</td> </tr> <tr> <td>Amy Winehouse</td> <td>#4 Fav</td> <td>Soul, Jaz...
Post a Comment
Read more

Day 84

A little more on the work website... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <div id="header">         <h1>Better Relay Testing</h1>         <p>ENOSERV delivers software to help power companies meet the challenges of relay testing in today's time sensitive regulatory environment.</p>       </div>       <div id="banner">         <a href="">           <img src="img/ProtectionSeminar 2019 Cvent-min.jpg" alt="2019 Protection Seminar">         </a>         <p id="banner-text">The Protection Seminar provides in-depth training for engineers and technicians of all levels, bringing together protection testing topics, training and discussion forums with multiple learning tracks to best fit your needs.</p>       </div...
Post a Comment
Read more

Day 83

Hard day at work means that I didn't make as much progress as I wanted, but, here it is... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** body .spanner {   width: 100%; } .spanner {   background-color: lightgray; } .container {   background-color: brown;   border: 1px solid red;   width: 1110px;   height: 75px;   margin: 0 auto }
Post a Comment
Read more

Day 82

Plugging away at the work website...  Will start the associated css tomorrow. #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********       <div id="link-bar">         <a class="btn" id="link-1"           href="https://www.enoserv.com/ENOSERV_Training.html">             <i class="fa fa-cog"></i>           Training Classes         </a>         <a class="btn" id="link-2"           href="https://www.enoserv.com/Events.html">             <i class="fa fa-calendar"></i>           Event Schedule         </a>         <a class="btn" id="link-3"           href="https://www.nerc.com/Pages/default.aspx">   ...
Post a Comment
Read more

Day 81

Started recreating my companies website without looking at the code... #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********     <nav id="nav-bar">       <a id="logo" href="https://www.enoserv.com/index.html">         <img src="img/EnoservDoble.png" alt="">       </a>       <a class="nav-btn" href="#">         Products           <i class="fa fa-caret-down"></i>       </a>       <a class="nav-btn" href="#">         Services           <i class="fa fa-caret-down"></i>       </a>             <a class="nav-btn" href="#">         Purchase           <i class="fa fa-caret-down"></i>   ...
Post a Comment
Read more

Day 80

Back to the html/css grind with Joe at codingphase #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********     <section id="top-area">       <div class="profile-info">         <div class="user-img">           <img src="https://pbs.twimg.com/profile_images/945615174941192192/gTNRjNkt_400x400.jpg" alt="Head">         </div>         <div class="user-details">           <h2>Sean Devlin Connelly</h2>           <a href="update.html">Update Info</a>           <a href="view.html">View Activity</a>         </div>       </div>      </section>
Post a Comment
Read more

Day 79

Starting some basic media queries... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** @media screen and (min-width: 1010px) { #header-div h1 { text-align: center; font-size: 80px; } h2 { font-size: 20px; } }
Post a Comment
Read more

Day 78

Getting back into the game slowly... but getting back into it! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #second-nav { width: 46%; position: absolute; bottom: -25%; left: 51%; transform: translate(-50%, -50%); border-radius: 10px 10px 10px 10px; border: 1px solid #c0c0c0; background-color: #66e6d9; box-shadow: 0 2px 3px #33b3a6; list-style-type: none; margin: 0; padding: 5px; overflow: hidden; font-size: .8rem; } #second-nav li { float: left; margin-left: .5rem; } #second-nav li a { display: block; color: #000080; text-align: center; padding: 0.1rem 0.1rem; text-decoration: none; } #second-nav li a:hover { background-color: #66e6d9; color: #000066; }
Post a Comment
Read more

Day 77

Fever broke!  Starting to feel better finally! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <head> <style> body { background-color: green; } .center { text-align: center; } h1 { color: red; } h2 { color: yellow; } p { color: lightblue; } </style> </head> <body> <h1 class="center"> The fever finaly broke! </h1> <h2 class="center"> Back to some regular coding tomrrow is the plan now... </h2> <p class="center">Thank you for your pacience... Good night.</p> </body>
Post a Comment
Read more

Day 76

Sorry folks... Sick day part two.  Feeling better but still alot of sleeping.  I hope to be back in the game tomorrow. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <body>   <p>Feeling the sick once again...</p>   <p>Thank you Joe</p> </body>
Post a Comment
Read more

Day 75

Sorry about this folks...  Claiming a sick day #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <DOCTYPE html> <body>   <p>Feeling bad! Day 1</p>   <p>102 degree temp</p> </body>
Post a Comment
Read more

Day 74

Thinking about a blog layout #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** body { max-width: 700px; width: 80%; margin: 20px auto; border: 20px solid #bdc3c7; font-family: "Source Sans Pro"; } /*NOTE: use rem for font size for better consistency that does not compound in nested elements.*/ hr {     border: 0;     height: 1px;     background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(200, 200, 200, 0.75), rgba(0, 0, 0, 0)); } p, h2, hr { margin: 20px; font-weight: 400; } h2 { color: #2c3e50; text-transform: capitalize; font-size: 1.5em; font-weight: 700; } .date { color: #3498db; text-transform: uppercase; letter-spacing: .3em; } div p:nth-of-type(2) { border-left: 5px solid #bdc3c7; padding-left: 5px; }
Post a Comment
Read more