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;
}
Related
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
This question already has answers here:
Embed image in a <button> element
(11 answers)
Closed 10 months ago.
How would i add an image on a button? Right now i am trying to create a banner like thing for a big button but the image doesn't seem to get inside the button as shown here:
I want the image to be inside the button and not separate each other like that
Here is the HTML code:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Saharsh | Projects</title>
<link rel='stylesheet' href='/Styles/projects.css'>
<link rel='stylesheet' href='../style.css'>
<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
<link rel='icon' type='image/x-icon' href='/Images/Branding/pfp.png'>
</head>
<body class='container'>
<div id='home'>
<nav class='navbar'>
<ul>
<li><a href='../index.html'>Home</a></li>
<li><a href='#aboutMe'>About me</a></li>
<li><a href='#moreSoon'>Contact me</a></li>
</ul>
</nav>
</div>
<br class='us'><br class='us'><br class='us'>
<br class='us'><br class='us'><br class='us'>
<br class='us'>
<div>
<h1 class='main'>My Projects</h1>
</div>
<br class='us'><br class='us'><br class='us'>
<br class='us'>
<div>
<a href='#aboutMe'><img src='../Images/Projects/Modular-FPS.png' class='banner'><button class='project_button'>Modular FPS Template</button></img></a>
</div>
<br class='us'><br class='us'><br class='us'>
<br class='us'><br class='us'><br class='us'>
<div>
<h1 id='moreSoon' style='text-align: center;'>
<a href='https://github.com/Saharsh1223' target='_blank'><span class='icon_span'><img class='icon' src='/Images/Socials/github.svg'></span></a>
<a href='https://discord.gg/bkP2P5uuH2' target='_blank'><span class='icon_span'><img class='icon' src='/Images/Socials/discord.svg'></span></a>
<a href='https://youtube.com/SaharshDev' target='_blank'><span class='icon_span'><img class='icon' src='/Images/Socials/youtube.svg'></span></a>
<a href='https://twitter.com/Saharsh1223' target='_blank'><span class='icon_span'><img class='icon' src='/Images/Socials/twitter.svg'></span></a>
</h1>
</div>
<br class='us'>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src='Scripts/scrollSmooth.js'> </script>
<!-- <script src='Scripts/i_am_a.js'> </script> -->
</body>
</html>
And here is the CSS code:
#font-face {
font-family: 'mainFont';
src: url("../Fonts/Poppins/Poppins-Medium.ttf") format('truetype');
}
#font-face {
font-family: 'descFont';
src: url("../Fonts/Poppins/Poppins-Regular.ttf") format('truetype');
}
.project_button {
font-family: 'descFont';
font-weight: normal;
font-style: normal;
background-color: #181818;
border: none;
color: white;
/* padding: 20px; */
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 4px 6px;
border-radius: 10px;
cursor: pointer;
width: 450px;
height: 250px;
box-shadow: 0px 16px 16px rgba(0,0,0,0.14);
transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.project_button:hover {
transform: scale(1.03);
}
.banner {
width: 350px;
height: 190px;
}
Thanks in Advance!
You can do this:
<button class='project_button'>Modular FPS Template <img src='../Images/Projects/Modular-FPS.png' /></button>
Move your image inside the button.
Please try this. Thanks.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<button><img src="image.jpg" alt="No Image" width="50" height="30"></button>
</body>
</html>
You can try adding the onClick event to the img tag:
<img onClick="window.open("https://example.com")" />
You should be able to do it using a form and using an input with the "image" type like this:
<input type="image" id="myimage" src="[...]" />
body{
background-color:hsl(240, 73%, 65%);
font-size: 12px;
font-family: 'Kumbh Sans', sans-serif;
}
img{
width: 90%;
}
h3{
font-weight: 700;
}
p{
font-weight: 400;
font-size: smaller;
display: none;
margin-top: 2%;
padding-right: 5px;
}
hr{
color: hsl(240, 5%, 91%);
}
.container{
width: 800px;
height: 400px;
margin-top: 100px;
background-color: white;
background-image: url("images/bg-pattern-desktop.svg");
}
.images{
overflow:hidden;
}
.lady{
position: absolute;
top: 65px;
left: -50px;
object-fit: cover;
}
.box{
width: 37%;
position: absolute;
top: 190px;
left: -70px;
z-index: 1;
}
.wrapper{
padding: 5%;
}
.img-fluid{
width: 2.5%;
position: absolute;
right: 50px;
}
.que:hover{
cursor: pointer;
color: hsl(14, 88%, 65%);
}
.font-toggle{
font-weight: 700;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<!-- Bootstrap link -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="styles.css">
<title>Frontend Mentor | FAQ Accordion Card</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6 images">
<img class="lady" src="images/illustration-woman-online-desktop.svg" alt="">
<img class="box" src="images/illustration-box-desktop.svg" alt="">
</div>
<div class="col-6 wrapper">
<h3>FAQ</h3>
<div class="question">
<div class="que"> How many team members can I invite?</div>
<img class="img-fluid" src="images/icon-arrow-down.svg" alt="">
<p>You can invite up to 2 additional users on the Free plan. There is no limit on
team members for the Premium plan.</p>
</div>
<hr>
<div class="question">
<div class="que">What is the maximum file upload size?</div>
<img class="img-fluid" src="images/icon-arrow-down.svg" alt="">
<p>No more than 2GB. All files in your account must fit your allotted storage space.</p>
</div>
<hr>
<div class="question">
<div class="que">How do I reset my password?</div>
<img class="img-fluid" src="images/icon-arrow-down.svg" alt="">
<p>Click “Forgot password” from the login page or “Change password” from your profile page.A reset link will be emailed to you.</p>
</div>
<hr>
<div class="question">
<div class="que">Can I cancel my subscription?</div>
<img class="img-fluid" src="images/icon-arrow-down.svg" alt="">
<p> Yes! Send us a message and we’ll process your request no questions asked.</p>
</div>
<hr>
<div class="question">
<div class="que">Do you provide additional support?</div>
<img class="img-fluid" src="images/icon-arrow-down.svg" alt="">
<p> Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
</div>
<hr>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="index.js"></script>
<div class="attribution">
</div>
</body>
</html>
I have applied the overflow:hidden property but it is cropping both the images. I want the lady(with laptop) image to be cropped(which is overflowing out of
the container) and show the box image, exactly as it is in the image.
Please see the preview image for reference.
I am stuck. Please help me out. I have just started learning.
Thanks!
You need to wrap the lady image into another div and set the overflow to hiddin in there.
Then position the lady using margins instead of top or left. See here:
body{
background-color:hsl(240, 73%, 65%);
font-size: 12px;
font-family: 'Kumbh Sans', sans-serif;
}
img{
width: 90%;
}
h3{
font-weight: 700;
}
p{
font-weight: 400;
font-size: smaller;
display: none;
margin-top: 2%;
padding-right: 5px;
}
hr{
color: hsl(240, 5%, 91%);
}
.container{
width: 800px;
height: 400px;
margin-top: 100px;
background-color: white;
background-image: url("images/bg-pattern-desktop.svg");
}
.box{
width: 37%;
position: absolute;
top: 190px;
left: -70px;
z-index: 1;
}
.wrapper{
padding: 5%;
}
.img-fluid{
width: 2.5%;
position: absolute;
right: 50px;
}
.que:hover{
cursor: pointer;
color: hsl(14, 88%, 65%);
}
.font-toggle{
font-weight: 700;
}
.ladywrap{
overflow: hidden;
}
.lady{
margin-left: -50px;
margin-top: 65px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<!-- Bootstrap link -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="styles.css">
<title>Frontend Mentor | FAQ Accordion Card</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6 images">
<div class="ladywrap">
<img class="lady" src="https://frontendmentor-faq-accordion-card.vercel.app/img/illustration-woman-online-desktop.44e30650.svg" alt="">
</div>
<img class="box" src="https://frontendmentor-faq-accordion-card.vercel.app/img/illustration-box-desktop.a7ef46ea.svg" alt="">
</div>
<div class="col-6 wrapper">
<h3>FAQ</h3>
<div class="question">
<div class="que"> How many team members can I invite?</div>
<img class="img-fluid" src="images/icon-arrow-down.svg" alt="">
<p>You can invite up to 2 additional users on the Free plan. There is no limit on
team members for the Premium plan.</p>
</div>
<hr>
<div class="question">
<div class="que">What is the maximum file upload size?</div>
<img class="img-fluid" src="images/icon-arrow-down.svg" alt="">
<p>No more than 2GB. All files in your account must fit your allotted storage space.</p>
</div>
<hr>
<div class="question">
<div class="que">How do I reset my password?</div>
<img class="img-fluid" src="images/icon-arrow-down.svg" alt="">
<p>Click “Forgot password” from the login page or “Change password” from your profile page.A reset link will be emailed to you.</p>
</div>
<hr>
<div class="question">
<div class="que">Can I cancel my subscription?</div>
<img class="img-fluid" src="images/icon-arrow-down.svg" alt="">
<p> Yes! Send us a message and we’ll process your request no questions asked.</p>
</div>
<hr>
<div class="question">
<div class="que">Do you provide additional support?</div>
<img class="img-fluid" src="images/icon-arrow-down.svg" alt="">
<p> Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
</div>
<hr>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="index.js"></script>
<div class="attribution">
</div>
</body>
</html>
I am trying to convert an HTML file to PDF for download purpose in Django using xhtml2pdf library. But after converting to PDF, the CSS is not working.
Here is my HTML code snippet:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Certificate</title>
{% load static %}
<link href="{% static 'koss/css/bootstrap.min.css' %}" rel="stylesheet">
<style>
.test {
position: relative;
bottom: -309px;
left: 331px;
color: #151313;
padding-left: 25px;
padding-right: 20px;
}
#profile_image1{
margin-top: -147px;
margin-left: 171px;
}
#profile_image2{
margin-left: 156px;
}
</style>
</head>
<body>
<div class="test">
<h3>name 1</h3>
</div>
<div class="test">
<h3> name2 </h3>
</div>
<div class="test">
<h3>name3 </h3>
</div>
<img id="profile_image1" alt="image" class="img-fluid m-3" src="{% static 'koss/img/memcirti1.png'%}"
onerror="imgError(this);">
<br>
<img id="profile_image2" alt="image" class="img-fluid m-3" src="{% static 'koss/img/memcirti2.jpg'%}"
onerror="imgError(this);">
</body>
</html>
How can I solve the problem?
Is there a way to make these images smaller? and fit into a box? I followed according to a tutorial and images are bigger.This is zoomed out to 25% view. I'm looking for a way to resize the images to fit into the gallery like view, in the tutorial, the person ended up with a perfect gallery type output unlike me xd .This is for a django project and thanks in advance :)
This is normal zoomed out view:
html code:
{% extends 'portofolio/base.html' %}
{% load static %}
{% block content %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css">
<link rel="stylesheet" href="{% static "portofolio/css/photogallery.css" %}">
<body>
<h1 style="margin-top: 70px;">Image Gallery</h1>
<div id="jLightroom" class="jlr">
<a href="{% static "portofolio/images/1.jpg" %}" data-lightbox="lb1" class="jlr_item">
<img src="{% static "portofolio/images/1.jpg" %}">
</a>
<a href="{% static "portofolio/images/2.jpg" %}" data-lightbox="lb1" class="jlr_item">
<img src="{% static "portofolio/images/2.jpg" %}">
</a>
<a href="{% static "portofolio/images/3.jpg" %}" data-lightbox="lb1" class="jlr_item">
<img src="{% static "portofolio/images/3.jpg" %}">
</a>
<a href="{% static "portofolio/images/4.jpg" %}" data-lightbox="lb1" class="jlr_item">
<img src="{% static "portofolio/images/4.jpg" %}">
</a>
<a href="{% static "portofolio/images/5.jpg" %}" data-lightbox="lb1" class="jlr_item">
<img src="{% static "portofolio/images/5.jpg" %}">
</a>
<a href="{% static "portofolio/images/6.jpg" %}" data-lightbox="lb1" class="jlr_item">
<img src="{% static "portofolio/images/6.jpg" %}">
</a>
<a href="{% static "portofolio/images/7.jpg" %}" data-lightbox="lb1" class="jlr_item">
<img src="{% static "portofolio/images/7.jpg" %}">
</a>
</div>
</div>
</body>
<script src="{% static 'portofolio/js/jquery.min.js' %}"></script>
<script src="{% static 'portofolio/js/imagesloaded.pkgd.min.js' %}"></script>
<script src="{% static 'portofolio/js/lightbox.min.js' %}"></script>
<script src="{% static 'portofolio/js/jquery.lightroom.js' %}"></script>
<script type="text/javascript">
$("#jLightroom").lightroom({
image_container_selector: ".jlr_item",
img_selector: "img.jlr_img",
img_class_loaded: "jlr_loaded",
img_space: 5,
img_mode: 'min',
init_callback: function (elem) {
$(elem).removeClass("gray_out")
}
}).init();
</script>
{% endblock %}
css code:
.jlr {
font-size: 0;
}
.jlr div {
font-size: 1rem;
display: inline-block;
box-sizing: border-box;
padding: 10px;
}
.jlr div img {
height: 100px;
opacity: 0;
}
.jlr img.jlr_loaded {
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
-ms-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
opacity: 1;
}
Luckly i was doing something like this and i used grid , it actually helped me to put the images beside each other in one line in a specific box just like in the photo below, you can open the link below the code and see the output.
Grid box for images
HTML:
<div class='l-grid'>
<div class='c-project'>
<img src='./images/fulls/01.jpg'>
<div>
<h4>Tower</h4>
</div>
</div>
<div class='c-project'>
<img src='./images/fulls/02.jpg'>
<div>
<h4>Water fall</h4>
</div>
</div>
<div class='c-project'>
<img src='./images/fulls/03.jpg'>
<div>
<h4>River</h4>
</div>
</div>
<div class='c-project'>
<img src='./images/fulls/04.jpg'>
<div>
<h4>Sea</h4>
</div>
</div>
<div class='c-project'>
<img src='./images/fulls/06.jpg'>
<div>
<h4>Beautiful face</h4>
</div>
</div>
</div>
CSS:
.l-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-gap: 0.5rem; /*Here you can control the spacing between the images*/
}
.c-project img {
width: 100%;
}
You can use the width and height attribute to resize your image.
<img src="{% static "portofolio/images/7.jpg" %}" width="Your preferred width" height="Your preferred height">
To position images, you can use margin attributes:
<html>
<head>
<title>Test website </title>
</head>
<style>
#test {margin-left: 70px;
margin-top: 80px}
</style>
<body>
<img id="test" src="test image.png"/>
</body>
</html>