Posts

Showing posts from February, 2019

Day 132

Back to a personal project... #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&q
Post a Comment
Read more

Day 131

Size 3 of 4 #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** @media only screen and (min-width: 651px) and (max-width: 900px) {   h2 {     margin-top: 10px;   }     h4 {     margin-top: -10px;   }     section {     margin-top: 10px;     display: grid;     grid-template-columns: 1fr 1fr;     grid-auto-rows: 5rem;     column-gap: 2rem;     row-gap: 2rem;     justify-items: stretch;   }     section > div {     display: inline-block;     width: 80%;     margin: 0 auto;     padding: 1em;     font-size: 20px;     text-align: center;     line-height: 2.5rem;     background: linear-gradient(white 40%, rgba(220, 200, 200, 0.5) 80%);     border: none;     border-radius: 10px;     box-shadow: 5px 10px 15px #f5cece;     cursor: pointer;   }     section > div:hover {     background: linear-gradient(rgba(220, 200, 200, 0.5) 40%, white 80%);   }     section .sessions a {     text-decoration: none;     color: rgb(3, 80, 6);   } }
Post a Comment
Read more

Day 130

Size 2 of 4 #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** @media only screen and (min-width: 426px) and (max-width: 650px) {   h2 {     margin-top: 10px;   }     h4 {     margin-top: -10px;   }     section {     margin-top: 10px;     display: grid;     grid-template-columns: 1fr 1fr;     grid-auto-rows: 5rem;     column-gap: 2rem;     row-gap: 2rem;     justify-items: stretch;   }     section > div {     display: inline-block;     width: 90%;     margin: 0 auto;     padding: 1em;     font-size: 20px;     text-align: center;     line-height: 2.5rem;     background: linear-gradient(white 40%, rgba(220, 200, 200, 0.5) 80%);     border: none;     border-radius: 10px;     box-shadow: 5px 10px 15px #f5cece;     cursor: pointer;   }     section > div:hover {     background: linear-gradient(rgba(220, 200, 200, 0.5) 40%, white 80%);   }     section .sessions a {     text-decoration: none;     color: rgb(3, 80, 6);   } }
Post a Comment
Read more

Day 129

