Farewell KOBE #mambaout #CSS Toggle Effect

farewell-kobe-mambaout-css-toggle-effect.markdown

Farewell KOBE #mambaout #CSS Toggle Effect

A Pen by Casthra Demosthene on CodePen.

License.

index.html

<div>
  <div class="container__content">
    <div class="kobe__text">
      
				<h1 class="kobe__text-header">
					KOBE
				</h1>
			
      <div class="kobe__text-info">
        <h2>
					BRYANT
				</h2>
        <p>
					<i>August 23, 1978 - January 26, 2020</i>
				</p>
        <p>
						An American professional basketball player drafted in 1996 by the LA Lakers, he played his entire 20-year career as the team's star shooting guard. <b>
					<small style="color:#000;">
					Click image
					</small>
					</b>
				</p
				<p>
					<b>
						<i>
							Forever a legend.</i>
					</b>
				</p>
      </div>
    </div>
    <div class="kobe__image">
			<a href="#toggle">
      <img width="275px" src="https://i.ibb.co/Ct6rW92/pngfuel-com.png" alt="pngfuel-com" border="0">
			</a>
    </div>
		
		<div id="toggle">
			<iframe width="900" height="615" src="https://www.youtube.com/embed/DAcSGkeT-gI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
		</div>
  </div>
</div>

script.js

//CLICK ON KOBE IMAGE FOR TOGGLE EFFECT

// RIP Kobe
// Based off of art and tribute by Gonzalo Bujes
// https://dribbble.com/shots/9778999-Kobe-Bryant-Tribute-Forever-a-legend
//follow on IG@incrediblecast & 
//Twitter@incrediblecast

style.css

@import url("https://fonts.googleapis.com/css?family=Raleway:400,800&display=swap");
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
* {
  color: white;
}

body{
	height:100%;
  background: linear-gradient(90deg, #FDB927 50%, #552583 50%);
}

h1, h2 {
  font-family: 'Raleway', sans-serif;
}

h1 {
  font-weight: extra-bold;
  font-size: 200px;
  text-align: center;
}

h2 {
  font-size: 26px;
}


.container__content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.kobe__text {
  position: relative;
}

h1:hover{
	color: #000;
}
h2:hover{
	color: #000;
}
.kobe__text-info {
  font-family: 'Roboto', sans-serif;
  position: absolute;
  width: 300px;
  right: -192px;
  top: 65%;
  line-height: 22px;
}

.kobe__image {
  position: absolute;
  left: 50%;
  margin-left: -170px;
}

#toggle{
	display:none;
	position: absolute;
  margin: 0 auto;
}

#toggle:target{
	display:block;
}

#toggle:target + .close{
	display:block;
}