Learn Courses My Dashboard

Challenge 4. Solved the problem in another way. Is it correct?

//
// ContentView.swift
// Lesson4.SwiftUIandContainers
//
// Created by Mereke Dadabayeva on 25.08.21.
//

import SwiftUI

struct ContentView: View {
var body: some View {

    //Stack Containing two cards
    VStack {
        //CN Tower card
        ZStack{
           
            
            Image("toronto").resizable().aspectRatio(contentMode: .fit).cornerRadius(20.0)
             
            
           
            //Stack Containing text
            VStack(spacing: -25.0) {
                Text("CN Tower")
                        .font(.title)
                        .fontWeight(.regular)
                        .foregroundColor(Color.white)

                        .padding(.all, 30.0)
                    .background(Color.black).opacity(0.8).cornerRadius(8.0)
           
                    
                Text("Toronto")
                    .font(.footnote)
                    .foregroundColor(Color.white)
                
            }
            
         
        }.padding()
        //End of Stack CN Tower Card
        
        //Stack Containing Big Ben Card
        ZStack {
         
            Image ("london").resizable().aspectRatio(contentMode:.fit).cornerRadius(20.0)
           
            //Stack containing text
            VStack(spacing: -25.0) {
                Text("Big Ben")
                        .font(.title)
                        .fontWeight(.regular)
                        .foregroundColor(Color.white)

                        .padding(.all, 30.0)
                        .padding(EdgeInsets())
                    .background(Color.black).opacity(0.8).cornerRadius(8.0)
           
                    
                Text("London")
                    .font(.footnote)
                    .foregroundColor(Color.white)
            }
        }.padding()
        //End of Big Ben Card
    }

}

struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}

}

View on simulator looks pretty same :grinning:

No. Your background color should be applied to the VStack in which you have the two Text views. Using a negative 25 VStack spacing and then adding padding of 30 around the first Text view in order to artificially pull up the second Text view is not the right way to go about it. ie: should be:

                //Stack Containing text
                VStack {
                    Text("CN Tower")
                        .font(.title)
                        .fontWeight(.regular)
                        .foregroundColor(Color.white)

                    Text("Toronto")
                        .font(.footnote)
                        .foregroundColor(Color.white)

                }
                .padding()
                .background(Color.black)
                .opacity(0.7)
                .cornerRadius(8.0)

Also it makes your code easier to read if you place the modifiers below the View element one after the other.

When you paste in your code, place 3 back-ticks ``` on the line above your code and 3 back-ticks ``` on the line below your code so that it is formatted nicely. The back-tick character is located on the same keyboard key as the tilde character ~ (below the Esc key).