HTML Exercises

by alirokni

HTML

<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- HTML EXERCISES -->

<div class="positioning-bottom-example-container">
  1-a) Please position this img element at the bottom of the container <br>
  <img class="position-bottom" src="http://www.splunk.com/content/dam/splunk/img/logo.png" alt="">
</div>

<hr>

<div class="positioning-middle-example-container">
  1-B) Please position this img element at the vertical middle and horizontal center of the container div - Feel free to add extra DOM elements
  if needed <br>
  <img class="position-middle" src="http://www.splunk.com/content/dam/splunk/img/logo.png" alt="">
</div>

<hr>

<div class="row" style="border: 1px solid red">     
  <div class="col-md-10 col-ms-offset-1" style="background:pink">col12</div>
    <!--div class="col-sm-2">col12</div-->
</div> 

<hr>      
    2 - Create a bootstrap column that:<br>
        A - For Large Screens: offsets 1 column and is 10 columns wide<br>
        B - For Every
        other smaller screen: Occupies 12 Columns<br><br>
    
    <hr>

    3 - Inside the bootstrap column Please Implement:<br>
      A- Bootstrap collapse example<br>
      B- Bootstrap carousel example<br>
      INFO: Please feel free to copy and paste straight from bootstrap documentation.

<hr>


4- Box Horizontal alignment and normalization of height <br>
   A) Make all three boxes be next to each other<br>
   B) use the full width of the row. <br>
   C) smaller boxes have the same height of the taller one.<br>
   INFO: you can change, all the values given, add new ones- or even remove them.<br>
   HINT: the display rule might be helpful

<div class="container">
  <div class="row">
    <div class="boxes-container">
      <div class="box">
      Lorem ipsum dolor sit amet, consectetur...

CSS

body {
  background-color:gray;
  color:white;
}

/* 1-A: Please position this element at the bottom of the container div */
.positioning-bottom-example-container {
  height:200px; 
  background-color:black;
  margin-bottom:10px;
  position: relative;
}
.position-bottom {
 position: absolute;
 bottom:0;
}

/* 1-B: Please position this element at the vertical middle and horizontal center of the container div - Feel free to add extra DOM elements if needed */
.positioning-middle-example-container {
  height:200px; 
  background-color:black;
  position: relative;
}
.position-middle {
  position: absolute;
  text-align: center;
  top:50%;
  right: 50%;
  bottom:50%;
  left: 50%;
}



/* 4- Please make all three boxes be next to each other, and use the full width of the row. Also make the smaller boxes have the same height of the taller ones - you can change, all the values given, add new ones- or even remove them. HINT: the display rule might be helpful */
.boxes-container {
  width:100%;
  display:table;
}
.box {
  width:30%;
  /*float:left;*/
  background-color:black;
  border:1px solid white;
  color:white;
  display:table-cell;
}

a {
  color:white;
}
a:hover {
  color:blue;
}

.raw {border: 1px solid green}
.col-sm-9{background:green;}
.col-sm-2 {background: red}
.col-sm-offset-1 {background: red}

JavaScript

$("#show-alert").on("click", function(e){
	e.preventDefault();
  var that = this;
  window.setTimeout(changeText, 1000);
  function changeText(){
   $(that).text('Activated');
   window.setTimeout(alertText, 1000);
  };
 function alertText(){
  alert($(that).text());
  };  
});

var second = $("ul li:last");
console.log(second)
$("ul li:nth-last-child(2)").css('background-color','red');

$('h2').text('jQuery Changing').attr('href',"http://www.splunk.com").css('font-size','30px');