I have css knot in images and ul element - html

I want make a web site and I developing my website design but I have a problem.
I have Image and two button and 4 li element in my page , but them not true!
I upload my css and html and another files with image , please help me.
my request : I want buttons in center of picture , and picture fix all page size and li elements down of background - picture , but it's not true!
problem
problem_2
I want show all in center
and background image is fixed
this is my css code :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
direction: rtl;
}
#font-face {
font-family: 'BYekan';
src: url('/fonts/BYekan.eot');
src: local('b BYekan'), url('fonts/BYekan.woff') format('woff'), url('fonts/BYekan.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
html {
background-color: #fff;
color: #141414;
font-weight: normal;
font-family: 'BYekan','tahoma';
font-size: 16px;
text-rendering: optimizeLegibility;
}
.row{
max-width: 1140px;
margin: 0 auto;
}
header {
background-image: linear-gradient( rgba(0, 0, 0, 0.7) , rgba(0, 0, 0, 0.7) ), url(img/Header.png);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
right: 50%;
transform: translate( +25% , -50% );
}
h1 {
margin-top: 0;
margin-bottom: 20px;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
}
.btn:link,
.btn:visited{
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
}
.btn-full:link,
.btn-full:visited{
background-color: #e67e22;
border: 1px solid #e67e22;
color: #fff;
margin-left: 15px;
}
.btn-ghost:link,
.btn-ghost:visited{
border: 1px solid #e67e22;
color: #e67e22;
}
.btn:hover,
.btn:active {
/*background-color: #3498db;*/
}
.btn-full:hover,
.btn-full:active{
background-color: #3498db;
border: 1px solid #3498db;
color: #fff;
}
.btn-ghost:hover,
.btn-ghost:active{
background-color: #2ecc71;
border: 1px solid #2ecc71;
color: #fff;
}
and this is my html code :
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/col.css">
<link rel="stylesheet" type="text/css" href="vendors/css/4cols.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<title>Techtime</title>
</head>
<body>
<nav>
<div class="row">
<img src="resources/css/img/Logo.jpg" alt="TechTime Logo" class="Logo">
<ul class="main-nav">
<li>صفحه اصـلی</li>
<li>دسته بنـدی</li>
<li>دربـاره ما</li>
<li>تماس با ما</li>
</ul>
</div>
</nav>
<header>
<div class="hero-text-box">
<h1>به دنیای برنامه نویسی سلام کنید</h1>
<a class="btn btn-full" href="#">سلام</a>
<a class="btn btn-ghost" href="#">اطلاعات بیشتر</a>
</div>
</header>
</body>
please help me


If I understood you correctly, you want to make the background cover everything, including <nav>?
In this case, you simply need to move <nav> inside <header>.
<header>
<nav>
<div class="row">
<img src="resources/css/img/Logo.jpg" alt="TechTime Logo" class="Logo">
<ul class="main-nav">
<li>صفحه اصـلی</li>
<li>دسته بنـدی</li>
<li>دربـاره ما</li>
<li>تماس با ما</li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>به دنیای برنامه نویسی سلام کنید</h1>
<a class="btn btn-full" href="#">سلام</a>
<a class="btn btn-ghost" href="#">اطلاعات بیشتر</a>
</div>
</header>


farzam i suggest you to use bootstrap then you will get a lot of built in classes for styling your site which makes your styling pretty much easier.
so using bootstrap, this html would work as you want.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
<div class="container-fluid" style="margin-top:30%;">
<div style="width:500px;margin:auto;">
<h1 style="text-align:center;">به دنیای برنامه نویسی سلام کنید</h1>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<a class="btn btn-full" href="#" style="margin:auto;float:right;">سلام</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<a class="btn btn-ghost" href="#" style="margin:auto;">اطلاعات بیشتر</a>
</div>
</div>
<div style="bottom:0;clear:both;position:fixed;">
<ul class="main-nav">
<li>صفحه اصـلی</li>
<li>دسته بنـدی</li>
<li>دربـاره ما</li>
<li>تماس با ما</li>
</ul>
</div>
</body>
</html>
and custom css that i used
html{
width:100%;
height: 100%;
}
body{
height;100%;
width:100%;
margin:0;
background: url("../img/slide1.jpg") no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Related

footer is not filling up the whole browser width

body{
font-size: 16px;
color: #fff;
background-color: lightskyblue;
font-family: 'Nunito', sans-serif;
}
#header-nav{
background-color: white;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('../images/logotild1.png') no-repeat;
width: 170px;
height: 100px;
margin: 10px 15px 10px 0;
}
.navbar-brand {
padding-top: 25px;
margin-top: 25px;
}
.navbar-image, .navbar-brand{
float: left;
}
.navbar-brand h1 { /* Restaurant name */
font-family: 'Nunito', sans-serif;
color: lightskyblue;
font-size: 1.5em;
text-transform: uppercase;
font-weight: bold;
text-shadow: 1px 1px 1px #222;
margin-top: 0;
margin-bottom: 0;
line-height: .75;
}
.navbar-brand a:hover, .navbar-brand a:focus {
text-decoration: none;
}
#nav-list {
margin-top: 10px;
}
#nav-list a {
color: black;
text-align: center;
}
#nav-list a:hover {
background: #E7E7E7;
}
#nav-list a span {
font-size: 1.8em;
}
#navBarlist{
font-size: 1.2em;
}
#smallpic{
margin-top: 30px;
}
.navbar-header button.navbar-toggler, .navbar-header .navbar-toggler-icon {
border: 1px solid lightgrey;
}
.navbar-header button.navbar-toggler{
clear: both;
}
.panel-footer{
position: absolute;
margin-top: 30px;
padding-top: 35px;
padding-bottom: 30px;
background-color: #222;
border-top: 0;
width: 100%;
}
.panel-footer div.row{
margin-bottom: 35px;
}
#om{
line-height: 2;
}
/* HOME PAGE */
.container .jumbotron {
box-shadow: 0 0 50px white;
border: 2px solid white;
}
#tøj-tile, #face-tile, #andet-tile{
height: 250px;
width: 100%;
margin-top: 15px;
margin-bottom: 15px;
position: relative;
border: 2px solid whitesmoke;
overflow: hidden;
}
#tøj-tile:hover, #andet-tile:hover, #face-tile:hover{
box-shadow: 0 1px 5px 1px black;
}
#tøj-tile{
background: url('../images/tøjtile.png') no-repeat;
background-position: center;
}
#andet-tile{
background: url('../images/andettile.png') no-repeat;
background-position: center;
}
#face-tile{
background: url('../images/facetile.png') no-repeat;
background-position: center;
}
#tøj-tile span, #andet-tile span, #face-tile span{
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.6em;
text-transform: uppercase;
background-color: #000;
color: #fff;
opacity: .8;
}
/********** Large devices only **********/
#media (min-width: 1200px) {
.container .jumbotron {
background: url('../images/storbilledweb.jpg') no-repeat;
height: 675px;
}
#tøj-tile, #andet-tile, #face-tile{
width: 360px;
margin: 0 auto 15px;
}
}
/********** Medium devices only **********/
#media (min-width: 992px) and (max-width: 1199px) {
/* Header */
/* End Header */
.container .jumbotron {
background: url('../images/mediumbillede.jpg') no-repeat;
height: 558px;
}
}
/********** Small devices only **********/
#media (min-width: 768px) and (max-width: 991px) {
.container .jumbotron {
background: url('../images/lillebillede.jpg') no-repeat;
height: 432px;
}
}
/********** Extra small devices only **********/
#media (max-width: 767px) {
.navbar-brand{
padding-top: 10px;
height: 80px;
}
.navbar-brand h1{
padding-top: 10px;
font-size: 5vw;
}
#tøj-tile, #andet-tile, #face-tile{
width: 360px;
margin: 0 auto 15px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tilde & brdr</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#300&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-expand-lg navbar-light-bg-light">
<div class="container">
<div class="navbar-header">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navBarlist"
aria-controls="navBarlist"
aria-expanded="false"
aria-label="Toggle navigation">
<span
class="navbar-toggler-icon">
</span>
</button>
<a
href="index.html"
class ="navbar-image float-left d-none d-sm-block"
>
<div
id = "logo-img"
alt="Logo image"
>
</div>
</a>
<div
class="navbar-brand">
<a
href="index.html">
<h1>Tilde & Brdr.</h1>
</a>
</div>
</div>
</div>
<div
class="collapse navbar-collapse"
id="navBarlist"
>
<ul
id = "nav-list"
class="navbar-nav ml-auto">
<li
class="nav-item">
<a
class="nav-link"
href="#">
Home
</a>
</li>
<li
class="nav-item">
<a
class="nav-link"
href="#">
Tøj
</a>
</li>
<li
class="nav-item">
<a
class="nav-link"
href="#">
Udsalg
</a>
</li>
<li
class="nav-item">
<a
class="nav-link"
href="#">
Kontakt
</a>
</li>
<li
class="nav-item">
<a
class="nav-link"
href="#">
Facebook
</a>
</li>
</ul>
</div>
</nav>
</header>
<div id="main-content" class="container">
<div class="jumbotron" id="smallpic">
<img src="images/lillebillede.jpg" alt="Picture of clothing"
class="img-fluid d-block d-sm-none">
</div>
<div id="home-tiles" class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="tøj-categories.html">
<div id="tøj-tile">
<span>tøj</span>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="andet-category.html">
<div id="andet-tile">
<span>andet</span>
</div>
</a>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<a href="face-category.html">
<div id="face-tile">
<span>facebook</span>
</div>
</a>
</div>
</div><!-- End of #home-tiles -->
<footer class="panel-footer">
<div id="footi"class="container">
<div class="row">
<section id="kontakt" class="col-sm-4">
<span>Kontakt:</span><br>
Email: blablabla#bla.dk<br>
Facebook<br>
Tlf: 09010222<br>
</section>
<section id="om" class="col-sm-4">
Alt er hjemmesyet/hjemmelavet af mig.<br>
Dette er min hobby, derfor kan der være længere leveringstid på nogen ordre, men kontakt mig, så vi kan finde ud af noget nærmere. Jeg håber I synes noget af det jeg laver vækker en interesse.
</section>
<section id="bla" class="col-sm-4">
blablabla blablabla ballbsldablal alablslbalslbalslasal alablsblasalalsa
</section>
</footer>
</div>
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-3.6.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
I've encountered a problem where I get some space between the browser-edge and the footer. I can tell that the size of the footer isnt big enough. The width I've set to 100% but obviously that isn't the problem. Can any1 explain to me what I'm missing?
It started out by having the same space on both left and right, but putting position:absolute somehow solved the right side. No idea what to do with the left side.

