content_copy
dashboard

#css

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
> More steps
content_copy
dashboard

#css

.container { /* Container that holds the items */
    column-count: 4;
    column-gap: 1em;
}
 
.item { /* The tiled items */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}
content_copy
dashboard

#css

img {
  mask-image: url(‘mask.png’) linear-gradient(-45deg,
                        rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%);
  mask-image: url(#masking); /*referencing to the element generated and defined in SVG code*/
} 
content_copy
dashboard

#css #html

body{
    background-image: url("img_tree.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
}
content_copy
dashboard

#css #html #javascript

<h2 style="text-align:center">Modal Image Gallery</h2>
<div class="row">
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
  </div>
</div>
<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">
    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
    <div class="caption-container">
      <p id="caption"></p>
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(1)" alt="Sample image 1">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(2)" alt="Sample image 2">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(3)" alt="Sample image 3">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(4)" alt="Sample image 4">
    </div>
  </div>
</div>
> More steps
content_copy
dashboard

#css

/* if the primary input mechanism system of the device CANNOT hover */
@media (hover: none) { }

/* if the primary input mechanism system of the device can hover */
@media (hover: hover) { }
content_copy
dashboard

#css

.block {
    &__element 				{color: red;
	    $self : &;
        #{$self}__element 	{color: green}
    }   
}

/*
	.block__element 			{color: red}
	.block__element__element 	{color: green}

*/
content_copy
dashboard

#css

body {
	width: 100%;
	margin: 0;
	display: flex;
	min-height: 100vh; /*always have atleast the height of viewport*/
}

.main {
	display: flex;
	flex-direction: column;
}
.main__section {
	flex-grow: 1; /*magical line*/
}
.main__footer {
	margin-top: auto;
}



keyboard_arrow_up