Virtualhost and window host for different port

I am running two xampp on my window 7. One is with php5.6 and other one is with php7.2. Port number for php7 xampp is changed to 7777 as per the article and it's working fine. I am able to run my project. Now the problem is I try to create virtual host to run my laravel site which is not working. I getting

Hmm. We’re having trouble finding that site.

Here is my Vhost

<VirtualHost *:7777>
    DocumentRoot "C:/xampp/htdocs/"
    ServerAdmin admin@localhost
    ServerName localhost

    <Directory "C:/xampp/htdocs/">
       Options Indexes FollowSymLinks
       AllowOverride all
       Require local
    </Directory>
</VirtualHost>

<VirtualHost *:7777>
    DocumentRoot "C:/xampp/htdocs/test_web/public/"
    ServerAdmin admin@localhost
    ServerName test.com
    ServerAlias test.com

    <Directory "C:/xampp/htdocs/test_web/public/">
      Options All
        AllowOverride All
        Order Allow,Deny
        Allow from all
       #Options Indexes FollowSymLinks

       Require local
       # if you want access from other pc's on your local network
       #Require ip 192.168.1
       # Only if you want the world to see your site
       #Require all granted
    </Directory>
</VirtualHost>

and this my host file

127.0.0.1:7777  test.com
::7777      test.com

I tried many combinations such as 127.0.0.1:7777 with ::7777, ::1, ::77.

Solution

Host names map on to IP addresses, not ports.

The hosts file should not contain port numbers.

127.0.0.1:7777 should be 127.0.0.1 (the IPv4 loopback address)

::7777 should be ::1 (the IPv6 loopback address).

The port should be specified in the URL when you are accessing a non-default port (i.e. 80 for HTTP or 443 for HTTPS).

e.g. http://test.com:7777/