You need to override default body margin and set it to 0
body {
font-size: 16px;
color: #fff;
background-color: lightskyblue;
font-family: 'Nunito', sans-serif;
margin: 0;
}

Background image covering everything

I have a background image that is covering my content but without (background-size: cover;) it doesn't take up the space. I am working on a bootstrap project, and all my content is stacked at the top of the page in the banner area. I've tried adding height to the page to move content. I've tried adding a div around it and moving around in the body tag. I have been working on the for about 3 hours.
#import url('https://fonts.googleapis.com/css?family=Oswald|Rambla|Staatliches&display=swap');
body{
margin: 0;
padding: 0;
}
:root{
--color-black: #000000;
--color-white: #ffffff;
--color-border: #ffffff34;
--font-staat: 'Staatliches', cursive;
--font-os: 'Oswald', sans-serif;
--font-ram: 'Rambla', sans-serif;
}
/* global classes */
.font-staat{
font: normal 400 18px var(--font-staat);
}
.font-os{
font: normal 300 18px var(--font-os);
}
.font-ram{
font: normal bold 18px var(--font-ram);
}
.font-size-40{
font-size: 40px;
}
.font-size-34{
font-size: 34px;
}
.font-size-27{
font-size: 27px;
}
.font-size-20{
font-size: 20px;
}
.font-size-16{
font-size: 16px;
}
.bgcolor-black{
background-color: var(--color-black);
}
/* #global classes */
#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index:1;
transition: left .5s ease;
}
#header nav{
height: 100vh;
}
#header .site-title .navbar-brand{
letter-spacing: 2px;
color: var(--color-secondary);
}
#header .nav-link{
margin: .7rem 1rem;
border-bottom: 1px solid var(--color-border);
text-transform: uppercase;
}
#header .nav-link:hover{
color: var(--color-white) !important;
}
#header .toggle-button{
background: none;
color: var(--color-black);
position: fixed;
top: 25px;
right: 20px;
border: 1px solid var(--color-border);
}
.toggle-left{
left: 0 !important;
width: 1000px !important;
}
/* site-main */
.site-banner .banner-area{
background: url(https://i.pinimg.com/736x/2a/a1/da/2aa1da060c0dfad146354e0cc06560c2.jpg) no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
}
.site-banner .banner-area .author{
margin: 0;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.site-banner .banner-area .author .author-img{
width: 250px;
height: 250px;
border-radius: 50%;
margin: auto;
background: url(./20200507_023239272_iOS.jpg) no-repeat;
background-size: 115%;
background-position: 15% 20%;
}
#media screen and (min-width: 768px){
.toggle-button{
display: none;
}
#header{
z-index:0;
}
}
/* #site-main */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kaija Dunklin</title>
<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="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- header area -->
<header id="header">
<div class="row m-0">
<div class="col-3 bgcolor-black">
<nav class="primary-nav navbar-expand-md">
<div class="site-title text-center text-light py-5">
Kaykay
<p class="description text-uppercase font-os"> Kaija Dunklin</p>
</div>
<div class="d-flex flex-column">
Home
Skills
projects
Education
Experience
Resume
Contact
</div>
</nav>
</div>
</div>
<button class="toggle-button"><span class="fas fa-bars fa-2x"></span></button>
<div class="social">
<span class="mr-3"><i class="fab fa-linkedin"></i></span>
<span class="mr-3"><i class="fab fa-github"></i></span>
</div>
</header>
<!-- #header area -->
<main id="site-main">
<div class="row m-0">
<div class="col-md-9 offset-md-3 px-0">
<!-- site-banner area -->
<section class="site-banner" id="home">
<div class="banner-area">
<div class="author text-center">
<div class="author-img"></div>
<h1 class="text-white font-staat font-size-40 text-uppercase py-3">Kaija Dunklin</h1>
</div>
</div>
</section>
<section id="skills">
<i class="fab fa-github-square" >GitHub</i>
</section>
<!-- #site-banner area -->
<section id="projects">
<div>
</div>
</section>
</div>
</div>
<div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js" integrity="sha256-MAgcygDRahs+F/Nk5Vz387whB4kSK9NXlDN3w58LLq0=" crossorigin="anonymous"></script>
<script src="./vendor/typed/typed.min.js"></script>
<script src="./index.js"></script>
</body>
</html>

