Skip to content
OverviewSolutions
7
Comments
5
Ziyad ghobashi
@ziy-eg

All comments

  • João Pedro Fernandes•170
    @JPbyteSubmitted about 2 years ago

    #HTML #CSS #SASS/SCSS

    Good night, today I did another project, it took me a while, but I managed to finish it. I put the animation in, what do you think?

    Clipboard landing page

    3
    Ziyad ghobashi•180
    @ziy-egPosted about 2 years ago

    I just love your project, and I love adding the animation too:

    body header img {
  width: 100px;
  margin-top: 84px;
  margin-bottom: 46px;
  -webkit-animation: flutuar 3s infinite;
   animation: flutuar 3s infinite;
}

    -however, -this is just me- I like the short time animation: try using only 1s for the whole time. it would be much better.

    also

    -I reviewed your live site on a large screen, and I had a white space column on the right side of your header.

    try this one:

    header {
  background-image: url(../images/bg-header-desktop.png) no-repeat;
  background-size: cover;
  background-position: top;
  width: 100vw;
}

    and for mobile devices - just change the background url;

    Honestly I enjoyed your project.

    0
  • Aline Barbosa•10
    @albarbsilvaSubmitted over 2 years ago

    So I'm new at this and I tried to do the challenge and I would like to know how I can improve. I feel I have written a lot of unnecessary lines but I can't say for sure what they are. I used to program in C# but front-end is quite new to me. How can I make the code smaller?

    QR Code

    2
    Ziyad ghobashi•180
    @ziy-egPosted over 2 years ago

    instead of

    <body>
    <section>
      <div class='box'>      
        <section class = 'box1'>
        <a href="https://imgbb.com/"><img src="https://i.ibb.co/vkFLCm7/frame.png"></a>
    </section>
        <h2>Improve your front-end skills by building projects.</h2>
    <p class='description'> Scan the QR code to visit Frontend 
    Mentor and take your coding skills to the next level. </p>
    </div>
    </section>
</body>

    Try using:

    <body>
    <main class="box">      
        <div class ="qr-code">
            <a href="https://imgbb.com/">
                <img src="https://i.ibb.co/vkFLCm7/frame.png">
            </a>
        </div>
        <h2>Improve your front-end skills by building projects.</h2>
        <p class="description">
            Scan the QR code to visit Front-end Mentor and take your coding skills to the next level.
        </p>
    </main>  
</body>

    it's much easier.

    as for centering the card:

    .box {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate (-50%, -50%);
}
    Marked as helpful
    1
  • Ziyad ghobashi•180
    @ziy-egPosted over 2 years ago

    in my perspective: 2 options:

    • the grid display option with 3 columns for the cards.
    • the flex display option with the default row direction. the second and the third card would have to be on the same <div> with (flex-direction: column;) for the flex.

    OR you could use (align-self: center;) for the first and last cards.

    Both 2 methods are the easiest for ME, and I prefer the Grid option as well.

    Great job thou.. I love your code and I like the use of (.center) on your HTML.

    Marked as helpful
    1
  • Muhammad•90
    @code-AllahtosinSubmitted over 2 years ago

    I was wondering if there's a better way to implement centring the page vertically.

    CSS column flex

    2
    Ziyad ghobashi•180
    @ziy-egPosted over 2 years ago

    I love your code.

    about your question for centering any item: try this code: <code> position: absolute; top: 50%; left: 50%; </code> this code will put the left-top corner of the item on the page center, so to make it work on the whole item you have to add another code to it.

    <code> transform: translate(-50%, -50%); </code> that would move the left-top corner 50% up and left making the center point of the item in the center of the main container.. (makes it look like dealing with the center point)

    keep the good work..

    0
  • Ziyad ghobashi•180
    @ziy-egPosted over 2 years ago

    You had a pixel perfect project, that was so good. I just reviewed your code on Github and it's very good, well typed and arranged. I'm a beginner myself and just learned a couple of things from your code.

    your code is simple, and you used the flex containers and flex items to arrange that. CSS file is simple too. You could try to create a separate file for mobile design. (large project would have a lot of pages with lots of CSS codes)

    about the Github repository: you could work on arrangement a little bit.

    • images==>[only has image files that are used on the website]
    • Design==>[screenshots of the website views]
    • html file [if it has more than file - you should create a folder named "html"]
    • css file [if it has more than file - you should create a folder named "css"]

    keep the good work and keep coding.

    Marked as helpful
    0