Fotomatic (or Fotomat) Project

Hi all,

A few questions/concerns about this project:

The solution does not match the spec sheet.
Was the “Fotomat” in the header not just some logo we were supposed to import?
Is it “Fotomat” or “Fotomatic?”
Why did we need to link two style sheets?

1 Like

Hi!
I agree. I actually just finished working on this project and noticed that a lot of specs weren’t met in the solution. Also the specs show a version for a tablet where the header and the feature section look completely different than in the solution version. I ended up creating another display, with class “tablet” in the html , and did exactly what the specs show. I am not sure why there are two stylesheets. I think that the "reset " one has styles for order browsers in case someone still uses them? But I am not 100% sure.
And I think that it is supposed to be the logo Fotomatic but I definitely was also wondering why it just shows “fotomat” on the tablet version . These are just the things I noticed while working on the project. I am still pretty new to the web development , so I hope my code makes sense. I am attaching link to my GitHub with my code and also a link to see preview of my version of the improved version. I am very open to any suggestions and improvements!

My Github Repository: GitHub - Karito84/Fotomatic
Preview of my improved website :GitHub & BitBucket HTML Preview

Hey Karito,

This is good stuff!

At the smallest screen your header was supposed to be replaced by icons. I noticed in their solutions that they changed the 480 media queries to 600. They pretty much upped the sizes of all their media queries. I’m still trying to figure out why and where do they get these numbers from. I was debugging using the size presets in Chrome Developer Tools why the layouts do not change accordingly even when I alter the queries to those sizes.

2 Likes

I am not sure why they used those sizes. I was also working with the Chrome DevTools and couldn’t understand why the layouts weren’t changing while using the Responsive tool . I found another post here on Codecademy where someone else had the same problem. They figured out that you need to put this link: <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> in your html <head> and it solves the problem !

1 Like

Hi,

after spending a lot of time in getting unstucked by myself I have read here about some of my issues which are described in former posts and tried the suggested solutions i found here. But there is atm one problem i cannot come through at all so I hope somebody can help me with this:
Project Fotomat(ic) : https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-making-a-website-responsive/modules/fecp-learn-css-documentation-and-debugging/informationals/f1-2-c1p1-fotomatic

the containers of both feature pictures always overflow the space (width and height) and don’t shrink. I fear, the reason is a min-width of 1136px for their container shown in the firefox dev tool - but there isn’t a min-width property in the whole css-file (better said in both as i have linked the style and the reset css-files), i also didn’t found anything else inherited like this so far.
I don’t manage to remove that min-width of 1136px in the dev-tools, (suitable to the locked sign), and i dont find it listed on the left site within the css rules.
Trying to compare my code with the solution code (which i tried 1:1 for this part) and after looking for a solution in google i also didnt find the answer for this problem. To see more clear about the space around my both flex-items I changed the color of the parents container

to red (this of course wasn’t part of the task).

I would really appreciate any help for this situation. Thank you in advance.211004_class_feature_Minimalgröße_1136px.PNG|690x353

1 Like

Hi,

Would it be possible to see your code? I don’t know if you gave the parent container flex properties and then aligned the contents of the child container with respect to the parent.

Hi @brianawithonen,

sorry for the late reply:

This is the 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/reset.css">
  <link rel="stylesheet" href="./resources/css/style.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" >
  
</head>
<body>
  <!-- Header -->
  <header>
    <div class="content">
      <a href="index.html" class="desktop logo">Fotomat</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 -->
    <section id="section1">
    <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>
  </section>

    <!-- Features Section -->
    <div id="features-section">

      <div class="feature">
        <div class="center"> 
          <div class="image-container_feature">
            <img src="../F1C1_start/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_feature">
            <img src="../F1C1_start/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>

This is the style.css:

/* Universal Styles */

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

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

.center {
  text-align: center;
}

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

.image-container {
  overflow: hidden;
}

.image-container img {
  display: block;
}

@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;
  height: 5.3125rem;
  padding: 0 1.875rem;
}

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: 16px;
  font-family: "Roboto 700";
  color: #4a4a4a;
}

header .icon {
  width: 1rem;
  padding-left: .75rem;
  margin-right: 30px;
}

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 */

#section1 {
  background-image: url("../images/banner-landingpage.jpg");
  width: 100%;
  background-size: cover;

}

#sign-up-section {

  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  height: 43.5rem;
}

#sign-up-cta {
  padding: 0 5rem 3.5rem 5rem;
  border: solid 1px #979797;
  border-radius: 4px;
  background-color: #9dc20b;
  margin-left: 6.25rem;
  margin-top: 10.625rem;
  margin-bottom: 10.625rem;
}

