How can I move up the classes s1-textand s2-textso they're under the class shape (photograph of me).
I have tried using margin-top: 10px and top. However, nothing worked.
<style>
#nav_a {
width:40%;
}
#nav_img {
width:100%;
height: 30px;
margin-top: 10px;
vertical-align: middle;
}
#media (min-width: 768px) {
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
}
.body {
font-family: 'Roboto', sans-serif;
color: black;
}
.navbar.navbar-default {
background-color: #FFFFFF;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: right;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center;
}
.dropdown .dropdown-menu {
background-color: #FFFFFF;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: black;
text-decoration: none;
font-size: 14pt;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: black;
border-radius: 9px;
transition: all .2s;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
.section {
min-height: 100vh;
}
.one {
background-color: #FFFFFF;
}
.two {
background-color: #FFFFFF;
}
#sections .section {
padding-top: 50px;
}
.hero {
background: url("https://static.pexels.com/photos/38892/pexels-photo-38892.jpeg") center center no-repeat;
background-attachment: fixed;
background-size: cover;
width: 100%;
max-width: 100%;
width: 100vw;
height: 60%;
}
.shape {
border-radius: 25px;
background: #4D5061;
content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
color: white;
height: 300px;
margin: auto;
padding: 3px;
width: 300px;
top: 15%;
left: 50%;
position: absolute;
margin-left: -150px;
z-index: 10;
}
.fa-angle-down {
color: #0000;
bottom: 0px;
margin: 0 auto;
}
.fa-angle-up {
color: #0000;
bottom: 0px;
margin: 0 auto;
}
.s1-text {
text-align: center;
color: black;
z-index: 99;
font-size: 18pt;
}
.s2-text {
text-align: center;
color: black;
z-index: 99;
font-size: 18pt;
}
.center-block {
display: block;
margin-right: auto;
margin-top: 30px;
margin-left: 20px;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="nav_a" class="navbar-brand pull-left" href=""><img id="nav_img" class="img-responsive" src="http://i1126.photobucket.com/albums/l611/ldocherty1/logo1_zpsep8qps5m.png" alt="Logo design"></a>
<h5 class="nav-title text-center center-block hidden-sm hidden-md hidden-lg" id="nav-center">Liam Docherty's Digital Portfolio</h5>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-center">
<h5 class="nav-title text-center center-block hidden-xs ">Liam Docherty's Digital Portfolio</h5>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Unit 6
</li>
<li>Unit 14
</li>
<li>Unit 7
</li>
<li>Unit 1
</li>
</ul>
</li>
<li class="dropdown">
About <span class="caret"></span>
<ul class="dropdown-menu">
<li>About Me
</li>
<li>CV
</li>
<li>Education
</li>
</ul>
</li>
<li>Contact Me
</li>
</ul>
</div>
</div>
</nav>
<div id="sections">
<div class="section one">
<div class="shape"></div>
<div class="hero"></div>
<h1 class="s1-text center-block">WELCOME TO MY</h1>
<h1 class="s2-text center-block">PORTFOLIO</h1>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</div>
<section id="contact-me" class="section two">
<i class="fa fa-angle-up" style="font-size:100px;"></i>
</div>
<script>
$(document).ready(function() {
$('#sections').fullpage();
});
</script>
</body>
</html>
Move s1-text and s2-text inside the .hero class:
<div class="hero">
<h1 class="s1-text center-block">WELCOME TO MY</h1>
<h1 class="s2-text center-block">PORTFOLIO</h1>
</div>
Add position: relative; to .hero class, so that the absolutely positioned s1-text and s2-text stay inside hero:
.hero {
background: url("https://static.pexels.com/photos/38892/pexels-photo-38892.jpeg") center center no-repeat;
background-attachment: fixed;
background-size: cover;
width: 100%;
max-width: 100%;
width: 100vw;
height: 60%;
position: relative;
}
And then add absolute positioning to the texts like this:
.s1-text {
text-align: center;
color: black;
z-index: 99;
position: absolute;
bottom: 60px;
left: 0;
right: 0;
}
.s2-text {
text-align: center;
color: black;
z-index: 99;
position: absolute;
bottom: 10px;
left: 0;
right: 0;
}
Working Demo On Codepen
Move classes s1-text and s2-text in div with class heroand then add padding-top:400px; to .hero in your css.
<div class="hero">
<h1 class="s1-text center-block">WELCOME TO MY</h1>
<h1 class="s2-text center-block">PORTFOLIO</h1>
</div>
and in css add following:
.hero{
padding-top: 400px;
}
Related
With right: 0;, The menu is appearing on the right side. When I want to close it, I'm changing to right: -200px; so that I get the mobile page without the menu coming to the right. I want the fa-bars symbol to appear when the menu is not opened (right: -200px;), and the fa-xmark element when the menu is appearing (right: 0px;). I've tried many variations of the code and I still couldn't manage to do it.
#media (max-width: 700px) {
.nav_links ul li {
display: block;
}
nav .fa-bars {
display: block;
color: black;
margin: 10px;
font-size: 22px;
cursor: pointer;
position: absolute;
}
.nav_links {
position: absolute;
background: lightpink;
height: 100vh;
width: 200px;
top: 0;
right: 0px;
text-align: left;
z-index: 2;
}
nav .fa-xmark {
display: block;
color: black;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
}
<nav class="nav_links">
<i class="fa-solid fa-xmark"></i>
<ul>
<li>Home</li>
<li>About</li>
<li>Page</li>
<a class="button1" href="#"><button>My Instagram</button></a>
</ul>
<i class="fa-solid fa-bars"></i>
</nav>
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<style>
#media (max-width: 700px) {
body {
overflow-x: hidden;
}
.nav-container {
height: 300px;
position: absolute;
right: 0;
top: 0;
}
.nav-container i {
float: right;
margin: 10px;
cursor: pointer;
}
.nav-links {
position: absolute;
list-style: none;
top: 30px;
right: 0;
width: 100px;
padding: 20px ;
background: pink;
transition: 0.3s linear;
}
.nav-links.active {
right: -140px;
}
.nav-links li {
margin: 20px;
}
.nav-links li a {
color: black;
text-decoration: none;
}
}
</style>
</head>
<body>
<nav class="nav-container">
<i onclick="hanldeMenuClick()" class="fas fa-bars"></i>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Page</li>
<a class="button1" href="#"><button>My Instagram</button></a>
</ul>
</nav>
<script>
const btn = document.querySelector(".fas");
const navLinks = document.querySelector(".nav-links");
function hanldeMenuClick() {
navLinks.classList.toggle("active");
}
</script>
</body>
</html>
I'm trying to reproduce a website in HTML et css. In my code, I have differents lists, each on with differents css properties. In my browser, the properties are mixed, and I can't understand...
My html code :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="file:///my css !/css/odpf.css" >
<title>Olympiades</title>
</head>
<body>
<div id="barre_haut">
</div>
<div id="wrapper">
<div class="container bg-white">
<nav>
<ul id="menu_haut" class="nav flex-column flex-md-row justify-content-end">
<li id="menu_haut" class="nav-item"><a class="nav-link" href="#">Recherche</a></li>
<li id="menu_haut" class="nav-item menurouge"><a class="nav-link" href="#">Connexion</a></li>
<li id="menu_haut" class="nav-item"><a class="nav-link" href="#">Mon compte</a></li>
<li id="menu_haut" class="nav-item"><a class="nav-link" href="#">Presse</a></li>
</ul>
</nav>
<div class="row ">
<div class="col-md-4 bg-white"><div class="position-absolute" style="bottom:0px; left:35px"><img src="https://odpf.org/templates/odpftemplate/img/site-logo-398x106.png" alt="Logo Olympiades" style="width:100%; height:auto"></div></div>
<div class="col-md-3 bg-white"></div>
<div class="col-md-5 bg-white pr-0"><img src="https://odpf.org/templates/odpftemplate/img/home-rightcol-top2.png" alt="image_en_tete" style="width:100%; height:auto"></div>
</div>
<div class="row">
<div class="col-md-4 col-gche-accueil ">
<div class="row px-3 pb-0">
<img src="https://odpf.org/images/odpf_slider_home_08.jpg" style="width:100%; height:auto">
<div class="menugche">
<h3 class="mt-1">les olympiades de physique france</h3>
<ul>
<li class="menugche">C'est quoi ?</li>
<li class="menugche">Comment ça se passe ?</li>
</ul>
<h3 class="mt-1">Revivez les éditions passées</h3>
<ul>
<li class="menugche">Archives</li>
<li class="menugche">Les mémoires</li>
<li class="menugche">Colloque de la 20ème édition</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="barre_bas">
</div>
</body>
</html>
And my css :
#import url(http://fonts.googleapis.com/css?family=Oxygen:400,300,700);
body {
margin:0;
padding:0;
background: url('../images/bg-home.png') no-repeat center fixed;
background-size: cover;
}
a {
text-decoration: none;
color:black;
}
.menurouge {
background-color: #b1191d;
color: white;
}
.menurouge a {
text-decoration: none;
color:white;
}
.fondnoir {
background-color: black;
color: white;
}
/* Header */
#barre_haut {
background-color: black;
height: 16px;
width: 100%;
}
#wrapper {
background-color: #555f69;
/*position: relative;
top:16px;*/
height: 35px;
width: 100%;
padding: 0;
}
.container {
width:100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width: 576px){
.container {
max-width: 540px;
}
}
#media (min-width: 786px){
.container {
max-width: 720px;
}
}
#media (min-width: 992px){
.container {
max-width: 960px;
}
}
#media (min-width: 1200px){
.container {
max-width: 960px;
}
#barre_bas {
clear: both;
width: 100%;
background-color: #555f69;
height: 10px;
}
#menu_haut {
height: 35px;
background-color: white;
color: black;
font-family: 'Oxygen', sans-serif;
font-size: 12px;
font-weight: 300;
text-align: center;
text-transform: uppercase;
list-style-type: none;
text-decoration: none;
}
.col-gche-accueil {
background-color: black;
width: 100%;
float: left;
position: relative;
padding: 46px 20px 20px;
}
.col-gche-accueil::before {
content: ' ';
background: url('https://odpf.org/templates/odpftemplate/img/home-leftcol-top.png') no-repeat;
width: 100%;
height: 101px;
top: 0;
left: 0;
position: absolute;
z-index: 10;
}
.menugche h3 {
font-family: 'Oxygen', sans-serif;
font-size: 40px;
line-height:43px;
font-weight: 300;
color: #ffffff;
text-transform: uppercase;
margin: 14px 0 8px;
}
.menugche ul li:before {
content: '';
display: block;
}
.menugche ul li:after {
content: '';
display: table;
clear: both;
}
.menugche ul,li,a {
background-color: #b1191d;
color: #ffffff;
display: block;
font-size: 18px;
line-height: 20px;
list-style-type: none;
text-decoration: none;
padding: 3px 0 0;
margin: 0;
}
And, tipycally, my menu line in beginning should be black on withe, in 12, and it appears withe on red, in 20 with properties defined by "menugche"....
What's wrong in my head ?
Thank you in advance !
.menugche ul,li,a {
This defines three separate rules:
Any ul element which is a descendant of an element with the menugche class;
Any li element;
Any a element;
I suspect you wanted the rules to be:
Any ul element which is a descendant of an element with the menugche class;
Any li element which is a descendant of an element with the menugche class;
Any a element which is a descendant of an element with the menugche class;
If that's the case, you'll need to repeat the class name:
.menugche ul, .menugche li, .menugche a {
I'm attempting to familiarise myself with Bootstrap in order to build a responsive website for an assignment, and have based my design off of this template.
I have replaced the main body of content with a landing screen for my website that involves a carousel (complete with captions) for the background image, as well as the website's logo in the centre of the page. Aside from the text upon it, the navbar remains unchanged.
Everything on the page is wrapped inside a wrapper div, which contains a sidebar nav for the sidebar, and a content div for the rest of the page content. Inside the content div is the bg div (contains the carousel, including its indicators and captions), hdr div (containing the toggle sidebar button as seen in the demo), and the body div (containing the logo).
Ideally, I would like everything within the content div to behave as if it were 'fixed'. I want the logo, background, carousel indicators, captions, etc. to remain in the viewport when the webpage is scrolled. However, I cannot set the position to 'fixed' as it breaks the navbar.
For now, I also have my bg div set to position 'absolute' so that the carousel captions/indicators remain in the centre of the page when the navbar is expanded or collapsed. So not only do my elements not remain fixed as I would like them, there is also tons of whitespace at the bottom of the page when the web page is viewed at lower resolutions.
Below is the code for my website.
/*
DEMO STYLE
*/
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
img {
display: block;
max-width: 100%;
height: auto;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a, a:hover, a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
i, span {
display: inline-block;
}
.carousel-item {
height: 100vh;
min-height: 300px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
.carousel-caption h3 {
font-size: 2.5vw;
}
.carousel-caption p {
font-size: 1.5vw;
}
.carousel-indicators {
position: absolute;
margin-right: auto;
margin-left: auto;
}
.carousel-caption {
position: absolute;
margin-right: auto;
margin-left: auto;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
min-width: 80px;
max-width: 80px;
text-align: center;
}
#sidebar.active .sidebar-header h3, #sidebar.active .CTAs {
display: none;
}
#sidebar.active .sidebar-header strong {
display: block;
}
#sidebar ul li a {
text-align: left;
}
#sidebar.active ul li a {
padding: 20px 10px;
text-align: center;
font-size: 0.85em;
}
#sidebar.active ul li a i {
margin-right: 0;
display: block;
font-size: 1.8em;
margin-bottom: 5px;
}
#sidebar.active ul ul a {
padding: 10px !important;
}
#sidebar.active a[aria-expanded="false"]::before, #sidebar.active a[aria-expanded="true"]::before {
top: auto;
bottom: 5px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar .sidebar-header strong {
display: none;
font-size: 1.8em;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li a i {
margin-right: 10px;
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
content: '\f078';
display: block;
position: absolute;
right: 20px;
font-family: FontAwesome;
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\f077';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article, a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
padding: 0;
min-height: 100vh;
transition: all 0.3s;
position: relative;
width: auto;
height: auto;
}
#hdr {
position: relative;
z-index: 100;
padding: 20px;
}
#bg {
position: fixed;
top: 0;
left: 0;
z-index: -100;
width: 100%;
height: 100%;
}
#body {
height: 84%;
}
#logo {
position: relative;
width: 30%;
height: 30%;
top: 5%;
margin-top: auto;
margin-left: auto;
margin-right: auto;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
min-width: 80px;
max-width: 80px;
text-align: center;
margin-left: -80px !important ;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
top: auto;
bottom: 5px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar.active {
margin-left: 0 !important;
}
#sidebar .sidebar-header h3, #sidebar .CTAs {
display: none;
}
#sidebar .sidebar-header strong {
display: block;
}
#sidebar ul li a {
padding: 20px 10px;
}
#sidebar ul li a span {
font-size: 0.85em;
}
#sidebar ul li a i {
margin-right: 0;
display: block;
}
#sidebar ul ul a {
padding: 10px !important;
}
#sidebar ul li a i {
font-size: 1.3em;
}
#sidebar {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel=stylesheet type=text/css href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Website</h3>
<strong>W</strong>
</div>
<ul class="list-unstyled components">
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">
<i class="fas fa-home"></i>
Home
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>
<a href="#">
<i class="fas fa-briefcase"></i>
About
</a>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">
<i class="fas fa-newspaper"></i>
Pages
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li>
<a href="#">
<i class="fas fa-link"></i>
Portfolio
</a>
</li>
<li>
<a href="#">
<i class="fas fa-paperclip"></i>
FAQ
</a>
</li>
<li>
<a href="#">
<i class="fas fa-at"></i>
Contact
</a>
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>Download source</li>
<li>Back to article</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content" class="container-fluid" style="width:100%;overflow:hidden;">
<div id="bg" style="width:100% !important;position:absolute;">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active" style="background-image: url('https://www.publicdomainpictures.net/pictures/170000/velka/red-purple-pattern-background.jpg');">
<div class="carousel-caption">
<h3>First Slide</h3>
<p>This is a description for the first slide.</p>
</div>
</div>
<div class="carousel-item" style="background-image: url('https://www.publicdomainpictures.net/pictures/140000/velka/cool-calm-green-water-background.jpg');">
<div class="carousel-caption">
<h3>Second Slide</h3>
<p>This is a description for the second slide.</p>
</div>
</div>
<div class="carousel-item" style="background-image: url('https://www.publicdomainpictures.net/pictures/170000/velka/blue-brush-strokes-background.jpg');">
<div class="carousel-caption">
<h3>Third Slide</h3>
<p>This is a description for the third slide.</p>
</div>
</div>
</div>
</div>
</div>
<div id="hdr">
<nav class="navbar navbar-default" style="background-color:rgba(0,0,0,0);">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="fas fa-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
</div>
</nav>
</div>
<div id="body" class="container-fluid">
<img id="logo" src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png">
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
</body>
</html>
What can I do?
body {
margin: 0px;
font-family: verdana, georgia;
overflow-x: hidden;
}
/*****************Blocks*********************/
.navbar {
background-color: #fff;
height: 90px;
width: 100%;
top:0px;
margin-left: 250px;
}
.topContent {
background-color: #eceff1;
height: 200px;
width:100%;
margin-left: 250px;
}
.mainContent {
background-color: #e5e5e5;
height: 800px;
width:800px;
margin-left: 250px;
}
.leftSideNav1 {
height: 100%;
width: 80px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #37474f;
}
.leftSideNav2 {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 80px;
background-color: #263238;
text-decoration: none;
}
/*****************Elements*********************/
.leftSideNav1__lists a{
font-size: 10px;
color: #eee;
padding-top: 30px;
margin-left: 10px;
text-decoration: none;
}
.leftSideNav2 {
font-size: 12px;
}
.leftSideNav2 .leftSideNav2__lists > ul{
padding-top: 80px;
}
.leftSideNav2__lists ul {
list-style: none;
padding-bottom: 10px;
}
<body>
<div class="container">
<div class="navbar">
</div>
<div class="topContent">
</div>
<div class="mainContent">
</div>
<div class="leftSideNav1">
<div class="leftSideNav1__lists">
<!-- <i class="fa fa-home w3-large"></i> -->
<i class="Tiny material-icons">home</i><br>
Home<br>
<i class="material-icons">pause</i><br>
YouTubers<br>
<i class="material-icons">assignment</i><br>
Campaigns<br>
<i class="material-icons">message</i><br>
Messages<br>
<i class="material-icons">pause</i><br>
Videos<br>
</div>
</div>
<div class="leftSideNav2">
<div class="leftSideNav2__lists">
<ul class="leftSideNav2__list1">Videos
<li>Action Required</li>
<li>Fund YouTuber</li>
<li>Hired & Funded</li>
<li>Edit Requested</li>
</ul>
<ul class="leftSideNav2__list2">Proposals
<li>New</li>
<li>Declined</li>
<li>Changes Required</li>
<li>Changes Declined</li>
</ul>
<ul class="leftSideNav2__list3">Approvals
<li>Waiting for Approval</li>
<li>Approved / Completed</li>
<li>Video in Dispute</li>
</ul>
</div>
</div>
</div>
</body>
Codepen
I have an issue with the anchor links and lists in the sidebars. I am unable to align the anchor links and lists in the 2 sidebars. I am trying to apply the CSS properties but they aren't applying perhaps due to improper hierarchical style of applying.
Currently, this is how it looks:
But this is how I want it to look:
you can do it setting the parent container
.leftSideNav1__lists{
text-align:center;
}
an also removing the left margin from each a tag..
codepen
body {
margin: 0px;
font-family: verdana, georgia;
overflow-x: hidden;
}
/*****************Blocks*********************/
.navbar {
background-color: #fff;
height: 90px;
width: 100%;
top:0px;
margin-left: 250px;
}
.topContent {
background-color: #eceff1;
height: 200px;
width:100%;
margin-left: 250px;
}
.mainContent {
background-color: #e5e5e5;
height: 800px;
width:800px;
margin-left: 250px;
}
.leftSideNav1 {
height: 100%;
width: 80px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #37474f;
}
.leftSideNav2 {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 80px;
background-color: #263238;
text-decoration: none;
}
/*****************Elements*********************/
.leftSideNav1__lists a{
display: block;
text-align: center;
font-size: 10px;
color: #eee;
text-decoration: none;
margin-bottom: 20px;
}
.leftSideNav2 {
font-size: 12px;
}
.leftSideNav2 .leftSideNav2__lists > ul{
}
.leftSideNav2__lists ul {
list-style: none;
}
.leftSideNav1__lists > i{
display: block;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<body>
<div class="container">
<div class="navbar">
</div>
<div class="topContent">
</div>
<div class="mainContent">
</div>
<div class="leftSideNav1">
<div class="leftSideNav1__lists">
<!-- <i class="fa fa-home w3-large"></i> -->
<i class="Tiny material-icons">home</i>
Home
<i class="material-icons">pause</i>
YouTubers
<i class="material-icons">assignment</i>
Campaigns
<i class="material-icons">message</i>
Messages
<i class="material-icons">pause</i>
Videos
</div>
</div>
<div class="leftSideNav2">
<div class="leftSideNav2__lists">
<ul class="leftSideNav2__list1">Videos
<li>Action Required</li>
<li>Fund YouTuber</li>
<li>Hired & Funded</li>
<li>Edit Requested</li>
</ul>
<ul class="leftSideNav2__list2">Proposals
<li>New</li>
<li>Declined</li>
<li>Changes Required</li>
<li>Changes Declined</li>
</ul>
<ul class="leftSideNav2__list3">Approvals
<li>Waiting for Approval</li>
<li>Approved / Completed</li>
<li>Video in Dispute</li>
</ul>
</div>
</div>
</div>
</body>
Try this.
I was wondering how can I make my background image using bootstrap 'img-responsive'? The background image is with in herodiv
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liam Docherty Digital Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<style>
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: right;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center
}
.dropdown .dropdown-menu {
background-color: #4D5061;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: #FFFFFF;
border-radius: 9px;
transition: all .2s;
}
.navbar.navbar-default ul li a:hover {
color: white;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.nav-title {
font-size: 14pt;
margin: 0;
top: 35px;
left: 50px;
width: 100%;
position: absolute;
text-align: center;
color: white;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
.hero {
background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
background-attachment: fixed;
position: relative;
text-align: center;
width: 100%;
max-width: 100%;
width: 100vw;
height: 100%;
}
section {
position: relative;
height: 95vh;
}
.section1 {
height: 100vh;
text-align: center;
color: white;
}
.section2 {
background-color: #11B5E4;
text-align: center;
color: white;
}
.section3 {
background-color: #FFFFFF;
text-align: center;
color: white;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.fa-angle-up {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.footer {
height: 6vh;
background-color: #4D5061;
padding: 0;
right: 0;
bottom: 0;
left: 0;
}
.footertext {
font-size: 14pt;
color: white;
font-family: 'Roboto', sans-serif;
text-align: center;
}
.profile.box {
bottom: 0;
height: 50%;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 50%;
}
.shape {
border-radius: 25px;
background: #4D5061;
content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
color: white;
height: 250px;
margin: auto;
padding: 3px;
width: 250px;
}
.shape2 {
background: linear-gradient(35deg, #4D5061, #4D5061);
border-radius: 85px;
color: white;
height: 40px;
margin: 1% auto;
opacity: 0.9;
padding: 0px;
width: 250px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
<h1 class="nav-title">Liam Docherty's Digital Portfolio</h1>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<section id="section1" class="section1">
<div class="hero">
<div class="profile box">
<div class="shape"></div>
<div class="shape2">
<p>kjjjjjjjjjkjjjkkjkj</p>
</div>
</div>
</div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
</html>
Use background-size: cover
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
cover - A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.
Alternatively you might try contain depending on your desired behavior, but from the looks of your portfolio, cover is what you want
contain: A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color.
* edit - also added background-position: center center; background-repeat: no-repeat; in the shorthand background property for .hero since from the looks of your portfolio, you want those.
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liam Docherty Digital Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<style>
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: right;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center
}
.dropdown .dropdown-menu {
background-color: #4D5061;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: #FFFFFF;
border-radius: 9px;
transition: all .2s;
}
.navbar.navbar-default ul li a:hover {
color: white;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.nav-title {
font-size: 14pt;
margin: 0;
top: 35px;
left: 50px;
width: 100%;
position: absolute;
text-align: center;
color: white;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
.hero {
background: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg") center center no-repeat;;
background-attachment: fixed;
position: relative;
background-size: cover;
text-align: center;
width: 100%;
max-width: 100%;
width: 100vw;
height: 100%;
}
section {
position: relative;
height: 95vh;
}
.section1 {
height: 100vh;
text-align: center;
color: white;
}
.section2 {
background-color: #11B5E4;
text-align: center;
color: white;
}
.section3 {
background-color: #FFFFFF;
text-align: center;
color: white;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.fa-angle-up {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.footer {
height: 6vh;
background-color: #4D5061;
padding: 0;
right: 0;
bottom: 0;
left: 0;
}
.footertext {
font-size: 14pt;
color: white;
font-family: 'Roboto', sans-serif;
text-align: center;
}
.profile.box {
bottom: 0;
height: 50%;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 50%;
}
.shape {
border-radius: 25px;
background: #4D5061;
content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
color: white;
height: 250px;
margin: auto;
padding: 3px;
width: 250px;
}
.shape2 {
background: linear-gradient(35deg, #4D5061, #4D5061);
border-radius: 85px;
color: white;
height: 40px;
margin: 1% auto;
opacity: 0.9;
padding: 0px;
width: 250px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
<h1 class="nav-title">Liam Docherty's Digital Portfolio</h1>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<section id="section1" class="section1">
<div class="hero">
<div class="profile box">
<div class="shape"></div>
<div class="shape2">
<p>kjjjjjjjjjkjjjkkjkj</p>
</div>
</div>
</div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
</html>
You can try
<div>
<img src="IMAGE LINK" style='width:100%;' border="0" alt="Null">
</div>
Source: Make an image responsive - simplest way
I personally use Jquery's Backstretch. The code is responsive and easy to plug in by using:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
And then adding the style/image to a .css doc like so:
<style>
.content-wrapper {
/* This image will be displayed fullscreen */
background: url('http://site.rockbottomgolf.com/blog_images/Hole%2012%20-%20Imgur.jpg') no-repeat center fixed;
scroll-x /* Ensure the html element always takes up the full height of the browser window */ min-height: 100%;
/* The Magic */
background-size: cover;
}
</style>
EDIT!! - I posted a link to Jquery but not the actual responsive backstretch plugin. Note you must keep the required script above and then add backstretch following it since it is a dependency.
Download The Backstretch Plugin Here
You would then add the script as follows:
<script src="example.com/relative-Path/jquery.backstretch.min.js"></script>