Day 21

Thanks Stefan... More functions.
#CodingPhase #TheCodingWay #365CodingPhaseChallenge

**********

#CodingPhase #TheCodingWay #365CodingPhaseChallenge

Comments

Post a Comment

Popular posts from this blog

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.">      ...
Read more

Day 341

Using jquery and classes to control transitions... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <div class="parent">   <div class="button">Click Me</div>   <div class="box"></div> </div> ---------- CSS ---------- * {   box-sizing: border-box; } .parent {   text-align: center;   padding: 50px; } .button {   border-radius: 3px;   background: red;   color: #fff;   display: inline-block;   padding: 15px 25px; } .box {   background: black;   width: 200px;   height: 200px;   transition: all 0.6s ease-in-out;   transform: translate3d(0, 0, 0); } .one {   transform: translate3d(500px, 0, 0); } .two {   transform: translate3d(500px, 500px, 0); } .three {   transform: translate3d(0, 500px, 0); } ---------- JS ---------- var stateLocation = 0; $(document).on("click", ".button", function() {   switch (stateLocation) {     case 0:  ...
Read more

Day 289

Part two of four of the mixer.com clone #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** @import url("reset.css"); @import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&display=swap"); html, body {   background: #253141;   font-family: "Montserrat", sans-serif; } header {   display: flex;   justify-content: space-between;   padding: 30px;   .left-menu {     display: flex;     .logo {       font-size: 2rem;       font-weight: 700;       color: #fff;     }     .menu {       display: flex;       justify-content: center;       align-items: center;       padding: 0 50px;       a {         color: rgba(255, 255, 255, 0.6);...
Read more