#DailyCSSImages: Google Doodle marks | 140th Anniversary of Wimbledon

dailycssimages-google-doodle-marks-140th-anniversary-of-wimbledon.markdown

#DailyCSSImages: Google Doodle marks | 140th Anniversary of Wimbledon

A Pen by ZaynahGiti on CodePen.

License.

index.html

	<!-- 

/* 
===============================================                   Wimbledon championships                    
Game Container and borders */ 
-->
<div class="wimbledon-container">
  <div class="game-container">
    <div class="game-border-1">
      <div class="game-border-2">
        <div class="game-border-3">
          <h1>140</h1>
        </div>
         <div class="game-border-4"></div>
     </div>
   </div>
    
    
 	<!-- 

/* 
===============================================                   Wimbledon championships                    
Player-1 tools  : Tennis Racket and Tennis Ball -  */ 
-->   
    
    <div class="tennis-racket-player-1">
        <span class="racket-shape-1"></span>
        <span class="racket-shape-2"></span>
        <span class="racket-shape-3">
 <!--
 /* 
===============================================                                      
Tennis Racket -lines */ 
-->   
      
        <span class="racket-line-1"></span>
        <span class="racket-line-2"></span>
        <span class="racket-line-3"></span>
        <span class="racket-line-4"></span>
        <span class="racket-line-5"></span>
    
      
      </span>
      
      <div class="tennis-ball"></div>
      
    </div>
    
    
    
    	<!-- 

/* 
===============================================                   Wimbledon championships                    
Player-2 tools  : Tennis Racket  -  */ 
-->   
    
    <div class="tennis-racket-player-2">
        <span class="racket-shape-1"></span>
        <span class="racket-shape-2"></span>
        <span class="racket-shape-3">
 <!--
 /* 
===============================================                                      
Tennis Racket -lines */ 
-->   
      
        <span class="racket-line-1"></span>
        <span class="racket-line-2"></span>
        <span class="racket-line-3"></span>
        <span class="racket-line-4"></span>
        <span class="racket-line-5"></span>
    
      
      </span>
      
    
      
    </div>
    
 </div>
  
   <!--
 /* 
===============================================                                      
Google Letters */ 
-->   
  <div class="letters">
  <div class="g"></div>
  <div class="o"></div>
  <div class="o-copy"></div>
    <div class="g-small">
    <div class="g-small-1"></div>
      <span class="g-small-line-1"></span>
  <div class="g-small-2"></div>
      <span class="g-small-line-2"></span>
    </div>
    <div class="stairs">
      <span class="stairs-line-1"></span>
      <span class="stairs-line-2"></span>
      <span class="stairs-line-3"></span>
      
       <span class="stairs-step-1"></span>
      <span class="stairs-step-2"></span>
      <span class="stairs-step-3"></span>
       <span class="stairs-step-4"></span>
      <span class="stairs-step-stand-1"></span>
      <span class="stairs-step-stand-2"></span>
    </div>
    
    <div class="l">
      <span class="cloth-1"></span>
      <span class="cloth-2"></span>
      <span class="cloth-3"></span>
      </div>
    
    <div class="microphone">
      <span class="mic-1"></span>
      <span class="mic-2"></span>
      <span class="mic-3"></span>
      <span class="mic-4"></span>
    </div>
    <div class="e"></div>
   </div>
  
     <div class="text-credit"> <!--  footer -->
      <h5><a href="https://www.facebook.com/zeinaChallenges/" target="_blank">ZeinaChallenges </a></h5>
    </div> <!-- end footer -->
  
</div>

 
</div>
</div>

script.js

/*Inspired By Google Doodle 
July 3, 2017 
140th year of the Wimbledon championships, the world’s oldest tennis tournament
*/

style.scss

$wimbledon-purple:#8A2BE2	;
$wimbledon-green-light:#B0E57C;
$wimbledon-green-dark:#006633;
$wimbledon-tennis-ball:#fbff96;
$wimbledon-stairs-color:#265126;

@keyframes ball-animated {
	0% {
		transform: translate(-50%, -50%) translateY(200px) rotate(0deg);
	}
	50% {
		transform: translate(-50%, -50%) translateY(0px) rotate(180deg);
	}
	100% {
		transform: translate(-50%, -50%) translateY(200px) rotate(360deg);
	}
}

@keyframes racket-1-animated {
  100%{top:110px;left:30px;}
  100%{top:40px;left:40px;}
  50%{top:40px;left:30px;}
  75%{top:110px;left:40px;}
  100%{top:110px;left:30px;}
}





.wimbledon-container{
  position:relative;
  margin:5% auto;
  width:1200px;
  height:600px;
  border-radius:12px;
  background:$wimbledon-green-light;
}

.game-container{
  position:absolute;
  margin:30% 4%;
  width:1100px;
  height:180px;
  background:lighten($wimbledon-green-dark,15%);
}

.game-border-1{
  position:absolute;
  margin:1.5% 2%;
  width:1050px;
  height:145px;
  background:none;
  border:2px solid white;
}

