Off-Platform Project: Fotomatic

Hello everyone! I just finished my Fotomatic project. Sharing my code bellow. Any feedback will be highly appreciated.
Thanks.
here is the link of my project:
https://jpr-23.github.io/jpr23.github.io/

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Damion" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,600,700" rel="stylesheet">
  <link rel="stylesheet" href="./resources/css/reset.css">
  <meta charset="UTF-8">
  <link href="./resources/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <!-- Header -->
  <header>
    <div class="content">
      <a href="index.html" class="desktop logo">Fotomatic</a>
      <nav class="desktop">
        <ul>
          <li><a href="#">Product detail</a></li>
          <li><a href="#">About us</a></li>
          <li><a href="https://www.instagram.com/">Follow us <img class="icon" src="./resources/images/instagram.png"></a></li>
        </ul>
      </nav>
      <nav class="mobile">
        <ul>
          <li><a href="#"><img src="./resources/images/ic-logo.svg"></a></li>
          <li><a href="#"><img src="./resources/images/ic-product-detail.svg"></a></li>
          <li><a href="#"><img src="./resources/images/ic-about-us.svg"></a></li>
          <li><a href="#" class="button">Join us</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- Main Content -->
  <div class="main-content">

    <!-- Sign Up Section -->
    <div id="sign-up-section" class="banner">
      <div id="sign-up-cta">
        <div class="content center">
          <div class="header">
            <h2 class="cursive">Instant</h2>
            <h1 class="striking">FORMAT CAMERA</h1>
          </div>
          <div class="email">
            <span>
              Email us to request a demo and be in our waiting list for the <strong>Febuary 2017</strong> release!
            </span>
            <div class="button">Join the waiting list</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Features Section -->
    <div id="features-section">
      <div class="feature">
        <div class="center">
          <div class="image-container">
            <img src="./resources/images/feature-1.png" />
          </div>
          <div class="content">
            <h2>Advanced, automatic, instant</h2>
            <h3>Shutter speed, apperture and flash output adjust automatically</h3>
          </div>
        </div>
      </div>
      <div class="feature">
        <div class="center">
          <div class="image-container">
            <img src="./resources/images/feature-2.png" />
          </div>
          <div class="content">
            <h2>Beautifully crafted inside-out</h2>
            <h3>From the paint outside to the tiny screw inside, Fotomatic is crafted with love and 20-year of expertise</h3>
          </div>
        </div>
      </div>
    </div>

    <!-- Filters Section -->
    <div id="filters-section">
      <div class="content center">
        <h2>Over 20+ filters to choose from</h2>
        <h3>Feed your creativity with 20 different filter designed by our eclectic in-house photographers!</h3>
      </div>
      <div class="images-container">
        <div class="image-container">
          <img src="./resources/images/filter-1.png" />
        </div>
        <div class="image-container">
          <img src="./resources/images/filter-2.png" />
        </div>
        <div class="image-container">
          <img src="./resources/images/filter-3.png" />
        </div>
        <div class="image-container extra">
          <img src="./resources/images/filter-4.png" />
        </div>
      </div>
    </div>

    <!-- Quotes Section-->
    <div id="quotes-section">
      <div class="content center">
        <span class="quote">“It’s truly something that could create a brand new photography Renaissance”</span>
        <img class="quote-citation" src="./resources/images/photography-logo.png" />
      </div>
    </div>

    <!-- Footer -->
    <footer>
      <div class="content">
        <span class="copyright">© 2016  Fotomatic, All Rights Reserved</span>
        <span class="location">Designed in NYC</span>
      </div>
    </footer>

  </div>
</body>
</html>


``

html {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
}

.main-content {
  position: relative;
  top: 5.3125rem; /* To offset for fixed header. */
}

.center {
  text-align: center;
}

.button {
  border-radius: 4px;
  background-color: #4a4a4a;
  color: white;
}

.image-container {
  overflow: hidden;
}

.image-container img {
  display: block;
  max-width: 100%;
}

@media only screen and (max-width: 760px) {
  .main-content {
    top: 2.5625rem;
  }
}

/* Header */

header {
  position: fixed;
  width: 100%;
  border-bottom: solid 1px #c6c1c1;
  background-color: white;
}

header .content {
  display: flex;
  align-items: center;
  padding: 1.875rem;
}

