Witam,
Prosiłbym o pomoc w rozwiązaniu mojego problemu dot. menu pionowego znajdującego się w podstronie innej strony www, która ma składać się z 2 sekcji.
W lewej stronie ma być logo, pod nim przycisk napisz do mnie i pod nim dwa przyciski jeden z linkiem do instagrama i obok ma być napis nazwa konta na IG, a drugi do Vimeo i też ma być nazwa konta na Vimeo.

Z prawej strony ma być menu pionowe z kategoriami, które będą linkami do innych podstron. Strona nie wyświetla ostylowania CSS oraz2 ikon socialmediów.

kod HTML:

[HTML] pobierz, plaintext 
<!--Logo strony-->
 
    <section class="main_image_bp10">
        <img src="bp10_icons_social_media/logo_bp10.png" alt="Logo strony Blanki Pyć- BP10"><br>
        <button><a href="" class="writeme_bp10">Napisz do mnie</a><button>
 
        <!--Menu z ikonami do Social Mediów, przypięte u góry strony-->
 
<a href="#" alt="Ikona Instagrama"><img src="bp10_icons_social_media/insta_icon_bp10.png" class="social-icon-bp10" alt="Instagram icon"></a>
 
<a href="#" alt="Ikona Vimeo"><img src="bp10_icons_social_media/vimeo_icon_bp10.png" class="social-icon-bp10" alt="Vimeo icon"></a>
 
 
    <a href="index.php" alt="Przycisk powrotu do strony głównej marcinpyc78stw.pl"><button>Cofnij do strony marcinpyc78stw.pl</button></a>
 
 
    </section>
 
           <aside id="blok_prawy_mp78stw">
 
 <ul id="vertical-menu">
       <li class="active"><a href="strona_bp10_omnie.php" alt="Przycisk kategorii do strony o mnie">O mnie</a></li>
       <li><a href="strona_bp10_stow.php" class="unit_bp10" alt="Przycisk kategorii do strony Stowarzyszenia">Stowarzyszenia</a></li>
       <li><a href="strona_bp10_osiagniecia.php" class="unit_bp10" alt="Przycisk kategorii do strony Osiągnięcia">Osiągnięcia</a></li>
 
       <li><a href="strona_bp10_korony_gor.php" class="unit_bp10" alt="Przycisk kategorii do strony Korony pasm górskich">Korony pasm górskich</a></li>
       <li><a href="strona_bp10_moje_handmade.php" class="unit_bp10" alt="Przycisk kategorii do strony Moje handmade">Moje handmade</a></li>
       <li><a href="strona_bp10_moje_filmy.php" class="unit_bp10" alt="Przycisk kategorii do strony moje filmy">Moje filmy</a></li>
       <li><a href="strona_bp10_moje_zdjecia.php" class="unit_bp10" alt="Przycisk kategorii do strony Moje zdjęcia">Moje zdjęcia</a></li>
       <li><a href="strona_bp10_moje_wyzwania.php" class="unit_bp10" alt="Przycisk kategorii do strony Moje wyzwania">Moje wyzwania</a></li>
       <li><a href="strona_bp10_zwiedzanie.php" class="unit_bp10" alt="Przycisk kategorii do strony Zwiedzanie ciekawych miejsc">Zwiedzanie ciekawych miejsc</a></li>
       <li><a href="strona_bp10_wyc_tata_i_corka.php" class="unit_bp10" alt="Przycisk kategorii do strony Wycieczki z tatą">Wycieczki z tatą Marcinem</a></li>
       <li><a href="strona_bp10_kreatyw_tata_corka.php" class="unit_bp10" alt="Przycisk kategorii do strony Kreatywnie z tatą">Kreatywnie z tatą</a></li>
       <li><a href="strona_bp10_inne_wyc.php" class="unit_bp10" alt="Przycisk kategorii do strony Inne wycieczki">Inne wycieczki</a></li>
       <li><a href="strona_bp10_inne_info.php" class="unit_bp10" alt="Przycisk kategorii do strony Inne informacje">Inne informacje</a></li>
       <li><a href="strona_bp10_ciekawe.php" class="unit_bp10" alt="Przycisk kategorii do strony Ciekawostki">Ciekawostki</a></li>
    </ul>
 
 
 
           </aside>
 
 
 
 
[HTML] pobierz, plaintext 

CSS:

[CSS] pobierz, plaintext 
 
/*Wygląd ikon Social Mediów przed i po najechaniu na nie*/
 
.social-icon-bp10 {
    width: 100px;
    height: 100px;
    right: 100px;
    transition: 0.3s transform linear;
    text-decoration: none;
    white-space: nowrap;
    font-family: Verdana;
    font-weight: bold;
    text-align: center;
    font-size: 14px;
 
}
 
.social-icon-bp10:hover {
    transform: scale(1.4);
    transition: 0.3s transform linear;
    text-decoration: none;
    white-space: nowrap;
    font-family: Verdana;
    font-weight: bold;
    text-align: center;
    font-size: 14px;
    color: red;
}
 
 
 
 
 
 
#blok_prawy_mp78stw {
right: 5%;
padding: 1px 16px;
height: 1000px;
border: 2px;
color: blue;
}
 
 
 
 
/*Wymiary obrazka głównego na stronie głównej BP10*/
 
.main_image_bp10 {
    width: 200px;
    height: 200px
    border-radius: 20px 20px 20px 20px;
    border: 2px;
    color: blue;
    left: 10%;
    top: 20%;
    transition-timing-function: 0.3s transform linear;
 
}
 
.main_image_bp10:hover {
    transform: scale (1.4);
    transition-timing-function: 0.3s transform linear;
    width: 100px;
    height: 100px;
    border: 4px;
    color: fuchsia;
}
 
 
 
 
 
 
 
 
 
 
 
 
/*Menu poziome na stronie BP10*/
 
ul#vertical_menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
  list-style-image: url(bp10_icons_social_media/ikona_do_listy_num_6.png); /* włączenie wyświetlania znacznika z obrazkiem */
}
 
ul#vertical_menu li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}
 
ul#vertical_menu li a.active {
  background-color: #04AA6D;
  color: white;
}
 
ul#vertical_menu li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
 
[CSS] pobierz, plaintext 

Czy można by było np połączyć liniami przyciski z kategoriami do loga na tej podstronie? Jak to można zrobić?

W jaki sposób można rozmieścić przyciski z kategoriami nie ejdna pod drugą w pionie, tylko np na półokręgu, albo w różnych pozycjach?

Za pomoc będę wdzięczny,

MP