.game-border-2{
  position:absolute;
  width:525px;
  height:142px;
  margin:0% 25%;
  background:none;
  border:2px solid white;
  
}

.game-border-3{
  position:absolute;
  width:525px;
  height:3px;
  background:white;
  margin:72px 0px;
  //transform:rotate(90deg);
  
  h1{
    color:white;
    margin-left:20%;
  }
}

.game-border-4{
  position:absolute;
  height:192px;
  width:10px;
  background:white;
  margin:-9% 48%;
}

.tennis-racket-player-1{
  position:absolute;
  width:100px;
  height:120px;
  background:none;
  //border:2px solid red;
  margin:0.5% 2.5%;
 animation: racket-1-animated 2s ease-in-out infinite;

}
  .racket-shape-1{
    
    position:absolute;
    width:25px;
    height:70px;
    border-top-left-radius:12px;
    border-top-right-radius:12px;
    background:white;
    margin:2px 10px;
  
    
  }

  .racket-shape-2{
    
    position:absolute;
    width:12px;
    height:72px;
    background:white;
    margin:-22px 16px;
    
  }
  
  .racket-shape-3{
    position:absolute;
    width:60px;
    height:80px;
    background:none;
    border-radius:50%;
    border:10px solid white;
    margin:-112px -12px;
    transform:rotate(5deg);
    z-index:1;
}
    .racket-line-1{
      position:absolute;
      width:43px;
      height:3px;
      background:lighten(black,20%);
      margin:12px 8px;
      z-index:-1;
    }
    
    .racket-line-2{
      @extend .racket-line-1;
      margin:35px 2px;
      width:58px;    
     }
    
    .racket-line-3{
      @extend .racket-line-1;
      margin:55px 2px;
      width:54px;    
    }
    
    .racket-line-4{
      @extend .racket-line-1;
      margin:38px 1px;
      width:74px; 
      transform:rotate(90deg);
    }
    
     .racket-line-5{
      @extend .racket-line-1;
      margin:38px 1px 0px -18px;
      width:72px; 
      transform:rotate(90deg);
    }
    
  
  
  .tennis-ball{
    position:absolute;
    width:30px;
    height:30px;
    border-radius:50%;
    background:$wimbledon-tennis-ball;
    margin:-5px 40px;
    animation: ball-animated 1.5s linear infinite;
    
  }
  



.tennis-racket-player-2{
  
  position:absolute;
  width:100px;
  height:120px;
  background:none;
  //border:2px solid red;
  margin:1% 92%;
 
  
  .racket-shape-3{
    transform:rotate(0deg);
    left:-5px;
    top:-8px;
  }
}


.letters {
  height: 180px;
  width: 850px;
  //border: 1px solid black;
  display: inline-block;
  margin:5% 25%;
  
}

.letters > * {
  position: relative;
  margin:5% auto;
  top: 25px;
  background-color: black;
}

.letters > *::before,
.letters > *::after {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  content: '';
}

.g {
  position:absolute;
  margin-top:5%;
  height: 75px;
  width: 75px;
  border-radius: 50%;
  border-top: 12px solid lighten($wimbledon-purple,10%);
  border-left: 12px solid lighten($wimbledon-purple,10%);
  border-bottom: 12px solid lighten($wimbledon-purple,10%);
  border-right: 12px solid $wimbledon-green-light;
  background-color: $wimbledon-green-light;
  box-shadow: -10px -10px 0px 8px white;
}
.g::before {
  width: 40px;
  height: 14px;
  background-color:lighten($wimbledon-purple,10%);
  left: 43px;
  border-top-left-radius:30%;
  border-top-right-radius:30%;
  border-bottom-left-radius:30%;
  border-bottom-right-radius:30%;
}
.g::after {
  background-color:lighten($wimbledon-purple,10%);
  height: 35px;
  width: 12px;
  left: 61px;
  top: 35px;
  border-radius: 0 0 3px 0;
}

.o {
  position:absolute;
  margin-left:10%;
  margin-top:2%;
  height: 75px;
  width: 50px;
  border: 15px solid lighten($wimbledon-purple,10%);
  background: transparent;
  border-radius: 50%;
  box-shadow: -10px -10px 0px 8px white;
 
}

.o-copy{
  @extend .o;
  margin-top:5%;
  margin-left:18.5%;
}

.g-small{
  position:absolute;
  margin-top:0%;
  margin-left:26.5%;
  height:240px;
  width:150px;
  background:none;
 // border:2px solid black;
  
.g-small-1{
  @extend .o;
   margin-top:60%;
   height: 45px;
  
 
  }
  
  .g-small-2{
  @extend .o;
   margin-top:8%;
   margin-left:14%;
   height: 40px;
   width: 30px;
 
  }
  
}

 .g-small-line-1{
      position:absolute;
      width:30px;
      height:20px;
      background:lighten($wimbledon-purple,10%);
      margin-top:50%;
      margin-left:25%;
      transform:rotate(90deg);
     }