header .logo {
  flex: 1;
}

header nav ul {
  display: flex;
}

nav li {
  padding-left: 3.5rem;
}

nav a {
  vertical-align: bottom;
  line-height: 1.6;
  font-size: 1rem;
  color: #4a4a4a;
}

header .icon {
  width: 1rem;
  padding-left: .75rem;
}

header .mobile {
  display: none;
}

@media only screen and (max-width: 760px) {
  header .desktop {
    display: none;
  }

  header .mobile {
    display: block;
    width: 100%;
  }

  header .content {
    padding: .5rem 0;
  }

  header .mobile ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
  }

  header .mobile li {
    padding: 0;
  }

  header .mobile .button {
    padding: .1875rem .5rem;
    background-color: #9dc20b;
    line-height: 1.6;
    color: white;
  }
}

/* Sign Up Section */

#sign-up-section {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  height: 43.5rem;
  background-image: url('../images/banner-landingpage.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
}

#sign-up-cta {
  position: relative;
  padding: 0 5rem 2.5rem 5rem;
  top: 171px;
  left: 10%;
  border: solid 1px #979797;
  border-radius: 4px;
  background-color: #9dc20b;
}

#sign-up-cta .content {
  width: 25.625rem;
  margin-top: 2rem;
  font-family: "Roboto", sans-serif;
  font-size: 1.25rem;
  line-height: 1.4;
  color: white;
}

#sign-up-cta h1 {
  font-size: 3.125rem;
}

#sign-up-cta h2 {
  font-size: 2.25rem;
}

#sign-up-cta span strong {
  font-weight: bold;
}

#sign-up-cta .cursive {
  font-family: "Damion", cursive;
}

#sign-up-cta .striking {
  font-family: "Rubik", sans-serif;
  padding-bottom: .75rem;
}

#sign-up-cta .button {
  margin-top: 1.625rem;
  padding: 1.25rem 7.25rem;
}

@media only screen and (max-width: 760px) {
  #sign-up-section {
    align-items: center;
    justify-content: center;
    height: 28rem;
  }

  #sign-up-cta {
    position: static;
    width: auto;
    height: auto;
    background-color: transparent;
    border: none;
  }

  #sign-up-cta .content {
    margin-top: 0;
  }

  #sign-up-cta .email {
    display: none;
  }

  #sign-up-cta h1 {
    font-size: 3.125rem;
  }

  #sign-up-cta h2 {
    font-size: 2.25rem;
  }
}

@media only screen and (max-width: 450px) {
  #sign-up-section {
    height: 20rem;
  }

  #sign-up-cta h1 {
    font-size: 2.25rem;
  }

  #sign-up-cta h2 {
    font-size: 2rem;
  }
}

/* Features Section */

#features-section {
  display: flex;
  justify-content: space-between;
  padding: 4rem 5%;
  background-color: #f3f3f3;
}

.feature {
  flex: 1;
  padding: 2rem;
  margin: 0px 1.25rem;
  background-color: white;
}

.feature .content {
  padding: 2.5rem 0;
}

.feature .image-container {
  width: 90%;
  height: 65%;
  margin: 0 auto;
}

.feature h2 {
  padding-bottom: .5rem;
  font-size: 2.25rem;
  font-weight: bold;
  color: #4a4a4a;
}

.feature h3 {
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 300;
  color: #4a4a4a;
}

@media only screen and (max-width: 890px) {
  .feature h2 {
    font-size: 1.125rem;
    line-height: 1.3;
    font-weight: normal;
  }

  .feature h3 {
    font-size: .875rem;
    line-height: 1.4;
  }
}

@media only screen and (max-width: 760px) {
  #features-section {
    flex-flow: column;
    padding: 0;
  }

  .feature {
    margin: 0;
    padding: 1.25rem 1rem 0 1rem;
  }
}

/* Filters Section */

#filters-section {
  padding: 4rem 0;
  background-color: #4a4a4a;
}

#filters-section .content {
  padding: 0 .625rem;
  margin-bottom: 5rem;
}

#filters-section .content h2 {
  font-size: 2.25rem;
  font-weight: bold;
  color: white;
}

#filters-section .content h3 {
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 300;
  color: white;
}

#filters-section .images-container {
  display: flex;
  max-width: 100%;
  padding: 0 1%;
}

