Commit 10d431e7 authored by Laura Kalbag's avatar Laura Kalbag
Browse files

Add alt attributes, fix heading element closures, make divs into list

parent 9ef858c6
......@@ -295,7 +295,7 @@ nav li.selected {
* *
********************************************************************************/
aside.tip, #small-web-details div {
aside.tip, #small-web-details li {
border: 0.25em solid lightgrey;
background-color: #ffffff;
border-radius: 1em;
......@@ -356,18 +356,18 @@ aside.tip::before {
justify-content: space-between;
}
#small-web-details div {
#small-web-details li {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-basis: 32%;
}
#small-web-details div h3 {
#small-web-details li h3 {
margin-bottom: 1em;
}
#small-web-details div p {
#small-web-details li p {
margin-top: 1em;
text-align: center;
}
......@@ -378,7 +378,7 @@ aside.tip::before {
padding: 0;
}
#small-web-details div img {
#small-web-details li img {
max-width: 100%;
}
......@@ -662,20 +662,20 @@ footer {
/* Make each card fill up the full width of the display so we get a */
/* single column on narrower viewports. */
#small-web-details div {
#small-web-details li {
flex-basis: 100%;
margin-bottom:2em;
}
#small-web-details div:last-of-type {
#small-web-details li:last-of-type {
margin-bottom: 0;
}
#small-web-details div h3 {
#small-web-details li h3 {
font-size: 3rem;
}
#small-web-details div p {
#small-web-details li p {
font-size: 1.5rem;
margin-top: 1.5em;
text-align: center;
......
......@@ -25,7 +25,7 @@
<!-- Title -->
<h1><strong>Site</strong>.js</h1>
<h2>Small Web construction set.</h2>
<img id='header-image' src='/images/person.svg'>
<img id='header-image' src='/images/person.svg' alt=''>
<!-- Navigation -->
<nav>
......@@ -56,22 +56,23 @@
<section id='small-web'>
<h2><strong>The Small Web is for people</strong> <small>(not startups, enterprises, or governments).</small></h2>
<div id='small-web-details'>
<div>
<h3>One person.</h2>
<img src='/images/one-person.svg'>
<ul id='small-web-details'>
<li>
<h3>One person.</h3>
<img src='/images/one-person.svg' alt=''>
<p>Develop and test on <strong>your own device</strong>.</p>
</div>
<div>
<h3>One server.</h2>
<img src='/images/one-server.svg'>
</li>
<li>
<h3>One server.</h3>
<img src='/images/one-server.svg' alt=''>
<p>Sync and deploy to <strong>your own VPS</strong>.</p>
</div>
<div>
<h3>One site.</h2>
<img src='/images/one-site.svg'>
</li>
<li>
<h3>One site.</h3>
<img src='/images/one-site.svg' alt=''>
<p>Host <strong>your own site</strong> at <strong>your own domain</strong>.</p>
</div>
</li>
</ul>
</section>
<!------------------------------------------------------------------------------------>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment