I have a project for my school where I need to create a website. I have completed most of it, but I am unsure how to make everything responsive as our teacher specified that we cannot use bootstrap. Unfortunately, I missed the only lesson about it.
The main site and its 8 subpages all have the same structure, so if I can figure out how to style one page, the rest should be easy to do. Some of the text is in Polish, so please disregard it as it contains information from Wikipedia.
This is my main site:
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>Discover Dinosaurs </title>
<meta name="description" content="A website dedicated to dinosaurs. Learn everything you want to know about these mighty reptiles!" />
<meta name="keywords" content="dinosaurs, 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">
Discover Dinosaurs
</div>
<div id="menu">
<div class="option"> <a href="index.html" title="Home Page">Home</a><br></div>
<div class="option"> <a href="1.html" title="Etymology">Etymology</a><br></div>
<div class="option"> <a href="2.html" title="Phylogenetic Definition">Phylogenetic Definition</a><br></div>
<div class="option"> <a href="3.html" title="Biology">Biology</a><br></div>
<div class="option"> <a href="4.html" title="Extinction">Rise of Birds</a><br></div>
<div class="option"> <a href="5.html" title="Bibliography">Extinction</a><br></div>
<div class="option"> <a href="6.html" title="Rise of Birds">History of Research</a><br></div>
<div class="option"> <a href="7.html" title="History of Research">Contact</a><br></div><br>
<div style="clear:both;"></div>
</div>
<div id="topbar">
<div id="topbarL">
D
</div>
<div id="topbarR">
<span class="bigtitle2">A Few Words About the Project</span>
<div style="height: 15px;"></div>
The project was created from scratch by Marcin Galos from 3b-1 as part of the Websites and Internet Applications course until the end of April 2019.
<br><br>
All information is sourced from <a href="https://en.wikipedia.org/wiki/Dinosaurs" title="Wikipedia">Wikipedia</a>.
</div>
<div id="dino">
</div>
<div style="clear:both;"></div>
</div>
<div id="sidebar">
<div class="Gallery"> <a href="8.html" title="Home Page">Gallery</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="t...
To ensure responsiveness, consider adding media queries to your CSS code based on different screen sizes. Break down the layout into multiple columns for smaller screens and adjust font sizes and padding accordingly. You may also need to adjust image sizes and positioning to fit different device resolutions. Testing your site on various devices and adjusting the CSS as needed will help achieve a responsive design.