Posts

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...

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...

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...

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 1...

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; }

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; }

Day 126

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