У меня есть школьный проект, чтобы сделать сайт
Я сделал большую часть этого, но я не знаю, как сделать все адаптивным, потому что наш учитель сказал, что мы не можем использовать начальную загрузку, и у нас было только 1 урок об этом, которого, к сожалению, у меня не было
У меня есть основной сайт и 8 подстраниц, все они имеют одинаковую структуру, поэтому, если я буду знать, как оформить 1, остальное будет легко сделать. Там есть текст на польском, так что не беспокойтесь, это просто информация из вики.
Это мой основной сайт:
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>Poznaj Dinozaury </title>
<meta name="description" content="Serwis poświęcony dinozaurom Naucz się wszystkiego, co chcesz wiedzieć o tych potężnych jaszczurach!" />
<meta name="keywords" content="dinozaury, dino" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Black+Ops+One|Caveat+Brush|Montserrat" rel="stylesheet">
<link href="css/fontello.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="logo">
Poznaj Dinozaury
</div>
<div id="menu">
<div class="option"> <a href="index.html" title="Strona Główna">Strona Główna</a><br></div>
<div class="option"> <a href="1.html" title="Etymologia">Etymologia</a><br></div>
<div class="option"> <a href="2.html" title="Definicja filmogenetyczna">Definicja filmogenetyczna</a><br></div>
<div class="option"> <a href="3.html" title="Biologia">Biologia</a><br></div>
<div class="option"> <a href="4.html" title="Wymarcie">Powstanie ptaków</a><br></div>
<div class="option"> <a href="5.html" title="Bibliografia">Wymarcie</a><br></div>
<div class="option"> <a href="6.html" title="Powstanie ptaków">Historia badań</a><br></div>
<div class="option"> <a href="7.html" title="Historia badań">Kontakt</a><br></div><br>
<div style="clear:both;"></div>
</div>
<div id="topbar">
<div id="topbarL">
M
</div>
<div id="topbarR">
<span class="bigtitle2">O projekcie słów kilka</span>
<div style="height: 15px;"></div>
Projekt zrobiony od zera przez Marcina Galosa z 3b-1 jako projekt z Witryn i aplikacji internetwych do końca kwietnia 2019r.
<br><br>
Wszelkie informacje pochodzą z <a href="https://pl.wikipedia.org/wiki/Dinozaury" title="Wikipediia">Wikipedii</a>.
</div>
<div id="dino">
</div>
<div style="clear:both;"></div>
</div>
<div id="sidebar">
<div class="Galeria"> <a href="8.html" title="Strona Główna">Galeria</a><br></div>
<br><br>
<div class="socials">
<div class="socialdivs">
<div class="fb">
<i class="icon-facebook"></i>
</div>
<div class="yt">
<i class="icon-youtube"></i>
</div>
<div class="tw">
<i class="icon-twitter"></i>
</div>
<div class="gplus">
<i class="icon-gplus"></i>
</div>
<div style="clear:both"></div>
</div>
</div>
</div>
<div id="content">
<span class="bigtitle">Dinozaury</span>
<div class="dottedline"></div>
<p> (Dinosauria) – zróżnicowany klad zauropsydów. Pojawiły się w triasie, około 237 milionów lat temu. Stanowiły dominującą grupę kręgowców lądowych od początku jury (około 201 milionów lat temu) przez 135 milionów lat, do końca kredy (66 milionów lat temu), kiedy wymieranie kredowe (wyznaczające granicę kreda-trzeciorzęd i koniec mezozoiku) doprowadziło do zniknięcia większości linii. Zapis kopalny wskazuje, że w jurze ptaki wyewoluowały z dinozaurów zaliczanych do teropodów, wobec czego przez literaturę przedmiotu wydaną w XXI wieku uznawane są za grupę dinozaurów. Przeżywając katastrofę sprzed 66 milionów lat, dzięki swym potomkom stały się kontynuatorami linii dinozaurów po czasy współczesne.
<br><br>
Do ostatnich dziesięcioleci XX wieku wszystkie grupy dinozaurów uznawano za wymarłe. Jednakże zapis kopalny wskazuje, że ptaki, nazywane dziś w języku angielskim avian dinosaurs („ptasie dinozaury”), są współczesnymi potomkami opierzonych dinozaurów. Wyewoluowały one ze swych teropodzich przodków w okresie jury. Wobec tego ptaki stanowią jedyną linię dinozaurów, która przetrwała zagładę.
<br><br>
Wobec powyższego do dinozaurów zalicza się również ptaki. Z kolei dinozaury nie będące ptakami określa się mianem non-avian dinosaurs, tłumaczonym na język polski jako „nieptasie dinozaury”, pojawia się też określenie „nieptasie teropody”.
<br><br>
Dinozaury to z taksonomicznego, morfologicznego i ekologicznego punktu widzenia zróżnicowana grupa zwierząt. Do ptaków zaliczanych jest obecnie ponad 10 000 gatunków, co czyni je najbardziej zróżnicowaną grupą kręgowców z wyjątkiem okoniokształtnych. Dzięki dowodom kopalnym do 2006 paleontolodzy wyróżnili ponad 500 rodzajów i ponad tysiąc gatunków nieptasich dinozaurów, podczas gdy w 2014 liczba opisanych rodzajów wynosiła 943. Dinozaury zamieszkiwały wszystkie kontynenty – na wszystkich bowiem znajdowane są ich szczątki kopalne, jak i występują współczesne gatunki. Zaliczają się do nich zarówno roślinożercy, jak i mięsożercy. Pierwotnie cechowała je dwunożność, ale wiele wymarłych grup obejmowało formy czworonożne, a także poruszające się zarówno na dwóch, jak i na czterech łapach. Liczne grupy wykształciły wyszukane struktury, jak rogi czy kryzy. Niektóre taksony wymarłe wykształcały także takie modyfikacje szkieletu, jak kolce czy pancerz. Potwierdzono składanie jaj i budowę gniazd u wszystkich grup. O ile dzisiejsze ptaki osiągają zazwyczaj niewielkie rozmiary, co wiąże się z umiejętnością lotu, formy prehistoryczne osiągały często duże rozmiary. Największe zauropody mogły osiągać nawet 58 m długości przy wysokości 9,25 m. Wizja nieptasich dinozaurów jako jednorodnie gigantycznych jest jednak nieprawdziwa, wynika z większej tendencji do zachowywania się dużych kości. Wiele nieptasich dinozaurów było niewielkich rozmiarów, jak mierzący około 50 cm długości Xixianykus.
<br><br>
Nazwa dinozaury oznacza „straszne jaszczurki”, dlatego też może wprowadzać w błąd – dinozaury nie były jaszczurkami, ani nie były z nimi blisko spokrewnione. Reprezentują natomiast oddzielną grupę „gadów”, oprócz ptaków ich najbliższymi współczesnymi krewniakami są krokodyle. Jak wiele wymarłych form, nie wykazują one cech tradycyjnie uznawanych za „gadzie”, jak zmiennocieplność czy poruszanie się na kończynach odwiedzionych na boki. Co więcej, wiele grup prehistorycznych zwierząt, takich jak mozazaury, ichtiozaury, pterozaury, plezjozaury, a nawet Dimetrodon, popularnie uznawanych za dinozaury, w rzeczywistości nimi nie są. Przez pierwszą połowę XX wieku, zanim uznano ptaki za dinozaury, większość społeczności naukowej uznawała dinozaury za powolne i zmiennocieplne. Zmiana nastąpiła w latach 60. (odrodzenie dinozaurów). Stwierdzono, że wszystkie dinozaury, w tym mezozoiczne, prowadziły aktywny tryb życia i cechowały się szybkim metabolizmem, tak jak dzisiejsi ich przedstawiciele; wykazywały też liczne adaptacje umożliwiające interakcje społeczne.
<br><br>
Odkąd naukowcy zaczęli badać i opisywać pierwsze skamieliny nieptasich dinozaurów w pierwszej połowie XIX wieku, zmontowane szkielety nieptasich dinozaurów stały się głównymi atrakcjami muzeów wielu krajów, a dinozaury stały się częścią kultury. Wielkie rozmiary niektórych grup, jak również niekiedy przerażająca i fantastyczna natura, zapewniły tym stworzeniom regularną obecność w bestsellerach książkowych i filmowych, jak Zaginiony świat Arthura Conan Doyle'a czy Park Jurajski Michaela Crichtona. Trwały entuzjazm opinii publicznej dla tych zwierząt doprowadził do znacznego wsparcia finansowego dla poświęconej im dziedziny nauki. Media regularnie donoszą o nowych odkryciach.</p>
<br /><br />
</div>
<div id="footer">
Poznaj Dinozaury© Wszelkie prawa zastrzeżone
</div>
</div>
<script src="jquery-1.11.3.min.js"> </script>
</body>
</html>
И это мой css к нему:
body
{
font-family: 'Black Ops One', cursive;
background-image: url(img/gray.png);
/* Background pattern from Toptal Subtle Patterns */
}
#container
{
width: 1300px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#logo
{
color: #f4d941;
margin-top: 20px;
font-size: 44px;
letter-spacing: 3px;
font-weight: 900;
width: 100%;
}
#menu
{
font-size:15px;
background-color: #303030;
margin-top: 20px;
color: #f4d941;
padding: 10px;
width: 100%;
}
#topbar
{
background-color: #f4d941;
color: white;
padding: 10px;
margin-top: 20px;
margin-bottom: 25px;
height: 170px;
width: 100%;
}
#topbarL
{
font-size: 110px;
float:left;
padding: 20px;
width: 138px;
text-align: center;
border-right: 2px dotted #303030;
}
#topbarR
{
color: #56564e;
float: left;
padding: 20px;
width: 760px;
font-size: 16px;
text-align: justify;
}
#sidebar
{
float: left;
width: 148px;
min-height: 680px;
padding:20px;
background-color: #303030;
text-align: center;
font-size: 18px;
position: fixed;
}
#content
{
background-image: url(img/d.png),url(img/gravel.png);
background-position: center;
background-repeat: no-repeat,repeat;
position: relative;
left: 16%;
float: left;
padding: 40px;
width: 1030px;
background-color: #dedede;
min-height: 1108px;
text-align: justify;
border-left: 2px dotted #f4d941;
}
#footer
{
clear: both;
color: #f4d941;
text-align: center;
padding: 20px;
font-size: 18px;
}
.Galeria
{
display: inline-block;
min-width: 50px;
height: 25px;
font-size: 25px;
padding: 10px;
border-right: 2px
opacity: 0.8;
}
.Galeria:hover
{
background-color: #f4d941;
cursor: pointer;
}
.option
{
float: left;
min-width: 50px;
height: 25px;
font-size: 18px;
padding: 10px;
border-right: 2px
opacity: 0.8;
}
.option:hover
{
background-color: #f4d941;
cursor: pointer;
}
.optionL
{
font-size:18px;
height:25px;
padding: 10px;
border-bottom: 2px dotted #444444;
}
.optionL:hover
{
background-color: #f4d941;
color: white;
cursor: pointer;
}
.bigtitle
{
font-size: 32px;
font-weight: 900;
letter-spacing: 2px;
color: #f4d941;
text-shadow: 2px 2px gray;
}
.bigtitle2
{
font-size: 32px;
font-weight: 900;
letter-spacing: 2px;
color: #56564e;
}
.dottedline
{
height: 5px;
margin-top: 15px;
margin-bottom: 20px;
border-bottom: 2px dotted #444444;
}
/*Unvisited link*/
a:link
{
color: aliceblue;
text-decoration: none;
border-left: 2px solid #f4d941;
}
/*Visisted link*/
a:visited
{
color: aliceblue;
border-left: 2px solid #f4d941;
}
/*Hovered link*/
a:hover
{
color: #56564e;
border-left: 2px solid#444444;
}
.socials
{
width:100%;
height: 155px;
text-align: center;
background-color: #303030;
}
.socialdivs
{
width: 150px;
height: 155px;
margin-left: auto;
margin-right: auto;
background-color: #303030;
}
.fb
{
width: 150px;
height: 155px;
border-top: 2px solid #f4d941;
}
.fb:hover
{
background-color: #4668b3;
}
.yt
{
width: 150px;
height: 155px;
border-top: 2px solid #f4d941;
}
.yt:hover
{
background-color: #d94348;
}
.tw
{
width: 150px;
height: 155px;
border-top: 2px solid #f4d941;
}
.tw:hover
{
background-color: #3095d3;
}
.gplus
{
width: 150px;
height: 155px;
border-top: 2px solid #f4d941;
}
.gplus:hover
{
background-color: #d95333;
}
/*Pictures*/
#b
{
width: 250px;
float: left;
padding: 10px;
}
#b1
{
width: 250px;
float: right;
padding: 10px;
}
#b2
{
width: 350px;
float: right;
padding: 10px;
}
#b3
{
width: 300px;
display: inline-block;
padding: 20px;
}
#b4
{
width: 300px;
display: inline-block;
padding: 20px;
}
#b5
{
width: 300px;
display: inline-block;
padding: 20px;
}
.gal
{
float: left;
width: 340px;
padding: 1px;
letter-spacing: 2px;
font-size: 18px;
text-align: center;
text-shadow: #56564e;
border-bottom: 2px dotted #444444;
}
.g
{
width: 300px;
height: 200px;
transition: all 0.5s ease-in-out
}
.g:hover
{
-webkit-transform: scale(1.35)rotate(5deg);
-ms-transform: scale(1.35)rotate(5deg);
transform: scale(1.35)rotate(5deg);
}
p
{
text-shadow: 2px 2px white;
}
Как сделать его отзывчивым?