Skip to content

HTML/CSS interface updates for 'My Notes' application #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ArnauACR wants to merge 5 commits into
base: main
Choose a base branch
from
Open

HTML/CSS interface updates for 'My Notes' application #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0ee0e9d
semantic html css preliminary phase with the finished structure
Sep 25, 2024
9397fc3
px changed %
Sep 25, 2024
013fd74
routes
Sep 25, 2024
14ad997
Fix: resolve problems in HTML and CSS
ArnauACR Oct 14, 2024
54b6ab5
empty
ArnauACR Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 48 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="sanitize.css">
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Notes Application</title>
</head>
<body>
<header class="banner">
<h2>My Notes Application</h2>
</header>

<section class="container">
<article class="block note-block">
<h3>Create a New Note</h3>
<label for="title">Title:</label>
<input type="text" id="title" name="title" placeholder="Enter note title">

<label for="content">Content:</label>
<textarea id="content" name="content" placeholder="Enter note content"></textarea>

<button type="submit">Add Note</button>
</article>

<article class="block resource-block">
<h2>Resources</h2>
<nav>
<ul class="resources-list">
<li><a href="https://developer.mozilla.org/es/"><h5>MDN Web Docs</h5></a></li>
<li><a href="https://css-tricks.com/"><h5>css-tricks</h5></a></li>
<li><a href="https://github.com/ArnauACR"><h5>My Github</h5></a></li>
</ul>
</nav>
</article>
</section>

<footer class="underbanner">
<p>© 2024 My Notes Application</p>
</footer>
</body>
</html>
//empty




5 changes: 5 additions & 0 deletions sanitize.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
151 changes: 151 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f4f8;
}

header.banner {
background-color: #4a90e2;
color: white;
padding: 20px;
text-align: center;
}

header.banner h2 {
margin: 0;
font-size: 2rem;
}

section.container {
display: flex;
justify-content: space-between;
padding: 20px;
max-width: 100%;
margin: 0 auto;
gap: 20px;
align-items: flex-start;
}

article.block {
background-color: #ffffff;
width: 45%;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-top: 20px;
}

article.note-block {
width: 60%;
text-align: left;
padding: 15px;
}

article.note-block h3 {
text-align: left;
margin-bottom: 20px;
font-size: 1.2rem;
}

article.resource-block {
width: 35%;
background-color: #f7f9fc;
}

article.block h2 {
margin-bottom: 10px;
font-size: 1.5rem;
}

article.block h3 {
font-size: 1.2rem;
margin-bottom: 10px;
}

article.block input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #d3d3d3;
border-radius: 5px;
box-sizing: border-box;
font-size: 0.9rem;
}

article.block textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #d3d3d3;
border-radius: 5px;
box-sizing: border-box;
font-size: 0.9rem;
min-height: 150px;
}

article.block button {
background-color: #ff5723;
color: white;
padding: 10px;
border: none;
width: 100%;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
margin-top: 10px;
}

article.block button:hover {
background-color: #e64a19;
}

article.block button:focus {
outline: 2px solid #ccc;
}

ul.resources-list {
list-style-type: none;
padding: 0;
margin: 0;
}

ul.resources-list li {
margin-bottom: 10px;
}

ul.resources-list a {
text-decoration: none;
color: #794da4;
font-size: 1rem;
}

ul.resources-list a:hover {
text-decoration: underline;
}

footer.underbanner {
background-color: #4a90e2;
color: white;
padding: 10px;
text-align: center;
position: fixed;
width: 100%;
bottom: 0;
}

footer.underbanner p {
margin: 0;
font-size: 0.9rem;
}