Although I put the links of font-awesome and google fonts, the fonts on the website does not change. I do not know how to fix it. Does anyone know what causes this problem?
contact.php
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>American Website Design & Development Agency - JOEY NAMIKI DESIGN</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/contact.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=PT+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<section class="contactSection">
<h1>Please tell me what kind of design you want to get?</h1>
<div class="contactForm">
<div class="tweet">
<h1>We listen all clients</h1>
<p>If you have any concerns regards to web, marketing, branding, design and redesign, feel free to ask me. I will give you the estimation.</p>
</div>
<form method="post" action="send.php" id="content">
<div>*Name<input type="text" name="name" required></div>
<div>Company Name<input type="text" name="company"></div>
<div>*Phone Number<input type="text" name="phone" required></div>
<div>*Email<input type="text" name="email" required></div>
<div>*Message<textarea type="text" name="message" ></textarea></div>
<div><input type="submit" class="send" value="submit"></div>
</form>
</div>
</section>
</body>
</html>
contact.css
#media only screen and (max-width: 2592px) {
html, body {
width: 100%;
height: 100%;
margin: 0;
background: black;
overflow-x: hidden;
color: cornsilk;
font-family: 'Roboto', sans-serif, 'PT Sans'sans-serif, Helvetica sans-serif;
font-size: 16px;
line-height: 160%;
}
button {
text-transform: uppercase;
font-weight: bold;
}
a {
font-size: 18px;
text-decoration: none;
}
h1 {
font-size: 42px;
font-weight: bold;
line-height: 120%;
font-family: 'Roboto', sans-serif, 'PT Sans'sans-serif, Helvetica sans-serif;
}
p {
font-size: 17px;
line-height: 1.4;
}
}
Try this
font-family: 'Roboto', 'PT Sans', 'Helvetica', sans-serif;
The line states that the first priority is given to Roboto, somehow if that font is not found, PT Sans will be applied. On the third priority, Helvetica is there.
For any reason if these fonts failed to load, we have set sans-serif as the last priority, any supported Sans-serif (Ariel or any other) fonts will be applied.
Related
I'm trying to add a vag font inside my form. i placed the "VAG Rounded Std-Black.otf" font in a folder outside name "fonts" to link it. but i still cant get it to work in a form text field?
any help to the solution would be helpful. thx yummi
<style type="text/css" href="/fonts">
#font-face {
font-family: vag;
src: url(fonts/VAG Rounded Std-Black.otf);
}
body {
background-color: dimgrey;
font-family: Arial;
color: white;
font-size: 20px;
margin: 50px;
}
/*... input message ...*/
input[type=text] {
width: 300px;
height: 40px;
border: none;
outline: none;
padding-left: 37px;
font-family: vag;
font-size: 14px;
color: white;
font-weight: bold;
letter-spacing: .5px;
background-color:grey;
}
<!-- input message -->
<form><input style="color:white;font-family: vag;" type="text" id="fname" name="fname" value="Type Your Message" onFocus="this.value=''"></form>
You can check This Code
I've Used Google fonts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght#700&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<form><input style="color:black; font-family: 'M PLUS Rounded 1c', sans-serif;" type="text" id="fname" name="fname" value="Type Your Message" onFocus="this.value=''"></form>
</body>
</html>
At the top of my code I have:
< link href=" https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet" >
And in my CSS I have:
font-family: 'Merriweather', ;
But it is not showing up. I'm not sure what the reasoning is. It seems so simple and yet nothing is working.
Any help would be appreciated.
Here is the top of my HTML:
<link rel = "stylesheet"
type = "text/css"
href = "stylesheet.css" />
<link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">
<head>
<title>Jesse | Personal Chef </title>
<meta charset="UTF-8">
<meta name="description" content="Jesse Personal Chef">
<meta name="keywords" content="Food, Chef, Wilmington, NC, North Carolina Food, In Home Chef, Personal Chef, Chef For Hire, Jesse,">
<meta name="author" content="Cal & Jen T.">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
This is my CSS, saved in as stylesheet.css:
<style>
/* HEADERS ~~~~~~~~~~ */
h1 {
font-family: 'Merriweather', ;
text-align: center;
font-size: 2.7em;
color: 000;
font-weight: 500;
letter-spacing: 2%;
line-height: 40px;
padding-bottom: -100px;
margin: 2%;
}
.subtitle {
font-family: 'Merriweather', ;
text-align: center;
font-size: 1.04em;
color: 000;
font-weight: regular;
margin: 1;
line-height: 1px;
padding-bottom: 60px;
}
</style>
Thank you
One little fix needed:
Change this:
font-family: 'Merriweather', ;
To this:
font-family: 'Merriweather', serif;
The serif portion is the fail-over font in case it can't find Merriweather.
Test it in this snippet:
<html>
<head>
<link href=" https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet" />
<style>
div {
font-family: Merriweather, serif;
}
</style>
</head>
<body>
<div>Test</div>
</body>
</html>
You can also just apply the font-family style to the <body> tag and all child elements will inherit that font-family.
Check fonts link:
if you use #font-face rule check link to the folder with fonts and be sure that font files is present in this folder, also check fonts name in #font-face rule and in font-family they must be equal;
if you use CDN - check the link to the CDN;
Open Dev Tools in your browser(Ctrl(Command) + Shift + I) and in the tab Network check whether your font is downloaded or not: https://prnt.sc/r9x8ab;
Hello everyone and happy Friday,
I would like to align to the center of the page, the title (top) and right below the search box (below the title), possibly without the search button.
Right now, I have two issues.
The first one, the search box is not align to the center.
The second one, if I eliminate the search button, the query does not work after I press Return.
How can I achieve those two challenges?
Thank you so much in advance for your help.
Below is my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CLIHELP - Help for Command Line Interface</title>
<meta name="description" content="Help for Command Line Interface">
<meta name="author" content="clihelp.org">
<style>
.site-title {
position:absolute;
top:50%;
left:50%;
margin-top:-180px;
margin-left:-280px;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 15px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26px;
}
.search {
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-100px;
}
.search input {
height: 40px;
width: 487px;
}
</style>
</head>
<body>
<div class="site-title">
<h1>CLIHELP - Help for Command Line Interface</h1>
</div>
<div class="search">
<form action='q.php' method='GET'>
<input type='text' size='25' name='search'>
<input type='submit' name='submit' value='Search' >
</form>
</div>
</body>
</html>
Almost done, this is my code now. It works but the query still does not work after I press the Enter key.
This is again my code with the suggested modifications:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CLIHELP - Help for Command Line Interface</title>
<meta name="description" content="Help for Command Line Interface">
<meta name="author" content="clihelp.org">
<style>
.content {
text-align: center;
padding-top: 50px;
}
.site-title h1 {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 15px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26px;
}
.search {
display: inline-block;
width: 487px;
}
.search input {
height: 40px;
width: 100%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
$(document).ready(function() {
$('.submit_on_enter').keydown(function(event) {
if (event.keyCode == 13) {
this.form.submit();
return false;
}
});
});
</script>
</head>
<body>
<div class="content">
<div class="site-title">
<h1>CLIHELP - Help for Command Line Interface</h1>
</div>
<div class="search">
<form action='q.php' method='GET'>
<input type='text' size='25' class="submit_on_enter" name='search'>
</form>
</div>
</div>
</body>
</html>
Here is an example of how it might work for you:
$(document).ready(function() {
$('.submit_on_enter').keydown(function(event) {
if (event.keyCode == 13) {
this.form.submit();
return false;
}
});
});
.content {
text-align: center;
padding-top: 50px;
}
.site-title h1 {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 15px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26px;
}
.search {
display: inline-block;
width: 487px;
}
.search input {
height: 40px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="site-title">
<h1>CLIHELP - Help for Command Line Interface</h1>
</div>
<div class="search">
<form action='q.php' method='GET'>
<input type='text' size='25' class="submit_on_enter" name='search'>
</form>
</div>
</div>
There are many alternative to how to send a form 'without' a submit button. The one I picked here comes from Submitting a form by pressing enter without a submit button. You can look there for more options and details about this.
Also you might want to checkout something like bootstrap and it's templates. For this purpose this one could bee easy to modify https://getbootstrap.com/examples/signin/.
I tried using different editors and IDEs (netbeans and visual studio code) along with different browsers (firefox developers edition), yet, I can't seem to get the css sheet to apply to the main html file.
The style sheet editor is saying that there is no style sheet attached to the html file
Here's the html file:
<!DOCTYPE html>
<html>
<head>
<title>The Animal Game</title>
<meta charset="utf-8"/>
<link href="animalgame.css" type="text/css" rel="stylsheet" />
<script src="animalgame.js" type="text/javascript"></script>
</head>
<body>
<h1>The Animal Game</h1>
<p>Think of an animal, then let me guess it!</p>
<div id="container">
<fieldset>
<legend>Questions</legend>
<p id="questions"></p>
</fieldset>
<fieldset id="answer">
<legend>Answer</legend>
<button id="yes">Yes</button>
<button id="no" >No</button>
</fieldset>
</div>
</body>
</html>
CSS style sheet:
body {
font: 12pt "Century Gothic", "Helvetica", "Arial", sans-serif;
}
button {
font-size: 20pt;
font-weight: bold;
margin: 15px auto;
}
#container{
margin: auto;
width: 520px;
}
fieldset {
background-color: #F0F0F0;
float: left;
height: 150px;
margin-right: 15px;
text-align: center;
}
h1, p {
text-align: center;
}
#questions {
font-size: 16pt;
text-align: center;
width: 300px;
}
EDIT: problem solved! There was a typo. Thank you for all hints
You have a typo in rel="stylsheet" it should be stylesheet
I can't see what is wrong with this. I have 2 HTML sheets and a CSS sheet.
The first HTML sheet (index.html) is like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Olive</h1>
Enter
</body>
</html>
The second HTML sheet (page1.html) is this:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div>
<p id="prenav">Olive</p>
</div>
</body>
</html>
And the CSS external sheet:
body {
background-color: olive;
}
h1 {
font-family: 'Cedarville Cursive', cursive;
font-size: 230px;
text-align: center;
padding: 0px;
}
a {
display: block;
text-align: center;
font-family: 'Cedarville Cursive', cursive;
color: white;
font-size: 100px;
padding: 0px;
text-decoration: none;
}
#prenav {
font-family: 'Cedarville Cursive', cursive;
font-size: 50px;
color: white;
}
The issue is that the id from the second HTML sheet (page1.html) doesn't work. I don't know why. I don't know if it's the syntaxis or what.
The body attributes are working in page1.html, but the id attributes don't. The <p> element only appears with any style. Could someone tell me what's wrong with this?
Few tips for debugging... try to make cache refresh few times when you have modified your css styles (with chrome and windows: ctrl+shift+r) then if it doesnt work try to use code below and cache refresh again:
#prenav {
font-family: 'Cedarville Cursive', cursive !important;
font-size: 50px !important;
color: white !important;
}
The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied.
Code:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
body {
background-color: olive;
}
h1 {
font-family: 'Cedarville Cursive', cursive;
font-size: 230px;
text-align: center;
padding: 0px;
}
a {
display: block;
text-align: center;
font-family: 'Cedarville Cursive', cursive;
color: white;
font-size: 100px;
padding: 0px;
text-decoration: none;
}
#prenav {
font-family: 'Cedarville Cursive', cursive;
font-size: 50px;
color: white;
}
</style>
</head>
<body>
<div>
<p id="prenav">Olive</p>
</div>
</body>
</html>
Edit:
Solution was to put .css stylesheet to correct folder.
Cheers.
Not sure if this is the issue, but your first line should be:
<!DOCTYPE html>
If you don't declare it properly, your browser could render in quirks mode which can result in all sorts of odd behavior.
The syntax is correct, but maybe the script is any command that changes the style for this id.