I'm practicing with SCSS and two minutes ago my code was working, before splitting the variables and creating the folder structure.
But now, no matter what I change, there's no way to change the font. It just loads with Times New Roman.
<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/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<!-- <link rel="stylesheet" href="css/icon-font.css"> -->
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
<title>Tours</title>
</head>
<body>
<header class="header">
<div class="header__logo-box">
<img src="img/logo-white.png" alt="Logo" class="header__logo">
</div>
<div class="header__text-box">
<h1 class="heading-primary">
<span class="heading-primary--main">Outdoors</span>
<span class="heading-primary--sub">is where life happens.</span>
</h1>
Discover our tours
</div>
</header>
</body>
body {
font-family: "Lato", sans-serif;
font-weight: 400;
/*font-size: 16px;*/
line-height: 1.7;
color: $color-grey-dark;
padding: 3rem;
}
.heading-primary {
color: $color-white;
text-transform: uppercase;
backface-visibility: hidden;
margin-bottom: 6rem;
}
The imports are ok, so it should be working.
Your code is working fine in jsfiddle. It's displaying Lato as the font. Did you try clearing your cache? You could also try changing the link to:
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900&display=swap" rel="stylesheet">
This will give an unlimited swap period to load the font if it takes to long to download before render.
Related
constant.scss
$widthsize:(500);
$heightsize:(300);
----------------------------------------------------------
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Spider Leads</title>
<link rel="stylesheet" href="css/style.css"></link><!-- comment -->
</head>
<body class="bodybg">
<div>
<img src="images/logo.bmp" alt="Spider leads" height="$heightsize" width=$widthsize>
</div>
</body>
</html>
$heightsize: how to write a 100px value in here ?
$widthsize: how to write a 100px value in here ?
You can't do this. An SCSS file needs to be compiled to a CSS file first, but these variables in the SCSS file also have to be used somewhere in the SCSS file. If you just set some variables in the SCSS file but don't use them, it won't work (i.e., the compiled CSS file will be empty). Do it like this:
index.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>Document</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<img src="https://images.pexels.com/photos/802112/pexels-photo-802112.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Spider leads">
</body>
</html>
styles.scss
$widthsize: 100px;
$heightsize: 100px;
img {
width: $widthsize;
height: $heightsize;
}
styles.css
The CSS file is generated automatically when you compile the SCSS file.
img {
width: 100px;
height: 100px;
}
/*# sourceMappingURL=styles.css.map */
My HTML/CSS/Js code is as follows:
let con = document.getElementById("container")
setTimeout(function(){
// while(con.hasChildNodes){
// con.removeChild(con.firstChild)
// }
con.style.display = "none"
},3 * 1000)
#container{
width: 100%;
height: 1080px;
background: #00ff00
}
.item{
width: 100px;
height: 200px;
background: #ff00ff;
animation: move 2s linear infinite;
}
#keyframes move{
0%{
transform: translateX(100px)
}
100%{
transform: translateX(200px)
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>page not refresh</title>
<link rel="stylesheet" href="./css.css">
</head>
<body>
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script src="js.js"></script>
</body>
</html>
In Chrome or firefox, the UI can be hidden 3 seconds later.
In Cobalt, the UI can't be hidden 3 seconds later.
If we remove the animation from the css file in Cobalt, the UI can be hidden 3 seconds later successfully.
How to hide the UI when there is animation on the page?
Cobalt renders only necessary area. If there is nothing to render, it does not do anything. In your case, there is no specified background color so there is nothing to update after hiding the item.
Setting the background color should fix the problem, as it means there is something to render - which is 'white' color - after hiding the item.
body {
background-color: white;
}
here's my HTML file with h1, p and span tags :-
<!DOCTYPE html>
<html>
<head>
<title>Custom Fonts</title>
</head>
<body>
<h1>This is Archi - <span>Welcome!</span></h1>
<p class="myFontStyling">dfrzgtiujhgfdsfghyjgku</p>
</body>
</html>
here's my CSS file that incorporates .ttf file to style the font of an element or contents in a tag :-
#font-face {
font-family: 'myFirstFont';
src:
url('fonts/CoHeadlineCorpFont/Co-Headline-Corp-Light.ttf');
format('truetype');
font-style: normal;
font-weight: 100;
}
.myFontStyling {
font-family: 'myFirstFont';
}
h1 {
font-family: 'myFirstFont', sans-serif;
font-weight: 100;
}
here's my directory structure :-
fontsByArchi
-fonts
-CoHeadlineCorpFont
-Co-Headline-Corp-Light.ttf
-index.html
-style.css
I am unable to get the font effect on my texts, what could be the reason?
I believe you forgot to refer external css file in html page. After adding <link rel="stylesheet" type="text/css" href="style.css"> tag inside <head> I was above see it getting applied.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Custom Fonts</title>
</head>
<body>
<h1>This is Archi - <span>Welcome!</span></h1>
<p class="myFontStyling">dfrzgtiujhgfdsfghyjgku</p>
</body>
</html>
I have the next code:
<!doctype html>
<head>
<head>
<meta charset="utf-8">
<title>Goerman</title>
</head>
<body>
<center>
<div id="image">
<img alt="Embebed Image" src="data:image/gif; base64,R0lG--IMAGE IN BASE64--="/>
</div>
</center>
</body>
</head>
I need that the animate image auto-set to screen the device or size of the navigator.
Add the following class to your style sheet and the corresponding class to your img tag
<style>
.responsiveImage {max-width: 100%; width: auto; height: auto;}
</style>
<img src="data:image/gif; base64,R0lG--IMAGE IN BASE64--=" class="responsiveImage" />
I'm not getting rounded corners in IE8 mode within IE11.
I've tried both relative and absolute paths, and neither work.
The PIE.htc file is in the same folder as the html file. I'm running on Jetty and don't have a .htaccess file. The PIE.htc file can be loaded without any problem using http://localhost:8383/various_forms2_less/PIE.htc
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
span.command_link_buttoned {
background-color: #96AFCF;
display: block;
width: 130px;
height:30px;
position:relative;
border-radius: 5px;
behavior: url(PIE.htc);
/*behavior: url(http://localhost:8383/various_forms2_less/PIE.htc);*/
}
</style>
</head>
<body>
<span class="command_link_buttoned">
Button
</span>
</body>
</html>