1. detele view controller file and set up a new file using coca touch class and name it to CardSeletorVC. s

2. go to main storyboard select vc and set class to CardSeletorVC.

3. click shift+cmd+L and then select UIimage

4. set constraints width 250 and height 350.

5. tick horizontal and vertical in container from the alignment constraints

6. from the right section click size inspector and the click on Align Center Y and set constant to -100 this way it aligns the image as we want it for the card.

7. click UIimage go to attributes inspector and select 10s image

8. add a button name Stop!, set width constraint to 260, height to 50, select the top and set it to a round number in constraint and add align horizontally in container.

9. click button and from attribute inspector select background color and set it to system red color and select font style below title, set it to system bold and size 19.

10. hold option press the button drag it down and set name to Restart.

11. set width 115 and height 50 from constraints.

12. now click restart button while holding option drag towards the Stop! button, then from size inspector set top space equal to 20

13. click option and hold restart button then drag it to Stop! button and click leading (leading is for left to right and trailing is for right to left)

14. duplicate the restart button to the right set background color to blue and name it Rules.

15. Now hold rules button click control and drag it to restart button and set to align centrally and do the same with Stop! button and select trailing.

16. now select 10s from document outline and hold control than drag it to this section of CardSelectorVC as shown below

    import UIKit
    
    class CardSelectionVC: UIViewController {
    
        @IBOutlet var cardImageView: UIImageView!
        
        override func viewDidLoad() {
            super.viewDidLoad()
    
            // Do any additional setup after loading the view.
        }
        
    
    }
    

17. hold items and controls and drag it to file until it looks likes this

    import UIKit
    
    class CardSelectionVC: UIViewController {
    //  creating outlest such that we can use variables later
        @IBOutlet var cardImageView: UIImageView!
        
        @IBOutlet var stopButton: UIButton!
        
        @IBOutlet var restartButton: UIButton!
        
        @IBOutlet var rulesButton: UIButton!
        
        override func viewDidLoad() {
            super.viewDidLoad()
            
            stopButton.layer.cornerRadius     = 8
            restartButton.layer.cornerRadius     = 8
            rulesButton.layer.cornerRadius     = 8
    
        }
    
        @IBAction func stopButtonTapped(_ sender: Any) {
            stopButton.setTitle("I've been tapped", for: .normal)
        }
    
    }
    

18. tidying up the code by using outlet collection (it is where the outlets are stored in an array and if you want to apple same properties to multiple buttons thats what u use) hold control and then drag any button to file then select outlet collection and name it something appropriate, then click and drag the circle sign beside the code and drag it to buttons you want in your outlet collections and then remember to delete previous outlets and then delete the outlets from the storyboard aswell.

import UIKit

class CardSelectionVC: UIViewController {
//  creating outlest such that we can use variables later
    @IBOutlet var cardImageView: UIImageView!
 
    @IBOutlet var buttons: [UIButton]!
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        for button in buttons {
            button.layer.cornerRadius = 8
        }
    }

    @IBAction func stopButtonTapped(_ sender: Any) {
    }
    
    @IBAction func restartButtonTapped(_ sender: Any) {
    }
    
    @IBAction func rulesButtonTapped(_ sender: Any) {
    }
}