How to convert this to simple html and css?

Hello! How to convert this to simple html and css?

https://codepen.io/gubb/pen/PdZqKy

Any help?

You can download the HTML, CSS and JS by clicking Export at the bottom of the screen and selecting Export .zip

1 Like

I can copy paste it. … I m talkimh about HTML (Haml) and CSS (SCSS) I would like this code in simple html and css as i m not famillar with HTML (Haml) and CSS (SCSS)

If you download the zip file, you’ll get plain ole HTML and plain ole CSS (as well as the Haml and SCSS). No sense in copying and pasting.

1 Like

In codepen you can select the option (click the down arrow in the appropriate panel) to view the compiled HTML or CSS and then you can copy and paste as normal.

1 Like

Hi there fumeeptc,

here you go…

HTML

<div class="themes">
  <ul>
    <li class="theme-default">1</li>
    <li class="theme-2">2</li>
    <li class="theme-3">3</li>
    <li class="theme-4">4</li>
    <li class="theme-5">5</li>
    <li class="theme-6">6</li>
  </ul>
</div>
<div class="grid-container">
  <div class="mask top"></div>
  <div class="mask left"></div>
  <div class="content">
    <div class="cal">
      <div class="day" tabindex="0">1</div>
      <div class="day" tabindex="0">2</div>
      <div class="day" tabindex="0">3</div>
      <div class="day" tabindex="0">4</div>
      <div class="day" tabindex="0">5</div>
      <div class="day" tabindex="0">6</div>
      <div class="day" tabindex="0">7</div>
      <div class="day" tabindex="0">8</div>
      <div class="day" tabindex="0">9</div>
      <div class="day" tabindex="0">10</div>
      <div class="day" tabindex="0">11</div>
      <div class="day" tabindex="0">12</div>
      <div class="day" tabindex="0">13</div>
      <div class="day" tabindex="0">14</div>
      <div class="day" tabindex="0">15</div>
      <div class="day" tabindex="0">16</div>
      <div class="day" tabindex="0">17</div>
      <div class="day" tabindex="0">18</div>
      <div class="day" tabindex="0">19</div>
      <div class="day" tabindex="0">20</div>
      <div class="day" tabindex="0">21</div>
      <div class="day" tabindex="0">22</div>
      <div class="day" tabindex="0">23</div>
      <div class="day" tabindex="0">24</div>
      <div class="day" tabindex="0">25</div>
      <div class="day" tabindex="0">26</div>
      <div class="day" tabindex="0">27</div>
      <div class="day" tabindex="0">28</div>
      <div class="day" tabindex="0">29</div>
      <div class="day" tabindex="0">30</div>
      <div class="day" tabindex="0">31</div>
      <div class="day">
        <div class="oom">1</div>
      </div>
      <div class="day">
        <div class="oom">2</div>
      </div>
      <div class="day">
        <div class="oom">3</div>
      </div>
      <div class="day">
        <div class="oom">4</div>
      </div>
    </div>
  </div>
  <div class="mask right"></div>
  <div class="mask bottom"></div>
</div>
<div id="light"></div>

CSS

body, html {
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  font-family: courier;
  font-weight: bold;
}

.cal {
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.day {
  user-select: none;
  text-align: center;
  font-size: 1.2rem;
  padding: .75rem;
  position: relative;
  z-index: 9;
  cursor: pointer;
}
.day:focus {
  outline: none;
}
.day:after {
  transition: all .4s;
  content: '';
  position: absolute;
  z-index: -1;
}

#light {
  position: absolute;
  width: 15rem;
  height: 15rem;
  z-index: 4;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.grid-container {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr 401px 1fr;
  grid-template-rows: .5fr 250px 1fr;
  grid-gap: 0px 0px;
  grid-template-areas: "top top top" "left content right" "bottom bottom bottom";
}

.top {
  grid-area: top;
}

.left {
  grid-area: left;
}

.content {
  grid-area: content;
}

.right {
  grid-area: right;
}

.bottom {
  grid-area: bottom;
}

.mask {
  position: relative;
  z-index: 99;
}

.themes {
  position: relative;
  z-index: 100;
}
.themes ul {
  margin: 0;
  display: flex;
  padding: 2rem;
  justify-content: center;
  align-items: center;
}
.themes li {
  width: 3rem;
  height: 3rem;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  border: 2px solid transparent;
}
.themes li:hover {
  opacity: .8;
}

.theme-default {
  background-color: #292c33;
  color: #eee;
}
.theme-default .mask {
  background: #292c33;
}
.theme-default .oom {
  color: rgba(238, 238, 238, 0.4);
}
.theme-default #light {
  background: radial-gradient(ellipse at center, rgba(238, 238, 238, 0.5) 0%, rgba(238, 238, 238, 0) 50%);
}
.theme-default .day {
  border: 2px solid #292c33;
}
.theme-default .day:after {
  background-color: #292c33;
  top: 2px;
  bottom: 2px;
  right: 2px;
  left: 2px;
}
.theme-default .day:not(.oom):hover {
  background-color: #eee;
}
.theme-default .day:not(.oom):hover:after {
  background-color: #40444f;
}
.theme-default .themes {
  background-color: #292c33;
}
.theme-default .theme-default {
  border-color: #fff;
}

