Can anyone give me a help with code? I'm trying to move the h3 header to the right side of the page and cannot seem to get it to move. The attached picture is of where it is now and where I would like it to be.
<!DOCTYPE html>
<html lang="en"><head>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link href="https://www.carymcclure.com/public_html/favicon.ico?v=1" rel="shortcut icon"
type="image/x-icon" />
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="004c30">
<style>
body {
background-image: url("../img/ivyt.gif");
background-repeat: no-repeat;
width: 1930px;
height: 8867px;
}
</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Cary McClures' Portfolio</title>
<!-- Bootstrap -->
<link href="../css/bootstrap-4.4.1.css" rel="stylesheet">
</head>
<body>
<a href="../pdf/IVY Academic Transcript.pdf" style="position: absolute; left: 1608px; z-index:
50; width: 248px; top: -86px; height: 233px;"><img style="float:right;margin-
top:250px;position: relative;"
src="../img/ivy logo.gif" width="150" height="150" alt="email"></a>
<h3> Click Logo to Download</h3>
<h3 style="color: white;"></h3>
</body>
</html>
Apply a float: right; to the <h3> element
body {
background-image: url("../img/ivyt.gif");
background-repeat: no-repeat;
width: 1930px;
height: 8867px;
}
h3 {
float: right;
}
<!DOCTYPE html>
<html lang="en"><head>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link href="https://www.carymcclure.com/public_html/favicon.ico?v=1" rel="shortcut icon"
type="image/x-icon" />
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="004c30">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Cary McClures' Portfolio</title>
<!-- Bootstrap -->
<link href="../css/bootstrap-4.4.1.css" rel="stylesheet">
</head>
<body>
<a href="../pdf/IVY Academic Transcript.pdf" style="position: absolute; left: 1608px; z-index:
50; width: 248px; top: -86px; height: 233px;"><img style="float:right;margin-
top:250px;position: relative;"
src="../img/ivy logo.gif" width="150" height="150" alt="email"></a>
<h3> Click Logo to Download</h3>
<h3 style="color: white;"></h3>
</body>
</html>
Related
I want to change the font size and color of the a when I hover over p. It is not working. Probably there is a simple solution, but I am struggling with this for a few hours.
If anyone has not too complicated links related to this topic I also would be happy
<!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>Document</title>
<style>
p:hover div nav a {
color: blue;
font-size: 22px;
}
</style>
</head>
<body>
<div>
<nav>
<p>Ceramics</p>
One
Two
Three
</nav>
</div>
</body>
</html>
Hi there i get the simple solution for you .
<!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>Document</title>
<style>
p:hover + .hv {
color: blue;
font-size: 22px;
}
</style>
</head>
<body>
<div>
<nav>
<p>Ceramics</p>
<div class="hv">
One
Two
Three
</div>
</nav>
</div>
</body>
</html>
Hi there ok so if i might get you . you want to get
<!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>Document</title>
<style>
.hv a:hover{
color: blue;
font-size: 22px;
}
</style>
</head>
<body>
<div>
<nav>
<p>Ceramics</p>
<div class="hv">
One
Two
Three
</div>
</nav>
</div>
</body>
</html>
Try something like:
p:hover, a:hover {color: blue;font-size: 22px;}
Your CSS selector p:hover div nav a is incorrect. This would refer to an <a/> within a <nav/> within a <div/> within a <p/> that is being hovered. You can fix this with the change I made below.
<!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>Document</title>
<style>
nav p { /*selects all hovered <p/> within a <nav/>*/
color: blue;
font-size: 22px;
}
</style>
</head>
<body>
<div>
<nav>
<p>Ceramics</p>
One
Two
Three
</nav>
</div>
</body>
</html>
i tried clearing dns cache and reloading still dont work . here is full code
main.html
<!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>Matrex PortFolio</title>
<link rel="shortcut icon" href="./favicon.ico" />
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1>Soon</h1>
<img src="/download.jpg" alt="" style="width: 100%; ;">
</body>
</html>
favicon.ico location is same as main.html . (they all in same directory.
main.css if anyone need it
text-align: center;
position: absolute;
right: 50%;
top: 50%;
font-family: Arial, Helvetica, sans-serif;
}
*{
padding: 0;
margin: 0;
}
im using a domain name , not local hosting
If the favicon is in the same folder as the main.html file then you have the wrong html file path for favicon.ico.
You have:
<link rel="shortcut icon" href="./favicon.ico" />
you should have:
<link rel="icon" href="favicon.ico" type="image/x-icon">
https://www.w3schools.com/html/html_filepaths.asp
<link rel="icon" type="image/png" sizes="180x180" href="exemple.png">
I want to make a progress bar using Bootstrap that has some dots on that progress bar as in the image below. How can I do that? Or where exactly should I research?
.progress {
width: 278px;
height: 7px;
left: 597px;
top: 489px;
}
.progress-bar {
background: #007BFF;
border-radius: 100px;
}
<html>
<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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="card">
<div class="card-body">
<div class="justify-content-center">
<div class="progress" style="width: 100%">
<div class="progress progress-bar" aria-valuenow="15%" aria-valuemin="0%" aria-valuemax="100%"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Try using range bars
https://getbootstrap.com/docs/5.1/forms/range/
<html>
<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.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
</head>
<body>
<label for="customRange1" class="form-label">Range bars</label>
<input type="range" class="form-range" id="customRange1" />
</body>
</html>
I use fontawesome in almost all the projects I work. But this time I'm getting the icons displayed as squares. I also tried almost all the solutions listed on stackoverflow and nothing seems to work for my case.I guess something is preventing me from displaying fontawesome. This is happening not only in hosted case but in local too. I verified this file is being loaded correctly in the browser and has appropriate headers
I even tried this solution from [codepen]
Its result was yes but still icons are displayed as squares. What could be the problem?
This is my head part
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Habitath</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Habitath a online coach hiring website" />
<meta name="keywords" content="habitath, ecosystem, online coach website" />
<meta name="author" content="Habitath" />
<link rel="shortcut icon" href="img/favicon.png" />
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css" />
<!-- Magnific Popup -->
<link rel="stylesheet" href="css/magnific-popup.css" />
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/form.css" />
<link href="https://fonts.googleapis.com/css?family=Squada+One" rel="stylesheet">
</head>
you added font files to the project (like fontawesome-webfont.woff etc)? not only css
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
float: left;
margin-left: 5px;
}
ul li a {
text-decoration: none;
padding: 8px 12px;
color: #FFF;
background: #545454;
font-size: 20px;
border-radius: 50%;
transition: color 0.3s ease-in-out;
-webkit-transition: color 0.3s ease-in-out;
}
ul li a:hover {
color: #C86565;
}
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Habitath</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Habitath a online coach hiring website" />
<meta name="keywords" content="habitath, ecosystem, online coach website" />
<meta name="author" content="Habitath" />
<link rel="shortcut icon" href="img/favicon.png" />
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css" />
<!-- Magnific Popup -->
<link rel="stylesheet" href="css/magnific-popup.css" />
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/form.css" />
<link href="https://fonts.googleapis.com/css?family=Squada+One" rel="stylesheet">
</head>
<body>
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-github"></i></li>
</ul>
</body>
I have tried everything but the background image of the header is not showing up in browsers
in request headers I'm getting this
Provisional headers are shown
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2825.0 Safari/537.36
//Parallax
.bird-box {
position: relative;
height: 600px;
background-image: url(../images/bird-bg.jpg);
background-size: contain;
background-position: top center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BlackBird Co.</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial- scale=1">
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
<link rel="stylesheet" href="css/style.css">
<header class="bird-box">
<div class="back-bird"></div>
<div class="logo"></div>
<div class="fore-bird"></div>
</header>
</body>
</html>
CSS comment syntax is /* comment here */. It does not support line comments.
This:
//Parallax .bird-box
… is an invalid selector that doesn't match your element.
Change the comment to be valid CSS.
You used the wrong CSS comment syntax! Correct would be /* comment */. Unfortunately, there are no one line comments in CSS. You can read more about it at MDN.
/* Parallax */
.bird-box {
position: relative;
height: 600px;
background-image: url(https://unsplash.it/600/300);
background-size: contain;
background-position: top center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BlackBird Co.</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial- scale=1">
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
<link rel="stylesheet" href="css/style.css">
<header class="bird-box">
<div class="back-bird"></div>
<div class="logo"></div>
<div class="fore-bird"></div>
</header>
</body>
</html>