Re: index.html

Author

Title

Language

Your paste - Paste your paste here

&lt;!DOCTYPE HTML&gt;
&lt;html lang=&quot;pl&quot;&gt;
&lt;head&gt;
	&lt;meta charset=&quot;utf-8&quot;&gt;
	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;
	&lt;link href=&quot;https://fonts.googleapis.com/css?family=Noto+Sans:400,700&amp;subset=latin-ext&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
	
	&lt;title&gt;Motoryzacja&lt;/title&gt;

&lt;script&gt;
		function random()
	{
		var tekst = [
		&quot;Za konstruktora pierwszego samochodu uznaje się Carla Benza, który w 1885 roku zbudował samochód trójkołowy z jednocylindrowym czterosuwowym silnikiem benzynowym Gottlieba Daimlera.&quot;,
		&quot;Rolls-Royce Motor Cars to brytyjski producent samochodów luksusowych, sportowych i SUV-ów z siedzibą w Goodwood działający od 1906 roku.&quot;,
		];
		
		var losowy = tekst[Math.floor(Math.random()*tekst.length)]

document.getElementById(&quot;randomtext&quot;).innerHTML = losowy;

setTimeout(&quot;random()&quot;,5000);
	};
	&lt;/script&gt;

&lt;style&gt;
		body {
	margin: 0;
	padding: 0;
	font-family: 'Noto Sans';
}

.navbar {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	flex-wrap: wrap;
	background-color: #fff;
	width: 100%;
	height: 80px;
	z-index: 1;
}

.nav {
	display: flex;
	justify-content: right;
	list-style: none;
	margin-right: 10%;
}

.logo {
	flex: 1 1 auto;
	margin-left: 10%;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 30px;
}

a {
	margin: 15px;
	color: rgba(0,0,0,0.6);
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.2s;
}

ul a:hover {
	color: rgba(0,0,0,1);
}

#slider {
	position: relative;
	background-image: url(black.jpg);
	width: 100%;
	height: 70vh;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}

#slider2 {
	position: relative;
	background-image: url(black.jpg);
	width: 100%;
	height: 30vh;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}

.container {
	position: relative;
	text-align: center;
	color: white;
	font-size: 24px;
}

.text-over-image {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-transform: uppercase;

}

.text-over-image2 {
	width: 100%;
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-transform: uppercase;

}

.container h1 {
	margin-bottom: 10px;
	color: white;
}

.container a {
	color: white;
	background-color: #E50000;
	padding: 20px 40px;
	transition: color 0.4s, background-color 0.4s;
	font-size: 18px;
}

.container a:hover {
	color: black;
	background-color: white;
}

.ciekawostka {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	background-color: white;
	font-size: 24px;
	padding: 60px 0;
	color: black;
	width: 95%;
}

.ciekawostka h1 {
	font-size: 28px;
	margin: 0 0 20px 0;
	padding: 0;
}

#randomtext {

}

.about-area, .portfolio-area{
	position: relative;
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: row;
	width: 100%;
}

.text-part {
	width: 65%;
	padding: 50px 0;

}

h1 {
	font-size: 50px;
	text-align: center;
	color: #000;
	text-transform: uppercase;
}

p {
	font-size: 24px;
	line-height: 40px;
}

.about-area, .footer{
	background-color: black;
	color: white;
}

.about-area h1 {
	color: white;
}

.services-area h1 {
	color: white;
}

html {
	scroll-behavior: smooth;
}

.group {
	width: 1000px;
	margin-bottom: 50px;
}

.leftside {
	width: 300px;
	float: left;
	margin-right: 50px;
	opacity: 0.8;
	transition: opacity 0.2s;
}

.leftside:hover {
	opacity: 1;
}

.middleside {
	width: 300px;
	float: left;
	margin-right: 50px;
	opacity: 0.8;
	transition: opacity 0.2s;
}

.middleside:hover {
	opacity: 1;
}

.rightside {
	width: 300px;
	float: left;
	opacity: 0.8;
	transition: opacity 0.2s;
}

.rightside:hover {
	opacity: 1;
}

.group img {
	width: 100%;
}

.ciekawostka2 {
	width: 100%;
	padding: 40px 0;
	background-color: white;
	margin-bottom: 40px;
}

.ciekawostka-last {
	width: 100%;
	padding: 40px 0;
	background-color: white;
	margin: 0;
}

.area {
	margin: 0 auto;
	width: 1000px;
}

.image {
	width: 400px;
	float: left;
}

