Untitled

HTML'as


<!DOCTYPE html>
<html>
	<head>
		<title>Prisitaikantis dizainas</title>
		<link rel="stylesheet" type="text/css" href="stiliai.css">
	</head>

	<body>
		<div class="headeris">
			<h1>Mano puslapis</h1>
		</div>

		<div class="meniu">
			<ul>
				<li>Pirma komanda</li>
				<li>Antra komanda</li>
				<li>Apie</li>
			</ul>
		</div>

		<div class="turinys">
			<div class="kaire">
				<a href="https://www.google.lt" target="_blank">Googlas</a>
				<a href="https://www.vgtu.lt" target="_blank">VGTU</a>
				<a href="https://moodle.vgtu.lt" target="_blank">Moodle</a>
				<img src="VGTU-logo.png" style="width:100%" />
			</div>
			<div class="desine">
				<div class="stulpelis">
					Remigijaus Šimašiaus komentare dėl besikeičiančio patarėjo teigiama, kad atėjo laikas pokyčiams. „Nuo antrosios kadencijos pradžios atlikau savo patarėjų korpuso pertvarką, pasikeitė pusė patarėjų – 3 iš 6. Šie pokyčiai buvo būtini atsižvelgiant į antrosios kadencijos tikslus ir prioritetus bei norint suspėti su politikų ir administracijos užduodamu tempu. Aleksandras daugiau nei ketverius metus buvo ištikimas pagalbininkas ir karys, tačiau abiems pusėms nusprendus, kad atėjo laikas pokyčiams, sutarėme stabdyti bendradarbiavimą. Linkiu jam sėkmės profesiniame kelyje“, – teigė R. Šimašius.
					<a href="https://www.delfi.lt/news/daily/lithuania/po-vilniu-sudrebinusiu-skandalu-posta-palieka-simasiaus-patarejas-zubriakovas.d?id=82282347">Skaitykite daugiau</a>
				</div>
				<div class="stulpelis">
					Remigijaus Šimašiaus komentare dėl besikeičiančio patarėjo teigiama, kad atėjo laikas pokyčiams. „Nuo antrosios kadencijos pradžios atlikau savo patarėjų korpuso pertvarką, pasikeitė pusė patarėjų – 3 iš 6. Šie pokyčiai buvo būtini atsižvelgiant į antrosios kadencijos tikslus ir prioritetus bei norint suspėti su politikų ir administracijos užduodamu tempu. Aleksandras daugiau nei ketverius metus buvo ištikimas pagalbininkas ir karys, tačiau abiems pusėms nusprendus, kad atėjo laikas pokyčiams, sutarėme stabdyti bendradarbiavimą. Linkiu jam sėkmės profesiniame kelyje“, – teigė R. Šimašius.
					<a href="https://www.delfi.lt/news/daily/lithuania/po-vilniu-sudrebinusiu-skandalu-posta-palieka-simasiaus-patarejas-zubriakovas.d?id=82282347">Skaitykite daugiau</a>
				</div>
				<div class="stulpelis">
					Remigijaus Šimašiaus komentare dėl besikeičiančio patarėjo teigiama, kad atėjo laikas pokyčiams. „Nuo antrosios kadencijos pradžios atlikau savo patarėjų korpuso pertvarką, pasikeitė pusė patarėjų – 3 iš 6. Šie pokyčiai buvo būtini atsižvelgiant į antrosios kadencijos tikslus ir prioritetus bei norint suspėti su politikų ir administracijos užduodamu tempu. Aleksandras daugiau nei ketverius metus buvo ištikimas pagalbininkas ir karys, tačiau abiems pusėms nusprendus, kad atėjo laikas pokyčiams, sutarėme stabdyti bendradarbiavimą. Linkiu jam sėkmės profesiniame kelyje“, – teigė R. Šimašius.
					<a href="https://www.delfi.lt/news/daily/lithuania/po-vilniu-sudrebinusiu-skandalu-posta-palieka-simasiaus-patarejas-zubriakovas.d?id=82282347">Skaitykite daugiau</a>
				</div>
			</div>
		</div>
		<footer>
			<img src="lkl.png" width="100px" />
			<span>Mobili versija</span>
		</footer>
	</body>
</html>


-------------------------------------------------------------------------------------------------------------------


CSS'as


.headeris{
	height:120px;
	background-image:url("virsus_bg.jpg");
	text-align:center;
	padding-top:40px;
	color:white;
	background-size:cover;
}
.meniu{
	background-color:navy;
}
.meniu li{
	color:white;
	display:inline-block;
	margin-right:30px;
	padding:5px;
	list-style-type:none;
	cursor:pointer;
}
.meniu li:hover{
	background-color:#99ccff;
	color:black;
}

.turinys{
}

/* Clear floats after the columns */
.turinys:after {
  content: "";
  display: table;
  clear: both;
}

.kaire{
	border:1px solid black;
	width:20%;
	padding:50px 20px 300px 20px;
	float:left;
}
.kaire a{
	display:block;
	margin-bottom:15px;
}

.desine{
	width:75%;
	border:1px solid grey;
	margin-left:25%;
}

.desine:after {
  content: "";
  display: table;
  clear: both;
}
.stulpelis{
	width:28%;
	float:left;
	text-align:justify;
	padding:20px;
}

footer{
	margin-top:20px;
	background-image: linear-gradient(navy, white);
	padding:15px;
}

footer span{
	display:none;
}


@media screen and (max-width: 600px) { /*<=500px */

	.meniu li{
		display:block;
		text-align:center;
		border-bottom:1px solid white;
		margin:0px;
	}

	.kaire{
		width:100%;
		float:none;
	}

	.desine{
		width:100%;
		margin-left:0%;
		margin-top:30px;
	}

	.stulpelis{
		width:90%;
		float:none;
		font-size:25px;
		background-color:yellow;
		margin: 10px;
	}
	footer{
		text-align:center;
	}
	footer span{
		display:block;
	}


}