I've started diving into HTML / CSS last week and i was studying some projects that I've found interesting to develop my skills and one of them was to create a basic parallax effect.
The problem is that when I use the min-height:100%; to define my first image height, the image doesn't appear on the webpage and I am struggling finding a solution online.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Estudo Navbar</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img class="logo" src="_images/logo.svg">
<nav>
<ul class="nav-links">
<li>Services</li>
<li>Projects</li>
<li>About us</li>
</ul>
</nav>
<a class=cta href="#"> <button>Contact</button></a>
</header>
<section class=caixa-parallax>
<div class="pimg1">
<div class="ptext">
<span class="border">
Bem vindo(a)!
</span>
</div>
</div>
<section class="section-light">
<h2>Section One</h2>
<p>
Lorem ipsum dolor
</p>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border">
Image 2 Text
</span>
</div>
</div>
<section class="section-dark">
<h2>Section Two</h2>
<p>
Lorem ipsum dolor
</section>
<div class="pimg3">
<div class="ptext">
<span class="border">
Section 3 Text
</span>
</div>
</div>
<section class="section-3">
<h2>Section Three</h2>
<p>
Lorem ipsum dolor
</p>
</section>
</section>
</body>
</html>
#import url('https://fonts.googleapis.com/css?family=Montserrat:500&display=swap');
body:not(header), html:not(header){
height: 100%;
margin: 0;
font-size: 16px;
font-family:"Montserrat", sans-serif;
font-weight:400;
line-height: 1.8em;
color:white;
}
* {
box-sizing: border-box;
margin:0;
padding:0;
background:#24252A;
}
a:link{
color:#ecf0f1;
}
a:visited{
color:#ecf0f1:none;
}
li, a, button {
font-family:"Montserrat", sans-serif;
font-weight:500;
font-size:16px;
color: #ecf0f1;
text-decoration:none;
}
header{
display:flex;
justify-content: flex-end;
align-items: center;
padding: 30px 10%;
}
.logo{
cursor:pointer;
margin-right:auto;
}
.nav-links{
list-style:none;
}
.nav-links li{
display:inline-block;
padding: 0 20px;
}
.nav-links li a{
transition: all 0.3s ease 0s;
}
.nav-links li a:hover{
color: #0088a9
}
button {
margin-left:30px;
padding: 9px 25px;
background: rgba(0,136,169,1);
border:none;
border-radius: 50px;
cursor:pointer;
transition: all 0.3 ease 0s;
}
button:hover {
background: rgba(0,136,169,0.8);
}
.pimg1{
background-image:url('../2/images/image1.jpg');
min-height:100%;
}
.pimg2{
background-image:url('../2/images/image2.jpg');
min-height:400px;
}
.pimg3{
background-image:url('../2/images/image3.jpg');
min-height:400px;
}
Related
As part of learning Web Development (#beginner) , I'm currently building a website that takes as a base the official Cover template: https://getbootstrap.com/docs/4.0/examples/cover/ .
I really like the design of the demo but I am not able to make the Navbar responsive without modifying the Navbar design.
I checked the documentation (https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors) but after various attempts it always get rid of the template design.
My goal is to create a responsive Navbar (hamburger menu) without losing the design of the template.
Could someone help a Web Development student with this issue? 🙌
Extract of my html and css files:
/*
* Globals
*/
/* Links */
a,
a:focus,
a:hover {
color: #fff;
}
/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
color: #333;
text-shadow: none; /* Prevent inheritance from `body` */
background-color: #fff;
border: .05rem solid #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background: linear-gradient(90deg,#0548f3 10%,#671ef4 110%);
background-repeat: no-repeat;
background-attachment: fixed;
}
body {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-pack: center;
-webkit-box-pack: center;
justify-content: center;
color: #fff;
}
.cover-container {
max-width: 44em;
}
/*
* Header
*/
.masthead {
margin-bottom: 200px;
}
.masthead-brand {
margin-bottom: 0;
}
.nav-masthead .nav-link {
padding: .25rem 0;
font-weight: 700;
color: rgba(255, 255, 255, .5);
background-color: transparent;
border-bottom: .25rem solid transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, .25);
}
.nav-masthead .nav-link + .nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
#media (min-width: 48em) {
.masthead-brand {
float: left;
}
.nav-masthead {
float: right;
}
}
/* Styling curated list page */
.page-list{
margin-bottom: 100px;
}
/*
* Cover
*/
.cover {
padding: 30 1.5rem;
}
.cover .btn-lg {
padding: .75rem 1.25rem;
font-weight: 700;
}
.headline {
font-family: "Inter";
}
/* Cards styling */
.tools-cards {
background-color: #262626 ;
}
.btn-primary{
background-color: #0335ff;
border-color: #001be6 ;
}
.card-boxing{
padding: 10px 10px 10px 10px;
}
.card {
border-radius: 12px;
}
.card-badge {
position:absolute;
top:-10px;
left:-10px;
padding:5px;
background:#00d57c;
color:white;
border-radius: 12px;
}
.card-badge-paid {
position:absolute;
top:-10px;
left:-10px;
padding:5px;
background:#f3b005;
color:white;
border-radius: 12px;
}
/*
* Footer
*/
.mastfoot {
color: rgba(255, 255, 255, .5);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="cover.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#800&display=swap" rel="stylesheet">
<title>Lorem ipsum dolor sit amet</title>
</head>
<body class="text-center">
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
<header class="masthead ">
<div class="inner">
<h3 class="masthead-brand">Lorem ipsum </h3>
<nav class="nav nav-masthead justify-content-center navbar-expand-lg">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">Page Number 1</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</div>
</header>
<main role="main" class="inner cover">
<h1 class="cover-heading headline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h1>
<hr>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="lead">
Lorem ipsum
</p>
</main>
<footer class="mastfoot mt-auto">
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
</footer>
</div>
</html>
Thanks in advance for the help. 🙌
Best,
Matt
I'm exercising about flexbox and I would create a simple layout. But I have some difficulties as can be seen from the code. I want split the content (the two sections in the code) in two parts: 30% and 70% but the flexbox instruction doesn't accomplish this. Why? How can I fix it?
Code on JSFiddle
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flex Layout</title>
<style type="text/css">
body,html{
margin:0px;
padding:0px;
box-sizing:border-box;
}
.container{
display: flex;
flex-wrap: wrap;
}
.mainheader{
flex:100%;
padding:35px 0;
color:white;
text-align: center;
background-color: rgb(50,180,200);
}
nav{
background-color: black;
flex:100%;
}
ul.navbar{
list-style:none;
overflow: hidden;
margin:0;
padding:0;
}
ul.navbar > li{
float:left;
text-align:center;
}
ul.navbar a:hover{
color:black;
background-color:white;
}
.navbar a{
display:block;
text-decoration:none;
color:white;
padding:15px;
font-size:large;
}
.side{
flex:30%;
padding:10px;
border:thin solid black;
}
.content{
flex:70%;
}
</style>
</head>
<body>
<div class="container">
<header class="mainheader">
<h1>My Website</h1>
<p>With a flexible layout</p>
</header>
<nav>
<ul class="navbar">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
<section class="side">
<header>
<h1>About me</h1>
</header>
<h4>
Photo of me
</h4>
</section>
<section class="content">
Lorem ipsum
</section>
</div>
</body>
</html>
It was a very very stupid mistake concerning the margins-paddings-borders. These when the dimension is in percentage are addicted to width, thus the second part of the layout wraps. To prevent this you have to use :
box-sizing:border-box;
but I'm a knob and I put this property inside html,body tags instead than the "*" selector:
This is the fix:
*{
box-sizing:border-box;
}
*{
margin:0;
padding:0;
}
html, body{
box-sizing:border-box;
height: 100vh;
}
body{
color:white;
height: 100%;
min-width: 100%;
background: url("images/friends.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: relative;
}
.container{
height: 100%;
width: 100%;
}
.container2{
width:80%;
margin:auto;
text-align:center;
}
header{
padding:1em;
margin: 0;
}
/*navigation styling*/
#navbar{
display: flex;
justify-content: space-between;
}
#navbar ul{
display:flex;
align-items:center;
list-style:none;
}
#navbar ul li a{
text-decoration:none;
padding:.75rem;
}
header nav li a:hover{
color:red;
transition:.75s;
}
/*login modal styling*/
#login-modal{
width:100%;
height:100%;
background-color:rgba(0, 0, 0, 0.5);
position: absolute;
top:0;
left:0;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
display: none;
}
#login-content{
height:80%;
width:25%;
position:relative;
background-color:red;
border-radius:2%;
display:flex;
flex-direction: column;
justify-content:center;
text-align:center;
}
.close{
position:absolute;
top:0;
right:5%;
cursor:pointer;
font-size: 30px;
}
.login-input{
display:block;
margin: 0 auto 1.5rem auto;
padding:.5rem;
border: 2px solid black;
border-radius:24px;
}
#login-logo{
height:6rem;
width:6rem;
margin-bottom: 2rem;;
}
.agreement{
margin:1.5rem 1rem;
}
/*remove border on inputs, etc.*/
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
.button{
width: 6rem;
height: 2.5rem;
color: red;
background-color:white;
border-radius:24px;
border:none;
cursor:pointer;
}
.button:hover{
color:white;
background-color: #861111;
transition:.75s;
}
a{
color:white;
}
/*main description of site for homepage*/
.maindescription{
margin:2rem;
}
.description-header{
font-size:4rem;
margin-bottom:.5rem;
}
.description{
margin-bottom: .75rem;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel="apple-touch-icon" sizes="180x180"
href="images\free_horizontal_on_white_by_logaster.jpg">
<link rel="icon" type="image/jpg" sizes="32x32"
href="images\free_horizontal_on_white_by_logaster.jpg">
<link rel="icon" type="image/jpg" sizes="16x16"
href="images\free_horizontal_on_white_by_logaster.jpg">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="resolve.css">
<title>Resolve - Real Women, Real Feedback</title>
</head>
<body>
<header>
<div class="container">
<nav id="navbar">
<div id="branding">
<a href="indexresolve.html"><img src="images/lasttry.png"
alt="resolvelogo"></a>
</div>
<ul>
<li><a href="indexresolve.html"Home></a></li>
<li><a class="current" href="howitworks.html">How It
Works</a></li>
<li>Contact</li>
<li>FAQ</li>
<li><button id="login" class="button">Log In</button>
</li>
</ul>
</nav>
<!-- Login Modal -->
<div id="login-modal">
<div id="login-content">
<span class="close">×</span>
<div>
<img id="login-logo"
src="images\free_horizontal_on_white_by_logaster.jpg">
</div>
<form>
<input class ="login-input" type="text"
placeholder="username" >
<input class ="login-input" type="password"
placeholder="password">
<button class="button" id="modalbutton">Log
In</button>
</form>
<p class="agreement">By clicking log in, you agree
to our Terms, <a href="privacy.html">Privacy
Policy</a>, and
our Cookie Policy.</p>
<P><a href="forgotpasswords">Forgot Username or
Password?</a></P>
</div>
</div>
<!--End Login Modal-->
</nav>
</header>
<section>
<!--Guys-->
<div class="container2">
<div class="maindescription">
<h1 class="description-header">Guys</h1>
<h2 class="description">Resolve is the new way to improve
your dating life. Get real women's unbiased feedback on your
dating profiles, the way you dress, your body language,
conversational skills, and more. Real, actionable advice on how to become a
man
that women will desire.</h2>
<button class="button">Get Started</button>
</div>
<!--Ladies-->
<div class="maindescription">
<h1 class="description-header">Ladies</h1>
<h2 class="description">dhkjfdah jdhfakjh jhafdkjh kjhfdalkjf lkjafhd
fhkahuf kjeuud eeuiw udhakje huidhf aufhlahfa fuashfeudhfyus fuaifhdsh
khadf alufhaliufhalifhaf sf! </h2>
<button class="button">Get Started</button>
</div>
</div>
</section>
<script src="resolve.js"></script>
</body>
</html>
I want my background image to cover 100% of the browser window, I do not care if it is cropped. Right now at a certain size, it cuts off at the bottom. I tried putting the background image in the HTML selector in CSS instead of the body selector but that did not work. Overflow: hidden worked but it cut off the content as well.
Here is my jsfiddle :https://jsfiddle.net/benmikola66/vu6btxpw/3/
You could change body to:
body {
color:white;
height: 100%;
min-width: 100%;
background: url("https://i.postimg.cc/5tJtgDD1/friends.jpg") no-repeat center center fixed;
background-size: cover;
}
Here is the fiddle
I'm trying to create a responsive header with a background image. When I add the off-canvass menu hamburger icon, I get a band of body background displayed at the top of the viewport.
What am I doing wrong?
html,
body {
margin: 0;
padding: 0;
height: 100%;
position: relative;
background: red;
font: 16px/1.75 Verdana, Arial, Helvetica, sans-serif
}
.toggle {
position: absolute;
right: 0.15em;
cursor: pointer;
color: white
}
.wrapper {
max-width: 78.75em;
margin: auto;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0)
}
.container {
background: yellow;
min-height: 100%;
padding: 0;
margin: 0
}
#header label {
padding: 0 0.125em;
font: 2.875em/1.4375em Arial
}
#header label:hover,
#menu label:hover {
color: grey
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
</head>
<body>
<!-- red -->
<div class="wrapper">
<div id="menu">
</div>
<!-- closing "#menu" -->
<div class="container">
<!-- yellow -->
<div id="header">
<img src="http://www.dragsdownunder.info/ralph/forums/greenbox.jpg" style="float:left; margin:0 0 0 0; max-width:100%; height:auto; border:0" alt="green box" title="green box">
<label for="main-nav-check" class="toggle" onclick="" title="Menu">≡</label>
</div>
<!-- closing "#header" -->
<h1>Test header 4</strong></h1>
<p>Lorem ipsum dolor sit amet, no pro mundi graeco pertinacia, et lorem conceptam complectitur sea. Eam no persecuti scriptorem. Ius an sadipscing consectetuer. Purto nostrum mel in. Ne sea congue homero.</p>
</div>
<!-- closing ".container" -->
</div>
<!-- closing ".wrapper" -->
</body>
</html>
I think problem is solved, have a look
html,
body {
margin: 0;
padding: 0;
height: 100%;
position: relative;
background: red;
font: 16px/1.75 Verdana, Arial, Helvetica, sans-serif
}
.toggle {
position: absolute;
right: 0.15em;
cursor: pointer;
color: white
}
.wrapper {
max-width: 78.75em;
margin: auto;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0)
}
.container {
background: yellow;
min-height: 100%;
padding: 0;
margin: 0
}
#header label {
padding: 0 0.125em;
font: 2.875em/1.4375em Arial
}
#header label:hover,
#menu label:hover {
color: grey
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
</head>
<body>
<!-- red -->
<div class="wrapper">
<div id="menu">
</div>
<!-- closing "#menu" -->
<div class="container">
<!-- yellow -->
<div id="header">
<img src="http://www.dragsdownunder.info/ralph/forums/greenbox.jpg" style="max-width:100%; height:auto; border:0" alt="green box" title="green box">
<label for="main-nav-check" class="toggle" onclick="" title="Menu">≡</label>
</div>
<!-- closing "#header" -->
<h1>Test header 4</strong></h1>
<p>Lorem ipsum dolor sit amet, no pro mundi graeco pertinacia, et lorem conceptam complectitur sea. Eam no persecuti scriptorem. Ius an sadipscing consectetuer. Purto nostrum mel in. Ne sea congue homero.</p>
</div>
<!-- closing ".container" -->
</div>
<!-- closing ".wrapper" -->
</body>
</html>
I am attempting to assemble a footer with Bootstrap. For some reason the footer links appear slightly off-center, despite making sure text-align: center; is applied. Is there a way ensure all text elements are indeed aligned properly?
HTML
<!DOCTYPE html>
<html>
<body>
<div class="container-fluid">
<section class="row-fluid">
<div class="span12">
<h1 class="landing">
Lorem Ipsum
</h1>
<h4 class="landing">
Lorem Ipsum Lorem Ipsum Lorem Ipsum
</h4>
</div>
</section>
</div>
<footer class="footer">
<section class="row-fluid">
<ul class="footer-links">
<li>
Contact
</li>
<li>
About
</li>
</ul>
</section>
</footer>
</body>
</html>
CSS
h1.landing {
text-align: center;
font-size: 400%;
}
h4.landing {
text-align: center;
}
.footer-links {
list-style-type: none;
text-align: center;
}
.footer-links li {
display: inline;
padding-right: 10px;
}
It appears that your UL has some left padding. Try removing it.
.footer-links {
list-style-type: none;
text-align: center;
padding:0px;
}
http://jsfiddle.net/S8mGk/1/