Intermediate CSS - PART I

<Tips>

multi curcor in VSCODE

ctrl + alt + up/down

 

1. Carousel ( kind of slideshow)

 

  <!-- Testimonials -->

  <section id="testimonials">

    <div id="testinominal-carousel" class="carousel slide" data-ride="false" >
      <div class="carousel-inner">
        <div class="carousel-item active">
          <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
          <img class='testimonial-img' src="images/dog-img.jpg" alt="dog-profile">
          <em>Pebbles, New York</em>
        </div>
        <div class="carousel-item">
          <h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
          <img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
          <em>Beverly, Illinois</em>
        </div>

      </div>
        <a class="carousel-control-prev" href="#testinominal-carousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#testinominal-carousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
  </section>

/* Testimonials */
#testimonials {
    
    text-align: center;
    background-color: #ef8172;
    color: #fff;
}

.testimonial-img {
    width: 10%;
    border-radius: 100%;
    margin: 20px;
}

.carousel-item {
    padding: 7% 15%;
}

---

2. Cards

card-deck is not quite respoinve than expected.

Thus, we need something else called grid markup.

 

It's grid layout we've learn before.

 

make <div class='row'> and put 3 columns in it.

make assign each card the breakpoints you want to implement.

 

<div class='row'>
  <div class='col-lg-4 col-md-6'>
    <div class='card'>
      <div class='card-header'>
	      <h3>Chihuahua</h3>
      </div>
      <div class='card-body'>
        <h2>Free</h2>
        <p>5 Matches Per Day</p>
        <p>10 Messages Per Day</p>
        <p>Unlimited App Usage</p>
        <button type="button">Sign Up</button>
      </div>
    </div>
  </div>

  <div class='col-lg-4 col-md-6'>
    <div class='card'>
      <div class='card-header'>
        <h3>Labrador</h3>
      </div>
      <div class='card-body'>
        <h2>$49 / mo</h2>
        <p>Unlimited Matches</p>
        <p>Unlimited Messages</p>
        <p>Unlimited App Usage</p>
        <button type="button">Sign Up</button>
      </div>
    </div>
  </div>

  <div class='col-lg-4'>
    <div class='card'>
      <div class='card-header'>
      	<h3>Mastiff</h3>
      </div>
      <div class='card-body'>
        <h2>$99 / mo</h2>
        <p>Pirority Listing</p>
        <p>Unlimited Matches</p>
        <p>Unlimited Messages</p>
        <p>Unlimited App Usage</p>
        <button type="button">Sign Up</button>
      </div>
    </div>
  </div>     

</div>

---

3. CSS Z-index and Stacking order.

Stacking Order

in HTML order is important.

Let's we have 3 div with 3 colors like below.

<div class='red'>
    
</div>
<div class='yellow'>
    
</div>
<div class='blue'>
    
</div>

div {
    height: 100px;
    width: 100px;
    border: 5px solid;
}

.red {
    
    background-color:red;
}
.yellow {
    
    background-color:yellow;
}
.blue {
    background-color:blue;
}

 

As you know, the order of div with 100px square is red, yellow, and blue.

The default position is "STATIC" as we learned position part.

html stacks the div with order.

 

But if we change the position to absolute?

The result is only we can see a blue square.

But beneath this blue square, yellow and red square exist.

 

div {
    height: 100px;
    width: 100px;
    border: 5px solid;
    positoin: absolute;
}

more clearly see the stacking order.

add some margin to yellow and blue square.

.red {
    background-color:red;
}
.yellow {
    background-color:yellow;
    left: 20px;
    top: 20px;
}
.blue {
    background-color:blue;
    left: 40px;
    top: 40px;
}

Now, you can clearly see the order in HTML.

 

Change the order of yellow and blue.

Now, yellow div is the last order so the top becomes yellow.

---

Z - index

In order to use the CSS to change the stacking order,

we have to use the property called "Z-index".

Remember that Z-index is just one of many things affecting the stacking order.

 

Default z-index is zero.

Let's use z-index to change the stacking order of html.

Make red to z-index = 1

before red was at the bottom of the stack.

And now it's at the top of the stack.

.red {
    background-color:red;
    z-index: 1;
}
.yellow {
    
    background-color:yellow;
    left: 20px;
    top: 20px;
}
.blue {
    background-color:blue;
    left: 40px;
    top: 40px;
}

If we set z-index of blue to -1 then, the order becomes red, yellow, and blue from the top.

.red {
    background-color:red;
    z-index: 1;
}
.yellow {
    
    background-color:yellow;
    left: 20px;
    top: 20px;
}
.blue {
    background-color:blue;
    left: 40px;
    top: 40px;
    z-index: -1;
}

 

BUT

z-index only active with the position(except static)

without position of absolute or relative z-index is not working.

 

 

** html default background-color is transparent.

 

 

 

 

 

 

Bootstrap Snippet site

bootsnipp.com/

HTML Snippets for Twitter Boostrap framework : Bootsnipp.com