.g-small-line-2{
      position:absolute;
      width:40px;
      height:15px;
      background:lighten($wimbledon-purple,10%);
      margin-top:7.9%;
      margin-left:30%;
      border-radius:16px;
      //transform:rotate(90deg);
     }

.stairs{
  position:absolute;
  width:200px;
  height:350px;
  background:none;
  //border:2px solid red;
  margin-left:32%;
  margin-top:-2%;
}

.stairs-line-1{
  position:absolute;
  width:2.5px;
  height:200px;
  background:$wimbledon-stairs-color;
  margin-top:36%;
  transform:rotate(8deg);
  margin-left:18%;
}

.stairs-line-2{
  position:absolute;
  width:2.5px;
  height:200px;
  background:$wimbledon-stairs-color;
  margin-top:36%;
  margin-left:24.5%;
  transform:rotate(0deg);
}

.stairs-line-3{
  position:absolute;
  width:2.5px;
  height:200px;
  background:$wimbledon-stairs-color;
  margin-top:36%;
  margin-left:45%;
  transform:rotate(0deg);
}

.stairs-step-1{
  position:absolute;
  width:40px;
  height:2.5px;
  background:$wimbledon-stairs-color;
  margin:120% 25%;
}

.stairs-step-2{
  @extend .stairs-step-1;
  margin:100% 25%;
}

.stairs-step-3{
  
  @extend .stairs-step-1;
  margin:80% 25%;
  
}

.stairs-step-4{
  
  @extend .stairs-step-1;
  margin:60% 25%;
  
}

.stairs-step-stand-1{
  position:absolute;
  width:40px;
  height:40px;
  background:$wimbledon-stairs-color;
  margin:25% 25%;
    
}

.stairs-step-stand-2{
  position:absolute;
  width:5px;
  height:80px;
  background:$wimbledon-stairs-color;
  margin:15% 33%;
  transform:rotate(90deg);
}

.l{
  position:absolute;
  height: 120px;
  width: 22px;
  background-color:lighten($wimbledon-purple,10%);
  border-top-left-radius:12px;
  border-top-right-radius:12px;
   border-bottom-left-radius:12px;
  border-bottom-right-radius:12px;
  margin:-1% 37.5%;
  box-shadow: -5px -5px 0px 2px white;
  
 .cloth-1{
  position:absolute;
  width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 10px solid black;
  margin-top:40px;
  margin-left:5px;
    
  }
  
  
  .cloth-2{
  position:absolute;
  width: 0;
	height: 0;
	border-left: 40px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid black;
  margin-top:72px;
  margin-left:-15px;
  transform:rotate(80deg);
    
  }
  
 
}

.microphone{
  position:absolute;
  width:100px;
  height:100px;
  background:none;
  //border:2px solid red;
  margin:0% 40%;
  
  .mic-1{
    
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    background:black;
    margin-top:40px;
  }
  
  .mic-2{
    
    position:absolute;
    width:50px;
    height:3px;
   // border-radius:50%;
    background:black;
    margin-top:35px;
    transform:rotate(-17deg)
    
    
  }
  
  .mic-3{
    
    position:absolute;
    width:35px;
    height:3px;
   // border-radius:50%;
    background:black;
    margin-top:27px;
    margin-left:20px;
    transform:rotate(17deg)
    
  }
  
  .mic-4{
    
    position:absolute;
    width:15px;
    height:15px;
    border-radius:50%;
    background:black;
    margin-top:14px;
    margin-left:15px;
    
    
  }
  
  
}


.e {
  position:absolute;
  margin-top:5%;
  margin-left:42%;
  height: 95px;
  width: 85px;
  border-radius: 50%;
  border-top: 12px solid lighten($wimbledon-purple,10%);
  border-left: 12px solid lighten($wimbledon-purple,10%);
  border-bottom: 12px solid lighten($wimbledon-purple,10%);
  border-right: 12px solid $wimbledon-green-light;
  background-color: $wimbledon-green-light;
  box-shadow: -10px -10px 0px 8px white;
}
.e::before {
  width: 47px;
  height: 10px;
  background-color:lighten($wimbledon-purple,10%);
  left: 40px;
  top:-52px;
  //border-radius:50%;
  border-top-left-radius:30%;
  border-top-right-radius:50%;
  border-bottom-left-radius:50%;
  border-bottom-right-radius:50%;
  // border-radius:50%;
  transform:rotate(-55deg);
}
.e::after {
  background-color:lighten($wimbledon-purple,10%);
  border-top-left-radius:50%;
  border-top-right-radius:50%;
  border-bottom-left-radius:50%;
  border-bottom-right-radius:50%;
  height: 60px;
  width: 11px;
  left: 21px;
  top: -16px;
  border-radius: 30% 30% 5px 30%;
  transform:rotate(82deg);
}


.text-credit{
  position:absolute;
  left:45%;
  top:90%;
  a{
    color:lighten($wimbledon-purple,10%);
  }
}