Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Landing page using flex-box

#sass/scss
Juraj S 310

@Terak-10

Desktop design screenshot for the Sunnyside agency landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison

SolutionDesign

Reports

Accessibility report (12)
warning

Document should have one main landmark

<html lang="en">
Learn more
error

<li> elements must be contained in a <ul> or <ol>

<li class="footer_li">About</li>
Learn more
error

<li> elements must be contained in a <ul> or <ol>

<li class="footer_li">Services</li>
Learn more
error

<li> elements must be contained in a <ul> or <ol>

<li class="footer_li">Projects</li>
Learn more
warning

All page content should be contained by landmarks

<h1 class="nav-bar_logo">sunnyside</h1>
Learn more
warning

All page content should be contained by landmarks

<ul class="nav-bar_ul">
                <li class="nav-bar_item">About</li>
                <li class="nav-bar_item">Services</li>
                <li class="nav-bar_item">Projects</li>
                <li class="nav-bar_item">Contact</li>
              </ul>
Learn more
warning

All page content should be contained by landmarks

<div class="text-box">
                <h1 class="text-box_h1">we are creatives</h1>
                <img src="/images/icon-arrow-down.svg" alt="icon arrow down" class="text-box_arrow">
      </div>
Learn more
warning

All page content should be contained by landmarks

<div class="egg-section">
Learn more
warning

All page content should be contained by landmarks

<div class="glass-section">
Learn more
warning

All page content should be contained by landmarks

<div class="two-section">
Learn more
warning

All page content should be contained by landmarks

<div class="team-section">
Learn more
warning

All page content should be contained by landmarks

<div class="img-section">
Learn more

Community feedback

Ken 975

@kenreibman

Posted

Hey! Great submission.

I was wondering why you built the page entirely using flexbox. Did you want to practice flexbox? Are you more comfortable with flexbox? I feel like you could have a lot less lines of HTML and CSS if you use grid.

  • Some of the paragraphs and sub-heading are the wrong font-family as well.
  • I don't think you included a function mobile menu as well, which I would have loved to see.

Regardless, the design looks great, and you did a great job making it responsive!

0

Juraj S 310

@Terak-10

Posted

@kenreibman Hi, Thanks for the feedback, yes I wanted to practice flex-box because I started learning html and css on February 1st and I started learning flex box sooner until now I'm going to learn the grid so I'll be using both. It was my second "Project" so of course there are mistakes, but since then we are here to move on.

0

Please log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!