Size 1 of 4... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** @media only screen and (min-width: 359px) and (max-width: 425px) {   h2 {     margin-top: 10px;   }     h4 {     margin-top: -10px;   }     section {     margin-top: 10px;     display: grid;     grid-template-columns: 1fr 1fr;     grid-auto-rows: 5rem;     column-gap: 2rem;     row-gap: 2rem;     justify-items: stretch;   }     section > div {     display: inline-block;     width: 95%;     margin: 0 auto;     padding: 1em;     font-size: 20px;     text-align: center;     line-height: 2.5rem;     background: linear-gradient(white 40%, rgba(220, 200, 200, 0.5) 80%);     border: none;     border-radius: 10px;     box-shadow: 5px 10px 15px #f5cece;     cursor: pointer;   }     section > div:hover {     background: linear-gradient(rgba(220, 200, 200, 0.5) 40%, white 80%);   }     section .sessions a {     text-decoration: none;     color: rgb(221, 31, 31);     /*
Post a Comment
Read more

Day 128

This is called pick-a-font! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** /* Prefered font */ @font-face {   font-family: 'selawiklight';   src: url('/font/selawik.light.ttf');   src:     format('truetype');   font-weight: 400; } @font-face {   font-family: 'selawiksemilight';   src: url('/font/selawik.semilight.ttf');   src:     format('truetype');   font-weight: 500; } @font-face {   font-family: 'selawikbold';   src: url('/font/selawik.regular.ttf');   src:     format('truetype');   font-weight: 700; }
Post a Comment
Read more

Day 127

Not sure I am liking a date picker solution for a calendar #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** .ui-datepicker-calendar .ui-state-default { display: block; width: 26px; outline: none; text-decoration: none; color: #381616; border: 1px solid transparent; }
Post a Comment
Read more

Day 126

Still working out a calendar... HELP! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** .ui-datepicker-calendar td { padding: 0 7px; text-align: center; line-height: 26px; }
Post a Comment
Read more

Day 125

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>            
Post a Comment
Read more

Day 124

A chunk of menu I decided to NOT use... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <nav cl ass =" navigation "> <ul class =" navmenu "> <li id =" menu-current "> <a href =" index.html "> Home </a> </li> <li id =" menu-book "> <a href =" booking.html "> Book With Me </a> <!-- <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&qu
Post a Comment
Read more

Day 123

Trying to build a calendar without a clue... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Booking - Fresh Feature Photography</title> </head> <body>   <div>     <h1>Book a session with Elesea</h1>     <br>     <h2>Welcome!</h2>     <h2> And, Thank You.</h2>     <br> </div> <div>   Please select the desired date for your session </div> </body> </html>
Post a Comment
Read more

Day 122

Throwing on a "Closed" ribbon... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** .ribbon {   position: absolute;   right: -2px; top: -6px;   z-index: 1;   overflow: hidden;   width: 75px; height: 75px;   text-align: right; } .ribbon span {   font-size: 10px;   font-weight: bold;   color: #FFF;   text-transform: uppercase;   text-align: center;   line-height: 20px;   transform: rotate(45deg);   -webkit-transform: rotate(45deg);   width: 100px;   display: block;   background: #79A70A;   background: linear-gradient(#F70505 0%, #8F0808 100%);   box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);   position: absolute;   top: 19px; right: -21px; }
Post a Comment
Read more

Day 121

First day of month five...  Here are my break points for the photography website I am working on. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** @media only screen and (min-width: 359px) and (max-width: 425px) { } @media only screen and (min-width: 426px) and (max-width: 650px) { } @media only screen and (min-width: 651px) and (max-width: 900px) { } @media only screen and (min-width: 901px) {   }
Post a Comment
Read more

Day 120

And today I get told about a design change... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** @media only screen and (min-width: 901px) {   section #familypic {     margin-right: 1%;     margin-left: 1%;     width: 45%;     float: right;     padding:1px;     border-radius: 10px;   }     section #daughter-left {     margin-right: 1%;     margin-left: 1%;     width: 30%;     float: left;     padding:1px;     border-radius: 10px;   }     section #daughter-right {     margin-right: 1%;     margin-left: 1%;     width: 30%;     float: right;     padding:1px;     border-radius: 10px;   }     section div #walking{     margin: 11% auto 0;     width: 35%;     display: block;     padding:1px;     border-radius: 10px;   } }
Post a Comment
Read more

Day 119

I think I finally got this menu thing hammered out... Just not haow I want to. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** @media only screen and (min-width: 359px) and (max-width: 425px) {   h2 {     margin-top: 10px;   }     h4 {     margin-top: -10px;   }     section {     margin-top: 10px;     display: grid;     grid-template-columns: 1fr 1fr;     grid-auto-rows: 5rem;     column-gap: 2rem;     row-gap: 2rem;     justify-items: stretch;   }     section > div {     display: inline-block;     width: 95%;     margin: 0 auto;     padding: 1em;     font-size: 20px;     text-align: center;     line-height: 2.5rem;     background: linear-gradient(white 40%, rgba(220, 200, 200, 0.5) 80%);     border: none;     border-radius: 10px;     box-shadow: 5px 10px 18px rgb(221, 172, 172);     cursor: pointer;   }
Post a Comment
Read more

Day 118

More menu solutions played with... #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%, rgba(220, 200, 200, 0.5) 80%);   border: none;   border-radius: 10px;   box-shadow: 5px 10px 18px rgb(199, 140, 140);   cursor: pointer; } section > div:hover {   background: linear-gradient(rgba(220, 200, 200, 0.5) 40%, white 80%); } section .sessions a {   text-decoration: none;   color: rgb(3, 80, 6); }
Post a Comment
Read more

Day 117

I AM SICK OF THIS MENU!!! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** /* .navmenu {     position: fixed;     z-index: 1;     top: 2.1em;     right: .5em;     height: 0;     overflow: hidden;   }   .navmenu--open {     height: auto;   } */     .navigation ul {       list-style: none;       margin: 0;       position: fixed;       z-index: 1;       top: 2.1em;       right: 13em;       height: 0;       /* overflow: hidden; */     }     .navigation .navmenu li {       padding: 10px;       position: relative;       left: 11.6em;       width: 125px;       background: #34495E;       border-left: 2px solid #F1C40F;       border-top: 1px solid #BDC3C7;     }
Post a Comment
Read more

Day 116

Decided against CSS Grid today... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** section {   margin: 10px auto;   display: block;   width: 80%;     /* grid-template-columns: 1fr 1fr 1fr; */   /* grid-row-gap: 2px; */   /* grid-auto-rows: 250px; */   /* grid-auto-rows: minmax(250px auto); */   /* justify-items: center; */   /* align-items: center; */ } section div:nth-child(odd) {   background: #f1cbff;   /* grid-column: 1/3; */ } section div:nth-child(even) {   background: #e1f7d5;   /* grid-column: 2/4; */ }
Post a Comment
Read more

Day 115

Before and after update of the sub-menu... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <ul class="submenu">   <li id="menu-current"><a href="minisessions.html">Mini Sessions</a></li>   <li id="menu-newborn"><a href="newborn.html">Newborns</a></li>   <li id="menu-seniors"><a href="seniors.html">Seniors</a></li>   <li id="menu-wedding"><a href="wedding.html">Weddings</a></li>   <li id="menu-family"><a href="family.html">Family</a></li> </ul> <ul class="submenu">   <li id="menu-session"><a href="minisessions.html">Mini Sessions</a></li>   <li id="menu-newborn"><a href="birth.html">Birth</a></li>   <li id="
Post a Comment
Read more

Day 114

First time to play with CSS Grid #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** section {   margin: 10px;   display: grid;   grid-template-columns: 1fr 1fr 1fr;   grid-row-gap: 2px;   grid-auto-rows: 250px;   /* grid-auto-rows: minmax(250px auto); */   /* justify-items: center; */   /* align-items: center; */ } section div:nth-child(odd) {   background: #f1cbff;   grid-column: 1/3; } section div:nth-child(even) {   background: #e1f7d5;   grid-column: 2/4; } section p.sessions {   padding: 10px;   font-size: 2.5rem; }
Post a Comment
Read more

Day 113

More content... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** section div #familypic {   margin: 15px 10% 0px 1%;   /* margin-right: 10%; */   /* margin-left: 1%; */   /* padding-left: 1%; */   width: 30vw;   float: right;   padding:1px;   border:1px solid #021a40;   border-radius: 10px;   background-color:#ff0; } section #daughter-left {   margin-right: 1%;   margin-left: 1%;   /* padding-left: 1%; */   width: 7vw;   float: left;   padding:1px;   border:1px solid #021a40;   border-radius: 10px;   background-color:#ff0; } section #daughter-right {   margin-right: 1%;   margin-left: 1%;   /* padding-left: 1%; */   width: 7vw;   float: right;   padding:1px;   border:1px solid #021a40;   border-radius: 10px;   background-color:#ff0; }
Post a Comment
Read more

Day 112

Slow day on the site due to a busy day at work... #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********       <section>         <div class="a">             <p>Valentines - January 27-29</p>         </div>         <div class="b">           <p>Easter mini session - March 1-4</p>         </div>         <div class="c">           <p>Mom & Me or Dad & Me mini session - April 5-7</p>         </div>         <div class="a">           <p>Fruit Bath minisession - July 11-13</p>         </div>         <div class="b">           <p>Fall Family mini session - October 18-21</p>         </div>         <div class="c">           <p>Christmas mini session - November 1-4</p>         </div>       </section>
Post a Comment
Read more

Day 111

Time to start putting in some content... #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********       <section>         <p>Valentines - January 27-29</p>         <br>         <p>Easter mini session - March 1-4</p>         <br>         <p>Mom & Me or Dad & Me mini session - April 5-7</p>         <br>         <p>Fruit Bath minisession - July 11-13</p>         <br>         <p>Fall Family mini session - October 18-21</p>         <br>         <p>Christmas mini session - November 1-4</p>       </section>
Post a Comment
Read more

Day 110

I almost have this where I want it. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** @media only screen and (min-width: 426px) and (max-width: 650px) {   #main-bg-img #bg-img {     max-width: 650px;     border: 2px solid blue;   }   #main-bg-img #tittle-box {     width: 50%;     height: 50%;   }   #tittle-box h2, h3 {     font-size: 18px;   }     #tittle-box h4 {     font-size: 12px;   }   section p {     font-size: 12px;     font-weight: 400;   }     #hr3 {     visibility: hidden;   }   .navmenu {     position: fixed;     z-index: 1;     top: 2.1em;     right: .5em;     background: #464655;     height: 0;     overflow: hidden;   }
Post a Comment
Read more

Day 109

I have completely rebuilt this site three times now trying ot get the menu just right... sheeeesh! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta name="description" content="Professional portrait photography in Oklahoma">     <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/main.css"> -->   <link rel="stylesheet" href="css/menulearn.css">   <title>Welcome - Fresh Feature Photography</title> </head>
Post a Comment
Read more

Day 108

Just another day building... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #main-bg-img #bg-img {   /* background-image: url('/img/main-bg-425.jpg'); */   border-radius: 75px;   width: 100%;   max-width: 425px;   height: auto;   max-height: 272px;   opacity: .3; } #main-bg-img #tittle-box {   width: 50%;   /* height: 12rem; */   margin: 0;   background-color: rgba(255, 255, 255, 0.4);   position: absolute; top: 50%; left: 50%;   transform: translate(-50%, -50%);   border: 2px solid #c0c0c0; }
Post a Comment
Read more

Day 107

Building an animated hamburger menu... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** .hamburger, .hamburger::before, .hamburger::after {   content: '';   display: block;   background: rgb(42, 31, 94);   height: 3px;   width: 1.5em;   border-radius: 3px;   transition: all ease-in-out 500ms; } .hamburger::before {   transform: translateY(-6px); } .hamburger::after {   transform: translateY(3px); } .open .hamburger {   transform: rotate(45deg); } .open .hamburger::before {   opacity: 0; } .open .hamburger::after {   transform: translateY(-3px) rotate(-90deg); }
Post a Comment
Read more

Day 106

Going responsive... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** @media only screen and (max-width: 425px) {   .container {   max-width: 425px;  }  .site-nav {   position: fixed;   z-index: 1;   top: 3.08em;   right: .5em;   background: #030233;   clip-path: circle(0px at top right);   transition: clip-path ease-in-out 500ms;   overflow: hidden; }
Post a Comment
Read more

Day 105

Any ideas on how to build a div using the dimensions of the background image using percentages?  Me either... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #main-bg-img #bg-img {     background-image: url('/img/main-bg-650.jpg');     width: 100vw;     max-width: 650px;     height: auto;     max-height: 272px;     border: 5px solid blue;   }
Post a Comment
Read more