Skip to content

Commit

Permalink
accessibility/design issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@crypto-dot
crypto-dot committed Jan 21, 2023
1 parent f851ba1 commit 1f7bfd5
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 51 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ Users should be able to:

### Links

- Live Site URL: [CLICK ME!](https://your-live-site-url.com)
- Live Site URL: [CLICK ME!](https://crypto-dot.github.io/FrontendMentorChallenge5/)

## My process
For this webpage I worked from top to bottom. Each section I worked from outside to inside. So my workflow was top to bottom then outside to inside. The biggest struggle I had was deciding what to make as a background image and what to make as a regular image. I ultimately decided to make important images as images and non-important images as background images (for accessiblity reasons).
Expand Down
10 changes: 7 additions & 3 deletions index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@

--hidden-menu-width: 10.5rem;
--hidden-menu-height: 9.1875rem;

--right-offset: 11.45vw;
--mobile-grey-menu: hsl(0, 0%, 91%);

--section-product-desc-height: 63rem;
Expand Down Expand Up @@ -185,6 +185,8 @@ main {
display: flex;
align-items: center;
opacity: 100%;
background-color: transparent;
border: none;
}

.h1 {
Expand Down Expand Up @@ -405,7 +407,6 @@ main {
background-image: url("./images/bg-pattern-circles.svg");
background-repeat: no-repeat;
background-position: top 83% left -50%;
background-size: cover;
position: relative;
}

Expand All @@ -416,7 +417,8 @@ main {
}

.article--infrastructure {
margin-left: auto;
position: absolute;
right: var(--right-offset);
padding-top: 7.5rem;
}

Expand All @@ -443,6 +445,8 @@ main {

.block--rightTechnicalCont {
padding-top: 18rem;
position: absolute;
right: var(--right-offset);
}

.h1--technicalCont {
Expand Down
93 changes: 46 additions & 47 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,73 +38,73 @@
</svg></button>
<ul class="ul ul--leftNav">
<li id="productMenuTitle" class="li li--leftNav li--productMenu li--hasMenu">
<span aria-expanded="false" tabindex="1" class="a a--ul--leftNav" href="">
<button aria-expanded="false" class="a a--ul--leftNav" href="">
Product <svg id="first--arrow" class="svg svg--arrow"
xmlns="http://www.w3.org/2000/svg" width="10" height="7">
<path fill="none" stroke="#FFF" stroke-width="2" opacity=".75"
d="M1 1l4 4 4-4" />
</svg></span>
</svg></button>

</li>
<li class="li li--leftNav li--hidden--main">
<ul id="productMenu" class="ul--hidden">
<li class="li--hidden"><a tabindex="2" class="a a--hidden" href="">Overview</a>
<li class="li--hidden"><a class="a a--hidden" href="">Overview</a>
</li>
<li class="li--hidden"><a tabindex="3" class="a a--hidden" href="">Pricing</a>
<li class="li--hidden"><a class="a a--hidden" href="">Pricing</a>
</li>
<li class="li--hidden"><a tabindex="4" class="a a--hidden" href="">Marketplace</a>
<li class="li--hidden"><a class="a a--hidden" href="">Marketplace</a>
</li>
<li class="li--hidden"><a tabindex="5" class="a a--hidden" href="">Features</a>
<li class="li--hidden"><a class="a a--hidden" href="">Features</a>
</li>
<li id="last--li--hidden" class="li--hidden"><a class="a a--hidden" tabindex="6"
<li id="last--li--hidden" class="li--hidden"><a class="a a--hidden"
href="">Integration</a>
</li>
</ul>
</li>
<li id="companyMenu" class="li li--leftNav li--companyMenu li--hasMenu">
<span aria-expanded="false" tabindex="7" class="a a--ul--leftNav" href="">Company <svg
<button aria-expanded="false" class="a a--ul--leftNav" href="">Company <svg
id="second--arrow" class="svg svg--arrow" xmlns="http://www.w3.org/2000/svg"
width="10" height="7">
<path fill="none" stroke="#FFF" stroke-width="2" opacity=".75"
d="M1 1l4 4 4-4" />
</svg></span>
</svg></button>
</li>
<li class="li li--leftNav li--hidden--main ">
<ul class="ul--hidden">
<li class="li--hidden"><a tabindex="8" class="a a--hidden" href="">About</a>
<li class="li--hidden"><a class="a a--hidden" href="">About</a>
</li>
<li class="li--hidden"><a tabindex="9" class="a a--hidden" href="">Team</a></li>
<li class="li--hidden"><a tabindex="10" class="a a--hidden" href="">Blog</a>
<li class="li--hidden"><a class="a a--hidden" href="">Team</a></li>
<li class="li--hidden"><a class="a a--hidden" href="">Blog</a>
</li>
<li id="last--li--hidden" class="li--hidden"><a class="a a--hidden" tabindex="11"
<li id="last--li--hidden" class="li--hidden"><a class="a a--hidden"
href="">Careers</a>
</li>
</ul>
</li>
<li id="connectMenu" class="li li--leftNav li--hasMenu li--connectMenu">
<span aria-expanded="false" tabindex="12" class="a a--ul--leftNav" href="">Connect <svg
id="third--arrow" class="svg svg--arrow" xmlns="http://www.w3.org/2000/svg"
<button aria-expanded="false" class="a a--ul--leftNav" href="">Connect
<svg id="third--arrow" class="svg svg--arrow" xmlns="http://www.w3.org/2000/svg"
width="10" height="7">
<path fill="none" stroke="#FFF" stroke-width="2" opacity=".75"
d="M1 1l4 4 4-4" />
</svg></span>
</svg></button>
</li>
<li class="li li--leftNav li--hidden--main">
<ul class="ul--hidden">
<li class="li--hidden"><a tabindex="13" class="a a--hidden" href="">Contact</a>
<li class="li--hidden"><a class="a a--hidden" href="">Contact</a>
</li>
<li class="li--hidden"><a tabindex="14" class="a a--hidden" href="">Newsletter</a>
<li class="li--hidden"><a class="a a--hidden" href="">Newsletter</a>
</li>
<li id="last--li--hidden" class="li--hidden"><a tabindex="15" class="a a--hidden"
<li id="last--li--hidden" class="li--hidden"><a class="a a--hidden"
href="">Linkedin</a>
</li>
</ul>
</li>
</ul>
<ul class="ul ul--rightNav">
<li class="li li--rightNav"><a tabindex="16" class="a a--rightNav" href="">Login</a>
<li class="li li--rightNav"><a class="a a--rightNav" href="">Login</a>
</li>
<li class="li li--rightNav"><a tabindex="17" class="a a--rightNav whiteFilled" href="">Sign
<li class="li li--rightNav"><a class="a a--rightNav whiteFilled" href="">Sign
Up</a></li>
</ul>
</nav>
Expand All @@ -113,8 +113,8 @@
<h1 class="h1 h1--hero">A modern publishing platform</h1>
<p class="p p--hero">Grow your audience and build your online brand</p>
<div class="block block--hero">
<a tabindex="18" class="a a--hero whiteFilled">Start for Free</a>
<a tabindex="19" class="a a--hero whiteOutline">Learn More</a>
<a tabindex="1" class="a a--hero whiteFilled">Start for Free</a>
<a tabindex="2" class="a a--hero whiteOutline">Learn More</a>
</div>
</section>
</div>
Expand Down Expand Up @@ -157,16 +157,16 @@ <h1 class="h1 h1--technical">Robost content management</h1>
<picture>
<source media="(max-width: 725px)" srcset="
./images/illustration-editor-mobile.svg">
<img class="img img--productDesc" src="./images/illustration-editor-desktop.svg ">
<img alt="line graph and a circle on the left side of the graph" class="img img--productDesc"
src="./images/illustration-editor-desktop.svg ">
</picture>
</section>
<section class="section section--infrastructure">
<div class="block block--sectionWrapper">
<div class="block block--infrastructureWrapper">
<picture>
<img class="img img--infrastructure" src="./images/illustration-phones.svg">
</picture>
</div>
<picture>
<img alt="2 phones 1 showing the blogr logo and the other showing the blogr UI"
class="img img--infrastructure" src="./images/illustration-phones.svg">
</picture>
<article class="article article--infrastructure">
<heading class="heading heading--infrastructure">
<h1 class="h1 h1--infrastructure">State of the Art Infrastucture</h1>
Expand All @@ -181,12 +181,11 @@ <h1 class="h1 h1--infrastructure">State of the Art Infrastucture</h1>
</section>
</section>
<section class="section section--technicalCont">
<div class="block block--imgWrapper">
<picture>
<source media="(max-width: 725px)" srcset="./images/illustration-laptop-mobile.svg">
<img class="img img--technicalCont" src="./images/illustration-laptop-desktop.svg">
</picture>
</div>
<picture>
<source media="(max-width: 725px)" srcset="./images/illustration-laptop-mobile.svg">
<img alt="a desktop showing the blogr UI" class="img img--technicalCont"
src="./images/illustration-laptop-desktop.svg">
</picture>
<div class="block block--rightTechnicalCont">
<article class="article article--technicalCont">
<heading class="heading heading--technicalCont">
Expand Down Expand Up @@ -223,25 +222,25 @@ <h1 class="h1 h1--technicalCont">Powerful tooling</h1>
<h1 class="h1 h1--footer">Product</h1>
</heading>
<ul class="ul ul--footer">
<li class="li li--footer"><a tabindex="20" class="a a--footer" href="">Overview</a>
<li class="li li--footer"><a class="a a--footer" href="">Overview</a>
</li>
<li class="li li--footer"><a tabindex="21" class="a a--footer" href="">Pricing</a>
<li class="li li--footer"><a class="a a--footer" href="">Pricing</a>
</li>
<li class=" li li--footer"><a tabindex="22" class="a a--footer" href="">Marketplace</a></li>
<li class=" li li--footer"><a tabindex="23" class="a a--footer" href="">Features</a>
<li class=" li li--footer"><a class="a a--footer" href="">Marketplace</a></li>
<li class=" li li--footer"><a class="a a--footer" href="">Features</a>
</li>
<li class=" li li--footer"><a tabindex="24" class="a a--footer" href="">Integration</a></li>
<li class=" li li--footer"><a class="a a--footer" href="">Integration</a></li>
</ul>
</section>
<section class="section section--footer">
<heading class="heading heading--footer">
<h1 class="h1 h1--footer">Company</h1>
</heading>
<ul class="ul ul--footer">
<li class="li li--footer"><a tabindex="25" class="a a--footer" href="">About</a></li>
<li class="li li--footer"><a tabindex="26" class="a a--footer" href="">Team</a></li>
<li class=" li li--footer"><a tabindex="27" class="a a--footer" href="">Blog</a></li>
<li class=" li li--footer"><a tabindex="28" class="a a--footer" href="">Careers</a>
<li class="li li--footer"><a class="a a--footer" href="">About</a></li>
<li class="li li--footer"><a class="a a--footer" href="">Team</a></li>
<li class=" li li--footer"><a class="a a--footer" href="">Blog</a></li>
<li class=" li li--footer"><a class="a a--footer" href="">Careers</a>
</li>
</ul>
</section>
Expand All @@ -250,11 +249,11 @@ <h1 class="h1 h1--footer">Company</h1>
<h1 class="h1 h1--footer">Connect</h1>
</heading>
<ul class="ul ul--footer">
<li class="li li--footer"><a tabindex="29" class="a a--footer" href="">Contact</a>
<li class="li li--footer"><a class="a a--footer" href="">Contact</a>
</li>
<li class="li li--footer"><a tabindex="30" class="a a--footer" href="">Newsletter</a>
<li class="li li--footer"><a class="a a--footer" href="">Newsletter</a>
</li>
<li class=" li li--footer"><a tabindex="31" class="a a--footer" href="">Linkedin</a>
<li class=" li li--footer"><a class="a a--footer" href="">Linkedin</a>
</li>
</ul>
</section>
Expand Down

0 comments on commit 1f7bfd5

Please sign in to comment.