askellajiongelma

css

@charset "utf-8";
/* FONTIT*/

@import url('https://fonts.googleapis.com/css?family=Forum|Great+Vibes|News+Cycle');
@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Slabo+27px&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lemonada:wght@300&display=swap');

/*PERUSRAKENNE*/

html {
	min-height:100%;
	position:relative;
}

body, html {
	width:1300px;
  background:url(https://imgur.com/vVk8ArE.png) repeat;
	margin-right:23px;
  margin-left: 23px;
	padding:0;
	top:0;
	left:0;
	font-family: 'Slabo 27px', serif;
}

.header {
	width:80.8%;
	height:240px;
	background-image:url(https://imgur.com/TcUDc0z.png);
	background-size:cover;
	background-position:top;
	background-repeat:no-repeat;
	margin-top:-31px;
	position:relative;
	z-index:1;
  display: block;
  float: right;
  -moz-box-shadow: inset 10px 10px 50px #000;
  -webkit-box-shadow: inset 10px 10px 50px #000;
  box-shadow: inset 50px 50px 70px #000;
}

.header h1 {
	text-align:center;
	font-family: 'Great Vibes', cursive;
	font-weight:100;
	width:240px;
	font-size:50px;
	line-height:50px;
	margin-left:-245px;
	padding-top:60px;
	color:#D0A662;
	text-shadow:0px 0px 5px rgba(0,0,0,0.8);
}

.content {
	width:80.8%;
	display: block;
  float: right;
	text-align:justify;
  background: white;
}

/*NAVI*/

.navi {
	width:250px;
	height:100%;
	background-color:rgba(0,6,23,0.9);
	position:absolute;
	top:0;
	bottom:0;
	margin:0 auto -50px;
}

.navi ul {
	margin-top:209px;
	margin-left:-40px;
}

.navi ul li {
	list-style-type:none;
	margin-bottom:1px;
	text-align:center;
	display:flex;
	justify-content:center;
}

.navi ul li a {
	color:#D0A662;
	text-decoration:none;
	text-transform:small-caps;
	text-align:center;
	width:100%;
	font-family: 'Satisfy', cursive;
  font-size: 25px;
	padding:15px 0px 15px 0px;
	transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
}

.navi ul li a:hover {
	background-color:#F0F8FF;
	color:#D5A045;
	letter-spacing:2px;
	transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
}

/*LINKIT*/

a {
    color:#D0A662;
	transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    text-decoration: none
}

a:hover {
    color:#000;
	transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
}

/*P, I, OTSIKOT*/


p {
font-family: 'Slabo 27px', serif;
padding-left: 25px;
padding-right: 25px;
padding-top: 10px;
}

h1 {
font-family: 'Satisfy', cursive;
font-size: 40px;
text-shadow: 0px 3px 3px #696969, 0px 3px 5px #696969;
margin-left: 100px;
color: #D0A662;
text-align: justify;
}

h2 {

    font-size: 25px;
    line-height: 100%;
    text-align: center;
    font-family: 'Lemonada', cursive;
    margin-bottom: 40px;
    margin-top: 40px;
    color: #D0A662
}

h2:before, h2:after {
    background-color: #D0A662;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 15%;
}

h2:before {
    right: 20px;
    margin-left: -50%;
}

h2:after {
    left: 30px;
    margin-right: -50%;
}

h3 {
font-family: 'Satisfy', cursive;
font-size: 50px;
text-shadow: 0px 3px 3px #696969, 0px 3px 5px #696969;
color: #D0A662;
text-align: center;
}

h3:before, h3:after {
    background-color: #D0A662;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 15%;
}

h3:before {
    right: 20px;
    margin-left: -50%;
}

h3:after {
    left: 30px;
    margin-right: -50%;
}

i {
    font-style: italic;
    font-family: serif;
    font-size: 95%;
    letter-spacing: 0.5px;
    color: #5e6b73bd;
}

ul {
  list-style-image: url('https://imgur.com/9JWioqr.png');
}


/*FOOTER*/

.footer {
	width:230px;
	color:#D0A662;
	padding:5px 10px;
	position:absolute;
	font-size:14px;
	padding-left:40px;
	left:0;
	bottom:0;
}

.footer a {
	text-decoration:none;
	color:#D0A662;
	transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
}

.footer a:hover {
	color:#fff;
	transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
}

/* SCROLL */

::-moz-selection { color: #fff; background: #D0A662; }
::selection { color: #fff; background: #D0A662; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #D0A662; }
::-webkit-scrollbar-thumb { background: #D0A662;
}

/*ROTULISTAUKSET*/

#rotulista {
	width: 100%;
	font-size: 13px;
    border-collapse: collapse;
}
#rotulista td {
	padding: 10px;
	width: 50px;
    text-align: center;
}
#rotulista img {
	box-shadow: 0 0 4px rgba(0,0,0,0.3);
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
  height: 125px;

}

/*HEVOSLISTAUS*/

.listaus {
    width:100%;
    margin-left: 45px;
    display: flex;
    text-align:center;
}

.hevo {
    width:160px;
    margin:0 auto;
    display:inline-block;
    padding:20px;
    margin-bottom:20px;
    margin-left:5px;
    margin-right:5px;
    border:5px solid #D0A662;
	background-color:rgba(208,166,98,0.3);
	transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
}

.hevo:hover {
	background-color:rgba(208,166,98,1);
	box-shadow:0px 0px 3px #b6b1af;
	transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
}

.hevo img {
    width:155px;
    height:auto;
    object-fit: cover;
    margin-left:0px;
    margin-right:-9px;
	filter:grayscale(70%);
	border:0px solid #fff8ed;
	transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
}

.hevo:hover img {
	filter:grayscale(0%);
	transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
}

.hevo a {
text-transform:small-caps;
font-weight:100;
letter-spacing:1px;
font-family: 'Satisfy', cursive;
color: #D0A662;
text-shadow:0px 0px 3px steelblue;
}

.hevo a:hover {
    color: black;
	text-shadow:0px 0px 3px #867d79;
	transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
}

/*HEVOSEN PERUSTIETO*/

.isokuva {
  max-width: 650px;
  max-height: 600px;
  margin: 10px auto 20px auto;
  display: block
}

.perustiedot {
  width: 90%;
  border-collapse: collapse;
  margin-left: 45px
}

.perustiedot td {
  padding: 10px;
  border-bottom: 1px solid #D0A662;
}

.perustiedot td:nth-child(odd) {
  width: 20%;
  color: #D0A662;
  font-size: 15px;
  text-shadow: 0px 0px 1px rgba(0,0,0, 0.8);
}

.perustiedot td:nth-child(even) {
  width: 30%;
}
/*SUKUTAULU + JÄLKELÄISET*/
#sukutaulu {
	width: 98%;
	margin: 10px;
	border-collapse: collapse;
    font-family: serif;
    color: #000;
    font-size: 95%;
    font-style: italic;
	}

#sukutaulu td {
	padding: 5px 10px;
	border: 1px dashed #dcd7d8;
 	}

#sukutaulu td:hover {
	background-color: aliceblue;
}

#sukutaulu .td1 {
	text-align: center;
}

#jalkelaislista {
  	width: 95%;
  	font-size: 95%;
	margin: auto;
	border-collapse: collapse;
	}

#jalkelaislista td {
    padding: 10px 0px 10px 10px;
    border-bottom: 3px solid #D0A662;
    color: #000;
}

#jalkelaislista th {
font-family: 'Satisfy', cursive;
font-size: 30px;
color: #D0A662;
text-align: center;
	}

/*KISAKALENTER*/

.kisakalenteri {
	width: 100%;
	border-spacing:0;
	margin: 20px 0;
  border: 4px solid rgba(208, 166, 98,1);
	box-shadow: 0px 0px 2px 2px #999da021 inset;
	background-color: rgba(208, 166, 98,0.5);
}
.kisakalenteri td {
	padding: 7px 9px;
	vertical-align:top;
	background: #f5f2ce;
}
.kisakalenteri .eka {
	background:#D0A662 !important;
	padding:7px 9px;
	text-transform:uppercase;
	font-size:17px;
  font-family: 'Slabo 27px', serif;
  text-align: center;
}