@media only screen and (max-width: 760px) {
  #filters-section {
    padding: 1.5rem 0 0 0;
  }

  #filters-section .content {
    margin-bottom: 1rem;
  }

  #filters-section .content h2 {
    padding-bottom: .625rem;
    font-size: 1.125rem;
    line-height: 1.3;
    font-weight: normal;
  }

  #filters-section .content h3 {
    font-size: .875rem;
    line-height: 1.4;
  }

  #filters-section .images-container {
    padding: 0;
  }

  #filters-section .extra {
    display: none;
  }
}

/* Quotes Section */

#quotes-section {
  background-color: #f3f3f3;
}

#quotes-section .content {
  padding: 5rem 0;
}

#quotes-section .quote {
  padding-right: 1.875rem;
  font-family: "Palatino", serif;
  font-size: 1.875rem;
  line-height: 1.1;
  font-style: italic;
  color: #4a4a4a;
}

#quotes-section .quote-citation {
  height: 1.875rem;
}

@media only screen and (max-width: 760px) {
  #quotes-section .content {
    padding: 1.875rem .625rem;
  }

  #quotes-section .quote {
    font-size: 1.5rem;
    line-height: 1.4;
  }

  #quotes-section .quote-citation {
    display: block;
    padding-top: 1rem;
    margin: auto;
  }
}

/* Footer */

footer {
  background-color: #9b9b9b;
  padding: 1.5rem 2rem;
}

footer .content {
  color: white;
  display: flex;
  font-size: .75rem;
}

footer .copyright {
  flex-grow: 1;
}

