innocuous-symmetry/excursion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styling, fixes for resources, accessibility

Browse Source
This commit is contained in:
Mikayla
2021-11-06 12:08:43 -05:00
parent fb98e7b498
commit 05130b6ee8
3 changed files with 63 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
.vscode/launch.json vendored Normal file
View File

@@ -0,0 +1,14 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Open index.html",
"file": "/Users/mikayla/Developer/Excursion_110621/index.html"
}
]
}

21
Resources/css/style.css
View File

@@ -11,8 +11,27 @@ header {
text-align: center;
}
#download-excursion {
.download {
color: aquamarine;
font-size: 16px;
font-weight: bold;
}
.section-header {
font-family: Verdana;
font-weight: 300;
font-size: 42px;
color: white;
}
#article-paragraph {
font-family: Verdana;
font-size: 21px;
color: gray;
}
#copyright {
text-align: right;
color: gray;
padding-right: 8px;
}

33
index.html
View File

@@ -2,18 +2,43 @@
<html>
<head>
<title></title>
<link src="style.css" rel="stylesheet">
<link rel="stylesheet" href="Resources/css/style.css">
</head>
<body>
<header>
<h1>Discover hidden places around the world around you</h1>
<aside>
<p id="download-excursion">Download Excursion (Coming soon!)</p>
<p class="download">Download Excursion (Coming soon!)</p>
</aside>
</header>
<video controls>
<source src="excursion.mp4" type="video/mp4">
<video controls autoplay muted>
<source src="Resources/excursion.mp4" type="video/mp4">
<p>Video not supported :(</p>
</video>
<article>
<h1 class="section-header">Your personal travel guide</h1>
<p id="article-paragraph">Excursion remembers places you like, and recommends new points of interest around you.</p>
<figure>
<img src="Resources/camp.webp" />
<figcaption>A yellow tent placed in a rocky desert landscape at dusk.</figcaption>
</figure>
</article>
<figure>
<img src="Resources/phone.webp" />
<figcaption>2D artistic rendering of a smartphone in all white detail</figcaption>
</figure>
<footer>
<h1 class="section-header">Coming Soon for iPhone and Android</h1>
<p class="download">Download Excursion (Coming soon!)</p>
</footer>
<aside id="copyright">
<p>&copy; Excursion</p>
</aside>
</body>
</html>