.image img {
	width: 100%;
}

.text {
	width: 560px;
	height: 400px;
	float: left;
	margin-left: 40px;

}

.title {

}

.title h1 {
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	font-size: 40px;
	text-align: left;
}

.content {
	font-size: 20px;
}

.ciekawostka2 p {
	font-size: 24px;
	line-height: 36px;
}

.ciekawostka-last p {
	font-size: 24px;
	line-height: 36px;
}

.footer {
	text-align: center;
	padding: 30px 0;
}
	&lt;/style&gt;

&lt;/head&gt;
&lt;body onload=&quot;random();&quot;&gt;

&lt;div class=&quot;navbar&quot;&gt;
		&lt;a href=&quot;index.html&quot; class=&quot;logo&quot;&gt;Motoryzacja&lt;/a&gt;
		&lt;ul class=&quot;nav&quot;&gt;
			&lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Strona Główna&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href=&quot;ciekawostki.html&quot;&gt;Ciekawostki&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/div&gt;
	
	&lt;div class=&quot;container&quot;&gt;
		&lt;div id=&quot;slider&quot;&gt;&lt;/div&gt;
  		&lt;div class=&quot;text-over-image&quot;&gt;
  			&lt;h1&gt;Motoryzacja moją pasją&lt;/h1&gt;
  			Ciekawostki i nie tylko &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  			&lt;a href=&quot;#&quot;&gt;Czytaj więcej&lt;/a&gt;
  		&lt;/div&gt;
	&lt;/div&gt;

&lt;div class=&quot;ciekawostka&quot;&gt;
		&lt;h1&gt;Czy wiesz, że...&lt;/h1&gt;
		&lt;div id=&quot;randomtext&quot;&gt;&lt;/div&gt;
	&lt;/div&gt;

&lt;div class=&quot;about-area&quot;&gt;
		&lt;h1&gt;Wyróżnione kolekcje&lt;/h1&gt;
		&lt;div class=&quot;group&quot;&gt;
			&lt;div class=&quot;leftside&quot;&gt;
				&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;car1.png&quot;&gt;&lt;/a&gt;
			&lt;/div&gt;
			&lt;div class=&quot;middleside&quot;&gt;
				&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;car1.png&quot;&gt;&lt;/a&gt;
			&lt;/div&gt;
			&lt;div class=&quot;rightside&quot;&gt;
				&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;car1.png&quot;&gt;&lt;/a&gt;
			&lt;/div&gt;
			&lt;div style=&quot;clear:both;&quot;&gt;&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class=&quot;group&quot;&gt;
			&lt;div class=&quot;leftside&quot;&gt;
				&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;car1.png&quot;&gt;&lt;/a&gt;
			&lt;/div&gt;
			&lt;div class=&quot;middleside&quot;&gt;
				&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;car1.png&quot;&gt;&lt;/a&gt;
			&lt;/div&gt;
			&lt;div class=&quot;rightside&quot;&gt;
				&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;car1.png&quot;&gt;&lt;/a&gt;
			&lt;/div&gt;
			&lt;div style=&quot;clear:both;&quot;&gt;&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class=&quot;portfolio-area&quot;&gt;
		&lt;div class=&quot;text-part&quot;&gt;
			&lt;h1&gt;Krótko i zwięźle...&lt;/h1&gt;
			&lt;p&gt;
				Jeśli interesujesz się samochodami, motocyklami, ciągnikami itp. to ta strona jest właśnie dla Ciebie. Na tej stronie znajdziesz &lt;span style=&quot;font-weight: bold;&quot;&gt;wiele ciekawych informacji&lt;/span&gt; o motoryzacji, zobaczysz odpowiedzi na najczęściej zadawane pytania i odkryjesz &lt;span style=&quot;font-weight: bold;&quot;&gt;nowe ciekawostki&lt;/span&gt;. Zastanawiałeś się kiedyś czym jeździ prezydent Polski? A może chciałbyś się dowiedzieć skąd wzięły się nazwy najpopularniejszych marek samochodów. To i wiele więcej znajdziesz na tej stronie.
			&lt;/p&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class=&quot;footer&quot;&gt;
		Wszelkie prawa zastrzeżone &amp;copy; 2020
	&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Private - Private paste aren't shown in recent listings.

Delete After - When should we delete your paste?

Spam protection -

Motoryzacja moją pasją

Czy wiesz, że...

Wyróżnione kolekcje

Krótko i zwięźle...

Reply to "Re: index.html"