CSS Assignment Breakfast Places in Mumbai about tutoringtrainingstudents HOT 10 CLOSED

Hii sagarpansare1234

here all code is available refer this assignment.

https://codepen.io/shaikhanis/full/XWBXWoV

Thank You

from tutoringtrainingstudents.

@sagarpansare1234

I just made small changes in your code and didn't create anything new check it: https://github.com/asmallick1999/Assignment_Issue

add your image link

from tutoringtrainingstudents.

@asmallick1999 and @shaikhanis

Awesome. Thank you so much for sharing the solutions. this will help me with future batches.

Thanks.

from tutoringtrainingstudents.

@sagarpansare1234

I spent half an hour on this code. I am sorry, I have no idea what is happening with the code. I know CSS basics man, but this is too complex.

I will show it to some of my CSS friends and see if they can come up with any solution. Hopefully, other students will be able to help you who have already done this assignment.

_As usual, you know my personal opinion these things. Stop wasting your time with assignments. Start learning bootstrap, build some web apps using some ready to use templates and ready to use sample projects I have shared and focus on projects.

Focus on JAVASCRIPT. Focus on Bootstrap and Focus on React JS_

from tutoringtrainingstudents.

are you looking for this one?

from tutoringtrainingstudents.

[asmallick1999] yes

from tutoringtrainingstudents.

@sagarpansare1234

I did some circus and was able to get this much. but man, I absolutely hate CSS. This is the best I can do for you, right now.

It took 3 hours!!!

https://codepen.io/jay-pancodu/pen/eYjbRza

Anyway, hope it helps. Hope other students can help you.

Once again, STOP WASTING TIME ON CSS ASSIGNMENTS. PLEASE FOCUS ON USING BOOTSTRAP, JS AND REACT JS AND BUILD SOME ACTUAL PROJECTS.

Once you get job, you will have plenty of time to become expert in CSS, if your company puts you in CSS styling role.

from tutoringtrainingstudents.

But, I am studying this assignment, and trying to improve my CSS knowledge.

Now, to answer your question. Look how nicely the cuisine and prices are aligned.

To get this, I created my DIV element like this.

          <div class="eachrestaurant">
            <img src="https://wallsdesk.com/wp-content/uploads/2016/09/Ameesha-Patel-Pictures.jpg" alt="Girl in a jacket" width="25%" height="25%">
            <div>
              <h1>Cake Bakery</h1>
              <h2>56, 2nd Road. Mountain Place</h2>
              <p>Ph.No. 12345678</p>
            </div>

          </div>
          <hr>
          <div class="eachrestaurantcuisine">
            <div class="eachrestaurantcuisinedivide">
              <p>Cuisine</p>
              <p>Cost For Two</p>
            </div>
            <div class="eachrestaurantcuisinedivide">
              <p>Mysorean</p>
              <p>50 Rupees</p>
            </div>
          </div>

Now, I was able to put the image and the restaurant address, using the flex. like this.

.eachrestaurant {
    display: flex;
    flex-direction: row;
}

.eachrestaurantcuisine {
    display: flex;
    flex-direction: row;
}

and then, I was able to make them come close to each other, like this.

.eachrestaurantcuisinedivide {
    width: 20%;
}

So, that gives the desired answer.

from tutoringtrainingstudents.

Now, lets try to look at your code.

for some reason, you are using two separate classes, for the same, repeated DIV. like this.

<article class="result2-article">
<article class="result1-article">

This makes zero sense to me, even though, I am not good in CSS. This was the biggest mistake. You should not be doing like this because the same content is being repeated. That means, you should be able to get the output with the same CSS classes as the content is the same.

Now, next issue.

Your first restaurant DOM that contains the first restaurant is FIXED to the top. it should not be fixed. I tried to remove the fixing, but, eventually got headache and stopped.

Now, how to solve your code?

1. First thing, when I look at your code, I get the feeling that you are simply copy pasting CSS from different websites on the internet without thinking what they are doing. So, you should stop doing that.
2. Second thing, you need to plan your layout and apply CSS one step at a time.

For example, first, I started with this DIV.

<div class="contentofrestaurant">

Then, inside, I put two divs.

<div class="eachrestaurant">
div class="eachrestaurantcuisine">

The first div, eachrestaurant, was for photo with address. Then, eachrestaurantcuisine, is for cuisine and price. Now, because, these two things are 'vertical elements', one after another, we can just put them directly, one line after another.

Now, inside the div, contentofrestaurant, we have

1. image to the left side.
2. address to the right side.

That means, we should, put them, left to right. For this, I used this CSS

.eachrestaurant {
    display: flex;
    flex-direction: row;
}

Now, next is, div, eachrestaurantcuisine, for, this again, I want side by side.

.eachrestaurantcuisine {
    display: flex;
    flex-direction: row;
}

Finally, div, eachrestaurantcuisinedivide. I want them the price and rupees to be near each other. So, I did like this.

.eachrestaurantcuisinedivide {
    width: 20%;
}

from tutoringtrainingstudents.

Ultimately, if you really want to do these CSS assignments (I already told you, don't waste your time, but you are doing it, so....), you have to do them carefully, one div at a time, one step at time.

Anyway, I hope I have given you enough information. Feel free to let me know if you want more details. I will try my best, even though, I hate working on CSS :)

from tutoringtrainingstudents.