I am a beginner. I have been following a course for less than a week. I wanted to add credits for the images I used which was not a step in the tutorial. I added a footer and now there is a gap between it and the rest of the div elements. I have searched and the only thing that worked for me was
* {
padding: 0px;
margin: 0px``
}
but this messed up some of the rest of the page. I have tried adding margin 0 and padding 0 to many things but no luck. I am sorry if this has been answered before but I do not know what to search for. I have looked on chrome and the gap seems to have something to do with the body but I have set the padding and margin to 0.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
<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=Merriweather:wght#300&family=Montserrat&family=Sacramento&display=swap" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img class="top-cloud" src="images/cloud.png" alt="cloud-img">
<h1>I'm Matthew</h1>
<p>
A programmer???
</p>
<img class="bottom-cloud" src="images/cloud.png" alt="cloud-img">
<img src="images/mountain.png" alt="mountain-img">
</div>
<div class="middle-container">
<div class="profile">
<img src="images/photo.png" alt="portrait">
<h2>Hello.</h2>
<p></p>
</div>
<hr>
<div class="skills">
<h2>My Skills.</h2>
<div class="skill-row">
<img class="" src="images/online-test.png" alt="computer">
<h3>Web</h3>
<p>.</p>
</div>
<div class="skill-row">
<img class="" src="images/france.png" alt="flag">
<h3>French Learner</h3>
<p></p>
</div>
</div>
<hr>
<div class="contact-me">
<h2>Get In Touch</h2>
<h3>PLease email if you have any questions</h3>
<p>I look forward to hearing from you.</p>
<a class="btn" href="mailto:">CONTACT ME</a>
</div>
</div>
<div class="bottom-container">
<a class="footer-link" href="https://www.linkedin.com/">LinkedIn</a>
<a class="footer-link" href="https://twitter.com">Twitter</a>
<a class="footer-link" href="https://www.appbrewery.co/">Website</a>
<p>© Matthew Osborne.</p>
</div>
<footer>
Computer icons created by Freepik - Flaticon
French icons created by IYAHICON - Flaticon
</footer>
</body>
</html>
Just set the overflow of the bottom container to auto. This removes the unnecessary margin caused by the p tag. p { margin: 0; } works too
.bottom-container {
overflow: auto;
background: pink;
}
footer {
background: yellow;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
<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=Merriweather:wght#300&family=Montserrat&family=Sacramento&display=swap" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img class="top-cloud" src="images/cloud.png" alt="cloud-img">
<h1>I'm Matthew</h1>
<p>
A programmer???
</p>
<img class="bottom-cloud" src="images/cloud.png" alt="cloud-img">
<img src="images/mountain.png" alt="mountain-img">
</div>
<div class="middle-container">
<div class="profile">
<img src="images/photo.png" alt="portrait">
<h2>Hello.</h2>
<p></p>
</div>
<hr>
<div class="skills">
<h2>My Skills.</h2>
<div class="skill-row">
<img class="" src="images/online-test.png" alt="computer">
<h3>Web</h3>
<p>.</p>
</div>
<div class="skill-row">
<img class="" src="images/france.png" alt="flag">
<h3>French Learner</h3>
<p></p>
</div>
</div>
<hr>
<div class="contact-me">
<h2>Get In Touch</h2>
<h3>PLease email if you have any questions</h3>
<p>I look forward to hearing from you.</p>
<a class="btn" href="mailto:">CONTACT ME</a>
</div>
</div>
<div class="bottom-container">
<a class="footer-link" href="https://www.linkedin.com/">LinkedIn</a>
<a class="footer-link" href="https://twitter.com">Twitter</a>
<a class="footer-link" href="https://www.appbrewery.co/">Website</a>
<p>© Matthew Osborne.</p>
</div>
<footer>
Computer icons created by Freepik - Flaticon
French icons created by IYAHICON - Flaticon
</footer>
</body>
</html>
If I understood you correctly, <p> has an intrinsic margin and giving the space. Please see the attachment.
Removing the margin for the <p> gives no space between your name credit and the footer.
Related
I have this code
https://jsfiddle.net/kxrmcpzn/
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Landing Page</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<!-- Place favicon.ico in the root directory -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
</head>
<style type="text/css" media="screen">
.flex-even {
flex: 1;
}
.hero,
.navbar {
background-color: #1f2937;
color: #f9faf8;
}
</style>
<body>
<div class="container">
<div class="navbar">
<div class="logo">Header Logo</div>
<div class="navbar-items">
header link one
header link two
header link three
</div>
</div>
<div class="hero d-flex">
<div class="flex-even">
<h1>This website is awesome</h1>
<p>
This website has some subtext that goes here under the main title.
It's a smaller font and the color is lower contrast
</p>
<button class="btn btn-primary">Sign up</button>
</div>
<div class="flex-even">
<img src="https://via.placeholder.com/350x150" />
</div>
</div>
<div>
<h2 class="fw-bold text-center">Some random information</h2>
<div class="d-flex">
<div>
<img src="https://via.placeholder.com/150" alt="" />
<p>this is some subtext under an illustration or image</p>
</div>
<div>
<img src="https://via.placeholder.com/150" alt="" />
<p>this is some subtext under an illustration or image</p>
</div>
<div>
<img src="https://via.placeholder.com/150" alt="" />
<p>this is some subtext under an illustration or image</p>
</div>
<div>
<img src="https://via.placeholder.com/150" alt="" />
<p>this is some subtext under an illustration or image</p>
</div>
</div>
</div>
<div>
<p>
This is an inspiring quote, or a testimonial from a customer. Maybe
it's just filling up space, or maybe people will actually read it. Who
knows? All I know is that it looks nice.
</p>
<p class="fw-bold">-Thor, God of Thunder</p>
</div>
<div class="d-flex bg-primary text-white p-3 rounded">
<div>
<p class="fw-bold">Call to action! It's time!</p>
<p>
Sign up for our product by clicking that button right over there
</p>
</div>
<div>
<button class="btn btn-light">Sign up</button>
</div>
</div>
</div>
</body>
</html>
I want the width of each element inside outer div is full page width 100% like this
https://cdn.statically.io/gh/TheOdinProject/curriculum/main/foundations/html_css/project/odin-project.png
I try using class container-fluid but the text will not be inside container
You could combine container-fluid and container:
<div class="container-fluid navbar">
<div class="container">
...
</div>
</div>
#home::before
{
content: "";
position: absolute;
background: url(1a.jpg) no-repeat center center/cover;
/* opacity: 1; */
height: 100%;
width: 100%;
z-index: -1;
filter: blur(1.5px);
}
here's my code but I want to include only a specific part of image to cover the whole background ..any suggestions/
<!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">
<title>cakes by nandani</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Allura&display=swap" rel="stylesheet">
</head>
<body>
<nav id="navbar">
<div id="leftpor">
<ul>
<li class="items">Home</li>
<li class="items">About us</li>
<li class="items">Items</li>
</ul>
</div>
<!-- <div id="logo"><img src="logo.png" alt="Cakes by nandani"></div> -->
<div id="rightpor">
<ul>
<li class="items">Contact</li>
<li class="items">Gallery</li>
<li class="items">Our Story</li>
</ul>
</div>
</nav>
<section id="home">
<a class="Brand center"> Cakes By Nandani</a>
<a class="Tag center"> Many Emotiions One delight</a>
<button class="btn">Order Now</button>
</section>
<section id="services-container">
<h1 class="hprimary center">Our services</h1>
<div id="services">
<div class="box">
<img src="Oreo.jpg" alt="">
<p class="center">Oreo</p>
</div>
<div class="box">
<img src="Oreo.jpg" alt="">
<p class="center">Oreo</p>
</div>
<div class="box">
<img src="Oreo.jpg" alt="">
<p class="center">Oreo</p>
</div>
</div>
</section>
</body>
</html>
enter code here
only some part of image is cropped and used ....how to stop that
My HTML file is :-
<!DOCTYPE html>
<html>
<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>Kitty Portfolio</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/100x100" class="img-responsive" alt="Logo">
</div>
<div class="col-md-6 text-uppercase text-right">
<h1 class="super-text">Jane Doette</h1>
<h3>Front-end Ninja</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/1140x350" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Featured Work</h2>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<img src="http://placehold.it/555x300" class="img-responsive">
<h3>Appify</h3>
<p>Link to project</p>
</div>
<div class="col-md-4">
<img src="http://placehold.it/555x300" class="img-responsive">
<h3>Sunflower</h3>
<p>Link to project</p>
</div>
<div class="col-md-4">
<img src="http://placehold.it/555x300" class="img-responsive">
<h3>Bokeh</h3>
<p>Link to project</p>
</div>
</div>
</div>
</body>
</html>
And my css file is :-
.super-text {
font-size: 60px;
font-weight: 200;
}
body {
font-family: 'Lato', sans-serif;
color: #747704;
font-weight: 100;
}
Now, When I open the html file in a browser. The font style and color makes it but the font-weight is nor affecting the any text on the screen. I tried mozilla firefox, chrome and internet explorer and none of these browsers do any good. Does anyone know where my problem might be lying.
change font-eight in your CSS to 700px
i didn't encounter any problem with none of these 3 browsers but i got better results with
font-size: 60pt;
instead of using px in css file for size.
For font-weight don't use numbers, valid values are ;
normal|lighter|bold|bolder|value|initial| inherit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,100' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6"><img src="http://placehold.it/150x150" class="img-responsive title-logo"></div>
<div class="col-md-6 text-right text-uppercase title-thin">
<h1>Trevor Cleworth</h1>
<h3>Junior Web Developer</h3>
</div>
</div>
<div class="row">
<hr>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/1400x350" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3>Featured Work</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
</div>
</div>
This is the code that is connected with my CSS file, the font family will work but the font weight will not, does anyone see why this is? I will link my CSS below. I have been trying to figure out the problem for about thirty minutes but I haven't been able to find anything. If somebody could please show me what the problem is I would appreciate it a ton!
body {
font-family: 'Lato', sans-serif;
font-weight: 300;
color: #333333;
}
add #import url(http://fonts.googleapis.com/css?family=Lato); to your css sheet.
then tell me how it works, I don't have Lato font in my Windows fonts on my laptop
Need the Portfolio and Services buttons turned around to lie horizontally and in line with the About Us and Contacts buttons.
I can provide the CSS if needed.
Preview of what the website looks now:
very confusing
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<link rel="icon" href="images/favicon.ico">
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.1.1.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.equalheights.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script>
</script>
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home? strong textocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<link rel="stylesheet" media="screen" href="css/ie.css">
<![endif]-->
</head>
<body class="page1">
<!--==============================header=================================-->
<header>
<div class="container_12">
<div class="grid_12">
</div>
<div class="grid_4">
<div class="port"><div>
<a class="link_img" href="index-2.html"><img src="images/page1_img1.jpg" alt="">
<span></span></a>
About Us
</div>
</div></div>
<div class="grid_4"><h1><a href="index.html"><img src="images/logo.png" alt="Brand
Identity"></a></h1></div>
<div class="grid_4 fright">
<div class="port">
<a class="link_img " href="index-2.html"> <img src="images/page1_img2.jpg" alt="">
<span></span></a>
Contacts
</div>
</div>
<div class="clear"></div>
<div class="port1">
<div class="grid_12">
<div class="port">
<a class="link_img " href="index-2.html"><img src="images/page1_img3.jpg" alt="">
<span></span></a>
Portfolio
</div>
<div class="port">
<a class="link_img " href="index-2.html"><img src="images/page1_img4.jpg" alt="">
<span></span></a>
Services</div>
</div>
</div>
<div class="port2">
<div class="grid_12">
<div class="port">
<a class="link_img " href="index-2.html"><img src="images/page1_img5.jpg" alt="">
<span></span></a>
Work for PixelMi<sup>2</sup>
</div>
<div class="port">
<a class="link_img " href="index-2.html"><img src="images/page1_img6.jpg" alt="">
<span></span></a>
Blog</div>
</div>
</div>
</div>
<div class="ic"></div>
</header>
<footer>
<div class="container_12">
<div class="grid_12">
<div class="socials">
</div>
<div class="copy">
</div>
</div>
</div>
</footer>
</body>
</html>