PILNE !! Proszę o zrobienie strony w notatniku..pilne, jeśli nie wiecie lub wiecie tylko część to ni.... Question from @Viktorka

November 2018 1 12 Report

PILNE !! Proszę o zrobienie strony w notatniku..pilne, jeśli nie wiecie lub wiecie tylko część to nie opowiadajcie. Poniżej podaje wymagania podane przez nauczyciela. Witryna internetowa może być na dowolny temat np . muzyka, filmy, sport, taniec, moda, komputery, historia, kraj lub miasto na świecie, itp . 2. Witryna powinna składać się przynajmniej z 3 podstron z przykładową stroną (Strona Główna, Oferta, Galeria Zdjęć). 3. Pliki HTML i CSS powinny być napisane oddzielnie , tzn. a. Plik HTML powinien zawierać tylko znaczniki HTML w których umieszczamy tekst, zdjęcia, logo, nagłówki, listy punktowe, itp . b. Plik CSS powinien zawierać rodzaje i kolory czcionek, r ozmiar czcionki, wysokość i szerokość zdjęć, ułożenie elementów do prawej strony, do lewej lub do środka, itp . 4. Budowa serwisu a. Na samej górze powinien być nagłówek strony zawierający reklamowy baner lub log o. b. Na samym dole strony powinna być stopka zawierające imię i nazwisko, oraz klasę. W stopce może znajdować się również dodatkowe menu nawigacyjne. c. Pod nagłówkiem, albo gdzieś w bocznej części witryny powinno zna jdować się menu d. Pomiędzy nagłówkiem i stopką powinna znajdować się treść strony zawierająca teksty, zdjęcia, lisy numeryczne i wypunktowane, formularze, itp

ronek22

Jutro prześle dokończone, bo dzisiaj już wymiękam, żeby nie było wstawiam strone główną, ale polecam ściągnąć paczkę. Strona zrobiona w HTML5.

HTML

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

<!doctype html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Najnowsze kinowe hity</title>
<link rel="stylesheet" href="style/main.css">

<link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<header>

<nav id="main">
<div class="wrapper">
<ul>
<li><a href="#">Home Page</a></li>
<li><a href="#">Bestsellery</a></li>
<li><a href="#">Premium</a></li>
</ul>
</div>
</nav>

</header>

<section id="content" class="wrapper">
<h3>Najnowsze filmy</h3><hr>
<div class="lewa">
<img src="img/poster1.jpg" alt="django">
</div>

<footer>
<div class="wrapper">
<h1>Jan Kowalski</h1>
<p>Jestem uczennicą klasy jakiejś tam...</p>
</div>
</footer>

</body>
</html>

CSS

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

body {
background: #262626;
margin: 0;
padding: 0;
}

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

h1,h2,h3,h4 {
font-family: 'Alfa Slab One', cursive;
font-weight: 400;
letter-spacing: 1px;
color: white;
margin: 0;
}

h1 {
font-size: 35px;
}

h2 {
font-size: 30px;
}

h3 {
font-size: 25px;
}

h4 {
font-size: 20px;
}

.clear {
clear: both;
}

p {
font-family: 'Open Sans', sans-serif;

color: white;
}
/* ===================
HEADER
=================== */

header {
max-width: 1920px;
height: 550px;
background-image: url(../img/header.jpg);
background-position: top center;
text-align: center;
font-family: 'Alfa Slab One', cursive;
margin-bottom: 20px;
box-shadow: inset 0 -10px 30px -8px black;
}

header hr {
border: none;
background-color: #405A5A;
height: 1px;
}

#main {
border-top: 2px solid grey;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.1, #414141), to(#262626));
background-image: -webkit-linear-gradient(#414141 10%, #262626);
background-image: -moz-linear-gradient(#414141 10%, #262626);
background-image: -o-linear-gradient(#414141 10%, #262626);
background-image: linear-gradient(#414141 10%, #262626);
box-shadow: 0px 10px 20px black;
}

#main ul,
#main li {
list-style: none;
display: inline-block;
margin: 0 auto;
padding: 3px 0;
}

#main li a {
color: white;
text-decoration: none;
margin: 0 40px;
}

#main li a:hover {
color: #F03E4A;
-webkit-transition: 0.3s color ease;
-moz-transition: 0.3s color ease;
-ms-transition: 0.3s color ease;
-o-transition: 0.3s color ease;
transition: 0.3s color ease;
}

/* ===================
CONTENT
=================== */

#content hr {
border: none;
background-color: white;
height: 1px;
margin-bottom: 20px;
}

.lewa {
float: left;
width: 300px;
margin-right: 30px;
background: #0A0B0B;
}

.lewa img,
.prawa img {
max-width: 300px;
}

.prawa {
float: right;
width: 300px;
min-height: 300px;
background: #0A0B0B;
}

#content p {
padding: 5px;
}

/* ===================
FOOTER
=================== */

footer {
background: #0A0B0B;
margin-top: 30px;
height: 200px;
padding: 20px 0;
}

PACZKA:

http://upit.cc/f/005b8588.zip

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

Jak coś to jeszcze mam taką bardzo prostą stronę o Polsce gotowca mogę ci dać