Wordpress card pluging (best practice)

<?php
/*
Plugin Name: My form

*/
$my_option= get_option('myformSetting');
function my_admin_theme_style() {
    wp_enqueue_style('my-admin-theme', plugins_url('wp-admin.css', __FILE__));
}
add_action('admin_enqueue_scripts', 'my_admin_theme_style');
add_action('login_enqueue_scripts', 'my_admin_theme_style');

add_action('admin_menu', 'my_menu_pages');
function my_menu_pages(){
    add_menu_page('My Page Title', 'My Menu Title', 'manage_options', 'my-menu', 'my_menu_output' );
    add_submenu_page('my-menu', 'Submenu Page Title', 'Whatever You Want', 'manage_options', 'my_menu','my_menu' );
    add_submenu_page('my-menu', 'Submenu Page Title2', 'Whatever You Want2', 'manage_options', 'my_menu2','my_menu2' );
}

function register_mysettings() { // whitelist options
 register_setting('myform','name');
 register_setting('myform','email');
}
add_action( 'admin_init', 'register_mysettings' );
 function my_menu_output()
{
?>
<div class='wrap'>
<?php if (get_option('name')) {
         
          ?>
        <div class="alert alert-success" role="alert">
        <strong>Well done!</strong> Your form submitted <?php get_option('name');?> or <?php get_option('some_other_option');?> </a>.
        </div>
        <?php }   ?>
<form action="options.php" method="post" class="col-md-6">
   <?php settings_fields( 'myform' ); ?>
            <?php do_settings_sections( 'myform' ); ?>
<fieldset class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control"  name='name' value="<?php echo esc_attr( get_option('name') ); ?>">
</fieldset>
<fieldset class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" name='email'  value="<?php echo esc_attr( get_option('email') ); ?>" >
</fieldset>
<fieldset class="form-group">
<?php submit_button(); ?>
</fieldset>
</form>
</div>
<?php

}


function my_menu( )
{
    echo '<div class="card col-md-4"  >
     <div class="card-block">
    <h4 class="card-title">'. get_option('name') .'</h4>
    <h4 class="card-title">'. get_option('email') .'</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card\'s content.</p>
    <a href="#" class="btn btn-primary">[card-wight]</a>
  </div>
</div>
<div class="card col-md-4 bg-primary"  >
     <div class="card-block">
    <h4 class="card-title" style="color:#fff">'. get_option('name') .'</h4>
    <h4 class="card-title" style="color:#fff">'. get_option('email') .'</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card\'s content.</p>
    <a href="#" class="btn" style="background:#fff"  >[card-blue]</a>
  </div>
</div>
<div class="card col-md-4 bg-success"  >
     <div class="card-block">
    <h4 class="card-title"  >'. get_option('name') .'</h4>
    <h4 class="card-title"  >'. get_option('email') .'</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card\'s content.</p>
    <a href="#" class="btn btn-warning"   >[card-green]</a>
  </div>
</div>
<div class="card col-md-4 bg-warning"  >
     <div class="card-block">
    <h4 class="card-title"  >'. get_option('name') .'</h4>
    <h4 class="card-title"  >'. get_option('email') .'</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card\'s content.</p>
    <a href="#" class="btn btn-danger"     >[card-yellow]</a>
  </div>
</div>
<div class="card col-md-4 bg-danger"  >
     <div class="card-block">
    <h4 class="card-title"  >'. get_option('name') .'</h4>
    <h4 class="card-title"  >'. get_option('email') .'</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card\'s content.</p>
    <a href="#" class="btn btn-primary"    >[card-red]</a>
  </div>
</div>';

}
function card_wight() {
return '<div class="card col-md-4"  >
     <div class="card-block">
    <h4 class="card-title">'. get_option('name') .'</h4>
    <h4 class="card-title">'. get_option('email') .'</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card\'s content.</p>
  </div>
</div>';
}
add_shortcode('card-wight', 'card_wight');
function card_blue() {
return '<div class="card col-md-4 bg-primary"  >
     <div class="card-block">
    <h4 class="card-title" style="color:#fff">'. get_option('name') .'</h4>
    <h4 class="card-title" style="color:#fff">'. get_option('email') .'</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card\'s content.</p>
  </div>
</div>';
}
add_shortcode('card-blue', 'card_blue');
function card_gree()
{
return '<div class="card col-md-4 bg-success"  >
     <div class="card-block">
    <h4 class="card-title"  >'. get_option('name') .'</h4>
    <h4 class="card-title"  >'. get_option('email') .'</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card\'s content.</p>
  </div>
</div>';
}
add_shortcode('card-green','card_green');
function card_warning()
{
return '<div class="card col-md-4 bg-warning"  >
     <div class="card-block">
    <h4 class="card-title"  >'. get_option('name') .'</h4>
    <h4 class="card-title"  >'. get_option('email') .'</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card\'s content.</p>
  </div>
</div>';
}
add_shortcode('card-yellow','card_warning');
function card_red()
{
return'<div class="card col-md-4 bg-danger"  >
     <div class="card-block">
    <h4 class="card-title"  >'. get_option('name') .'</h4>
    <h4 class="card-title"  >'. get_option('email') .'</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card\'s content.</p>
  </div>
</div>';
}
add_shortcode('card-red','card_red');
function my_menu2(){
echo "dam too";
}