@media only screen and (min-width: 760px) {
  footer .content {
    font-size: .625rem;
  }
}`

I just finished this too. Found it fairly challenging in places but managed to meet virtually all of the requirements in the spec ultimately. I found that I needed a new tablet media query (I used max-width: 1200px) for a lot of the distinct tablet requirements, e.g. different text alignment s desktop and mobile.

You can find my solution (including individual commits for fixing specific issues) here if you’re interested:

https://cmastris.github.io/fotomatic/

Hi everyone,

i think most of us had a hard time with this project. Finally, I spent two days finishing.

I also added README to help people who wanna start but feel confused.

GitHub: https://github.com/wtpbell/Fotomatic-Responsive-Website.git
Preview: https://wtpbell.github.io/Fotomatic-Responsive-Website/

2 Likes

At last, I think I have finished the Fotomatic project. What a nightmare…
I am proud that I did not quit! I worked on this 16-20 hours,
it looks good for most screens, sometimes something is off for the 320-450px screens
but it could be a Chrome bug.
For now, I have to move on with my study, at some point I will return to check the solution and clean/review my code.

Where specs were missing I used the provided image to achieve a similar result.

If you would like to take a look for feedback or get an idea of my methodology:
Repo
Live Preview

1 Like

Hi everyone,

I wanted to share my code for the exercise, even though it’s been quite challenging, and it’s still far from functioning as it should. But for now, it’s what I’ve got! Haha.

fotomatic

Hi! I am working on it myself too, pretty much completed except from some errors I will try to solve… but here is my repo GitHub - PanzerHispaniensis/codingpractice: exercises from varios courses / sources

and here the plan codes. Please feel free to provide me feedback!

Fotomatic
<!-- Sign Up Section -->
<div id="sign-up-section" class="banner">
  <div id="sign-up-cta">
    <div class="content center">
      <div class="header">
        <h2 class="cursive">Instant</h2>
        <h1 class="striking">FORMAT CAMERA</h1>
      </div>
      <div class="email">
        <span>
          Email us to request a demo and be in our waiting list for the <strong>Febuary 2017</strong> release!
        </span>
        <div class="button">Join the waiting list</div>
      </div>
    </div>
  </div>
</div>

<!-- Features Section -->
<div id="features-section">
  <div class="feature">
    <div class="center">
      <div class="image-container">
        <img src="./resources/images/feature-1.png" />
      </div>
      <div class="content">
        <h2>Advanced, automatic, instant</h2>
        <h3>Shutter speed, apperture and flash output adjust automatically</h3>
      </div>
    </div>
  </div>
  <div class="feature">
    <div class="center">
      <div class="image-container">
        <img src="./resources/images/feature-2.png" />
      </div>
      <div class="content">
        <h2>Beautifully crafted inside-out</h2>
        <h3>From the paint outside to the tiny screw inside, Fotomatic is crafted with </h3>
        <h3> love and 20-year of expertise</h3>
      </div>
    </div>
  </div>
</div>

<!-- Filters Section -->
<div id="filters-section">
  <div class="content center">
    <h2>Over 20+ filters to choose from</h2>
    <h3>Feed your creativity with 20 different filter designed by our eclectic in-house photographers!</h3>
  </div>
  <div class="images-container">
    <div class="image-container">
      <img src="./resources/images/filter-1.png" />
    </div>
    <div class="image-container">
      <img src="./resources/images/filter-2.png" />
    </div>
    <div class="image-container">
      <img src="./resources/images/filter-3.png" />
    </div>
    <div class="image-container extra">
      <img src="./resources/images/filter-4.png" />
    </div>
  </div>
</div>


<div id="quotes-section">
  <div class="content center">
    <span class="quote">“It’s truly something that could create a brand new photography Renaissance”</span>
    <img class="quote-citation" src="./resources/images/photography-logo.png" />
  </div>
</div>

<!-- Footer -->
<footer>
  <div class="content">
    <span class="copyright">© 2016  Fotomatic, All Rights Reserved</span>
    <span class="location">Designed in NYC</span>
  </div>
</footer>

CSS
/* Universal Styles */

html {
font-family: “Roboto”, sans-serif;
font-size: 16px;

}

.main-content {
position: relative;
top: 5.3125rem; /* To offset for fixed header. */
overflow: hidden;
}

.center {
text-align: center;
}

.button {
border-radius: 4px;
background-color: #4a4a4a;
color: white;
}

.image-container {
overflow: hidden;
}

.image-container img {
display: block;
}

/* Header */

header {
position: fixed;
width: 100%;
border-bottom: solid 1px #c6c1c1;
background-color: white;
}

header .content {
display: flex;
align-items: center;
padding: 1.875rem;
}

header .logo {
flex: 1;
font-size: 24px;
padding-left: 30px;

}

header nav ul {
display: flex;
padding-right: 30px;

}

nav li {
padding-left: 3.5rem;
}

nav a {
vertical-align: bottom;
line-height: 1.6;
font-size: 1rem;
color: #4a4a4a;
}

header .icon {
width: 1rem;
padding-left: .75rem;
}

header .mobile {
display: none;
}

/* Sign Up Section */

#sign-up-section {
display: flex;
justify-content: flex-start;
align-items: flex-start;
height: 43.5rem;
background-image: url(…/images/banner-landingpage.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

#sign-up-cta {
padding: 0 5rem 2.5rem 5rem;
border: solid 1px #979797;
border-radius: 4px;
background-color: #9dc20b;
margin-top: 170px;
margin-left: 100px;
margin-bottom: 170px;

}

#sign-up-cta .content {
width: 25.625rem;
margin-top: 2rem;
font-family: “Roboto”, sans-serif;
font-size: 1.25rem;
line-height: 1.4;
color: white;
}

#sign-up-cta h1 {
font-size: 3.125rem;
}

#sign-up-cta h2 {
font-size: 2.25rem;
}

#sign-up-cta span strong {
font-weight: bold;
}

#sign-up-cta .cursive {
font-family: “Damion”, cursive;
margin-top: 32px;

}

#sign-up-cta .striking {
font-family: “Rubik”, sans-serif;
padding-bottom: .75rem;
}

#sign-up-cta .button {
margin-top: 1.625rem;
padding: 1.25rem 7.25rem;
}

/MOBILE DISPLAY/

@media only screen and (max-width: 480px) {

#sign-up-section {
height: 20rem;
}

header .content{
display: flex;
width: 100%;

}

#sign-up-section {
background-position: right;
align-items: center;
justify-content: center;
width: 100%;

}

#sign-up-cta {
background-color: transparent;
margin: auto;
border: none;
}

#sign-up-cta .content .header {
width: auto;

}
#sign-up-cta h1 {
font-size: 2rem;
}

#sign-up-cta .content .email {
display: none;
}

header .mobile {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;

}
header .mobile ul {
display: flex;
align-items: center;
}

header .mobile ul li .button {
background-color: #9DC20A;
padding: 3px 8px;
}

header .desktop {
display: none;
}

#features-section {
display: flex;
flex-flow: column;
padding: 16px 0;
/width: 100%;/

}

#feature-section .feature {
width: 100%;
padding-top: 16px;
padding-bottom: 0;
}

.content h2 {
font-size: 18px;
font-family: “Roboto-Regular”;
line-height: 1.3;

}

.content h3 {
font-size: 14px;
line-height: 1.4;
}

.quote-citation {
display: flex;
margin: auto;
padding: 5%;
}

#filters-section .extra{
display: none;

}
#quotes-section .quote{
display: flex;
justify-content: center;
align-items: center;
margin: auto;
font-size: 24px;
line-height: 1.4;
}
}

/TABLET DISPLAY/

@media only screen and (min-width: 768px) {
footer .content {
font-size: .625rem;
}
}

@media only screen and (min-width: 500px) and (max-width: 768px) {

.main-content {
top: 2.5625rem;
}

header .desktop {
display: block;
width: 100%;
}

header .mobile {
display: none;
}
header .button {
display: flex;
justify-self: end;
}

header .content {
padding: .5rem 0;
}

header .mobile ul {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
}

header .mobile li {
padding: 0;
}

.desktop ul {
display: flex;
justify-content: flex-start;
}

nav .button {
display: block;
padding: .1875rem .5rem;
background-color: #9dc20b;
line-height: 1.6;
color: white;
}

#sign-up-section {
align-items: center;
justify-content: center;
height: 28rem;
}

#sign-up-cta {
position: static;
width: auto;
height: auto;
background-color: transparent;
border: none;
}

#sign-up-cta .content {
margin-top: 0;
}

#sign-up-cta .email {
display: none;
}

#sign-up-cta h1 {
font-size: 3.125rem;
}

#sign-up-cta h2 {
font-size: 2.25rem;
}

#features-section {
flex-flow: column;
padding: 0;
}

.feature {
margin: 0;
padding: 1.25rem 1rem 0 1rem;
}

#filters-section {
padding: 1.5rem 0 0 0;
}

#filters-section .content {
margin-bottom: 1rem;
}

#filters-section .content h2 {
padding-bottom: .625rem;
font-size: 1.125rem;
line-height: 1.3;
font-weight: normal;
}

#filters-section .content h3 {
font-size: .875rem;
line-height: 1.4;
}

#filters-section .images-container {
padding: 0;
}

#filters-section .extra {
display: none;
}
#quotes-section content {
padding: 1.875rem .625rem;
}

#quotes-section quote {
font-size: 1.5rem;
line-height: 1.4;
}

#quotes-section quote-citation {
display: block;
padding-top: 1rem;
margin: auto;
}

}

/TABLET LANDSCAPE OR DESKTOP DISPLAY?/

@media only screen and (min-width: 761px) and (max-width: 890px) {
.feature h2 {
font-size: 1.125rem;
line-height: 1.3;
font-weight: normal;
}

.feature h3 {
font-size: .875rem;
line-height: 1.4;
}
}

/* Features Section */

#features-section {
display: flex;
justify-content: space-between;
padding: 4rem 5%;
background-color: #f3f3f3;
overflow: hidden;

}

.feature {
flex: 1;
padding: 2rem;
margin: 0px 1.25rem;
background-color: white;
}

.feature .image-container {
width: 90%;
height: 65%;
margin: 0 auto;

}
.feature .content {
padding: 2.5rem 0;
}

.feature img{
width: 90%;
height: 65%;
}

.feature h2 {
padding-bottom: .5rem;
font-size: 2.25rem;
font-weight: bold;
color: #4a4a4a;
padding-top: 40px;
}

.feature h3 {
font-size: 1rem;
line-height: 1.2;
font-weight: 300;
color: #4a4a4a;

}

/* Filters Section */

#filters-section {
padding: 4rem 0;
background-color: #4a4a4a;
padding-top: 64px;

}

#filters-section .content {
padding: 0 .625rem;
margin-bottom: 5rem;
}

#filters-section .content h2 {
font-size: 2.25rem;
font-weight: bold;
color: white;
}

#filters-section .content h3 {
font-size: 1rem;
line-height: 1.4;
font-weight: 300;
color: white;
}

#filters-section .images-container {
max-width: 100%;
padding: 0 1%;
display: inline-flex;
}
.images-container img {
width: 100%;
}

/* Quotes Section */

#quotes-section {
background-color: #f3f3f3;
height: 190px;
display: flex;
justify-content: center;
align-items: center;

}

#quotes-section content {
padding: 5rem 0;
}
#quotes-section .quote {
padding-right: 1.875rem;
font-family: “Palatino”, serif;
font-size: 1.875rem;
line-height: 1.1;
font-style: italic;
color: #4a4a4a;

}

#quotes-section quote-citation {
height: 1.875rem;
}

/* Footer */

footer {
background-color: #9b9b9b;
padding: 1.5rem 2rem;
}

footer .content {
color: white;
display: flex;
font-size: .75rem;
}

footer .copyright {
flex-grow: 1;
font-size: 12px;
}

footer .location {
font-size: 12px;
}

hello everyone i started this project but im lost i don’t know where to start, should i modify the style.css file or the reset.css file ? or both ? thank you :frowning:

1 Like

Hi yaakou, I was wondering the same, which css file to update. I’m guessing it might be too much to add to the reset.css file, so I’m going to try adding to style.css instead. I’ve also noticed there’s 2 images missing from the download. Not sure what I’m going to do there yet. :thinking:

For the missing images, I had to correct the relative link in the html while the assignment said we’d be correcting CSS lol.

Thank you for your answer :slight_smile:

It’s gonna be more complicated for me I guess :joy::joy: If you hadn’t told me there were a missing picture I would’ve had not guessed it

1 Like

Hi again, yes, you do need to use the reset.css as it’s the one linked in the html. Copy & paste all of the style.css into it and go from there :slight_smile:

Oh thank you so much I appreciate that, now I went to revise the grid and media queries lessons to refresh my memory then I’ll start the project again

1 Like

I just finished the project, but am running into these two issues:

  • The header isn’t sticky when in desktop mode

  • There is some extra space on the right of the screen when in mobile format, which doesn’t allow the format camera part to be displayed properly

Here is my(very messy) code:

(html)

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Damion" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,600,700" rel="stylesheet">
  <link rel="stylesheet" href="./resources/css/style.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <!-- Header -->
  <header>
    <div class="content">
      <a href="index.html" class="logo desktop">Fotomatic</a> 
      <nav class="desktop">
        <ul>
          <li><a href="#">Product detail</a></li>
          <li><a href="#">About us</a></li>
          <li><a href="https://www.instagram.com/">Follow us <img class="icon" src="./resources/images/instagram.png"></a></li>
        </ul>
      </nav>
      <nav class="mobile">
        <ul>
          <li><a href="#"><img src="./resources/images/ic-logo.svg"></a></li>
          <li><a href="#"><img src="./resources/images/ic-product-detail.svg"></a></li>
          <li><a href="#"><img src="./resources/images/ic-about-us.svg"></a></li>
          <li><a href="#" class="button">Join us</a></li>
        </ul>
      </nav>
    </div>
  </header>
  

  <!-- Main Content -->
  <div class="main-content">

    <!-- Sign Up Section -->
    <div id="sign-up-section" class="banner">
      <div id="sign-up-cta">
        <div class="content center">
          <div class="header">
            <h2 class="cursive">Instant</h2>
            <h1 class="striking">FORMAT CAMERA</h1>
          </div>
          <div class="email">
            <span>
              Email us to request a demo and be in our waiting list for the <strong>Febuary 2017</strong> release!
            </span>
            <div class="button">Join the waiting list</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Features Section -->
    <div id="features-section">
      <div class="feature">
        <div class="center">
          <div class="image-container">
            <img src="./resources/images/feature-1.png" />
          </div>
          <div class="content">
            <h2>Advanced, automatic, instant</h2>
            <h3>Shutter speed, apperture and flash output adjust automatically</h3>
          </div>
        </div>
      </div>
      <div class="feature">
        <div class="center">
          <div class="image-container">
            <img src="./resources/images/feature-2.png" />
          </div>
          <div class="content">
            <h2>Beautifully crafted inside-out</h2>
            <h3>From the paint outside to the tiny screw inside, Fotomatic is crafted with love and 20-year of expertise</h3>
          </div>
        </div>
      </div>
    </div>

    <!-- Filters Section -->
    <div id="filters-section">
      <div class="content center">
        <h2>Over 20+ filters to choose from</h2>
        <h3>Feed your creativity with 20 different filter designed by our eclectic in-house photographers!</h3>
      </div>
      <div class="images-container">
        <div class="image-container">
          <img src="./resources/images/filter-1.png" />
        </div>
        <div class="image-container">
          <img src="./resources/images/filter-2.png" />
        </div>
        <div class="image-container">
          <img src="./resources/images/filter-3.png" />
        </div>
        <div class="image-container extra">
          <img src="./resources/images/filter-4.png" />
        </div>
      </div>
    </div>

    <!-- Quotes Section
    <div id="quotes-section">
      <div class="content center">
        <span class="quote">“It’s truly something that could create a brand new photography Renaissance”</span>
        <img class="quote-citation" src="./resources/images/photography-logo.png" />
      </div>
    </div>

    <!-- Footer -->
    <footer>
      <div class="content">
        <span class="copyright">© 2016  Fotomatic, All Rights Reserved</span>
        <span class="location">Designed in NYC</span>
      </div>
    </footer>

  </div>
</body>
</html>

(CSS)

/* Universal Styles */


@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

@media only screen and (min-width: 480px) and (max-width: 1024px) {
  header{
    z-index: 2;
    padding-right: 1.875rem;
  }
  #sign-up-section {
    text-align: center;
    width: 87%;
  }
}


html {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
}

a{
  text-decoration: none;
}

.main-content {
  position: relative;
  top: 4.3125rem; 
}

.center {
  text-align: center;
}

.button {
  border-radius: 4px;
  background-color: #4a4a4a;
  color: white;
}

.image-container {
  overflow: auto;
}

.image-container img {
  display: block;
  max-width: 100%;
}

@media only screen and (max-width: 760px) {
  .main-content {
    top: 2.5625rem;
  }
}

/* Header */

header {
  position: fixed;
  width: 100%;
  background-color: white;
}

header .content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 1.875rem;
  padding-left: 1.875rem;
}

header .logo {
  flex: 1;
  font-size: 1.5rem;
  padding-left: 1.875rem;
  color: #4a4a4a;
  font-family: 'Roboto Mono';
}

header nav ul {
  display: flex;
}

nav li {
  padding-left: 3.5rem;
  list-style: none;
}

nav a {
  vertical-align: bottom;
  line-height: 1.6;
  font-size: 1rem;
  color: #4a4a4a;
  align-items: center;
}

header .icon {
  width: 1rem;
  padding-left: .75rem;
  padding-right: 1.875rem;
}

header .mobile {
  display: none;
}

@media only screen and (max-width: 760px) {
  header .desktop {
    display: none;
  }

  header .mobile {
    display: block;
    width: 100%;
  }

  header .content {
    padding: .5rem 0;
  }

  header .mobile ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
  }

  header .mobile li {
    padding: 0;
  }

  header .mobile .button {
    padding: .1875rem .5rem;
    background-color: #9dc20b;
    line-height: 1.6;
    color: white;
  }
}


/* Sign Up Section */

#sign-up-section {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  height: 43.5rem;
  padding-top: 10.625rem;
  padding-left: 6.25rem;
  background-image: url('/resources/images/banner-landingpage.jpg');
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
}

#sign-up-cta {
  padding: 0 5rem 2.5rem 5rem;
  border: solid 1px #979797;
  border-radius: 4px;
  background-color: #9dc20b;
}

#sign-up-cta .content {
  width: 25.625rem;
  margin-top: 2rem;
  font-family: "Roboto", sans-serif;
  font-size: 1.25rem;
  line-height: 1.4;
  color: white;
}

#sign-up-cta h1 {
  font-size: 3.125rem;
}

#sign-up-cta h2 {
  font-size: 2.25rem;
}

#sign-up-cta span strong {
  font-weight: bold;
}

#sign-up-cta .cursive {
  font-family: "Damion", cursive;
}

#sign-up-cta .striking {
  font-family: "Rubik", sans-serif;
  padding-bottom: .75rem;
}

#sign-up-cta .button {
  margin-top: 1.625rem;
  padding: 1.25rem 7.25rem;
}

@media only screen and (max-width: 760px) {
  #sign-up-section {
    align-items: center;
    justify-content: center;
    height: 28rem;
  }

  #sign-up-cta {
    position: static;
    width: auto;
    height: auto;
    background-color: transparent;
    border: none;
  }

  #sign-up-cta .content {
    margin-top: 0;
  }

  #sign-up-cta .email {
    display: none;
  }

  #sign-up-cta h1 {
    font-size: 3.125rem;
  }

  #sign-up-cta h2 {
    font-size: 2.25rem;
  }
}

@media only screen and (max-width: 450px) {
  #sign-up-section {
    height: 20rem;
  }

  #sign-up-cta h1 {
    font-size: 2.25rem;
  }

  #sign-up-cta h2 {
    font-size: 2rem;
  }
}

/* Features Section */

#features-section {
  display: flex;
  justify-content: space-between;
  padding: 4rem 5%;
  background-color: #f3f3f3;
}

.feature {
  flex: 1;
  padding: 2rem;
  margin: 0px 1.25rem;
  background-color: white;
}

.feature .image-container {
  width: 90%;
  height: 65%;
  margin: 0 auto;
}

.feature h2 {
  padding-bottom: .5rem;
  font-size: 2.25rem;
  font-weight: bold;
  color: #4a4a4a;
}

.feature h3 {
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 300;
  color: #4a4a4a;
}

@media only screen and (max-width: 890px) {
  .feature h2 {
    font-size: 1.125rem;
    line-height: 1.3;
    font-weight: normal;
  }

  .feature h3 {
    font-size: .875rem;
    line-height: 1.4;
  }
}

@media only screen and (max-width: 760px) {
  #features-section {
    flex-flow: column;
    padding: 0;
  }

  .feature {
    margin: 0;
    padding: 1.25rem 1rem 0 1rem;
  }
}

/* Filters Section */

#filters-section {
  padding: 4rem 0;
  background-color: #4a4a4a;
}

#filters-section .content {
  padding: 0 .625rem;
  margin-bottom: 5rem;
}

#filters-section .content h2 {
  font-size: 2.25rem;
  font-weight: bold;
  color: white;
}

#filters-section .content h3 {
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 300;
  color: white;
}

#filters-section .images-container {
  max-width: 100%;
  padding: 0 1%;
  display: inline-flex;
}

@media only screen and (max-width: 760px) {
  #filters-section {
    padding: 1.5rem 0 0 0;
  }

  #filters-section .content {
    margin-bottom: 1rem;
  }

  #filters-section .content h2 {
    padding-bottom: .625rem;
    font-size: 1.125rem;
    line-height: 1.3;
    font-weight: normal;
  }

  #filters-section .content h3 {
    font-size: .875rem;
    line-height: 1.4;
  }

  #filters-section .images-container {
    padding: 0;
  }

  #filters-section .extra {
    display: none;
  }
}

/* Quotes Section */

#quotes-section {
  background-color: #f3f3f3;
}

#quotes-section content {
  padding: 5rem 0;
}

#quotes-section quote {
  padding-right: 1.875rem;
  font-family: "Palatino", serif;
  font-size: 1.875rem;
  line-height: 1.1;
  font-style: italic;
  color: #4a4a4a;
}

#quotes-section quote-citation {
  height: 1.875rem;
}

@media only screen and (max-width: 760px) {
  #quotes-section content {
    padding: 1.875rem .625rem;
  }

  #quotes-section quote {
    font-size: 1.5rem;
    line-height: 1.4;
  }

  #quotes-section quote-citation {
    display: block;
    padding-top: 1rem;
    margin: auto;
  }
}

/* Footer */

footer {
  background-color: #9b9b9b;
  padding: 1.5rem 2rem;
}

footer .content {
  color: white;
  display: flex;
  font-size: .75rem;
}

footer .copyright {
  flex-grow: 1;
}

@media only screen and (min-width: 760px) {
  footer .content {
    font-size: .625rem;
  }
}

Hello, this is my solution:

CODE: GitHub - luixsx/fotomatic
LIVE: https://luixsx.github.io/fotomatic/

Are you sure about that? As far as I’m aware, the reset.css stylesheet is simply there to reset any default formatting that your browser might implement, to give you a “blank slate” for the styling you’re working with.

I’m pretty sure we’re supposed to be editing the style.css stylesheet, fixing and adding rules to reach the intended end result.

1 Like