Webseite Bargis | Wassmer Graphic Designtitle> <base href="https://www.wassmergraphic.ch"> <meta name="robots" content="index, follow" /> <link rel="canonical" href="https://www.wassmergraphic.ch/portfolio/webseite-bargis.html" /> <meta name="description" content="Ein Redesign Ihrer Webseite erstellen von erfahrenen Webentwicklern? Wir texten SEO-freundlich, fotografieren professionell. Zeitnah zum fairen Preis." /> <meta name="web_author" content="Markus Wassmer" />  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KWV4VB5'); gtag('config', 'AW-808649370');</script>   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-162958355-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-162958355-1'); gtag('config', 'AW-808649370'); </script>   <script async src="https://www.googletagmanager.com/gtag/js?id=AW-808649370"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'AW-808649370'); </script>   <meta name="google-site-verification" content="hZ-zhRAXTqK1OYyF-FeSw8T9-GDt57MQGVKyd9zzyrY" />  <meta property="og:locale" content="de_CH" /> <meta property="og:type" content="website" /> <meta property="og:title" content="Wassmer Graphic Design – Ihre innovative Designagentur" /> <meta property="og:site_name" content="https://www.wassmergraphic.ch" /> <meta property="og:description" content="Grafiker für den Raum Bern, Emmental und Oberaargau: Kreatives, innovatives Corporate Design für Print und Digital. Präzis und zuverlässig." /> <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@MarkusWassmer" /> <meta name="twitter:title" content="Home - wassmergraphicdesign" /> <meta name="twitter:description" content="Grafiker für den Raum Bern, Emmental und Oberaargau: Kreatives, innovatives Corporate Design für Print und Digital. Präzis und zuverlässig." /> <meta name="twitter:creator" content="@MarkusWassmer" /> <meta property="og:url" content="https://www.facebook.com/agenturwassmergraphicdesign/" /> <meta property="og:image" content="https://www.facebook.com/pg/agenturwassmergraphicdesign/photos/?tab=album&album_id=115089943521203" /> <meta property="og:url" content="https://www.linkedin.com/in/markuswassmer" /> <meta name="DC.title" content="Wassmer Graphic Design, Wyssachen" /> <meta name="geo.region" content="CH-BE" /> <meta name="geo.placename" content="Bern, Emmental, Oberaargau, Schweiz" /> <meta name="apple-mobile-web-app-title" content="Wassmer"> <meta name="format-detection" content="telephone=no"> <link rel="shortcut icon" href="images/favicon.ico"> <link rel="apple-touch-icon" sizes="57x57" href="favicon/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="favicon/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="favicon/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="favicon/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="favicon/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="favicon/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="favicon/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="favicon/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-icon-180x180.png"> <link rel="icon" type="image/png" sizes="192x192" href="favicon/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="96x96" href="favicon/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png"> <link rel="manifest" href="favicon/manifest.json"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileImage" content="favicon/ms-icon-144x144.png"> <meta name="theme-color" content="#ffffff"> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Corporation", "name": "Wassmer Graphic Design", "alternateName": "Markus Wassmer", "url": "https://www.wassmergraphic.ch", "logo": "https://www.wassmergraphic.ch/images/wassmergraphicdesign.svg", "contactPoint": { "@type": "ContactPoint", "telephone": "+41317114048", "contactType": "", "contactOption": "TollFree", "areaServed": "CH", "availableLanguage": "German" }, "sameAs": [ "https://www.facebook.com/agenturwassmergraphicdesign", "https://twitter.com/MarkusWassmer", "https://www.instagram.com/wassmergraphicdesign", "https://www.linkedin.com/in/markuswassmer" ] } </script>  <link rel="stylesheet" href="css/animate.css" />  <link rel="stylesheet" href="css/bootstrap.min.css" />  <link rel="stylesheet" href="css/et-line-icons.css" />  <link rel="stylesheet" href="css/swiper.min.css">  <link rel="stylesheet" href="css/justified-gallery.min.css">  <link rel="stylesheet" href="css/magnific-popup.css" />  <link rel="stylesheet" type="text/css" href="revolution/css/settings.css" media="screen" /> <link rel="stylesheet" type="text/css" href="revolution/css/layers.css"> <link rel="stylesheet" type="text/css" href="revolution/css/navigation.css">  <link rel="stylesheet" href="css/bootsnav.css">  <link rel="stylesheet" href="css/style.css" />  <link rel="stylesheet" href="css/responsive.css" />  <script src="https://kit.fontawesome.com/07dbf98d80.js" crossorigin="anonymous"></script> <script type="text/javascript" src="//fast.fonts.net/jsapi/beee5b76-4a7a-41a6-9c0f-0ff1d68be1ad.js"></script> <style> video { max-width: 100%; height: auto; } </style> </head> <body class="left-nav-sidebar"> <header> <div class="left-nav">  <div class="sidebar-part1"> <a href="index.html" title="Wassmer Graphic Design" class="logo"><img src="images/logo/w.png" data-rjs="images/logo/w.png" alt="Wassmer Graphic Design"></a> </div>  <div class="sidebar-part2 z-index-1111"> <div class="sidebar-middle"> <div class="sidebar-middle-menu alt-font font-weight-600"> <nav class="navbar bootsnav navbar-expand-lg alt-font"> <div id="navbar-menu" class="collapse navbar-collapse no-padding"> <ul class="nav navbar-nav margin-80px-bottom"> <li class="dropdown"> <a href="index.html" title="Home" data-toggle="dropdown">Home</a> </li> <li class="dropdown"> <a data-toggle="dropdown" href="projekte.html" title="Projekte">Projekte </a> </li> <li class="dropdown"> <a data-toggle="dropdown" href="kompetenzen.html" title="Kompetenzen ">Kompetenzen</a> </li> <li class="dropdown"> <a data-toggle="dropdown" href="agentur.html" title="Agentur">Agentur </a> </li> <li class="dropdown"> <a data-toggle="dropdown" href="kontakt.html" title="Kontakt">Kontakt </a> </li> <li> <div class="side-left-menu-close close-side"></div> </li> </ul> </div> </nav> <a href="index.html"> <div class="right-bg"><img src="images/wassmergraphic.svg" width="50px" alt="Wassmer Graphic Design"></div></a> </div> </div> </div> <div class="sidebar-part3"> <div class="bottom-menu-icon"> <a href="javascript:void(0);" class="right-menu-button text-extra-dark-gray nav-icon" id="showRightPush"> <span></span> <span></span> <span></span> <span></span> </a> </div> </div> </div> </header>   <section class="p-0 cover-background top-space"> <img src="images/projekte/head_projekt_bargis.jpg" alt="Gasthaus Bargis, Klosters" width="100%" height="auto"> <div class="container-fluid"> <div class="row"> <div class="col-12 p-0"> <div class="col-12 col-lg-12 col-md-12 mx-auto text-center bg-black"> <h4 class="alt-font font-weight-600 text-white">Gasthaus Bargis, Klosters</h4></div> </div> </div> </div> </section> <p> <br></p>   <section class="p-0 wow fadeIn"> <div class="row align-items-center"> <div class="container"> <div class="col-12>"> <h1 class="text-center padding-20px-bottom">Redesign der alten Webseite, Programmierung, Support</h1></div></div> <div class="col-12 col-lg-3 offset-lg-1 text-center text-lg-left md-margin-40px-bottom sm-margin-30px-bottom wow fadeIn"> <h3 class="text-light-gray alt-font font-weight-600 text-middle-line margin-five-bottom md-margin-5px-bottom w-50 md-width-100 letter-spacing-minus-3 md-text-middle-line">01</h3> <h5 class="text-uppercase alt-font text-extra-dark-gray font-weight-700 width-75 d-block mb-0 lg-width-90 md-width-100">Übersicht</h5> </div> <div class="col-12 col-lg-4 col-md-6 sm-margin-30px-bottom wow fadeIn"> <img src="images/projekte/sub_projekt_bargis_1.jpg" alt="Gasthaus Bargis, Klosters"/> </div> <div class="col-12 col-lg-4 col-md-6 text-center text-md-left md-padding-eight-left sm-padding-15px-left wow fadeIn"> <p class="text-large text-extra-dark-gray font-weight-600">Neue Webseite</p> <p>Planung, Idee, Text, Webseite, Fotografie aus einer Hand</p> </div> </div> </section>  <hr noshade style="background-color: black; height: 100px; width: 1px;">  <section class="wow fadeIn"> <div class="container"> <div class="row align-items-center bg-white"> <div class="col-12 col-lg-2 text-center text-lg-left md-margin-40px-bottom sm-margin-30px-bottom wow fadeIn"> <h3 class="text-light-gray alt-font font-weight-600 text-middle-line margin-five-bottom md-margin-5px-bottom w-50 md-width-100 letter-spacing-minus-3 md-text-middle-line">02</h3> <h5 class="text-uppercase alt-font text-extra-dark-gray font-weight-700 width-75 d-block mb-0 lg-width-90 md-width-100">Webseite</h5> <a href="https://bargis.ch/" title="Gasthaus Bargis" target="_blank" class="alt-font font-weight-600 text-link-extra-dark-gray text-deep-orange-hover"><br> Webseite</a> </div> <div class="col-12 col-lg-10 col-md-6 sm-margin-30px-bottom wow fadeIn">  <video loop autoplay> <source src="video/bargis_wgd_converted.mp4" type="video/mp4"> <source src="video/bargis_wgd_converted.ogv" type="video/ogv"> <source src="video/bargis_wgd_converted.WebM" type="video/WebM"> Dieses Video kann in Ihrem Browser nicht wiedergegeben werden. </video>  </div> </div> </div> </section>  <hr noshade style="background-color: black; height: 100px; width: 1px;">  <section class="wow fadeIn"> <div class="container"> <div class="row align-items-center"> <div class="col-12 col-lg-6 offset-lg-2 col-md-6 sm-margin-30px-bottom wow fadeIn"> <img src="images/projekte/sub_projekt_bargis_2.jpg" alt="Gasthaus Bargis, Klosters" class="float-right"> </div> <div class="col-12 col-lg-4 text-center text-lg-left md-margin-40px-bottom sm-margin-30px-bottom wow fadeIn"> <h3 class="text-light-gray alt-font font-weight-600 text-middle-line margin-five-bottom md-margin-5px-bottom w-50 md-width-100 letter-spacing-minus-3 md-text-middle-line">03</h3> <h5 class="text-uppercase alt-font text-extra-dark-gray font-weight-700 width-75 d-block mb-0 lg-width-90 md-width-100">Food-<br> Fotografie</h5> </div> </div> </div> </section>  <hr noshade style="background-color: black; height: 100px; width: 1px;">  <section class="wow fadeIn"> <div class="container"> <div class="row"> <div class="col-12 col-xl-6 col-lg-8 mx-auto text-center"> <h5 class="text-extra-dark-gray mb-0 font-weight-300">Weitere Web-Projekte</h5> </div> </div> <p> <br></p> <div class="row"> <div class="col-12 px-3 p-md-0"> <div class="filter-content overflow-hidden"> <ul class="portfolio-grid work-4col hover-option5 gutter-large"> <li class="grid-sizer"></li>  <li class="grid-item web wow fadeInUp"> <a href="portfolio/videocut.html"> <figure> <div class="portfolio-img bg-dark-gray"> <img src="images/projekte/ueber_projekte_zaugg_1.jpg" alt="ZAUGG AG EGGIWIL"/> </div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <div class="mx-auto margin-25px-bottom"></div> <span class="font-weight-700 alt-font text-wgd text-orange margin-5px-bottom d-block">ZAUGG AG EGGIWIL</span> </div> </div> </div> </figcaption> </figure> </a> </li>   <li class="grid-item web branding design wow fadeInUp"> <a href="portfolio/webseite-wahlen-seiler.html"> <figure> <div class="portfolio-img bg-white">  <video class="no-mejs" muted autoplay loop width="320" height="180"> <source src="video/wahlen-seiler_converted_1.mp4" type="video/mp4"> <source src="video/wahlen-seiler_converted_1.ogv" type="video/ogv"> <source src="video/wahlen-seiler_converted_1.WebM" type="video/WebM"> Dies Video kann in Ihrem Browser nicht wiedergegeben werden. </video>  </div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <div class="mx-auto"></div> <span class="font-weight-700 alt-font text-wgd text-orange margin-5px-bottom d-block">Wahlen+Seiler Treuhand GmbH</span> </div> </div> </div> </figcaption> </figure> </a> </li>   <li class="grid-item web branding design wow fadeInUp"> <a href="portfolio/webseite-imris.html"> <figure> <div class="portfolio-img bg-white">  <video class="no-mejs" muted autoplay loop width="320" height="180"> <source src="video/mac_7_converted_1.mp4" type="video/mp4"> <source src="video/mac_7_converted_1.ogv" type="video/ogv"> <source src="video/mac_7_converted_1.WebM" type="video/WebM"> Dieses Video kann in Ihrem Browser nicht wiedergegeben werden. </video>  </div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <div class="mx-auto"></div> <span class="font-weight-700 alt-font text-wgd text-orange margin-5px-bottom d-block">Altersheim <br> Im Ris</span> </div> </div> </div> </figcaption> </figure> </a> </li>   <li class="grid-item web branding design wow fadeInUp"> <a href="portfolio/webseite-zaugg.swiss.html"> <figure> <div class="portfolio-img bg-white">  <video class="no-mejs" muted autoplay loop width="320" height="180"> <source src="video/zaugg_wgd_converted_1.mp4" type="video/mp4"> <source src="video/zaugg_wgd_converted_1.ogv" type="video/ogv"> <source src="video/zaugg_wgd_converted_1.WebM" type="video/WebM"> Dieses Video kann in Ihrem Browser nicht wiedergegeben werden. </video>  </div> <figcaption> <div class="portfolio-hover-main text-center"> <div class="portfolio-hover-box align-middle"> <div class="portfolio-hover-content position-relative"> <div class="mx-auto"></div> <span class="font-weight-700 alt-font text-wgd text-orange margin-5px-bottom d-block">ZAUGG AG EGGIWIL</span> </div> </div> </div> </figcaption> </figure> </a> </li>  </ul> </div> </div> </div></div> </section>   <section class="wow fadeIn"> <div class="row"> <div class="col-12 col-xl-6 col-lg-8 mx-auto text-center"> <a class="btn btn-small btn-dark-gray lg-margin-15px-bottom d-table d-lg-inline-block md-margin-lr-auto" href="projekte.html">Zurück zur Projektübersicht</a> </div> </div> </section>   <footer class="footer-strip padding-50px-tb sm-padding-30px-tb bg-medium-light-gray"> <div class="container"> <div class="row align-items-center">  <div class="col-md-3 text-center text-lg-left sm-margin-20px-bottom"> <a href="index.html"><img class="footer-logo" src="images/logo/logo_wassmer_graphic_design.png" data-rjs="images/logo/logo_wassmer_graphic_design.png" alt="Wassmer Graphic Design"></a> </div>   <div class="col-md-6 text-center text-extra-small alt-font sm-margin-10px-bottom"> © 2024 Wassmer Graphic Design. <a href="impressum.html">Impressum</a> <a href="datenschutz.html">Datenschutz</a> </div>   <div class="col-md-3 text-extra-small text-lg-right"> <div class="social-icon-style-8 d-inline-block vertical-align-middle"> <ul class="small-icon mb-0"> <li><a class="facebook" href="htel:+41317114048"><i class="fa fa-phone" aria-hidden="true"></i></a> +41 31 711 40 48</li> <li><a class="facebook" href="kontakt.html"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li> <li><a class="instagram" href="https://instagram.com/wassmergraphicdesign" target="_blank"><i class="fa fa-instagram no-margin-right" aria-hidden="true"></i></a></li> <li><a class="linkedin" href="https://www.linkedin.com/in/markuswassmer" target="_blank"><i class="fab fa-linkedin-in"></i></a></li> </ul> </div> </div>  </div> </div> </footer>   <a class="scroll-top-arrow text-scroll" href="javascript:void(0);"><i class="fas fa-angle-up"></i></a>   <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/modernizr.js"></script> <script type="text/javascript" src="js/bootstrap.bundle.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/skrollr.min.js"></script> <script type="text/javascript" src="js/smooth-scroll.js"></script> <script type="text/javascript" src="js/jquery.appear.js"></script>  <script type="text/javascript" src="js/bootsnav.js"></script> <script type="text/javascript" src="js/jquery.nav.js"></script>  <script type="text/javascript" src="js/wow.min.js"></script>  <script type="text/javascript" src="js/page-scroll.js"></script>  <script type="text/javascript" src="js/swiper.min.js"></script>  <script type="text/javascript" src="js/jquery.count-to.js"></script>  <script type="text/javascript" src="js/jquery.stellar.js"></script>  <script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>  <script type="text/javascript" src="js/isotope.pkgd.min.js"></script>  <script type="text/javascript" src="js/imagesloaded.pkgd.min.js"></script>  <script type="text/javascript" src="js/classie.js"></script> <script type="text/javascript" src="js/hamburger-menu.js"></script>  <script type="text/javascript" src="js/counter.js"></script>  <script type="text/javascript" src="js/jquery.fitvids.js"></script>  <script type="text/javascript" src="js/skill.bars.jquery.js"></script>  <script type="text/javascript" src="js/justified-gallery.min.js"></script>  <script type="text/javascript" src="js/jquery.easypiechart.min.js"></script>  <script type="text/javascript" src="js/instafeed.min.js"></script>  <script type="text/javascript" src="js/retina.min.js"></script>  <script type="text/javascript" src="revolution/js/jquery.themepunch.tools.min.js"></script> <script type="text/javascript" src="revolution/js/jquery.themepunch.revolution.min.js"></script>    <script type="text/javascript" src="js/main.js"></script> </body> </html>