I'm new to html/css and I know this has been asked many times before but the answers didn't help / could not comprehend them. I assume it has something do to with the way I arranged the page in on the html side. Thanks
div.text {
color: yellow;
font-family: sans-serif;
background-color: blue;
line-height: 6em;
text-align: center;
}
div.img {
opacity: 0.3;
border-radius: 44px background-color:#555;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<title>Let Go</title>
</head>
<body>
<div class="text">
<h1>Lore Ipsum?</h1>
</div>
<div class="img">
<img src="http://www.globaldots.com/wordpress/wp-content/uploads/2016/10/ddos_attack-768x550.jpg" alt="">
</div>
</body>
</html>
Do the radius on the image, not the element that contains it. Also, you are missing a semi-color before you set the background color
div.text {
color: yellow;
font-family: sans-serif;
background-color: blue;
line-height: 6em;
text-align: center;
}
div img {
opacity: 0.3;
border-radius: 44px;
background-color:#555;
}
<div class="text">
<h1>Lore Ipsum?</h1>
</div>
<div class="img">
<img src="http://www.globaldots.com/wordpress/wp-content/uploads/2016/10/ddos_attack-768x550.jpg" alt="">
</div>
TWo mistakes: The selector has to be div.img img to affect the image itself, and there was a semicollon missing:
div.text {
color: yellow;
font-family: sans-serif;
background-color: blue;
line-height: 6em;
text-align: center;
}
div.img img {
opacity: 0.3;
border-radius: 44px;
background-color: #555;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<title>Let Go</title>
</head>
<body>
<div class="text">
<h1>Lore Ipsum?</h1>
</div>
<div class="img">
<img src="http://www.globaldots.com/wordpress/wp-content/uploads/2016/10/ddos_attack-768x550.jpg" alt="">
</div>
</body>
</html>
Related
Anything after closing </body> tag is not visible.
The output text is not visible in a browser. I have tried adding and removing <div> and <body> tags around it. I can't seem to troubleshoot my mistake.
h1{
font-family: 'Inknut Antiqua', sans-serif;
color: rgb(255, 118, 193);
float: right;
position: relative;
right: 1020px;
}
.logo{
float: left;
width: 5%;
position: relative;
top: 20px;
left: 40px;
}
#bg{
top: 0;
left: 0;
width: 100%;
position: fixed;
justify-content: space-between;
display: flex;
background-color: rgb(222, 255, 102);
}
h4{
color: black;
font-size: x-large;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Giovanni's Guitars</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght#300&display=swap"
type='text/css'>
</head>
<body>
<header id="bg">
<div>
<h1>Giovanni's Guitars</h1>
<img class="logo" src="logo1.svg" alt="a logo">
</div>
</header>
</body>
<div>
<h4>Guitars and Bases</h4>
</div>
</html>
Please help me.
Your div tag should be inside the body tag
<!DOCTYPE html>
<html>
<head>
<title>Giovanni's Guitars</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght#300&display=swap"
type='text/css'>
</head>
<body>
<header id="bg">
<div>
<h1>Giovanni's Guitars</h1>
<img class="logo" src="logo1.svg" alt="a logo">
</div>
</header>
<div>
<h4>Guitars and Bases</h4>
</div>
</body>
</html>
You can't do that. HTML is designed in a way that all page elements are placed inside the <body></body> element.
If you need a wrapper just add a <div> inside your <body> element.
All your content should be inside your body element.
In addition, in your #bg selector you set position="fixed" which makes the other content after it to "disappeared".
It is not the best practice, but you can do it like this:
<!DOCTYPE html>
<html>
<head>
<title>Giovanni's Guitars</title>
<link rel="stylesheet" href="styles.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght#300&display=swap"
type="text/css"
/>
</head>
<body>
<header id="bg">
<div>
<img class="logo" src="logo1.svg" alt="a logo" />
<h1>Giovanni's Guitars</h1>
</div>
</header>
<div class="content">
<h4>Guitars and Bases</h4>
</div>
</body>
</html>
h1 {
font-family: "Inknut Antiqua", sans-serif;
color: rgb(255, 118, 193);
display: inline-block;
vertical-align: middle;
}
.logo {
width: 5%;
margin: 50px;
display: inline-block;
vertical-align: middle;
}
#bg {
top: 0px;
right: 0px;
left: 0px;
width: 100%;
height: 150px;
position: fixed;
justify-content: space-between;
display: flex;
background-color: rgb(222, 255, 102);
}
h4 {
color: black;
font-size: x-large;
text-align: center;
}
.content {
margin-top: 150px;
}
Your body tag should be closed before html tag.
I am trying to add space/margin between the gray borderline and the three images outside the border(right above the gray dashed borderline) Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>The Maze Runner - FanPage</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
body {
font-family: "Trebuchet MS", Helvetica, sans-serif;
background: black;
}
#example1 {
border: 5px dashed DarkOliveGreen;
background: white;
padding: 15px;
background-clip: border-box;
margin-bottom: 30px;
}
#exampleh {text-align: center;}
#example2 {
border: 5px dashed DarkGray;
background: white;
padding: 15px;
background-clip: border-box;
margin-bottom: 30px;
border-spacing: 5px 1rem;
}
#example21 {font-size: 20px;}
</style>
</head>
<body>
<script src="script.js"></script>
<p>
<style>
img {display: block; margin-left: auto; margin-right: auto;}
</style>
<img src="https://www.whats-on-netflix.com/wp-content/uploads/2018/01/maze-runner.jpg" alt="The Maze Runner series" class="center" style="width:65%;"/>
</p>
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/b/be/The_Maze_Runner_poster.jpg/220px-The_Maze_Runner_poster.jpg" align="left" style="width:33.33%;"/>
<img src="https://lumiere-a.akamaihd.net/v1/images/image_9435b9ce.jpeg" alt="Maze Runner: The Scorch Trials" align="left" style="width:33.33%;"/>
<img src="https://i.pinimg.com/originals/91/80/65/9180651eb1ce73d594d8b26bbcf54c60.jpg" alt="Maze Runner: The Death Cure" align="right" style="width:33.33%;"/>
<div id="example2">
<div id="exampleh">
<h1>5 Reasons To Watch Maze Runner series</h1></div>
<div id="example21">
<ol>
<li>Love</li>
<li>Love</li>
<li>Love</li>
<li>Love</li>
<li>Love</li>
</ol>
</body>
</html>
I tried adding border-spacing in the <style>example2 but did not work. I also tried something like margin-top but did not work either. Can someone help me, please?
Thank you.
You should not use float on the image. You should wrap your three images inside a div and then use flex on the main image div. Check out my example below:
body {
font-family: "Trebuchet MS", Helvetica, sans-serif;
background: black;
}
#example1 {
border: 5px dashed DarkOliveGreen;
background: white;
padding: 15px;
background-clip: border-box;
margin-bottom: 30px;
}
#exampleh {
text-align: center;
}
#example2 {
border: 5px dashed DarkGray;
background: white;
padding: 15px;
background-clip: border-box;
margin-bottom: 30px;
border-spacing: 5px 1rem;
margin-top: 10px;
}
#example21 {
font-size: 20px;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.image-items {
display: flex;
}
.img-box {
padding: 0 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>The Maze Runner - FanPage</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<p>
<img src="https://www.whats-on-netflix.com/wp-content/uploads/2018/01/maze-runner.jpg"
alt="Main Image">
</p>
<div class="image-items">
<div class="img-box">
<img
src="https://upload.wikimedia.org/wikipedia/en/thumb/b/be/The_Maze_Runner_poster.jpg/220px-The_Maze_Runner_poster.jpg" />
</div>
<div class="img-box">
<img src="https://lumiere-a.akamaihd.net/v1/images/image_9435b9ce.jpeg"
alt="Maze Runner: The Scorch Trials" />
</div>
<div class="img-box">
<img src="https://i.pinimg.com/originals/91/80/65/9180651eb1ce73d594d8b26bbcf54c60.jpg"
alt="Maze Runner: The Death Cure" />
</div>
</div>
<div id="example2">
<div id="exampleh">
<h1>5 Reasons To Watch Maze Runner series</h1>
</div>
<div id="example21">
<ol>
<li>Love</li>
<li>Love</li>
<li>Love</li>
<li>Love</li>
<li>Love</li>
</ol>
</body>
</html>
so basically i have this lets get fit button, but when i hover over it or click it, it doesnt change cursor or lead to index.html, idk why its not working
.btn {
display: inline-block;
text-transform: uppercase;
letter-spacing: 2px;
margin-right: -2px;
}
.cta-btn {
font-size: 1.2rem;
background-color: #ca5558;
padding: .9rem 1.8rem;
color: #fff;
border-radius: 3rem;
transition: background-color .5s;
}
a.cta-btn:hover,
a.cta-btn:focus {
color: black;
background-color: #c94246;
}
<section class="hero" id="hero">
<div class="container">
<h2 class="sub-headline">
<span class="first-letter">W</span>orkouts
</h2>
<div class="headline-description">
<div class="single-animation">
<h5>Made simpler.</h5>
Let's Get Fit
</div>
</div>
</div>
</section>
I don't know why it isn't working but when I ran it it works. I did not change any of the code from your answer, apart from placing a <section> which was closed but not created.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.btn{
display: inline-block;
text-transform: uppercase;
letter-spacing: 2px;
margin-right: -2px;
}
.cta-btn{
font-size: 1.2rem;
background-color: #ca5558;
padding: .9rem 1.8rem;
color: #fff;
border-radius: 3rem;
transition: background-color .5s;
}
a.cta-btn:hover,
a.cta-btn:focus{
color: black;
background-color: #c94246 ;
}
</style>
</head>
<body>
<section>
<div class="container">
<h2 class="sub-headline">
<span class="first-letter">W</span>orkouts
</h2>
<div class="headline-description">
<div class="single-animation">
<h5>Made simpler.</h5>
Let's Get Fit
</div>
</div>
</div>
</section>
</body>
</html>
I want to go to the about section without needing to link to another .html file. Originally, I tried a href = "About.html" but when clicking on the About Button it just links to that page ignoring the index.html page where all the main content is. Next, I tried a href = #About which did nothing when the about button was pressed.
section{
padding: 39px 0;
}
.container{
width: 100%;
max-width: 1225px;
margin: 0 auto;
padding: 0 24px;
}
.headline-description h5{
color: #ffffff;
font-size: 30px;
font-weight: 100;
text-transform: uppercase;
margin-bottom: 20px;
letter-spacing: 4px;
}
.Content{
width: 100%;
background-color: bisque;
height: 100vh;
display: flex;
align-items: center;
text-align: center;
}
.about-button{
text-decoration: none;
color: #225522;
border: 1px solid #225522;
padding: 10px 50px;
font-size: 20px;
transition: all 1s;
}
.the-life-of-a-chef{
background-color: #2255cc;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CHEF</title>
<link rel="stylesheet" href="asdf.css">
</head>
<body>
<section class="Content" id="Content">
<div class="container">
<!--Website Name-->
<h1 class="headline">C H E F</h1>
<div class="headline-description">
<div class="seperator">
<!--Underline Chef / Cutlery Icon in middle-->
<div class="line line-left"></div>
<div class="cutlery"><i class="fa fa-cutlery"></i></div>
<div class="line line-right"></div>
</div>
<h5>Life of a chef</h5>
About
</div>
</div>
</section>
</body>
</html>
<section class="the-life-of-a-chef">
<div class="container">
<div class="rest-button">
<div class="Lorem-text">
<div class="LifeOfChefHeadline">
<h2 class="AboutHeadline">
<span class="About">About</span>
</h2>
<h1 class="headline headline-gold">The Life Of A Chef</h1>
</div>
Just add id="About" to the section you want to scroll to.
See example here: https://jsfiddle.net/ud3k2ztv/
I've been trying to display an image but it doesn't work. I tried to take off the / at the end of the <img> tag, but it doesn't work neither. My favicon doesn't appear too, and I don't know why.
Here is my code:
img.check {
width: 15%;
margin-top: 150px;
margin-left: 790px;
}
.text {
font-family: 'Roboto', sans-serif;
font-size: 20px;
margin-top: 150px;
margin-left: 625px;
}
.redirect {
font-family: 'Roboto', sans-serif;
font-size: 8px;
margin-top: 50px;
margin-left: 830px;
color: blue;
}
.redirect:hover {
color: black;
text-decoration: none;
}
<!DOCTYPE html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<title>Your Password has been changed.</title>
<link rel="icon" type="image/png" href="img/zimbrafav.png" />
</head>
<body>
<img src="img/check.png" class="check" alt="check">
<div class="text">
<p>
<h1>Your password has been changed!</h1>
</p>
</div>
<div class="redirect">
<p>
<h1>Go to Google > </h1>
</p>
</div>
</body>
</html>
Not quite sure but maybe it's because you are working with relative paths instead of absolute.
So
<img src="img/check.png" class="check" alt="check"/>
would turn into
<img src="/img/check.png" class="check" alt="check"/>