.theme-2 {
  background-color: #233b23;
  color: #bada55;
}
.theme-2 .mask {
  background: #233b23;
}
.theme-2 .oom {
  color: rgba(186, 218, 85, 0.4);
}
.theme-2 #light {
  background: radial-gradient(ellipse at center, rgba(186, 218, 85, 0.5) 0%, rgba(186, 218, 85, 0) 50%);
}
.theme-2 .day {
  border: 2px solid #233b23;
}
.theme-2 .day:after {
  background-color: #233b23;
  top: 3px;
  bottom: 3px;
  right: 3px;
  left: 3px;
}
.theme-2 .day:not(.oom):hover {
  background-color: #bada55;
}
.theme-2 .day:not(.oom):hover:after {
  background-color: #1a2b1a;
}
.theme-2 .themes {
  background-color: #233b23;
}
.theme-2 .theme-2 {
  border-color: #fff;
}

.theme-3 {
  background-color: #112;
  color: #cd7bff;
}
.theme-3 .mask {
  background: #112;
}
.theme-3 .oom {
  color: rgba(205, 123, 255, 0.4);
}
.theme-3 #light {
  background: radial-gradient(ellipse at center, rgba(205, 123, 255, 0.5) 0%, rgba(205, 123, 255, 0) 50%);
}
.theme-3 .day {
  border: 2px solid #112;
}
.theme-3 .day:after {
  background-color: #112;
  top: 2px;
  bottom: 2px;
  right: 2px;
  left: 2px;
}
.theme-3 .day:not(.oom):hover {
  background-color: #cd7bff;
}
.theme-3 .day:not(.oom):hover:after {
  background-color: #222244;
}
.theme-3 .themes {
  background-color: #112;
}
.theme-3 .theme-3 {
  border-color: #fff;
}

.theme-4 {
  background-color: #cd7bff;
  color: #111;
}
.theme-4 .mask {
  background: #cd7bff;
}
.theme-4 .oom {
  color: rgba(17, 17, 17, 0.4);
}
.theme-4 #light {
  background: radial-gradient(ellipse at center, rgba(17, 17, 17, 0.5) 0%, rgba(17, 17, 17, 0) 50%);
}
.theme-4 .day {
  border: 2px solid #cd7bff;
}
.theme-4 .day:after {
  background-color: #cd7bff;
  top: 1px;
  bottom: 1px;
  right: 1px;
  left: 1px;
}
.theme-4 .day:not(.oom):hover {
  background-color: #ba48ff;
}
.theme-4 .day:not(.oom):hover:after {
  background-color: #c362ff;
}
.theme-4 .themes {
  background-color: #cd7bff;
}
.theme-4 .theme-4 {
  border-color: #fff;
}

.theme-5 {
  background-color: #211;
  color: #db2a2a;
}
.theme-5 .mask {
  background: #211;
}
.theme-5 .oom {
  color: rgba(219, 42, 42, 0.4);
}
.theme-5 #light {
  background: radial-gradient(ellipse at center, rgba(219, 42, 42, 0.5) 0%, rgba(219, 42, 42, 0) 50%);
}
.theme-5 .day {
  border: 2px solid #211;
}
.theme-5 .day:after {
  background-color: #211;
  top: 2px;
  bottom: 2px;
  right: 2px;
  left: 2px;
}
.theme-5 .day:not(.oom):hover {
  background-color: #db2a2a;
}
.theme-5 .day:not(.oom):hover:after {
  background-color: #110909;
}
.theme-5 .themes {
  background-color: #211;
}
.theme-5 .theme-5 {
  border-color: #fff;
}

.theme-6 {
  background-color: lightgoldenrodyellow;
  color: rebeccapurple;
}
.theme-6 .mask {
  background: lightgoldenrodyellow;
}
.theme-6 .oom {
  color: rgba(102, 51, 153, 0.4);
}
.theme-6 #light {
  background: radial-gradient(ellipse at center, rgba(0, 250, 154, 0.5) 0%, rgba(0, 250, 154, 0) 50%);
}
.theme-6 .day {
  border: 2px solid lightgoldenrodyellow;
}
.theme-6 .day:after {
  background-color: lightgoldenrodyellow;
  top: 3px;
  bottom: 3px;
  right: 3px;
  left: 3px;
}
.theme-6 .day:not(.oom):hover {
  background-color: darksalmon;
}
.theme-6 .day:not(.oom):hover:after {
  background-color: lightgoldenrodyellow;
}
.theme-6 .themes {
  background-color: lightgoldenrodyellow;
}
.theme-6 .theme-6 {
  border-color: #fff;
}

.day {
  transition: all .2s;
}
.day:focus {
  background-color: #ccc;
}
.day:nth-child(10):focus {
  transform: translateY(-0.35rem);
}
.day:nth-child(13) {
  transition-duration: .6s;
}
.day:nth-child(13):focus {
  transform: rotate(360deg);
}
.day:nth-child(20) {
  transition-duration: .6s;
}
.day:nth-child(20):focus {
  transform: rotateY(180deg);
}
.day:nth-child(24) {
  transition-duration: .4s;
}
.day:nth-child(24):focus {
  z-index: 19;
  transform: rotate(10deg) scale(1.1);
}
.day:nth-child(29) {
  transition-duration: .4s;
}
.day:nth-child(29):focus {
  z-index: 19;
  transform: rotate(10deg) translate3d(0.25rem, -0.3rem, 2rem);
}

coothead

1 Like

I did all you guys told but it seems to be lost its style

That’s why copying and pasting is not such a good idea. You should have 3 separate files - 1 for HTML, 1 for CSS and 1 for JS.

1 Like

Yup now it works! Thanks!

1 Like