#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;
  line-height: 1.4;
}

#sign-up-cta .button {
  margin-top: 1.625rem;
  padding: 1.25rem 7.25rem;
  font-size: 1.25rem;
 font-family: "Roboto 400";
}

@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 {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  padding: 4rem 5%;
  background-color: red;
}

#features-section .feature {
  background-color: white;
  flex-shrink: 1;
  flex-basis: 0%;
  margin-right: 2.375rem;
}

.feature .center {
display: flex;
flex-direction: column;

}

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

}

.image-container_feature .content {
  margin-top: 2.5rem;
  max-height: 11.6875rem;
}

.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%;
  max-height: 95%;
  flex: 1 1 0%;
  padding: 0 1%;
  display: flex;
  justify-content: center;
  align-items: center;
}


@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 (max-width: 760px) {
  footer .content {
    font-size: .625rem;
  }
}

and this is the given reset.css:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  color: black;
  text-decoration: none;
}

My scheduled way through that project was to go from top to bottom - i stopped as i couldn’t fix the problem with the huge pictures there, so the rest is still waiting to get done.
Many thanks.

1 Like

Hey guys!

I am taking the Front-end engineering career path in Codecademy and I just came across the Fotomat project. I am completely done with the project and would like to have your feedback. Please check out the live version (https://ahman502.github.io/Fotomat/) of my project or if you are stuck in this project and need help with the code, please visit my GitHub (https://github.com/ahman502/Fotomat) and check out the different project files (HTML and CSS) as I have added a lot of comments to help understand how I am manipulating the code to render a similar website as the solution presented by Codecademy. Hope this helps.

Thank you! :slight_smile:

1 Like

Did anybody else really struggle with this project?

I feel like the issue with Codeacademy is they’ll spoonfeed you for ages and then they’ll just leave you with something like that without giving clear instructions (I’m guessing maybe that’s the point) but I couldn’t even work out what they wanted me to do for ages! The reset CSS didn’t make that much sense!
I just felt like it went from 0 to 100 very quickly!!!

:joy:

11 Likes

The reset stylesheet is meant to minimize browser inconsistencies. Because Firefox doesn’t render the exact same as Chrome for example.

2 Likes

Haha yepp I realised this afterwards!

Once I realised I was meant to be working from the style.css sheet I did the project quickly!
I’ve seen quite a few different forum threads from people who got confused over the same thing though, so I guess I wasn’t alone :sweat_smile:

1 Like

Hi,
I checked out your first link quickly and saw that the page doesn’t change its UI based on the device width. For example, shrinking it to a “tablet” or “phone” size doesn’t bring up the “Join us” button on the top right - are you sure you completed the project?

I am struggling with it at the moment for the tablet settings, almost ready to give up!

Are you doing a media query for min width 768px?

Yes, I realized I was doing the width wrong. I should have used 1024px as max width for tablet, whereas I was doing something wider. I changed that and it fixed it. Thanks for your response.

Hi @ttaannjjaa,

I know this is an old post but i’m wondering if you remember finding a solution for this? I’m running into the same problem. I can’t get the images in the Filters section to resize with the browser.

That makes so much more sense now! Thank you for sharing!! I was so confused about it

Hi everyone,

Below you will find a link for the finished fotomatic project. I followed the spec sheet.
https://ehvy-jd.github.io/codecademy-fotomatic/
Please look through and let me know if I missed anything.
Thanks.

Hi everyone,

here comes my finished project. I still have to make some changes because I still have to match the specifications for the navigation-bar for the tablet layout. But the rest seem to work. Please feel free to tell me if you find any issue. I will fix it as soon as possible, update my repo and give a comment here.

My files @ GitHub
My live-page @ GitHub-Pages

Thanks

Hi everyone.

This was very challenging. Took me 3 days to try wrap my head around it all. This forum did help heaps, as well as using dev tools.

Live site: Fotomatic

Repo: JamesSchulzeDev/fotomatic (github.com)

The only problem I seemed to have, has been under the navigation when moving from desktop to tablet view. There seemed to be a layout issue. Unsure of the solution, any comments welcome. I will come back if I see a solution later on or when “the penny drops”.

1 Like

Hi everyone!

Just finished the Fotomatic Project! The only issue I had was that the logo in the quotation section is smaller than it should be (mobile view), although the height is declared previously (1.875rem) so I couldn’t figure out what it was.

Thanks in advance for your feedback and happy coding!