J
Jxnasa
Member
- Beiträge
- 11
- Punkte Reaktionen
- 0
Hallo ich möchte ein Rechteck hinter meinem Text haben, dass es in etwa so aussieht wie auf dem Foto.
Ich habe das heute schon einmal probiert, und habe es auch fast hinbekommen. Zu aller erst habe ich ein Rechteck erstellt und es gefärbt, dass sah sogar ganz gut aus, allerdings als ich den Blur-Effekt angewendet habe wurde die Schrift geblurt.
Habt ihr eine Idee wie ich das hinbekommen könnte?
Hier einmal ein link zur website: https://www.qvg-esports.eu
Hier mein Quelltext indem ich mich ausgetobt habe
Ich danke euch schonmal.
Ich habe das heute schon einmal probiert, und habe es auch fast hinbekommen. Zu aller erst habe ich ein Rechteck erstellt und es gefärbt, dass sah sogar ganz gut aus, allerdings als ich den Blur-Effekt angewendet habe wurde die Schrift geblurt.
Habt ihr eine Idee wie ich das hinbekommen könnte?
Hier einmal ein link zur website: https://www.qvg-esports.eu
Hier mein Quelltext indem ich mich ausgetobt habe
Code:
<!doctype html>
<html class="no-js" lang="zxx">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>qvG eSports | Home</title>
<meta name="description" content="qvG eSports">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<!-- <link rel="manifest" href="site.webmanifest"> -->
<!-- Place favicon.ico in the root directory -->
<!-- CSS here -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/themify-icons.css">
<link rel="stylesheet" href="css/nice-select.css">
<link rel="stylesheet" href="css/flaticon.css">
<link rel="stylesheet" href="css/gijgo.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/slicknav.css">
<link rel="stylesheet" href="css/style.css">
<!-- <link rel="stylesheet" href="css/responsive.css"> -->
<style>
.quadrat {
height: 1000x;
width: 1000px;
filter: blur(4px);
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
filter: contrast(2);
}
</style>
</head>
<body>
<!-- Page Preloder -->
<!-- header-start -->
<header>
<div class="header-area ">
<div id="sticky-header" class="main-header-area">
<div class="container-fluid p-0">
<div class="row align-items-center no-gutters">
<div class="col-xl-2 col-lg-2">
<div class="logo-img">
<a href="index.html">
<img src="img/logo.png" alt="">
</a>
</div>
</div>
<div class="col-xl-8 col-lg-8">
<div class="main-menu d-none d-lg-block text-center">
<nav>
<ul id="navigation">
<li><a class="active" href="index.html">Startseite</a></li>
<li><a href="about.html">Über uns</a></li>
<li><a href="teams.html">Teams</a></li>
<li><a href="results.html">Ergebnisse</a></li>
<li><a href="partner.html">Partner</a></li>
<li><a href="contact.php">Kontakt</a></li>
</ul>
</nav>
</div>
</div>
<div class="col-lg-2 d-none d-lg-block">
<div class="log_chat_area d-flex align-items-end">
<ul>
<a href="#" data-scroll-nav="0" class="say_hi"><img src="img/elements/f4.jpg" alt=""></a>
<a href="indexeng.html" >|</a>
<a href= "indexeng.html" ><img src="img/elements/f3.jpg" alt=""></a>
</ul>
</div>
</div>
<div class="col-12">
<div class="mobile_menu d-block d-lg-none"></div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- header-end -->
<!-- slider_area_start -->
<div class="slider_area">
<div class="single_slider d-flex align-items-center overlay">
<div class="video">
<video autoplay loop muted>
<source src="img/background.mp4" type="video/mp4">
</video>
</div>
<div class ="quadratt">
<div class="quadrat">
<div class="container">
<div class="row align-items-center justify-content-start">
<div class="col-lg-10 col-md-10">
<div class="slider_text">
<h4>Herzlich Willkommen auf unserer Homepage</h4>
<h3 class="wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".1s">
quod vera Genus eSports
</h3>
<a class="boxed-btn3 wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".2s" href="teams.html">Teams</a>
<div class="container">
</div>
</div>
</div>
</div>
</div> </div>
</div>
</div>
<!-- slider_area_end -->
<!-- Logo Begin -->
<section>
<div class="logo spad">
<div class="container">
<div class="logo__carousel owl-carousel">
<a href="https://www.instagram.com/niclastbo/" class="logo__item"><img src="img/logo/logo-1.png" alt=""></a>
<a href="https://www.ebyte.sale/en/" class="logo__item"><img src="img/logo/logo-2.png" alt=""></a>
<a href="https://www.aaa-shocks.ch" class="logo__item"><img src="img/logo/logo-4.png" alt=""></a>
<a href="https://bero-host.de/affiliate/vaYuHiBtmn" class="logo__item"><img src="img/logo/logo-6.png" alt=""></a>
<a href="https://www.mmoga.de/?ref=41945" class="logo__item"><img src="img/logo/logo-7.png" alt=""></a>
<a href="https://www.twitch.tv/gebruedergames" class="logo__item"><img src="img/logo/logo-8.png" alt=""></a>
</div>
</div>
</div>
</section>
<!-- Logo End -->
<hr>
<!-- team_member_start -->
<div class="portfolio_image_area">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6">
<div class="section_title text-center mb-90">
<h3 class="wow fadeInUp" data-wow-duration="1s" data-wow-delay=".3s">Bereiche</h3>
<p class="wow fadeInUp" data-wow-duration="1s" data-wow-delay=".4s">Unsere Spiele</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-md-12">
<div class="single_Portfolio wow fadeInUp" data-wow-duration="1s" data-wow-delay=".3s">
<div class="portfolio_thumb">
<img src="img/portfolio/1.png" alt="">
</div>
<div class="portfolio_hover">
<div class="title">
<span></span>
<h3>Rainbow Six Siege</h3>
<a class="boxed-btn3" href="teamsr6.html">Teams</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single_Portfolio wow fadeInUp" data-wow-duration="1s" data-wow-delay=".4s">
<div class="portfolio_thumb">
<img src="img/portfolio/2.png" alt="">
</div>
<div class="portfolio_hover">
<div class="title">
<span></span>
<h3>Call of Duty</h3>
<a class="boxed-btn3" href="teamscod.html">Teams</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single_Portfolio wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">
<div class="portfolio_thumb">
<img src="img/portfolio/3.png" alt="">
</div>
<div class="portfolio_hover">
<div class="title">
<span></span>
<h3>Overwatch</h3>
<a class="boxed-btn3" href="teamsoverwatch.html">Teams</a>
</div>
</div>
</div>
</div>
<div class="col-lg-8 col-md-12">
<div class="single_Portfolio wow fadeInUp" data-wow-duration="1s" data-wow-delay=".3s">
<div class="portfolio_thumb">
<img src="img/portfolio/8.png" alt="">
</div>
<div class="portfolio_hover">
<div class="title">
<span></span>
<h3>Valorant</h3>
<a class="boxed-btn3" href="teamsvalorant.html">Teams</a>
</div>
</div>
</div>
</div>
<div class="col-lg-8 col-md-12">
<div class="single_Portfolio wow fadeInUp" data-wow-duration="1s" data-wow-delay=".3s">
<div class="portfolio_thumb">
<img src="img/portfolio/6.png" alt="">
</div>
<div class="portfolio_hover">
<div class="title">
<span></span>
<h3>Apex Legends</h3>
<a class="boxed-btn3" href="teamsapex.html">Teams</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 ">
<div class="single_Portfolio wow fadeInUp" data-wow-duration="1s" data-wow-delay=".3s">
<div class="portfolio_thumb">
<img src="img/portfolio/5.png" alt="">
</div>
<div class="portfolio_hover">
<div class="title">
<span></span>
<h3>Counter Strike Global Offensive</h3>
<a class="boxed-btn3" href="teamscounterstrike.html">Teams</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 ">
<div class="single_Portfolio wow fadeInUp" data-wow-duration="1s" data-wow-delay=".3s">
<div class="portfolio_thumb">
<img src="img/portfolio/7.png" alt="">
</div>
<div class="portfolio_hover">
<div class="title">
<span></span>
<h3>PUBG Mobile</h3>
<a class="boxed-btn3" href="teamspubgmobile.html">Teams</a>
</div>
</div>
</div>
</div>
<div class="col-lg-8 col-md-12">
<div class="single_Portfolio wow fadeInUp" data-wow-duration="1s" data-wow-delay=".3s">
<div class="portfolio_thumb">
<img src="img/portfolio/4.png" alt="">
</div>
<div class="portfolio_hover">
<div class="title">
<span></span>
<h3>Rocket League</h3>
<a class="boxed-btn3" href="teamsrocket.html">Teams</a>
</div>
</div>
</div>
</div>
</div>
<!--/ team_member_end -->
<!-- footer start -->
<footer class="footer">
<div class="footer_top">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-2 col-md-3">
<div class="footer_logo wow fadeInRight" data-wow-duration="1s" data-wow-delay=".3s">
<a href="index.html">
<img src="img/logo.png" alt="">
</a>
</div>
</div>
<div class="col-xl-7 col-lg-7 col-md-9">
<div class="menu_links">
<ul>
<li><a class="wow fadeInDown" data-wow-duration="1s" data-wow-delay=".2s" href="about.html">Über uns</a> <a class="wow fadeInUp" data-wow-duration="1s" data-wow-delay=".3s"></a></li>
<li><a class="wow fadeInDown" data-wow-duration="1s" data-wow-delay=".4s" href="teams.html">Teams</a></li>
<li><a class="wow fadeInDown" data-wow-duration="1s" data-wow-delay=".6s" href="partner.html">Partner</a></li>
<li><a class="wow fadeInDown" data-wow-duration="1s" data-wow-delay=".8s" href="contact.php">Kontakt</a></li>
<!-- <li><a class="wow fadeInDown" data-wow-duration="1s" data-wow-delay=".8s" href="shop.html">Shop</a></li> -->
<li><a class="wow fadeInDown" data-wow-duration="1s" data-wow-delay=".8s" href="impressum.html">Impressum</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-12">
<div class="socail_links">
<ul>
<li><a class="wow fadeInUp" data-wow-duration="1s" data-wow-delay=".3s" href="https://twitter.com/qvGeSports"> <i class="fab fa-twitter"></i> </a></li>
<li><a class="wow fadeInUp" data-wow-duration="1s" data-wow-delay=".4s" href="https://www.instagram.com/qvGeSports/"> <i class="fab fa-instagram"></i> </a></li>
<li><a class="wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s" href="ts3server://45.82.120.8:9695"> <i class="fab fa-teamspeak"></i> </a></li>
<li><a class="wow fadeInUp" data-wow-duration="1s" data-wow-delay=".6s" href="https://discord.gg/tkSrwjw"> <i class="fab fa-discord"></i> </a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="copy-right_text">
<div class="container">
<div class="footer_border"></div>
<div class="row">
<div class="col-xl-12">
<p class="copy_right text-center wow fadeInUp" data-wow-duration="1s" data-wow-delay="1.3s">
Copyright © 2022 qvG-Media
</p>
</div>
</div>
</div>
</div>
</footer>
<!--/ footer end -->
<!-- JS here -->
<script src="js/vendor/modernizr-3.5.0.min.js"></script>
<script src="js/vendor/jquery-1.12.4.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<script src="js/ajax-form.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/scrollIt.js"></script>
<script src="js/jquery.scrollUp.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/nice-select.min.js"></script>
<script src="js/jquery.slicknav.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/gijgo.min.js"></script>
<script src='https://kit.fontawesome.com/48e038893b.js'></script>
<!--contact js-->
<script src="js/contact.js"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="js/jquery.form.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/mail-script.js"></script>
<script src="js/main.js"></script>
</body>
</html>Ich danke euch schonmal.
Anhänge
jetzt nur noch mobile tauglich machen. Danke dir!