Posts

Showing posts from March, 2019

Day 163

A small snippet of me taking a tutorial on CSS Grid. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** .container {     height: 100%;     display: grid;     grid-gap: 3px;     grid-template-columns: repeat(12, 1fr);     grid-template-rows: 40px auto 40px; } .header {     grid-column: 1 / -1; } .menu {} .content {     grid-column: 2 / -1; } .footer {     grid-column: 1 / -1; }
Post a Comment
Read more

Day 162

Finally got it to work!  Now to figure out the calendar / booking system... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <style> body {   background-image: linear-gradient(#f2f5f9, #deeafc, #f2f7ff); } #sdc-galery {   width: 100%;   display: grid;   grid-template-columns: 1fr 1fr 1fr 1fr;   grid-template-rows: auto auto 23em;   grid-gap: 10px; } #sdc-pic1 {   grid-column: 1 / 3; } #sdc-pic1 > img {   width: 100%;   height: 100%; } #sdc-pic2 {   grid-column: 3 / 5;   grid-row: 1 / 3; } #sdc-pic2 > img {   width: 100%;   height: 100%; } #sdc-pic3 {   grid-column: 1 / 3; } #sdc-pic3 > img {   width: 100%;   height: 100%; } /* #sdc-pic4 {   } */ #sdc-pic4 > img {   width: 100%;   height: 100%; } /* #sdc-pic5 {   } */ #sdc-pic5 > img {   width: 100%;   height: 100%; } #sdc-pic6 {   grid-column: 3 / 5; } #sdc-pic6 > img {   width: 100%;   height: 100%; } .button {   display: block;   backgr
Post a Comment
Read more

Day 161

Implementing CSS Grid that you designed into a Wordpress page is a serious PAIN! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** body {   max-width: 900px;   margin: 50px auto; } h1, h3, p {   text-align: center; } #div2 {   margin: 0 auto;   max-width: 100%; } section {   width: 100%;   display: grid;   grid-template-columns: 1fr 1fr 1fr 1fr;   grid-template-rows: auto auto 23em;   grid-gap: 10px; } #sdc-pic1 {   grid-column: 1 / 3; } #sdc-pic1 > img {   width: 100%;   height: 100%; } #sdc-pic2 {   grid-column: 3 / 5;   grid-row: 1 / 3; } #sdc-pic2 > img {   width: 100%;   height: 100%; } #sdc-pic3 {   grid-column: 1 / 3; } #sdc-pic3 > img {   width: 100%;   height: 100%; } /* #sdc-pic4 {   } */ #sdc-pic4 > img {   width: 100%;   height: 100%; } /* #sdc-pic5 {   } */ #sdc-pic5 > img {   width: 100%;   height: 100%; } #sdc-pic6 {   grid-column: 3 / 5; } #sdc-pic6 > img {   wid
Post a Comment
Read more

Day 160

This should be easier than it seems... CSS GRID! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** /* .photo {   max-width: 20rem;   height: 10rem; } */ section {   max-width: 960px;   margin: 0 auto;   display: grid;   grid-template-columns: repeat(4, 1fr);   /* grid-template-columns: auto auto auto auto; */   background-color: #2196F3;   grid-gap: 1rem; } .photo {   background-color: rgba(255, 255, 255, 0.8); } #pic1 {   max-width: 20rem;   grid-column: 1 / span 2;   align-self: stretch;   justify-self: stretch;   /* grid-column-end: 3; */   /* column-span: 2; */ }
Post a Comment
Read more

Day 159

Gotta make it look good!!! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <header>       <div id="social">         <a href="https://www.behance.net/emartin8597" target="_blank"><i class="fa fa-behance-square" aria-hidden="true"></i></a>         <a href="https://www.facebook.com/FreshFeaturePhotography" target="_blank"><i class="fa fa-facebook-square" aria-hidden="true"></i></a>         <a href="https://www.instagram.com/freshfeaturephoto" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>         <a href="https://www.pinterest.com/freshfeaturephoto" target="_blank"><i class="fa fa-pinterest-square" aria-hidden="true"></i></a>         <a href="mailto:freshfeat
Post a Comment
Read more

Day 158

Sorr about this... Driving from Idaho to Oklahoma today. Gotta love a cheat day! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html> <head> <title>cheat day</title> <style type="text/css"> h1 { text-align: center; } p { text-align: center; color: darkgreen; } </style> </head> <body> <h1>This a cheat!  Drive day from Pocatello Idaho to Oklahoma...</h1> <p>I spent all day driving and don't have any code to show for it...</p> </body> </html>
Post a Comment
Read more

Day 157

Day three of SudioWeb... Yipeee! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html lang="en-US"> <head> <title>Chapter 8, Meta and Head</title> <meta charset="UTF-8"> <style> h1 {color:red;} p {color:blue;} </style> <script> function callAlert(aVar) { alert("You clicked on the text: " + aVar.innerHTML); } </script> </head> <body> <h1 onclick="callAlert(this);">Meta Tags and the Head</h1> <p lang="fr-CA"> Voici! Ceci et la Francais mal ecrit!</p> <p onclick="callAlert(this);"> UTF-8 (Unicode) covers almost all of the characters and symbols in the world.</p> </body> </html>
Post a Comment
Read more

Day 156

Still with the Studioweb course... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <h1>HTML Forms</h1> <form name="login" action="process-form.php" method="get"> User name: <input type="text" name="username" size="40"> <br> Password: <input type="password" name="password" size="10"> <br> Favorite car: <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab2</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> <br> Comments: <br> <textarea name="comments" rows="10" cols="30"></textarea> <br> <input type="radio" name="vehicle&q
Post a Comment
Read more

Day 155

Starting over as a refresher on a StudioWeb course. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html> <head> <title>Work page</title> </head> <body> <p><a href="index.html">Home</a></p> <hr> <h1>Work Page</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> <p>Check out a list of <a href="sub-pages/my-friends.html">my friends.</a></p> <p>Check out a list of <a href="my
Post a Comment
Read more

Day 154

Back on the vault again... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <form action="#" method="POST">           <div id="regName">             <div id="test">               <label>Account Code?</label>               <input type="text" name="acntCode" size="15" maxlength="13">                            <label>Account Association Code?</label>               <input type="text" name="acntCode" size="15" maxlength="13">             </div>             <br>             <label>First Name</label>             <input type="text" name="firstName" size="10" maxlength="12">             <label>Middle Initial</label>             <input type="text" name="mInitial" size="1" maxl
Post a Comment
Read more

Day 153

Going back to an older, personnal project for a break... #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"><
Post a Comment
Read more

Day 152

A piece of day two building the CSS GRID page in WordPress #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #pic1 {   grid-column-start: 1;   grid-column-end: 3;   column-span: 2; } #pic2 {   grid-column-start: 3;   grid-column-end: 5;   grid-row-start: 1;   grid-row-end: 3;   column-span: 2; } #pic3 {   grid-column-start: 1;   grid-column-end: 3;   column-span: 2; } #pic6 {   grid-column-start: 3;   grid-column-end: 5;   column-span: 2; }
Post a Comment
Read more

Day 151

Starting the CSS for the CSS Grid #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** h1, h3, p {   text-align: center; } #div2 {   margin: 0 auto;   max-width: 960px; } .photo {   width: 10rem;   height: 10rem; } section {   max-width: 960px;   margin: 0 auto;   display: grid;   grid-template-columns: repeat(4, 1fr);   grid-gap: 1rem; }
Post a Comment
Read more

Day 150

Starting to build the 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">     <link rel="stylesheet" href="css/images.css">     <title>Document</title>   </head>   <body>     <div id="div1">       <h1>Information</h1>       <h3>STUDIO</h3>     </div>     <div id="div2">       <p>My studio, though it be small, it be mighty! Mostly used for newborn and a few kids during each session. However, I have fit a whole family of 4 in here before and it was nice.</p>     </div>     <section>       <div id="pic1"><img src="/img/image/IMG_0105-2.jpg" class="photo" alt="&q
Post a Comment
Read more

Day 149

And it begins... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #photo-grid {     display: grid;     grid-template-columns: 1fr 1fr 1fr 1fr; }
Post a Comment
Read more

Day 148

This should be the last day of this mess.  I am moving the offensive Spark page to CSS GRID.  I will have that code tomorrow when I have it better laid out. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html> <head> <title>cheat day</title> <style type="text/css"> h1 { text-align: center; } p { text-align: center; color: darkgreen; } </style> </head> <body> <h1>This a cheat!  Part three</h1> <p>I spent most of the day messing with WordPress and don't have any code to show for it...<br>Today, I am trying to figure out how to import a page from Adobe Spark.  The iFrame didn't work out so I am rebuilding the page fresh using CSS GRID.  Actual code tomorrow...</p> </body> </html>
Post a Comment
Read more

Day 147

Adobe Spark is a scam, part 2!  Any ideas on how to embed a Spark page into an iframe? #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html> <head> <title>cheat day</title> <style type="text/css"> h1 { text-align: center; } p { text-align: center; color: darkgreen; } </style> </head> <body> <h1>This a cheat!  Part three</h1> <p>I spent most of the day messing with WordPress and don't have any code to show for it...<br>Today, I am trying to figure out how to import a page from Adobe Spark.  But now I am trying to use an iframe...</p> </body> </html>
Post a Comment
Read more

Day 146

Adobe Spark is a scam! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html> <head> <title>cheat day</title> <style type="text/css"> h1 { text-align: center; } p { text-align: center; color: darkgreen; } </style> </head> <body> <h1>This a cheat!  Part two</h1> <p>I spent most of the day messing with WordPress and don't have any code to show for it...<br>Today, I am trying to figure out how to import a page from Adobe Spark.</p> </body> </html>
Post a Comment
Read more

Day 145

WordPress is killing me... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html> <head> <title>cheat day</title> <style type="text/css"> h1 { text-align: center; } p { text-align: center; color: darkgreen; } </style> </head> <body> <h1>This a cheat!</h1> <p>I spent most of the day messing with WordPress and don't have any code to show for it...</p> </body> </html>
Post a Comment
Read more

Day 144

Learning parallax scrolling... Code from a tutorial. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** .hsContainer {     display: table;     table-layout: fixed;     width: 100%;     height: 100%;     overflow: hidden;     position: relative;     opacity: 0; } .hsContent {     max-width: 450px;     margin: -150px auto 0 auto;     display: table-cell;     vertical-align: middle;     color: #ebebeb;     padding: 0 8%;     text-align: center } .bcg {     background-position: center center;     background-repeat: no-repeat;     background-attachment: fixed;     background-size: cover;     height: 100%;     width: 100%; }
Post a Comment
Read more

Day 143

Not much required for the legal crap page... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** h1#TOP {   margin:15px 0px;   text-align: center; } h2.BOD {   margin-top: 10px; } .legal {   text-align: justify; }
Post a Comment
Read more

Day 142

Migrating menu bits to WordPress. #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********           <!-- <ul class="submenu">             <li id="menu-session"><a href="minisessions.html">Mini Sessions</a></li>             <li id="menu-birth"><a href="pdf/birth.pdf" target="_blank">Birth</a></li>             <li id="menu-newborn"><a href="pdf/newborn.pdf" target="_blank">Newborns</a></li>             <li id="menu-cakesmash"><a href="cakesmash.html">First Birthday</a></li>             <li id="menu-seniors"><a href="pdf/seniors.pdf" target="_blank">Seniors</a></li>             <li id="menu-engagement"><a href="engagement.html">Engagement</a></li>             <
Post a Comment
Read more

Day 141

Form building #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********         <fieldset>           <legend>Personal Information:</legend>           <label for="f-name">First Name: </label><br>           <input type="text" name="f-name" id="fname"><br>           <label for="l-name">Last Name: </label><br>           <input type="text" name="l-name" id="lname"><br>           <label for="email">Email Address: </label><br>           <input type="email" name="email"><br>           <label for="phone">Phone Number: </label><br>           <input type="phone" name="phone"><br>           <label for="address1">Street Address: </label><br>           <input type="addre
Post a Comment
Read more

Day 140

Figuring out the calendar... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** /* Calendar "Days" */ .ui-datepicker-calendar th { padding-top: 15px; padding-bottom: 10px; text-align: center; font-weight: normal; color: #676b29; } .ui-datepicker-calendar td { padding: 0 7px; text-align: center; line-height: 26px; } .ui-datepicker-calendar .ui-state-default { display: block; width: 26px; outline: none; text-decoration: none; color: #381616; border: 1px solid transparent; } /* Day Active State*/ .ui-datepicker-calendar .ui-state-active { color: #6a9113; border-color: #6a9113; } /* Other Months Days*/ .ui-datepicker-other-month .ui-state-default { color: #9c9999; }
Post a Comment
Read more

Day 139

Back and forth... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <main id="main-content">       <div id="main-bg-img">         <!-- <div id="bg-img"></div> -->         <img id="bg-img" src="img/main-bg-425.jpg" alt="">         <div id="tittle-box">           <h2>Book your session</h2>           <h3>with</h3>           <br>           <hr class="style2">           <br>           <h4>Eleshea Martin</h4>         </div>       </div>       <hr class="style1">       <section>         <div class="sessions button" id="session"><a href="minisessions.html">Mini Sessions</a></div>         <div class="sessions button" id="birth"><a href="pdf/birth.pdf" target=&qu
Post a Comment
Read more

Day 138

Here we go again... #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

Day 137

My first attempt at breaking WordPress... SUCCESS!! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <span class="cv-copyright-text"> <!-- <?php $shaoor_blog_copyright_text = get_theme_mod( 'shaoor_blog_copyright_text', __( 'Wisdom Blog Child Theme Shaoor', 'shaoor' ) ); echo esc_html( $shaoor_blog_copyright_text ); ?> --> </span>
Post a Comment
Read more

Day 136

Building buttons... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <section>         <div class="sessions button" id="session"><a href="minisessions.html">Mini Sessions</a></div>         <div class="sessions button" id="birth"><a href="pdf/birth.pdf" target="_blank">Birth</a></div>         <div class="sessions button" id="newborn"><a href="pdf/newborn.pdf" target="_blank">Newborns</a></div>         <div class="sessions button" id="cakesmash"><a href="cakesmash.html">First Birthday</a></div>         <div class="sessions button" id="seniors"><a href="pdf/seniors.pdf" target="_blank">Seniors</a></div>         <div class="sessions button" id="en
Post a Comment
Read more

Day 135

Size 4 of 4... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** @media only screen and (min-width: 901px) {   #main-bg-img #bg-img {     max-width: 1024px;   }   #main-bg-img #tittle-box {     width: 30%;     height: 50%;   }   #tittle-box h2, h3 {     font-size: 24px;   }     #tittle-box h4 {     font-size: 16px;   }   section p {     font-size: 16px;     font-weight: 400;   }   .menu-toggle {     visibility: hidden;   }     ul.navmenu {     margin: 5px 0 5px 0;     list-style-type: none;     font-family: selawiksemilight;     text-align: center;     z-index: 1;   }     ul.navmenu li {     display: inline-block;     width: 125px;     text-align: center;     position: relative;     margin-right: 4px;   }     ul.navmenu a {     text-decoration: none;     display: block;     width: 125px;     height: 25;     line-height: 22px;      } }
Post a Comment
Read more

Day 134

Fine tuning some colors... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** section > div {     display: inline-block;     width: 70%;     margin: 0 auto;     padding: 1em;     font-size: 20px;     text-align: center;     line-height: 2.5rem;     background: linear-gradient(white 40%, rgb(248, 249, 249, 0.5) 80%);     border: none;     border-radius: 10px;     box-shadow: 5px 10px 15px #f5cece;     cursor: pointer;   }
Post a Comment
Read more

Day 133

Working it. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #header-div { width: 100%; height: 9rem; position: relative; background-color: #40e0d0; border: 2px solid #c0c0c0; border-radius: 15px; box-shadow: 0 2px 5px #33b3a6; } #header-div h1 { margin: 0; position: absolute; width: 55%; top: 56%; left: 51%; transform: translate(-50%, -50%); font-size: 8vw; color: #000080; } #main-nav { margin: 0; padding: 5px; position: absolute; width: 75%; top: 11%; left: 51%; transform: translate(-50%, -50%); border-radius: 10px 10px 10px 10px; border: 1px solid #c0c0c0; box-shadow: 0 2px 3px #33b3a6; overflow: hidden; list-style-type: none; font-size: .8rem; /*border-radius: 12px 12px 0 0;*/ /*border-bottom: 1px solid #c0c0c0;*/ background-color: #66e6d9; } #main-nav .left { float: left; margin-left: .5rem; } #main-nav .right { float: right; margin-right: .5rem; }
Post a Comment
Read more