i have this html
<html lang="en">
<head>
<style>.wf-force-outline-none[tabindex="-1"]:focus{
outline:none;
}
</style>
<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>SUSBOOKS</title>
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='mdb.dark.min.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='all.min.css') }}" />
<link href="https://uploads-ssl.webflow.com/63b8e36b0f5b782ef248d8ab/css/das-dynamite-site-5ede7b.webflow.54c285831.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript">
</script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:300,300italic,400,400italic,700,700italic,900,900italic" media="all">
<script type="text/javascript">WebFont.load({
google: {
families: ["Merriweather:300,300italic,400,400italic,700,700italic,900,900italic"] }
}
);
</script>
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif]-->
<script type="text/javascript">!function(o,c){
var n=c.documentElement,t=" w-mod-";
n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}
(window,document);
</script>
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}">
<style>
#font-face{
font-family: 'Circular';
font-weight: 400;
src: url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Regular.eot);
src: url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Regular.eot?#iefix) format('embedded-opentype'),
url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Regular.woff2) format('woff2'),
url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Regular.woff) format('woff'),
url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Regular.ttf) format('truetype'),
url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Regular.svg) format('svg');
}
#font-face{
font-family: 'Circular';
font-weight: 700;
src: url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Bold.eot);
src: url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Bold.eot?#iefix) format('embedded-opentype'),
url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Bold.woff2) format('woff2'),
url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Bold.woff) format('woff'),
url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Bold.ttf) format('truetype'),
url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Bold.svg) format('svg');
}
body {
background-color:#000000 ;
}
.tab {
display: inline-block;
margin-left: 40px;
}
.wrapper {
width: 100%;
max-width: 31.25rem;
margin: 6rem auto;
padding: 15px;
}
.label {
font-size: .625rem;
font-weight: 400;
text-transform: uppercase;
letter-spacing: +1.3px;
margin-bottom: 1rem;
}
.btn-primary {
color: var(--button-color);
background-color: var(--button-background-color);
border-radius: var(--border-radius);
}
.btn-primary:hover {
box-shadow: inset 0 0 0 20rem var(--darken-1);
}
.btn-primary:active {
box-shadow: inset 0 0 0 20rem var(--darken-2),
inset 0 3px 4px 0 var(--darken-3),
0 0 1px var(--darken-2);
}
.btn-primary:disabled,
.btn-primary.is-disabled {
opacity: .5;
}
</style>
</head>
<body class="body">
<div class="navbar-logo-left wf-section">
<div data-animation="default" data-collapse="medium" data-duration="400" data-easing="ease" data-easing2="ease" role="banner" class="navbar-logo-left-container shadow-three w-nav">
<div class="container">
<div id="Navbar" class="navbar-wrapper">
<a href="#" class="navbar-brand w-nav-brand">
<img src="https://uploads-ssl.webflow.com/63b8e36b0f5b782ef248d8ab/63b8e451944baf4700888a87_susbooks.png" loading="lazy" sizes="(max-width: 479px) 63vw, 225px" width="225" srcset="https://uploads-ssl.webflow.com/63b8e36b0f5b782ef248d8ab/63b8e451944baf4700888a87_susbooks-p-500.png 500w, https://uploads-ssl.webflow.com/63b8e36b0f5b782ef248d8ab/63b8e451944baf4700888a87_susbooks-p-800.png 800w, https://uploads-ssl.webflow.com/63b8e36b0f5b782ef248d8ab/63b8e451944baf4700888a87_susbooks.png 1085w" alt="">
</a>
<nav role="navigation" class="nav-menu-wrapper w-nav-menu">
<ul role="list" class="nav-menu-two w-list-unstyled">
<li>
<a href="/" aria-current="page" class="nav-link w--current">
<span class="text-span">Home
</span>
</a>
</li>
<li class="list-item">
<div data-hover="true" data-delay="0" class="nav-dropdown w-dropdown">
<div class="nav-dropdown-toggle w-dropdown-toggle" id="w-dropdown-toggle-0" aria-controls="w-dropdown-list-0" aria-haspopup="menu" aria-expanded="false" role="button" tabindex="0">
<div class="nav-dropdown-icon w-icon-dropdown-toggle" aria-hidden="true">
</div>
<div class="text-block">
<span class="text-span-2">Genres
</span>
</div>
</div>
<nav class="nav-dropdown-list shadow-three mobile-shadow-hide w-dropdown-list" id="w-dropdown-list-0" aria-labelledby="w-dropdown-toggle-0">
<a href="/drama" class="w-dropdown-link" tabindex="0">
<span class="text-span-3">Drama
</span>
</a>
<a href="/fantasy" class="dropdown-link w-dropdown-link" tabindex="0">
<span class="text-span-3">Fantasy
</span>
</a>
<a href="/mystery" class="dropdown-link-2 w-dropdown-link" tabindex="0">
<span class="text-span-3">Mystery
</span>
</a>
<a href="/comedy" class="dropdown-link-3 w-dropdown-link" tabindex="0">
<span class="text-span-3">Comedy
</span>
</a>
<a href="/adventure" class="dropdown-link-4 w-dropdown-link" tabindex="0">
<span class="text-span-3">Adventure
</span>
</a>
<a href="/action" class="dropdown-link-5 w-dropdown-link" tabindex="0">
<span class="text-span-3">Action
</span>
</a>
<a href="/teen" class="dropdown-link-6 w-dropdown-link" tabindex="0">
<span class="text-span-3">Teen
</span>
</a>
<a href="/romance" class="dropdown-link-7 w-dropdown-link" tabindex="0">
<span class="text-span-3">Romance
</span>
</a>
</nav>
</div>
</li>
<li>
<div class="nav-divider">
</div>
</li>
<li class="mobile-margin-top-10">
<a href="/search" class="btn btn-primary mb1 black bg-white"><span class="text-span-2">Search
</span>
</a>
</li>
</ul>
</nav>
<div class="menu-button w-nav-button" style="-webkit-user-select: text;" aria-label="menu" role="button" tabindex="0" aria-controls="w-nav-overlay-0" aria-haspopup="menu" aria-expanded="false">
<div class="w-icon-nav-menu">
</div>
</div>
</div>
</div>
<div class="w-nav-overlay" data-wf-ignore="" id="w-nav-overlay-0">
</div>
</div>
</div>
<div style="text-align: center;">
<h2 style="text-align: center;">
<span style="color: #ffffff;">Popular Books
</span>
</h2>
</div>
<div class="container"style="text-align: center;">
<div class="row">
{% for item in data %}
<div class="col-lg-2 col-md-3 col-sm-5">
<div style="border-radius:20px;" class="card h-1 mb-2">
<a href="api/default?query={{item.name}}" names="{{ item.name }}" class="ripple">
<img style="border-radius:20px;" class="card-img-top img-fluid" names="{{ name }}" src={{item.cover}} alt="{{ name }}" width="1500px" height="2250px" onerror="this.onerror=null; this.src='../static/default.png'" />
</a>
</div>
</div>
{% endfor %}
</div>
</div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5812513324418518"
crossorigin="anonymous">
</script>
<!-- lower banner -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5812513324418518"
data-ad-slot="1770889507"
data-ad-format="auto"
data-full-width-responsive="true">
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
}
);
</script>
<script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="SUSTEAM" data-description="Support me on Buy me a coffee!" data-message="Thanks for all the support !!" data-color="#5F7FFF" data-position="Right" data-x_margin="18" data-y_margin="18">
</script>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=63b8e36b0f5b782ef248d8ab" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous">
</script>
<script src="https://uploads-ssl.webflow.com/63b8e36b0f5b782ef248d8ab/js/webflow.efb10e0b9.js" type="text/javascript">
</script>
<!--[if lte IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]-->
</body>
<footer style="margin-top: 200px;" class="bg-dark text-center">
<div class="text-center p-3" style="background-color:#000000">
<p style="color: white">SusBooks.com
</p>
<p style="color: white">Powered by
<img class="px-2" src="{{ url_for('static', filename='vexer.png') }}" style="width: 150px">
</p>
</div>
</footer>
<div id="ed73d0f4-3465-4dc6-87a9-e49c622764bb" style="display: block !important; z-index: 2147483647 !important;">
</div>
</html>
and my nav bar is correct in browser, white text and black background, but on mobile the navbar background goes to white and the text stays white. How would i go about changing the mobile nav bar background to match the desktop nav bar. I have tried for hours and still cant figure out how to change the background for mobile nav bar.
I can't see why you are getting this error. As you have no #media screen and (min-width) and only one main color changed
body {
background-color:#000000 ;
}
So the only thing I can offer (As I have run this code and it stays black) if that's what you want then it's working.
Add:
body {
color: #fff;
}
Color is for the Text, it will only work for text :).
If you are testing on your own phone, You may want to test in Incognito OR delete your history for the website (Only) keep your passwords etc and try again. Dossn't always update.
You can also try this for when it's messing up:
#media screen and (min-width 1000px)
change the 1000px to the point where it's not working and change the color to the one you want. Or anything for that matter.
Hope this helps! :)
A lot of information seems to be missing from your question.
Where are the CSS variables defined?
Are some of the scripts (javascripts) interfering with style?
This does not seem to be HTML, but some templating language (maybe Handlebars) since is contains a for-loop {% for items in data %} and also a {{name}} refrence?
Have you checked if your browsers has the same color scheme setting? I suspect one is in dark-mode and one is in light-mode.
To color an element in CSS you simply select the element either by className or by id, then you apply background-color: black.
in your case I believe you can use
.navbar-logo-left-container.shadow-three {
background-color: black;
}
Else you can use
.navbar-logo-left-container {
background-color: black !important;
}
You need to include the !important since a lot of styling made for that element are overwritten later.
I cannot help you more without further information.
Note: I tried to run in browser (chrome-based) and the navbar was black.
solved it by adding
.nav-menu-two {
background-color: black !important;
}
with help from cosby
Related
I keep seeing this effect used on a lot of websites and am wondering how they're doing it
Example: https://app.uniswap.org/#/?intro=true
When you hover over one of the navbar links, it looks like a button instead of a different colored text link. How would I do this? Also using bootstrap v5.3.0-alpha1 if that makes any difference
I have this navbar as an example:
import './App.css';
import React, { useState, useEffect } from "react";
const App = () => {
return (
<div className="App">
<nav className="navbar navbar-expand-sm">
<div className="container-fluid">
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<a className="navbar-brand d-none d-md-block" href='/'>
<img src={"./logo.png"} style={{ height: '50px', width: '50px'}} alt='' />
</a>
<div className="collapse navbar-collapse text-center justify-content-center" id="navbarTogglerDemo01">
<div className="navbar-nav">
<a className="nav-link active" aria-current="page" href="/#">Home</a>
<a className="nav-link" href="/#">about_1</a>
<a className="nav-link" href="/#">about_2</a>
<a className="nav-link disabled" href='/'>Disabled</a>
</div>
</div>
<div className="btn-group">
<WagmiConfig client={wagmiClient}>
<RainbowKitProvider
chains={chains}
initialChain={mainnet}
theme={lightTheme({
borderRadius: 'small'
})}
>
<ConnectButton accountStatus='address' chainStatus='none' showBalance={false} />
</RainbowKitProvider>
</WagmiConfig>
<div className="dropdown">
<button className="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
<i className="bi bi-three-dots"></i>
</button>
<ul className="dropdown-menu dropdown-menu-end" style={{ width: '30vw'}}>
<li><a className="dropdown-item" href="#">Action</a></li>
<li><a className="dropdown-item" href="#">Another action</a></li>
<li><a className="dropdown-item" href="#">Something else here</a></li>
{/* <li><i className={darkMode ? 'fas fa-sun' : 'fas fa-moon'}></i></li> */}
</ul>
</div>
</div>
</div>
</nav>
);
};
export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
It's just adding a background-color on hover. Also, add some padding around the links by default.
ul {
display: flex;
list-style: none
}
li {
margin-right: 15px;
}
a {
padding: 8px 15px;
color: #000;
text-decoration: none;
}
li:hover a {
background: #e1e1e1;
border-radius: 5px;
}
<nav>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</nav>
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-right: 20px;
}
nav a {
text-decoration: none;
color: #000;
transition: color 0.3s ease;
}
nav a:hover {
color: #fff;
background-color: #000;
}
In the CSS code above, we first define the basic styles for the navbar,
including a flexbox layout for the ul element and some margin and padding
adjustments for the li elements.
Then, we style the a elements with text-decoration: none and a default
color of black. We also add a transition property to animate the color
change when the link is hovered over.
Finally, we define the :hover styles for the a elements. When a link is
hovered over, we change the color to white and add a background-color of
black to create a contrast with the text. This creates a simple but
effective hover effect for the navbar links.`
I use Lufga font for my web app but the font isn't working on Safari or Firefox.
I've tried to use #font-face but it doesn’t seem to work, the text is still rendering in a default font.
for context, I use Django on VS Code if it's relevant. this project is in development, not production.
Here's my styles.css
(P.S. when I cmd+click on the URL link I do end up in the right file, so I guess the location is good)
#font-face{
font-family: 'Lufga';
src: url("../styles/Lufga-Regular.otf") format("Regular");
font-style: normal;
font-weight: normal;
}
.Logo
{
position: absolute;
width: 519.61px;
height: 135px;
left: calc(50% - 519.61px/2 + 0.3px);
top: calc(50% - 135px/2 - 60px);
}
.ComingSoon
{
position: absolute;
left: 38.59%;
right: 38.59%;
top: 51.88%;
bottom: 44.78%;
font-family: 'Lufga';
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 28px;
/* or 117% */
text-align: center;
color: #FFFFFF;
}
.Inquiries
{
position: absolute;
width: 487px;
height: 36px;
left: calc(50% - 487px/2 + 0.5px);
top: calc(50% - 36px/2 + 320px);
font-family: 'Lufga';
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 28px;
/* or 156% */
text-align: center;
color: #FFFFFF;
}
.EmailLink
{
font-family: 'Lufga';
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 28px;
color: #FFFFFF;
}
and here's my homepage.html
{% load static %}
<!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>XXX</title>
<link rel="icon" type="image/png" href="{% static '/favicon.png' %}"/>
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<div class="BackgroundShapes">
<img src="{% static '/Background Shapes.svg' %}" alt="BackgroundShapes Not loading2">
</div>
<div class="Elements">
<div class="Content">
<nav>
<ul class="DocumentContent">
<div class="Logo">
<img src="{% static '/Logo.svg' %}" alt="logo not loading">
</div>
<div class="ComingSoon">
<p>Coming Soon...</p>
</div>
<div class="SocialMediaLogos">
<a class="LinkedinLogo" href="#">
<img src="{% static '/Logo Linkedin.svg' %}" alt="logo not loading">
</a>
<a class="TwitterLogo" href="#">
<img src="{% static '/Logo Twitter.svg' %}" alt="logo not loading">
</a>
<a class="SnapchatLogo" href="#">
<img src="{% static '/Logo Snapchat.svg' %}" alt="logo not loading">
</a>
<a class="InstagramLogo" href="#">
<img src="{% static '/Logo Instagram.svg' %}" alt="logo not loading">
</a>
<a class="FacebookLogo" href="#">
<img src="{% static '/Logo Facebook.svg' %}" alt="logo not loading">
</a>
<a class="TikTokLogo" href="#">
<img src="{% static '/Logo Tik Tok.svg' %}" alt="logo not loading">
</a>
<a class="GithubLogo" href="#">
<img src="{% static '/Logo Github.svg' %}" alt="logo not loading">
</a>
<a class="YoutubeLogo" href="#">
<img src="{% static '/Logo Youtube.svg' %}" alt="logo not loading">
</a>
</div>
<div class="Inquiries">
<p>For any inquiries, please contact <a class="EmailLink" href="mailto: info#XXX.com">info#XXX.com</a></p>
</div>
</ul>
</nav>
</div>
</div>
</body>
</html>
thanks in advance for any help
Try having to format as opentype. Your using an Open Type font so you need to specify which format to use.
#font-face{
font-family: 'Lufga';
src: url("../styles/Lufga-Regular.otf") format("opentype");
font-style: normal;
font-weight: normal;
}
When i run the website on Android or Windows the text renders normally and everything works super smooth but when I run the website on iOS the text is just gone. Like it never existed. All other elements tuck in. It is almost as if all text has display: none;
not working on iOS
working on Android
Here is my html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link id="normalStylesheet" rel="stylesheet" href="style.css">
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<title>Tungstun Design and ICT</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#700&display=swap" rel="stylesheet">
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div class="main_section">
<div class="header"
data-aos="header-scroll"
data-aos-offset="100"
data-aos-duration="300"
data-aos-once="false"
data-aos-anchorPlacement="top-bottom"
data-aos-anchor=".work_content"
data-aos-easing="ease-in-out">
<ul id="header">
<li id="homeButton" class="headerItem"><a>Home</a></li>
<li id="workButton" class="headerItem"><a>Work</a></li>
<li id="contactButton" class="headerItem"><a>Contact</a></li>
</ul>
<img class="header_logo" src="images/logo#2x.png">
</div>
<div id="homeSection" class="logo_container">
<img class="logo" src="images/logo#2x.png">
</div>
<div class="buttons_container">
<button id="workMainButton" class="button primary_button">Work</button>
<button id="contactMainButton" class="button secondary_button">Contact</button>
</div>
<div class="image_div">
<img src="images/bgovals#2x.png" id="bgOvals">
</div>
<div class="circle_div"
data-aos="tagline-scroll"
data-aos-offset="100"
data-aos-duration="300"
data-aos-once="false"
data-aos-anchorPlacement="top-bottom"
data-aos-anchor=".work_content"
data-aos-easing="ease-in-out">
<img src="images/bgcircle#2x.png" id="bgCircle">
<h1 id="tagLine">A small IT and design company based in Utrecht</h1>
</div>
<div class="bottom_stroke"><hr><hr><hr></div>
</div>
<div id="workSection" class="work_content">
<h1 class="title">My work</h1>
<ul id="workList" class="work_list">
<li>
<div class="work_li_div">
<img src="images/amblogo.png" class="work_image">
<div class="work_name_div">Alles met boeken</div>
</div>
</li>
<li>
<div class="work_li_div">
<img src="images/Herfst.png" class="work_image">
<div class="work_name_div">VanGister</div>
</div>
</li>
<li>
<div class="work_li_div">
<img src="images/logo-transparent#2x.png" class="work_image">
<div class="work_name_div">Heimstel</div>
</div>
</li>
</ul>
<div class="bottom_stroke"><hr><hr><hr></div>
</div>
<div id="contactSection" class="contact_content">
<h1 class="title">Contact me</h1>
<h2>Let's make something great together!</h2>
<div class="form_div">
<form>
<label for="formName">Your name</label><br>
<input id="formName" type="text"><br>
<label for="formEmail">Your e-mail</label><br>
<input id="formEmail" type="email"><br>
<label for="formType">What can I do for you?</label><br>
<select id="formType"></select><br>
<form action="formMessage">Anything to add?</form>
<textarea id="formMessage" type="text"></textarea><br>
<button id="formConfirmButton" type="button">Shoot!</button>
</form>
</div>
<div class="bottom_stroke"><hr><hr><hr></div>
</div>
<script src="work.js" type="text/javascript"></script>
<script>
AOS.init();
</script>
</body>
</html>
And here my css
#font-face {
font-family: gotham_medium;
src: url(font/GothamMedium.svg);
src: url(font/GothamMedium.ttf);
}
#font-face {
font-family: gotham_book;
src: url(font/GothamBook.svg);
src: url(font/GothamBook.ttf);
}
html, body {
background-color: var(--tungstun-background);
margin: 0px;
font-family: 'gotham_medium', 'Open Sans', sans-serif;;
text-rendering: optimizeLegibility;
}
Your implementation is correct, but the .ttf file is corrupted. Chrome is more forgiving than safari, but you can see that the font behaves weird on chrome, too (compare the two pictures using your font and the browser default font)
Load the font from a trusted source and if you refactored that font using an online service, try another one. The website itself works, you can test it by changing the font.
<html>
<head>
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="MY_CLIENT_ID_ON_GOOGLE_DEV.apps.googleusercontent.com">
<!-- To integrate Google Sign-in -->
<script src="https://apis.google.com/js/api.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
</body>
</html>
It is not displayed.
What's wrong with this HTML snippet? Do I have to do something else to display the Google sign-in button?
If you use Bootstrap v4, you can get a nice-looking button like the one below with something like:
<div class="row">
<div class="col-md-3">
<a class="btn btn-outline-dark" href="/users/googleauth" role="button" style="text-transform:none">
<img width="20px" style="margin-bottom:3px; margin-right:5px" alt="Google sign-in" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png" />
Login with Google
</a>
</div>
</div>
<!-- Minified CSS and JS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous">
</script>
This is an elegant solution I came up with using materializecss.
Code
<div class="col s12 m6 offset-m3 center-align">
<a class="oauth-container btn darken-4 white black-text" href="/users/google-oauth/" style="text-transform:none">
<div class="left">
<img width="20px" style="margin-top:7px; margin-right:8px" alt="Google sign-in"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png" />
</div>
Login with Google
</a>
</div>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
CHECK: https://developers.google.com/identity/sign-in/web/build-button
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
<script src="https://apis.google.com/js/api:client.js"></script>
<script>
var googleUser = {};
var startApp = function() {
gapi.load('auth2', function(){
// Retrieve the singleton for the GoogleAuth library and set up the client.
auth2 = gapi.auth2.init({
client_id: 'YOUR_CLIENT_ID.apps.googleusercontent.com',
cookiepolicy: 'single_host_origin',
// Request scopes in addition to 'profile' and 'email'
//scope: 'additional_scope'
});
attachSignin(document.getElementById('customBtn'));
});
};
function attachSignin(element) {
console.log(element.id);
auth2.attachClickHandler(element, {},
function(googleUser) {
document.getElementById('name').innerText = "Signed in: " +
googleUser.getBasicProfile().getName();
}, function(error) {
alert(JSON.stringify(error, undefined, 2));
});
}
</script>
<style type="text/css">
#customBtn {
display: inline-block;
background: white;
color: #444;
width: 190px;
border-radius: 5px;
border: thin solid #888;
box-shadow: 1px 1px 1px grey;
white-space: nowrap;
}
#customBtn:hover {
cursor: pointer;
}
span.label {
font-family: serif;
font-weight: normal;
}
span.icon {
background: url('/identity/sign-in/g-normal.png') transparent 5px 50% no-repeat;
display: inline-block;
vertical-align: middle;
width: 42px;
height: 42px;
}
span.buttonText {
display: inline-block;
vertical-align: middle;
padding-left: 42px;
padding-right: 42px;
font-size: 14px;
font-weight: bold;
/* Use the Roboto font that is loaded in the <head> */
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<!-- In the callback, you would hide the gSignInWrapper element on a
successful sign in -->
<div id="gSignInWrapper">
<span class="label">Sign in with:</span>
<div id="customBtn" class="customGPlusSignIn">
<span class="icon"></span>
<span class="buttonText">Google</span>
</div>
</div>
<div id="name"></div>
<script>startApp();</script>
</body>
</html>
In a single line (result):
<button type="button" style="background:#4285f4; color:white; border:none; width:110px; height:40px; border-radius:3%;"><img src="https://www.iconfinder.com/data/icons/social-media-2210/24/Google-512.png" style="width:30px; background:white; border-radius:50%;" alt=""><b style="top: -10px; left: 5px; position: relative">Google</b></button>
If you happen to use Foundation:
<div>
<a class="hollow button primary" href="#">
<img width="15px" style="margin-bottom:3px; margin-right:5px" alt="Google login" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png" />
Sign in with Google
</a>
</div>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
onClick={handleGoogleLogin}
>
<img
width="20px"
style={{ marginBottom: "3px", marginRight: "5px" }}
alt="Google sign-in"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png"
/>
Login with Google
</Button>
enter image description here
Im using Django web framework for my first project, trying to adjust my fonts. However, after various trial and error I was able to get a new font to render on my page. The problem is that when I get ride of my .font class, the p { } element no longer works for whatever reason and the font remains unchanged. I can't get my font to change any other way... I have NO idea why this is happening, driving me crazy...
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type = "text/css"/>
<link rel="stylesheet" href="{% static 'personal/css/custom2.css' %}" type = "text/css"/>
<link href="https://fonts.googleapis.com/css?family=Sansita" rel="stylesheet">
</head>
<!-- header table, no text displayed -->
<Br>
<Br>
<table align='center' width='75%' border= '0px'>
<tr>
<td bgcolor='transparent'>
</td>
</tr>
s
</table>
<!-- main body -->
<body background = "{% static 'personal/img/background.jpg' %}">
<table align='center' width='75%' border='1px'>
<tr>
<td bgcolor='white'>
<div class="body" style="min-height:95%; ">
<div class="row">
<div class="col-sm-2">
<br>
<center>
<img src="{% static 'personal/img/profile.jpg' %}" class="responsive-img" style='max-height:100px;' alt="face">
</center>
</div>
<div class="col-sm-10">
<br>
<p>test paragraph</p>
</div>
</div>
<!-- navigation bar -->
<nav class="navbar navbar-inverse" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"></a>
</div>
<ul class="nav navbar-nav">
<li><a href='/header/'>HQ</a></li>
<!--<li><a href='/blog/'>Blog</a></li>-->
<li><a href='/bucket/'>TO DO</a></li>
<li><a href='/influencers/'>TO MEET</a></li>
<li><a href='/contact/'>TO CONTACT</a></li>
<li><a href='https://www.linkedin.com/in/pete-humiston-30255a5b' target='_blank'>LinkedIn</a></li>
</ul>
</div>
</nav>
{% block content %}
{% endblock %}
<footer>
<!-- This is a footer I'll leave for later. Overkill.
<div class="container-fluid" style='margin-left:15px'>
<p>Contact | LinkedIn | Twitter | Google+</p>
-->
</div>
</footer>
</td>
</tr>
</table>
</body>
</html>
Custom2.css
<style>
#import url('https://fonts.googleapis.com/css?family=Sansita');
</style>
.font {
font-family: 'Sansita', sans-serif;
}
p {
font-family: 'Sansita', sans-serif;
}
An external css file (Custom2.css) does not need <style> tags - just put straight CSS in it. The presence of those tags will break the next CSS rule. So if you have those tags in your CSS file, and you remove .font, then p won't be read since it will now come after those tags.
The contents should be...
#import url('https://fonts.googleapis.com/css?family=Sansita');
.font {
font-family: 'Sansita', sans-serif;
}
p {
font-family: 'Sansita', sans-serif;
}