在询问这里之前，我已经尽力检查和谷歌搜索信息......希望我不是多余的。
我正在尝试在 Bootstrap 4.3 中的页面顶部制作一个静态导航栏。 但是，无论我多么努力，它似乎都不起作用： -
我已经尝试了一些以前的 .static-top/.navbar-static-top类和其他类似的解决方法;
- 我也尝试安装插件(由于效率低下，我现在已经删除了( - 尽管这主要"隐藏"导航栏，而不是将其保留在页面顶部。
- 我尝试修改我的 CSS 与">top： 0;">和相关元素上的其他格式标签，但无济于事。
我再次清理了我的代码，以避免把不能一起工作的东西弄得一团糟。(我之前的 Bootstrap 尝试以不可用的代码完成，因此我试图保持干净，并删除未使用/不必要的代码(
感觉很迷茫。不是"超级程序员"，主要是具有丰富逻辑理解的平面设计师。并且迫切希望拥有某种默认功能来使我的导航栏静态。
问题是我的导航栏必须保持透明 (使用某些类时并不总是如此(
这是我的代码。
/* 0. HTML Defaults
-----------------------------------------------------------------------------------------------------------------------------*/
:root {
--da-pink: lightpink;
--da-grey: rgba(5,5,5,1);
--da-grey: #454545;
--da-grey-grad: linear-gradient(to bottom right, #131313, #454545);
--da-grey-opac: rgba(69, 69, 69, .8);
--da-grey-opac: rgb(69, 69, 69);
}
html, body {
background-color: black;
background: rgba(65,65,65,1);
background: -moz-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(65,65,65,1)), color-stop(100%, rgba(5,5,5,1)));
background: -webkit-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: -o-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: linear-gradient(135deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#414141', endColorstr='#050505', GradientType=1 );
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0;
height: 100%;
overflow: auto;
z-index: 10;
}
html body * {
}
h1 {
font-family: century-gothic, sans-serif;
font-weight: 700;
font-style: normal;
color: lightpink;
font-size: 3vw;
line-height: 4vw;
}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}
p {
font-family: itc-american-typewriter, serif;
font-weight: 300;
font-style: normal;
font-size: 12.5pt;
color: #ffffff;
text-align: justify;
text-decoration: none;
/* text-indent: 50px; */
/* word-spacing: 5px */
/* white-space: pre; */
letter-spacing: 1px;
/* line-height: 1.3; */
/* padding: 50px; */
display: block;
border:0;
}
p a:link {
text-decoration: none;
border-bottom: dotted;
font-family: century-gothic, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 12.5pt;
color: lightpink;
}
p a:visited {
text-decoration: none;
font-family: century-gothic, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 12.5pt;
color: lightpink;
}
p a:hover {
text-decoration: none;
border-bottom: dotted;
font-family: century-gothic, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 12.5pt;
color: lightpink;
}
p a:active {
color: lightpink;
font-family: century-gothic, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 12.5pt;
color: lightpink;
}
p.error {}
a,
a:link {}
a:hover {}
/* 10. NAV
-----------------------------------------------------------------------------------------------------------------------------*/
body > #nav_desktop {
position: absolute;
top: 0;
left: 0;
right: 0;
}
#nav_desktop > *,
#nav_desktop > div {
background: none !important;
/* background: rgba(0, 0, 0, .0) !important; */
}
.navbar {
margin-bottom: 0;
padding: 0 0;
z-index: 100;
}
/*
.navbar-toggle {
padding-top: 15px;
margin-top: 0px;
margin-bottom: 0;
} */
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translate(-50%);
}
.nav_text {
font-family: itc-american-typewriter, serif;
font-weight: 300;
font-style: normal;
font-size: 12.5pt;
color: #ffffff;
letter-spacing: 2px;
}
/* 50. Header
-----------------------------------------------------------------------------------------------------------------------------*/
header {}
/* 60. Carousel Hero slider
-----------------------------------------------------------------------------------------------------------------------------*/
.carousel {
top:0;
}
.hero-text {
padding-top: 50px;
padding-bottom: 50px;
background-image: url('./logo_transp.png');
background-size: auto;
background-repeat: no-repeat;
background-position: center -50px;
text-shadow: 1px 1px 3px black;
text-align: center;
position: absolute;
top: 75%;
left: 50%;
transform: translate(-50%, -75%);
}
.carousel,
.item,
.active {
height:100vh;
}
.carousel-inner {
height:100vh;
}
.carousel-inner img {
margin: auto;
}
/* Zz. Bootstrap edit
-----------------------------------------------------------------------------------------------------------------------------*/
.overlay {
background: black;
opacity: 0.7;
/* background-size: cover; */
}
button {
display: inline-block;
border: 1px solid;
border-color: white;
padding: 10px 10px;
margin: 0;
text-decoration: none;
background: none;
color: white;
font-family: century-gothic, sans-serif;
font-weight:700;
font-style: normal;
font-size: 12 pt;
text-align: center;
}
button:hover,
button:focus {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
button:focus {
outline: 1px solid transparent;
outline-offset: -4px;
}
button:active {
transform: scale(0.99);
}
.clearfix::after {
content: " ";
clear: both;
display: table;
}
.responsive-image {
max-width: 100%;
height: auto;
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}<!DOCTYPE html>
<html>
<head>
<title>Welcome to the Design Angels</title>
<!-- META DATA -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Welcome to theDesignAngels, we make it look glittery and shiny."/>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="files/lib/jQuery.js"></script>
<script src="files/lib/lib/popper/Popper.js"></script>
<!-- BOOTSTRAP CSS -->
<script src="files/lib/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="files/lib/bootstrap.min.css">
<!-- Libraries & frameworks -->
<script src="functions.js"></script>
<link rel="stylesheet" style="text/css" href="style.css"/>
<link rel="stylesheet" href="xxx">
<link rel="shortcut icon" href="assets/favicon.jpg" type="image/x-icon" />
</head>
<body>
<!-- NAVBAR -->
<nav id="nav_desktop" class="navbar navbar-expand-md" role="navigation">
<!-- Brand -->
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="logo_menu.png" style="width:180px;height:auto" alt="the Design Angels" data-toggle="tooltip" title="home"></a>
<!-- Collect the nav links, forms, and other content -->
<!-- Site nav -->
<ul class="nav navbar-nav navbar-center">
<li><a href="#services">
<span class="nav_text">SERVICES</span>
</a>
</li>
<li><a href="#portfolio">
<span class="nav_text">PORTFOLIO</span>
</a>
</li>
<li><a href="#contact">
<span class="nav_text">CONTACT</span>
</a>
</li>
</ul>
<!-- Social media -->
<ul class="nav navbar-nav ml-auto">
<li><a href="http://facebook.com/thedesignangels" target="_blank" alt="The Design Angels on Facebook">
<img src="social/fb_.png" onmouseover="this.src='./social/fb_mouseov.png'" onmouseout="this.src='./social/fb_.png'" style="height: 15px; margin-top: -5px;" >
</a>
</li>
<li><a href="https://www.instagram.com/thedesignangels/" target="_blank" alt="The Design Angels on Instagram">
<img src="social/inst_.png" onmouseover="this.src='./social/inst_mouseov.png'" onmouseout="this.src='./social/inst_.png'" style="height: 15px; margin-top: -5px;" >
</a>
<li><a href="https://twitter.com/thedesignangels" target="_blank" alt="The Design Angels on Twitter">
<img src="social/twit_.png" onmouseover="this.src='./social/twit_mouseov.png'" onmouseout="this.src='./social/twit_.png'" style="height: 15px; margin-top: -5px;" >
</a>
</li>
</ul>
</div>
</nav>
<!-- CAROUSEL HERO -->
<div id="myCarousel " class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slider-01.jpg" class="overlay">
</div>
<div class="carousel-item">
<img src="slider-02.jpg" class="overlay">
</div>
<div class="carousel-item">
<img src="slider-03.jpg" class="overlay">
</div>
<div class="carousel-item">
<img src="slider-04.jpg" class="overlay">
</div>
<div class="carousel-item">
<img src="slider-05.jpg" class="overlay">
</div>
</div>
<!-- Hero Text -->
<div class="hero-text container">
<h1 class="hero-cust">Looking for Character<br> and Innovation ?</h1><br> <br>
<p style="text-align: center;">The Design Angels have solutions for you,<br> on top of offering advice and custom-made designs</p><br> <br>
<a href="#contact"><button>GET IN TOUCH</button></a>
</div>
</div>
<!-- Introduction -->
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="padding-top:50px;">
<h1>Great design<br>
is powerful</h1>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 clearfix" style="padding-top:50px;">
<p class="tab">Not only does it brings personality and brand recognition to goods or services,
but it establishes a recognition and creates the <span style="color:lightpink;">feeling of trust</span> we feel for those brands we love.<br> <br> <br></p>
<p class="tab">Set yourself above the competition with professional design and packaging: <span style="color:lightpink;">great communication</span> shows the world how serious you are about business.
</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 clearfix" style="padding-top:50px;">
<img src="mockup.png" class="responsive-image" style="width:200px; height: auto; vertical-align: top; float: right;" >
</div>
</div>
</div>
</div><br><br><br>
<!-- Services -->
<div class="container-fluid overlay"><br>
<div class="container">
<h1 style="text-align:center;">Our services</h1><br><br>
<p style="text-align:center;">We always go the extra mile to bring you kick-ass design.</p><br><br><br>
</div>
<div class="container">
<div class="row" style="padding-bottom: 50px;">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 specialties clearfix"><br>
<p style="text-align:center;">
<img src="drukwerk.png"><br><br><br>PRE-PRESS SPECIALTY<br><br>
Packagings, posters, cards, flyers,
letterheads, banners, calendars,
brochures, books, stickers,
custom work... <br><a href="#" alt="Learn more about pre-press possibilities">Know more</a><br>
</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 specialties clearfix"><br>
<p style="text-align:center;">
<img src="illu.png"><br><br>ILLUSTRATION & <br>IMAGE<br><br>
Commercial illustration for packaging,
small animations, logo & branding,
photoshopping, vector illustrations,
paintings... <br><a href="#" alt="Learn more about illustration and image-creation possibilities">Know more</a>
</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 specialties clearfix"><br>
<p style="text-align:center; ">
<img src="digi.png"><br><br>DIGITAL & <br>WEB<br><br>
Banners, animated GIFs, brochures,
PDFs, web sites, videos, social media content... <br><a href="#" alt="Learn more about digital and content-creation possibilities">Know more</a>
</p>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<script src="script.js">
</script>
</body>
</html>提前谢谢你。 安吉。
====
=================================更新：
在 CSS 中，如果我从正文>#nav_desktop {中删除位置：绝对;那么我的导航栏会变得透明但不是静态的。
如果我保留该代码段，导航栏是静态的，但不透明。
目的是导航栏透明，以便轮播图片保持完全可见。
Bootstrap 4 支持导航栏一个名为 fixed-top 的类。这允许您使用简单的类将导航栏固定在顶部。
您需要将其添加到您的导航中：
<nav id="nav_desktop" class="navbar navbar-expand-md fixed-top" role="navigation">这也是我已经测试过的快速示例：
<!DOCTYPE html>
<html>
<head>
<title>Welcome to the Design Angels</title>
<!-- META DATA -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Welcome to theDesignAngels, we make it look glittery and shiny."/>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="files/lib/jQuery.js"></script>
<script src="files/lib/lib/popper/Popper.js"></script>
<!-- BOOTSTRAP CSS -->
<script src="files/lib/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="files/lib/bootstrap.min.css">
<!-- Libraries & frameworks -->
<script src="functions.js"></script>
<link rel="stylesheet" style="text/css" href="style.css"/>
<link rel="stylesheet" href="xxx">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="shortcut icon" href="assets/favicon.jpg" type="image/x-icon" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
<div class="col-8 offset-1"><h1>bla bla bla</h1></div>
</body>
</html>只需使用负margin-top将您的轮播div移动到顶部：
#myCarousel {
margin-top: -42px; /* set it equal to the menu height */
}
并将菜单的position从绝对更改为相对：
body > #nav_desktop {
position: relative;
}
感谢您的所有想法和对每个人的意见，这让我重新思考如何设置整个事情。
在玩弄一些元素时(最后，它总是归结为针对正确的类(，我找到了解决方案。
工作解决方案的屏幕截图
属性需要移动如下：
#nav_desktop > *,
#nav_desktop > div {
background: none !important;
position: absolute;
top: 0 !important;
transform: translate(0%);
看起来像这样，全部放在一起：
/*-----------------------------------------------------------------------------------------------------------------------------
*** Angie's CSS File | The Design Angels ***
---------------------------------------------------------------------------------------------------------------
Version: 0.0.1
Date: 02-02-2020
-----------------------------------------------------------------------------------------------------------------------------*/
/* 0. HTML Defaults
-----------------------------------------------------------------------------------------------------------------------------*/
:root {
--da-pink: lightpink;
--da-grey: rgba(5,5,5,1);
--da-grey: #454545;
--da-grey-grad: linear-gradient(to bottom right, #131313, #454545);
--da-grey-opac: rgba(69, 69, 69, .8);
--da-grey-opac: rgb(69, 69, 69);
}
html, body {
background-color: black;
background: rgba(65,65,65,1);
background: -moz-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(65,65,65,1)), color-stop(100%, rgba(5,5,5,1)));
background: -webkit-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: -o-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: linear-gradient(135deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#414141', endColorstr='#050505', GradientType=1 );
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0;
height: 100%;
overflow: auto;
z-index: 10;
}
html body * {
}
h1 {
font-family: century-gothic, sans-serif;
font-weight: 700;
font-style: normal;
color: lightpink;
font-size: 3vw;
line-height: 4vw;
}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}
p {
font-family: itc-american-typewriter, serif;
font-weight: 300;
font-style: normal;
font-size: 12.5pt;
color: #ffffff;
text-align: justify;
text-decoration: none;
/* text-indent: 50px; */
/* word-spacing: 5px */
/* white-space: pre; */
letter-spacing: 1px;
/* line-height: 1.3; */
/* padding: 50px; */
display: block;
border:0;
}
p a:link {
text-decoration: none;
border-bottom: dotted;
font-family: century-gothic, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 12.5pt;
color: lightpink;
}
p a:visited {
text-decoration: none;
font-family: century-gothic, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 12.5pt;
color: lightpink;
}
p a:hover {
text-decoration: none;
border-bottom: dotted;
font-family: century-gothic, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 12.5pt;
color: lightpink;
}
p a:active {
color: lightpink;
font-family: century-gothic, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 12.5pt;
color: lightpink;
}
p.error {}
a,
a:link {
color: white;
text-decoration:none;
}
a:hover {
color: white;
text-decoration:none;
}
/* 10. NAV
-----------------------------------------------------------------------------------------------------------------------------*/
body > #nav_desktop {
left: 0;
right: 0;
}
#nav_desktop > *,
#nav_desktop > div {
background: none !important;
position: absolute;
top: 0 !important;
transform: translate(0%);
/* background: rgba(0, 0, 0, .0) !important; */
}
.navbar {
margin-bottom: 0;
padding: 0 0;
z-index: 100;
}
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translate(-50%);
}
.nav_text {
font-family: itc-american-typewriter, serif;
font-weight: 300;
font-style: normal;
font-size: 12.5pt;
color: #ffffff;
letter-spacing: 2px;
}
@media only screen and (max-width: 768px) {
.navbar-brand > img {
position: absolute !important;
left: 50% !important;
transform: translate(-50%) !important;
}
}
ul.d-md-inline > li {
display:inline !important;
}
/* 50. Header
-----------------------------------------------------------------------------------------------------------------------------*/
header {}
/* 60. Carousel Hero slider
-----------------------------------------------------------------------------------------------------------------------------*/
.carousel {
top:0;
}
.hero-text {
padding-top: 50px;
padding-bottom: 50px;
background-image: url('./logo_transp.png');
background-size: auto;
background-repeat: no-repeat;
background-position: center -50px;
text-shadow: 1px 1px 3px black;
text-align: center;
position: absolute;
top: 75%;
left: 50%;
transform: translate(-50%, -75%);
}
.carousel,
.item,
.active {
height:100vh;
}
.carousel-inner {
height:100vh;
}
.carousel-inner img {
margin: auto;
}
/* 100. Content
-----------------------------------------------------------------------------------------------------------------------------*/
content {}
/* 200. Specialties section
-----------------------------------------------------------------------------------------------------------------------------*/
.specialties {
height: 375px;
width: 29%;
display: inline-box;
column-gap: 5px !important;
background-color: black;
background: rgba(65,65,65,1);
background: -moz-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(65,65,65,1)), color-stop(100%, rgba(5,5,5,1)));
background: -webkit-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: -o-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: linear-gradient(135deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#414141', endColorstr='#050505', GradientType=1 );
padding: 15px !important;
margin-right: 10px;
margin-left: 10px;
margin-bottom:20px;
}
/* 900. Footer
-----------------------------------------------------------------------------------------------------------------------------*/
footer {}
/* Zz. Bootstrap edit
-----------------------------------------------------------------------------------------------------------------------------*/
.overlay {
background: black;
opacity: 0.7;
/* background-size: cover; */
}
button {
display: inline-block;
border: 1px solid;
border-color: white;
padding: 10px 10px;
margin: 0;
text-decoration: none;
background: none;
color: white;
font-family: century-gothic, sans-serif;
font-weight:700;
font-style: normal;
font-size: 12 pt;
text-align: center;
}
button:hover,
button:focus {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
button:focus {
outline: 1px solid transparent;
outline-offset: -4px;
}
button:active {
transform: scale(0.99);
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.responsive-image {
max-width: 100%;
height: auto;
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
/* 10000. TEXT STYLING
-----------------------------------------------------------------------------------------------------------------------------*/
@media print {
p {
color: black;
}
}
.tab {
text-indent: 40px;
}<!DOCTYPE html>
<html>
<head>
<title>Welcome to the Design Angels</title>
<!-- META DATA -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Welcome to theDesignAngels, we make it look glittery and shiny."/>
<meta name="keywords" content="graphic design, design, grafisch, vormgeving, dtp, geleen, limburg, nederland, francophone, franstalig, english, nederlands, vormgever, web sites, packaging, verpakking, creatief, creative, beautiful,thedesignangels, the design angels"/>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="files/lib/jQuery.js"></script>
<script src="files/lib/lib/popper/Popper.js"></script>
<!-- BOOTSTRAP CSS -->
<script src="files/lib/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="files/lib/bootstrap.min.css">
<!-- Libraries & frameworks -->
<script src="functions.js"></script>
<link rel="stylesheet" style="text/css" href="style.css"/>
<link rel="stylesheet" href="https://xxx">
<link rel="shortcut icon" href="assets/favicon.jpg" type="image/x-icon" />
</head>
<body>
<!-- NAVBAR -->
<nav id="nav_desktop" class="navbar navbar-expand-md" role="navigation">
<!-- Brand -->
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="logo_menu.png" style="width:180px;height:auto" alt="the Design Angels" data-toggle="tooltip" title="home"></a>
<!-- Collect the nav links, forms, and other content -->
<!-- Site nav -->
<ul class="nav navbar-nav navbar-center d-none d-md-inline">
<li><a href="#services">
<span class="nav_text">SERVICES</span>
</a><span> </span>
</li>
<li><a href="#portfolio">
<span class="nav_text">PORTFOLIO</span>
</a><span> </span>
</li>
<li><a href="#contact">
<span class="nav_text">CONTACT</span>
</a><span> </span>
</li>
</ul>
<!-- Social media -->
<ul class="nav navbar-nav ml-auto d-none d-md-inline">
<li><a href="http://facebook.com/thedesignangels" target="_blank" alt="The Design Angels on Facebook">
<img src="social/fb_.png" onmouseover="this.src='./social/fb_mouseov.png'" onmouseout="this.src='./social/fb_.png'" style="height: 15px; margin-top: -5px;" >
</a>
</li>
<li><a href="https://www.instagram.com/thedesignangels/" target="_blank" alt="The Design Angels on Instagram">
<img src="social/inst_.png" onmouseover="this.src='./social/inst_mouseov.png'" onmouseout="this.src='./social/inst_.png'" style="height: 15px; margin-top: -5px;" >
</a>
<li><a href="https://twitter.com/thedesignangels" target="_blank" alt="The Design Angels on Twitter">
<img src="social/twit_.png" onmouseover="this.src='./social/twit_mouseov.png'" onmouseout="this.src='./social/twit_.png'" style="height: 15px; margin-top: -5px;" >
</a>
</li>
</ul>
</div>
</nav>
<!-- CAROUSEL HERO -->
<div id="myCarousel " class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slider-01.jpg" class="overlay">
</div>
<div class="carousel-item">
<img src="slider-02.jpg" class="overlay">
</div>
<div class="carousel-item">
<img src="slider-03.jpg" class="overlay">
</div>
<div class="carousel-item">
<img src="slider-04.jpg" class="overlay">
</div>
<div class="carousel-item">
<img src="slider-05.jpg" class="overlay">
</div>
</div>
<!-- Hero Text -->
<div class="hero-text container">
<h1 class="hero-cust">Looking for Character<br> and Innovation ?</h1><br> <br>
<p style="text-align: center;">The Design Angels have solutions for you,<br> on top of offering advice and custom-made designs</p><br> <br>
<a href="#contact"><button>GET IN TOUCH</button></a>
</div>
</div>
<!-- Introduction -->
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="padding-top:50px;">
<h1>Great design<br>
is powerful</h1>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 clearfix" style="padding-top:50px;">
<p class="tab">Not only does it brings personality and brand recognition to goods or services,
but it establishes a recognition and creates the <span style="color:lightpink;">feeling of trust</span> we feel for those brands we love.<br> <br> <br></p>
<p class="tab">Set yourself above the competition with professional design and packaging: <span style="color:lightpink;">great communication</span> shows the world how serious you are about business.
</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 clearfix" style="padding-top:50px;">
<img src="mockup.png" class="responsive-image" style="width:200px; height: auto; vertical-align: top; float: right;" >
</div>
</div>
</div>
</div><br>
<!-- Optional JavaScript -->
<script src="script.js">
</script>
</body>
</html>希望这最终可以帮助某人...