I'm really not sure what you are trying to achieve, but I guess I got what you wanted:
I set the background on separate div which I then set the background image to and then with Z-index value on css moved behind other content you may add on your page.
.background-img {
/*of course with this solution you should remove the previous background image*/
position: fixed;
top: 0;
height: 100vh;
width: 100vw;
background-image: url(https://i.pinimg.com/736x/2a/a1/da/2aa1da060c0dfad146354e0cc06560c2.jpg);
background-size: cover;
/* Without z-index the background seems to cover the content*/
z-index: -1;
}
<!--I added this empty div to hold the background image-->
<div class="background-img">
</div>
I really did not dive that deep to your source files, so I am not sure if this helps, but I hope so

Bootstrap 4.3 Make Navbar Static at Top of the Page AND Transparent

I have done my best checking and googling everywhere for info before asking here... Hopefully I am not redundant.
I am trying to make a static navbar at the top of my page in Bootstrap 4.3.
However, no matter how hard I try, it does not seem to be working:
- I have tried some of the former .static-top / .navbar-static-top classes and other similar workarounds ;
- I have also tried installing plugins (which I have now removed, due to ineffectiveness) - though this mostly "hides" the navbar, instead of leaving it static at the very top of the page.
- I have tried modifying, to no avail, my CSS with "top: 0;" and other formatting tags on the concerned elements.
I have cleaned my code again, to avoid making a big mess of things not working together. (my previous Bootstrap attempt finished in unusable code, hence me trying to be and stay clean, and remove unused / unnecessary code)
Feeling quite lost. Not a "super coder", mostly graphic designer with plenty of logic understanding. And desperate to have some kind of default functionality to make my navbar static.
The catch is my navbar has to remain transparent (this isn't always the case when working with some classes)
Here is my code.
/* 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>
<button>GET IN TOUCH</button>
</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>Know more<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>Know more
</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>Know more
</p>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<script src="script.js">
</script>
</body>
</html>
Thanking you in advance.
Angie.
===============================
Update:
in the CSS, if I remove position: absolute; from body > #nav_desktop { then my navbar becomes transparent but isn't static.
If I leave that snippet in, the navbar is static, but non-transparent.
The aim is the navbar to be transparent so that the carousel picture remains fully visible.

Bootstrap 4 supports for the navbar a class called fixed-top. This allows you to make your navbar fixed to the top with a simple class.
You will need to add this to your nav:
<nav id="nav_desktop" class="navbar navbar-expand-md fixed-top" role="navigation">
You can find more info about this here.
Here is also a quick example that I already tested:
<!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>

Just move your Carousel div to top using negative margin-top:
#myCarousel {
margin-top: -42px; /* set it equal to the menu height */
}
And change the position of the menu from absolute to relative:
body > #nav_desktop {
position: relative;
}

