logo

Diary web  application

5 Pages1116 Words16 Views
   

Added on  2022-08-23

Diary web  application

   Added on 2022-08-23

ShareRelated Documents
Editing the page title
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Diary web application</title>
<meta name="author" content="Stephen Rice" />
<!-- Set viewport to ensure this page scales correctly on mobile devi
ces -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" href="tma03.css" />
<!-- Start TMA03 application -->
<script src="tma03.js"></script>
</head>
<body>
<h1>Diary web application</h1>
<main>
<section id="text" class="button">
<button type="button">Add entry</button>
Changing diaries layout
Below is the CSS rule we added to achieve this.
@media only screen and (min-width: 600px) {
section.entry{
width:50%;
float:left;
}
}
Diary web  application_1
For mobile device I arranged each diary in its row. To achieve this I used the CSS
below,
@media only screen and (max-width: 600px) {
section.entry{
width:100%
}
}
Diary web  application_2

End of preview

Want to access all the pages? Upload your documents or become a member.