/*SAAVUTUKSET*/

#meriitit {
	font-size: 90%;
	width: 95%;
	margin: auto;
	text-align: center;
	border-collapse: collapse;
	}

#meriitit td {
	padding: 10px 10px 10px;
	line-height:1.5;
	vertical-align: top;
	color: #000;
	border-bottom: 3px solid #D0A662;
	}

#meriitit th {
font-family: 'Satisfy', cursive;
font-size: 30px;
color: #D0A662;
text-align: center;
	}

/*BOXI*/

#tietoboxi {
	border: 4px solid rgba(208, 166, 98,1);
	box-shadow: 0px 0px 2px 2px #999da021 inset;
	width: 95%;
	margin: auto;
	background-color: rgba(208, 166, 98,0.5);
}

/*TABIT*/

.tab {
  overflow: hidden;
  width: 95%;
  background-color: #D0A662;
  margin-left: 40px
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  font-family: 'Lemonada', cursive;
  outline: none;
  cursor: pointer;
  padding: 15px 35px 15px 35px;
  transition: 0.3s;
  font-size: 17px;
}

.tab button:hover {
  background-color: #000;
	box-shadow: 0px 0px 2px 2px #999da021 inset;
  color: #fff

}

.tab button.active {
  background-color: #E9C380;
  color: #000
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border-top: none;
}

/*RMP INFO*/

.rmp-info {
  margin-left: 45px;

}
.rmp-progress {
  width: 95%;
	height: 20px;
	margin-left: 40px;
	background: #555;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
  box-sizing: content-box;
  margin-bottom: 10px;
}

.rmp-progress > div {
  display: block;
  height: 100%;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: #28a745;
  position: relative;
  overflow: hidden;
  text-align: center;
  line-height: 1.1;
}

.rmp-progress > div > span {
  color: #fff;
  font-size: 12px;
  text-align: center;
}

.rmp-green > div {
  background-color: #28a745;
}

.rmp-blue > div {
  background-color: #17a2b8;
}

.rmp-orange > div {
  background-color: #ffc107;
}

.rmp-red > div {
  background-color: #dc3545;
}

index

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="header"><h1>Elmtree Stallions</h1></div>
<div class="navi">
<ul>
  <li><a href="#">Etusivu</a></li>
  <li><a href="#">Asukkaat</a></li>
  <li><a href="#">Ori-info</a></li>
</ul>
</div>

<div class="content">
<h1>Elmtree Stallions</h1>
<p><i>Kiinnostus askellajiratsastukseen kyti pitkään, ja otti lopulta tuulta alleen. Koin kuitenkin järkevämmäksi hankkia vain oreja tallin täydeltä, koska sekalaisen lauman pitäminen olisi turhan monimutkaista. Tallin nimeksi valikoitui harkinnan jälkeen Elmtree Stallions, ja solmin kaupat vanhasta laukkatilasta Kansasissa. Pakattavana olisi vielä koto-Suomessa vähäiset kimpsut ja kampsut, ja voisin muuttaa uuteen kotiini, kohti tuntematonta. <br>
- Ylvan päiväkirja vuonna tuntematon.</i></p>
<p>
Elmtree Stallions on vuonna 2020 avattu askellajihevosiin painottunut talli, jossa valtarodut ovat Morgan ja Saddlebred. Sekalaisesta hevossakistamme löytyy myös muita askellajirotujen edustajia. Tallin hevoset pyritään pitämään piirtokuvallisina, mutta osalla silojaloistamme on myös valokuvia Ylvan puutteellisten taitojen takia.
<br><br>
<b>‣ Ylva Mills (VRL-14389)</b>
</p>

</div>


<div class="footer">Ulkoasu &copy; <a href="http://varjoton.net/vapaat/">VRL-04373</a><br>
Kuva &copy; <a href="https://pixabay.com/fi/users/rebeccaspictures-18516/">RebeccasPictures</a> (CC0)</div>
</body>
</html>