WitamPotrzebuje strony na informatyke . Na dowolny temat . Musi być zrobiona tylko w jednym notatnik.... Question from @Kubaszon

November 2018 1 6 Report

Witam
Potrzebuje strony na informatyke . Na dowolny temat . Musi być zrobiona tylko w jednym notatniku w języku html.
Prosze użyć jak najwięcej kodów :) będzie naj

ronek22

HTML:

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

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Moja pierwsza strona</title>

<link rel="stylesheet" href="style.css" media="all">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700' rel='stylesheet' type='text/css'>

</head>
<body>

<header>
<div class="wrapper">
<div id="logo">
<h1>Portfolio.</h1>
</div>
<nav id="mainmenu">
<ul>
<li><a href="#">Start</a></li>
<li><a href="#">Oferta</a></li>
<li><a href="#">Realizacje</a></li>
<li><a href="#">Zadania</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</div>
</header>

<section id="content">
<article>
<h2>Example words</h2>
<div class="images">
<img src="http://upit.cc/i/a4019c43.jpg" alt="obrazek">
<div class="overlay">
<p>Podpis zdjecia.<br />
Monrique Deshaboue
</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque ea assumenda magni voluptatibus fugit inventore non provident enim deleniti numquam in aliquid unde quae vel vitae iusto soluta minima ullam libero vero ipsum repudiandae consequatur doloribus. Eaque quibusdam totam labore quas odit praesentium dignissimos ipsa impedit ab velit voluptas asperiores laborum saepe. Nulla harum cum animi commodi aspernatur ab cumque non ullam dolorum qui. Dignissimos magni ab atque nemo qui.</p>
</article>

<article>
<h2>Lorem ipsum dolor sit amet...</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ipsa fugit iure sit natus dolorem hic similique iusto iste explicabo possimus dicta voluptatem eius repellendus nulla. Laborum eaque quidem repellat maiores. Voluptatibus animi molestias atque maiores modi in maxime laudantium autem quo minima vitae fugiat similique dolore reprehenderit consequatur culpa quaerat sit aut blanditiis suscipit eligendi ea officiis perspiciatis sapiente cupiditate aliquid amet! Ipsam excepturi deserunt delectus nobis consequuntur enim voluptas sint ad fuga repudiandae! Vero repudiandae dolorem nostrum nulla quibusdam sapiente minus reprehenderit distinctio id tempora temporibus ducimus sunt quos dolore vitae aperiam excepturi provident debitis sit non ullam.</p>
</article>

</section>

<aside id="reklamy">
<article>
<p>Miejsce na reklame</p>
</article>

<article>
<p>Miejsce na reklame</p>
</article>

<article>
<p>Miejsce na reklame</p>
</article>
</aside><div class="clear"></div>

<footer>
<p>© Copyright by ME</p>
</footer>
</div>
</body>
</html>

CSS:

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

body {
font-family: 'Open Sans', sans-serif;
background: #ECFFF1;
margin: 0px;
padding: 0px;
}

#content h1,h2 {
color: #C02942;
}

h1 {
font-size: 50px;
margin: 0;
}

h2 {
font-size: 30px;
margin: 0;
}

h3 {
font-size: 20px;
margin: 0;

}

article p {
text-align: justify;
color: #2B2B2B;
font-size: 14px;
line-height: 21px;
}

.wrapper {
width: 960px;
margin: 0 auto;
}

.clear {
clear: both;
}

header {
width: 100%;
background: #230F2B;
height: 150px;
margin-bottom: 20px;
}

#logo {
float: left;
color: #BCE3C5;
text-shadow: 1px 1px 1px #505050;
margin-top: 40px;
}

#mainmenu {
float: right;
margin-top: 50px;
}

#mainmenu li {
display: inline-block;
margin-right: 30px;
}

#mainmenu li a {
text-decoration: none;
color: white;
}

#mainmenu li a:hover {
color: #C02942;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;

}

#content {
float: left;
width: 630px;
min-height: 500px;

}

article {
padding: 20px;
margin-top: 10px;
background: #F9FFFB;
box-shadow: 0px 0px 20px #B9CEBE;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-bottom: 20px;
}

.images {
width: 570px;
height: 300px;
margin-top: 20px;
border: 10px solid white;
border-bottom: 10px solid white;
box-shadow: 0px 0px 8px #BCE3C5;
overflow: hidden;
position: relative;
}

.overlay {
background: #fff;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}

.overlay p {
color: grey;
text-align: center;
}

#reklamy {
float: right;
width: 310px;
min-height: 700px;
margin-top: 10px;
background: white;
box-shadow: 0px 0px 20px #B9CEBE;
color: #BCE3C5 ;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-bottom: 20px;
}

#reklamy p {
text-align: center;
}
pre {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #282828 ;
padding: 0px 20px;
color: white;
padding: 5px;
white-space: pre-wrap;
}

footer {
height: 50px;
margin: 20px 0px;
}

HTML WKLEJ DO NOTATNIKA ZAPISZ JAKO index.html

CSS WKLEJ DO NOTATNIKA ZAPISZ JAKO style.css

! WAŻNE !

PLIK HTML I CSS MAJĄ BYĆ W TYM SAMYM FOLDERZE

Pozdrawiam

0 votes Thanks 0