I linked google fonts into my code.
and I'm not able to customize it like
font-family:"Montserrat-Black or thin or light as required
I tried linking the regular style and then changing it too but still isn't working.
font weights are also not working
i used bootstrap 4 also here.
my whole code is given below
HTML
<meta charset="utf-8">
<title>TinDog</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#900&family=Ubuntu&display=swap" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/7258ec066a.js" crossorigin="anonymous"></script>
<!-- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body>
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark ">
<a class="navbar-brand">tinDog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
CSS
background-color: #ff4c68;
color: white;
}
body{
font-family: 'Montserrat-Thin', sans-serif;
}
.container-fluid{
padding:3% 15%;
}
h1{
font-family: 'Montserrat', sans-serif;
font-size: 3rem;
line-height: 1.5;
}
/* Navigation Bar */
.navbar{
padding-bottom: 4.5rem;
}
.navbar-brand{
font-family:"Ubuntu";
font-size: 2.5rem;
font-weight: bold;
}
.nav-item{
padding:0 18px;
}
.nav-link{
font-family:"Montserrat-Light";
font-size: 1.2rem;
}
In this code, I've selected the montserrat-black family.
In the body font-family:"Montserrat-Thin" works
but in the .nav-link font-family:"Montserrat-Light" doesn't.
why is that so?
The font families are not named with their weight. You have to use font-family: 'Montserrat', sans-serif; for all of them and use font-weight declarations separately to set the weight. For example:
font-family: 'Montserrat-Thin', sans-serif;
becomes:
font-family: 'Montserrat', sans-serif;
font-weight: 300;
This is clear if you read the CSS that Google Fonts is actually giving you (by opening the link in the browser)—you can see that the #font-face blocks are all named "Montserrat".
(Of course you'll also need to add the 300 weight to the Google Fonts link as #Jontee said: <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;900&display=swap" rel="stylesheet"> )
So you only imported one of the fonts. This should import both of them:
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;900&display=swap" rel="stylesheet">
Here you can select the fonts and then select embed and it will fix create the link for you.
https://fonts.google.com/specimen/Montserrat?preview.text=monster&preview.text_type=custom&query=montserrat&sidebar.open=true&selection.family=Montserrat:wght#300
This is what Matt was meaning.
Font weight 100 is Thin
Font weight 300 is Light
Font weight 900 is black
If you look at the link in the Html file it shows the different weights. wght#100;300;900
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;300;900&display=swap" rel="stylesheet">
<style>
.one{
font-family: 'Montserrat', sans-serif;
font-weight: 100
}
.two{
font-family: 'Montserrat', sans-serif;
font-weight: 300
}
.three{
font-family: 'Montserrat', sans-serif;
font-weight: 900
}
</style>
<body>
<h1 class="one">
Thin
</h1>
<h1 class="two">
Light
</h1>
<h1 class="three">
Black
</h1>
</body>
</html>
Related
I am developing my friend's windsurf club website. The problem I have right now is, I am trying to give it a lavish look, and behind the <h1> and <h2> elements, I want my background image to lie. Right now, I have put the image and set the repeat to no-repeat but it is far apart from my content. Is it something about bootstrap? How can I correct it? The thing that I am trying to achieve is similar to these examples: image 1 image2 But right now it looks likes this: mywebsite
body {
background-color: #B1B2FF;
font-family: 'Poppins', sans-serif;
}
.navbar-brand,
.nav-link {
color: #EEF1FF;
}
.addbg {
background-image: url("images/24.jpg");
background-size: contain;
background-repeat: no-repeat;
height: 400px;
border-radius: 1%;
}
#top h2 {
font-family: 'Noto Serif Gujarati', serif;
letter-spacing: 0.8px;
color: #EEF1FF;
}
/* font-family: 'Noto Serif Gujarati', serif;
font-family: 'Poppins', sans-serif; */
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- Google Fonts -->
<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=Noto+Serif+Gujarati:wght#200;300;400&family=Poppins:wght#300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/1e90402f09.js" crossorigin="anonymous"></script>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="#">Bojark Windsurf</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Ana Sayfa</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Paketlerimiz</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hakkımızda</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Top Part -->
<section id="top">
<div class="container-fluid text-center addbg">
<div class="row ">
<div class="col-12">
<h1>Bojark Windsurf</h1>
<h2>Bambaşka Bir Deneyime Hazır Mısın?</h2>
</div>
</div>
</div>
</section>
<!-- Bootstrap JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
i think you can use inner html, I think that's what I can help
<div class="p-5 text-center bg-image" style="
background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/041.webp');height: 400px;">
Backgrounds lie completely in the CSS file, not the HTML file. They are inherintly behind all HTML elements. To create a background as it looks like you have done partly? I would remove the .addbg and add this line of code into the body info
background: url("images/24.jpg");
What I'm trying to do is make on my own a webpage with bootstrap.
I want to, instead of a navbar-toggler, put a dropdown. I am not fully familiar with JS yet. For this reason, I wanted to do it with only bootstrap.
I put a #media to change the #TheNav display to none at certain screen width. At the same time the opposite with the dropdown. The problem is that the dropdown doesn't work, I've been trying different things but nothing. So what I've done is to copy a predetermined bootstrap dropdown and put it below everything, and still doesn't work!! I revised having all bootstrap links in order and position,...
THIS IS THE HTML DOCUMENT
<!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.0">
<link rel="icon" href="/Tabler/logo.png">
<!-- bootstrap head link -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="tabler.css" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#300&display=swap" rel="stylesheet">
<title >tabler</title>
</head>
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a href="#" class="text-decoration-none navbar-brand ms-5 ps-5 mt-0 pt-0">
<div class="d-flex justify-content-center">
<img src="/Tabler/logo.png" style="width: 25px; height: 25px;">
<span class="mx-2 text-dark fw-bold" style="font-family: 'Nunito', sans-serif;">
tabler
</span>
</div>
</a>
<div class="me-5 pe-5" id="TheNav">
<div>
<a class="nav-link px-2" href="#" style="font-size: 11px; font-weight: 420;">Demo</a>
</div>
<div>
<a class="nav-link px-2" href="#" style="font-size: 11px; font-weight: 420;">Source Email</a>
</div>
<div>
<a class="nav-link px-2" href="#" style="font-size: 11px; font-weight: 420;">Tabler Email</a>
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row" id="Jumbo">
<div class="col-lg-6 text-center">
<h1 class="text-white mt-5">Admin panel made simple. For Free!</h1>
<p class="subHed text-white my-4">Premium and Open Source dashboard template with responsive and high quality UI.</p>
<div class="mb-5">
<button class="text-white downloadBut btn me-1">
Download
</button>
<button class="text-dark bg-white text-bold btn ms-1" id="demoBtn">
Browse Demo
</button>
</div>
</div>
<div class="col-lg-6">
</div>
</div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<!-- bootstrap body links -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
</body>
</html>
AND THIS IS THE CSS
.downloadBut {
background-color: rgb(38, 187, 71);
}
#Jumbo {
background-color: rgb(27, 150, 231);
}
.btn {
border: none;
padding: 8px 16px;
font-size: 11px;
font-weight: bold;
border-radius: 2%;
}
.subHed {
font-size: 16px;
font-weight: 450;
opacity: .8;
}
h1 {
font-size: 22px;
}
#demoBtn {
color: rgb(180, 177, 177);
}
.nav-link {
color: rgb(83, 82, 82);
}
#media screen and (max-width: 580px) {
#TheNav {
display: none;
}
}
#media screen and (min-width: 581px) {
#TheNav {
display: flex;
}
}
#media screen and (min-width: 581px) {
.dropD {
display: none;
}
}
This question already has answers here:
How can I override Bootstrap CSS styles?
(14 answers)
Closed 1 year ago.
I'm a fresher in Web Development field, and I've taken Angela Yu's Web development bootcamp.
I'm currently using bootstrap v5 , html5 , CSS3
I came across a problem, I couldn't change properties of body tag when I target using Tag selection
Here's my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- External style Sheet -->
<link rel="stylesheet" href="css/styles.css">
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Ubuntu:wght#500&display=swap" rel="stylesheet">
<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
</head>
<body>
<section id="title">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid p-0 title-container">
tinCat
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link" href="">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="">Pricing</a></li>
<li class="nav-item"><a class="nav-link" href="">Download</a></li>
</ul>
</div>
</div>
</nav>
<!-- Nav Bar end -->
<!-- Download Section -->
<div class="container-fluid p-0 title-things">
<div class="row">
<div class="col-lg-6 ">
<h1>Meet new and interesting cats nearby.</h1>
<button type="button" class="btn btn-light download-button"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-dark download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-2">
<img class="cat-profile"src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</section>
</div>
</body>
</html>
Here's my Styles.css
body{
font-family: 'Montserrat', sans-serif;
}
#title{
padding: 3% 15%;
background-color: #ff4c68;
font-family: 'Montserrat', sans-serif;
color: #ffffff;
}
.navbar-brand{
font-family: 'Ubuntu', sans-serif;
font-weight: bold;
font-size: 2.5rem !important;
}
.cat-profile
{
transform: rotate(10deg);
width: 360px;
margin-top: 20px;
}
.download-button{
margin-top: 20px;
}
.title-things{
margin-top: 100px ;
}
.title-container {
padding: 0% 15%;
}
/* .col{
padding: 0px;
} */
/* .title-text
{
font-family: 'Montserrat', sans-serif;
font-weight: bold;
size : 3rem;
line-height: 1.5;
} */
Conversely I added a new class to the tag and in External Style sheet, I targeted it using Class selector and it worked! Can someone explain why?
It all depends on the order that your styles appear, so if you add your styles below bootstrap it will override bootstrap styles . Change code like this ,
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Ubuntu:wght#500&display=swap" rel="stylesheet">
<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<!-- External style Sheet -->
<link rel="stylesheet" href="css/styles.css">
Put your stylesheet below the others
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Ubuntu:wght#500&display=swap" rel="stylesheet">
<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<!-- External style Sheet -->
<link rel="stylesheet" href="css/styles.css">
</head>
I want the image to fill in the column of the page:- https://i.stack.imgur.com/VtgcW.jpg
I am trying to recreate a website to test my skills the website is:-https://www.simplesite.com
It is working when I assign it to the body but when I assign it to the div then there is white space below. I have tried a lot of things still can't get rid of this white space. Any help would be appreciated
HTML:-
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="header">
<title>SimpleSite</title>
</head>
<body>
<div class="contain">
<Section id="Navbar">
<nav id="mainNavbar" class="navbar navbar-light navbar-expand-md fixed-top pt-3">
SimpleSite
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item">
Make a free website or blog
</li>
<li class="nav-item">
Customer Service
</li>
<li class="nav-item">
Features
</li>
<li class="nav-item">
Themes
</li>
<li class="nav-item">
Our Blog
</li>
<li class="nav-item">
Careers
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item" id="button">
LOG IN
</li>
<li class="nav-item">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-globe" style="font-size: 20px;"></i> English
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
Español
Français
Dansk
</div>
</li>
</ul>
</div>
</nav>
</Section>
<Section id="bgimage">
<div class="container">
<div class="row">
<div class="col-md-12" id="special">
<h1 class="text-center text-white">Create your website in <span>three simple steps</span></h1>
<p class="text-center text-white"><strong>-it's free!-</strong></p>
<button class="btn btn-danger rounded-pill"><span>START HERE</span></button>
</div>
</div>
</div>
</Section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</div>
</body>
</html>
CSS:-
#mainNavbar .navbar-brand {
font-size: 2.4rem;
font-family: "Trebuchet MS", Tahoma, Geneva, Arial, Helvetica, sans-serif;
color: #EA1C2C;
font-weight: 900;
}
#mainNavbar .nav-link {
color: #ffffff;
font-family: Roboto;
font-weight: 300;
font-size: 1.4rem;
}
#mainNavbar .nav-item {
margin-left: 1.2rem;
}
#button .btn-success {
color: white;
background-color: transparent;
border-color: white;
border-radius: 30px;
width: 125px;
font-weight: 400;
}
#special {
padding-top: 33%;
}
#special h1 {
font-size: 55px;
font-weight: 100;
letter-spacing: 1.7px;
}
#special p {
font-size: 30px;
font-weight: 400;
letter-spacing: 2.0px;
padding-top: 30px;
}
#special span {
font-weight: 600;
}
#special button {
margin-top: 1.2rem;
height: 50px;
width: 200px;
margin-left: 40%;
padding-right: 20px;
padding-bottom: 10px;
}
.contain {
background: url("imgs/starter5.jpg") center center;
background-repeat: no-repeat;
background-size: ;
}
Please check this jsfiddle link. Hope this solves your problem. Below is the same code.
#mainNavbar .navbar-brand {
font-size:2.4rem;
font-family: "Trebuchet MS", Tahoma, Geneva, Arial, Helvetica, sans-serif;
color: #EA1C2C;
font-weight: 900;
}
#mainNavbar .nav-link {
color: #ffffff;
font-family: Roboto;
font-weight: 300;
font-size: 1.4rem;
}
#mainNavbar .nav-item {
margin-left: 1.2rem;
}
#button .btn-success {
color: white;
background-color: transparent;
border-color: white;
border-radius: 30px;
width: 125px;
font-weight: 400;
}
#special {
padding-top: 33%;
}
#special h1 {
font-size: 55px;
font-weight: 100;
letter-spacing: 1.7px;
}
#special p {
font-size: 30px;
font-weight: 400;
letter-spacing: 2.0px;
padding-top: 30px;
}
#special span {
font-weight: 600;
}
#special button {
margin-top: 1.2rem;
height: 50px;
width: 200px;
margin-left: 40%;
padding-right: 20px;
padding-bottom: 10px;
}
.contain {
background: url("https://previews.123rf.com/images/dolgachov/dolgachov1407/dolgachov140701912/29971506-business-interview-employment-and-office-concept-business-team-with-tablet-pc-computer-interviewing-.jpg") center center / cover;
background-repeat: no-repeat;
background-size: ;
min-height: 100vh;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="header">
<title>SimpleSite</title>
</head>
<body>
<div class="contain">
<Section id="Navbar">
<nav id="mainNavbar" class="navbar navbar-light navbar-expand-md fixed-top pt-3">
SimpleSite
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item">
Make a free website or blog
</li>
<li class="nav-item">
Customer Service
</li>
<li class="nav-item">
Features
</li>
<li class="nav-item">
Themes
</li>
<li class="nav-item">
Our Blog
</li>
<li class="nav-item">
Careers
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item" id="button">
LOG IN
</li>
<li class="nav-item">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-globe" style="font-size: 20px;"></i> English
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
Español
Français
Dansk
</div>
</li>
</ul>
</div>
</nav>
</Section>
<Section id="bgimage">
<div class="container">
<div class="row">
<div class="col-md-12" id="special">
<h1 class="text-center text-white">Create your website in <span>three simple steps</span></h1>
<p class="text-center text-white"><strong>-it's free!-</strong></p>
<button class="btn btn-danger rounded-pill"><span>START HERE</span></button>
</div>
</div>
</div>
</Section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</div>
</body>
</html>
https://jsfiddle.net/yudizsolutions/nartkmud/4/
First of all You need the background size to fit the fold, which means set it to cover (please note that the image size should be 1920x1080 to look good and not pixelated).
add/change this:
.contain {
background: url("imgs/starter5.jpg") 50% 0;
background-repeat: no-repeat;
background-size: cover;
}
If the image is good than it should fill all the 1st fold of the page!
Your css need little modification. Please try the below height property in your contain class :
.contain {
background: url(imgs/starter5.jpg) center center;
background-repeat: no-repeat;
height: 100vh;
}
I am working on a real estate website project. I have already created Photoshop template and uploaded it on Behance.
https://www.behance.net/csc103falld848
https://www.behance.net/gallery/66727753/Blog-Design
Right now, I am creating the static version of the real estate store template.
I am facing an issue. In the navigation, I can't change the background color of different columns. For example, the background color of phone number (1-800-000) should be silver. On the other hand, the background color of "Login," "My Properties," and "Favorites" should be white. But I can't change it.
Here is the HTML codes:
<html>
<head>
<title>Kanon's Smartphone Store</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="assets/css/custom.css" rel="stylesheet">
<!-- FontAwesome icon fonts -->
<link href="assets/css/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'>
<!-- Custom Theme files -->
<!-- <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />-->
<!-- <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />-->
<link href="css/fasthover.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
<!-- //Custom Theme files -->
<!-- Website Logo -->
<link rel="icon" href="assets/img/KS%20Large.jpg">
<!-- Animate.css -->
<link href="assets/css/animate.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<section id="navigation">
<header class="site-header" role="banner">
<nav class="navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<ul class="nav navbar-nav navbar-left">
<li class="active">Menu</li>
<li><i id="home-font-awesome-icon" class="fa fa-home"></i></li>
<li>Apartments</li>
<li>Townhouses</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div class="row">
<div class="col-md-12">
<div class="col-md-2 logo-1">
</div>
<div class="col-md-10">
<!--
<div id="rectangle">
<div class="col-md-2 phone-1">
<li><i id="home-font-awesome-icon" class="fa fa-phone"></i>1-800-000</li>
</div>
</div>
-->
<div class="col-md-10">
<ul class="nav navbar-nav navbar-left">
<li><i id="home-font-awesome-icon" class="fa fa-phone"></i>1-800-000</li>
<li><i id="home-font-awesome-icon" class="fa fa-sign-in"></i>Login/Sign up</li>
<li><i id="home-font-awesome-icon" class="fa fa-building"></i>My Properties</li>
<li><i id="home-font-awesome-icon" class="fa fa-star"></i>Favorites</li>
</ul>
</div>
<div class="col-md-12">
<ul class="nav navbar-nav navbar-left">
<li><i id="home-font-awesome-icon" class="fa fa-chevron-down"></i>Location (Any)</li>
<li><i id="home-font-awesome-icon" class="fa fa-chevron-down"></i>Property Type (Any)</li>
<li><i id="home-font-awesome-icon" class="fa fa-chevron-down"></i>Property Status (Any)</li>
<li>Search Here</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
</section>
Here is the CSS codes:
.navbar-custom{
color: white;
font-weight: bolder;
overflow: hidden;
}
#navigation {
background-color: grey;
width: 80%;
margin-left: 400px;
}
.navbar-brand{
color: black;
font-weight: bolder;
}
.navbar-brand:hover{
color: #00ff00;
font-weight: bolder;
}
.nav.navbar-nav.navbar-left li a{
color: black;
font-weight: bolder;
}
.nav.navbar-nav.navbar-left .active{
background-color:#F0B616;
font-weight: bolder;
}
.nav.navbar-nav.navbar-left li a:hover {
background-color: wheat;
color: #00ff00;
}
.icon-bar {
background-color:#FF0000 !important;
}
#home-font-awesome-icon{
font-size: 1.3em;
}
.logo-1 {
background: url(../img/Golden-real-estate-logo-vector.jpg);
height: 15%;
width: 15%;
background-size: cover;
text-align: center;
}
.phone-1 {
background-color: azure;
}
Here is the Codepen.io link:
https://codepen.io/kanan292/pen/xJzygG
I am really passionate about coding. I really need your help to complete this project. Then I will be able to move on backend development either with WordPress or Django or ASP.NET Core.
Looking forward to getting a great solution from you.
Everything seems to work out for me check this out => https://codepen.io/anon/pen/MBXzjK
.phone-1{
background-color: black;
}
.navbar-nav li:nth-child(2){
background-color: red;
}