Első JS – ColorClock

JS

 

function colorClock()
{
  
  
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
if (seconds < 10) {
  seconds = '0' + seconds;
}
if (minutes < 10) {
  minutes = '0' + minutes;
}
if (hours < 10) {
  hours = '0' + hours;
}
var ClockFace = (hours + ':' + minutes + ':' + seconds);

document.getElementById('clock').innerHTML = ClockFace;

var BackgroundHexColor = '#' + seconds  + minutes + hours;

var TextBoxHexColor =16777215- BackgroundHexColor;

var TextHexColor=BackgroundHexColor;

document.body.style.background = BackgroundHexColor;

document.body.style.color=TextHexColor;

clock.style.background='red';


setTimeout(function() {
    colorClock();
  }, 1000);

}

colorClock();

Második HTML CSS (Vászon)

HTML

<div id="vaszon">
  <div id="first-row">
    <div id="big-rectangle" class="red right"></div>
    <div id="first-divider" class="black right"></div>
  </div>
</div>

CSS

#first-row {                          /* id, mint kiválasztó */
  width:        300px;                /* szélesség fix képpontokban */
  height:       75%;                  /* szélesség relatívan megadva */
  box-shadow:   15px 15px 10px gray;  /* árnyék -- h-shadow v-shadow [blur] [spread] color*/
}

.right {                  /* class, mint kiválasztó */
  float:          right;  /* "belebegtetés" jobbról */
}

.red { // ez egy class;
background-color: red;
}

Első HTML CSS

HTML

<title>Az oldal címe</title>

<h1>A legfontosabb címsor</h1>
<h6>A legkisebb címsor</h6>

<figure>
  <img src="http://a-kep-cime.jpg" alt="alternatív szöveg">
  <figcaption>Képaláírás</figcaption>
</figure>

<article>
  <p>Bekezdés <a href="http://link-valahova.hu" title="A hivatkozott oldal címe">egy kattintható linkkel</a></p>
  <p>Egy másik bekezdés <strong>kiemelten hangsúlyos tartalommal</strong>.</p>
</article>

 

CSS:

h1 {
  color:          rgba(0,0,0,.8);     // szín, (piros, zöld, kék, átlátszóság)
  font-family:    serif;              // betűtípus
  font-size:      36px;               // betűméret
  line-height:    1.58;               // sormagasság
  letter-spacing: -.003em;            // betűköz
  text-align:     center;             // szöveg igazítása
}

img {
  height:         auto;               // magasság
  width:          100%;               // szélesség
}

figure {
  margin:         0;                  // margó
}

article {
  margin:         0 auto;             // középre rendezett
}

a:hover {
                                      // az egér éppen ide mutat állapot
}