Thank you for all the ideas and input everyone, it kinda got me rethinking how I set the whole thing up.
While playing around with some elements (in the end, it always comes down to targeting the right classes), I found the solution.
screen capture of the working solution
The attribues needed to be moved as follows:
#nav_desktop > *,
#nav_desktop > div {
background: none !important;
position: absolute;
top: 0 !important;
transform: translate(0%);
which would look like this, all put together:
/*-----------------------------------------------------------------------------------------------------------------------------
*** 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>
<button>GET IN TOUCH</button>
</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>
Hope this can eventually help someone...

inline block is not working on <a>

I have a problem in inline-block, i cannot make block over my hyperlink and block are going some other position.
Here the code of Html and CSS.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
background-color: #fff;
color: #555;
font-family: 'Lato','Arial', sans-serif;
font-weight: 400;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.row{
max-width: 1140px;
margin: 0 auto;
}
Header{
background-image:linear-gradient(rgba(0, 0, 0, 0.7) , rgba(0, 0, 0, 0.7)), url(img/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-text-box{
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1{
margin: 0;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 4px;
}
.btn{
display: inline-block;
padding: 10px 30px;
font-weight: 300 ;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style1.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700" rel="stylesheet" type="text/css">
<title>Thefoodieefreak</title>
</head>
<body>
<header>
<div class="hero-text-box">
<h1>GoodBye junk food.<br> Hello super healthy meals</h1>
<a class="btn btn-full" href="#">I'm hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</header>
</body>
</html
In the code of Html, i have added a class of btn inside <a> tag and after that in CSS code, i put display:inline-block, but its goes some other position.
This is the website image where block goes some other position:
One more image of website with console
web image with console

Insert the two anchor tag inside of the div element and add css .btn_row{text-align:center;}
<header>
<div class="hero-text-box">
<h1>GoodBye junk food.<br> Hello super healthy meals</h1>
<div class="btn_row">
<a class="btn btn-full" href="#">I'm hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</div>
</header>

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style1.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700" rel="stylesheet" type="text/css">
<title>Thefoodieefreak</title>
</head>
<body>
<header>
<div class="container">
<div class="hero-text-box">
<h1>GoodBye junk food.<br> Hello super healthy meals</h1>
<a class="btn btn-full" href="#">I'm hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</div>
</header>
</body>
</html>
and css here:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
background-color: #fff;
color: #555;
font-family: 'Lato','Arial', sans-serif;
font-weight: 400;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.row{
max-width: 1140px;
margin: 0 auto;
}
Header{
background-image:linear-gradient(rgba(0, 0, 0, 0.7) , rgba(0, 0, 0, 0.7)), url(img/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.container{
width: 1140px;
}
.hero-text-box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1{
margin: 0;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 4px;
}
.btn{
display: inline-block;
padding: 10px 30px;
font-weight: 300 ;
}

Background colour isn't taking full width

I'm working on my portfolio which has three section tags. I've declared a background colour for the whole body, however, I want different colours to take full width for the 2nd & 3rd section tags -- just like body background colour.
While I did try to achieve that using the below code, the background colour for both the section tags isn't taking full page width. Any help on this would be appreciated.
HTML
<html>
<head>
<title>Srujan Sagar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato|Pacifico|Raleway" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
Srujan Sagar
</header>
<section>
<p class="main-content">
Hello! I'm an India-based self-taught FrontEnd Developer.
<br />
<br /> I have a diverse set of skills, ranging from design, to HTML + CSS + Javascript, all the way to Django.
</p>
<img src="images/main_img.jpg" alt="my picture" width="140" class="logo" />
<ul class="social-links">
<li>
<a href="https://www.facebook.com/Srujan.SaGar" target="_blank">
<span class="fa fa-facebook-square" style="font-size:32px;color:#A63A50"></span>
</a>
</li>
<li>
<a href="#" target="_blank">
<span class="fa fa-github" style="font-size:34px;color:#A63A50"></span>
</a>
</li>
<li>
<a href="#" target="_blank">
<span class="fa fa-linkedin-square" style="font-size:32px;color:#A63A50"></span>
</a>
</li>
</ul>
<br /> <br />
<p class="line"></p>
</section>
<nav class="main-content">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Skills</li>
<li>Contact</li>
</ul>
</nav>
<section class="second-content">
<h3>Hi there!</h3>
</section>
<section class="third-content">
<h3>Hi there!</h3>
</section>
</body>
</html>
CSS:
body {
/*background: url('../images/background_img.jp');*/
background-color: #FFFAFB;
text-align: center;
font-family: 'Lato', sans-serif;
}
header {
font-family: 'Pacifico', sans-serif;
letter-spacing: 3px;
font-size: 90px;
padding-top: 10px;
color: #A63A50;
}
.main-content {
font-size: 1.3em;
font-family: 'Raleway', sans-serif;
color: #CA7989;
width: 500px;
margin: 0 auto;
padding-top: 25px;
}
.logo {
border-radius: 50%;
border: 1px solid #CA7989;
margin: 30px 0 0 0;
}
.social-links {
margin: 25px 30px 0 0;
}
a {
text-decoration: none;
color: #CA7989;
}
li {
list-style-type: none;
display: inline;
margin: 0 10px 0 0;
}
.line {
max-width: 550px;
margin: 0 auto;
border-top: 1px solid #CA7989;
}
nav a:hover {
color: #A63A50;
background: #F5E6E6;
}
.second-content {
background:#ebebeb;
width: 100%;
height: 465px;
}
.third-content {
margin-top:-18px;
background:#CA7989;
width: 100%;
height: 465px;
}
View the above code in CodePen

body {
/*background: url('../images/background_img.jp');*/
background-color: #FFFAFB;
text-align: center;
font-family: 'Lato', sans-serif;
/* set margin and padding 0*/
margin:0;
padding:0;
}

margin: 0;
on the body, it's the default margin.

Maybe remove margin and padding from the body :
body {
background-color: #FFFAFB;
text-align: center;
font-family: 'Lato', sans-serif;
margin:0;
padding:0;
}

Just add margin: 0; to bodyto remove the default margin.
https://codepen.io/anon/pen/aWdwaG

Try adding this
background-size : cover;
in "body" of your CSS :
body {
/*background: url('../images/background_img.jp');*/
background-color: #FFFAFB;
text-align: center;
font-family: 'Lato', sans-serif;
background-size: cover;
}
then try removing margin and padding of your body and that should do it!
You should also take a look at this article : https://css-tricks.com/perfect-full-page-background-image/