specifically: animation: rotate 1.5s infinite linear;

    <div class="outer">
      <div class="inner">
      </div>
    </div>

.outer {
  width: 200px;
  height: 200px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 700px;
  border: 30px solid white;
  border-bottom: 30px solid transparent;
  border-right: 30px solid transparent;
  animation: rotate 1.5s infinite linear;
}

.inner {
  width: 100px;
  height: 100px;
  display: block;
  border-radius: 700px;
  opacity: 0.7;
  border: 25px solid white;
  border-bottom: 25px solid transparent;
  border-right: 25px solid transparent;
  transform: rotate(-0.50turn);
  animation: rotate 0.5s infinite linear;
  animation-direction: reverse;
}


@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

I have to set them one second apart for the animation to work, otherwise the inner circle will just keep rotating clockwise ?!

searching other  tools like google stitch using prompt to have first version of mobile app design ?

the goal is just to have the template as html/css to start

thanks

link https://www.eugenemdonaghy.co.uk/flex/links.html to see what I mean and what I want

have a codepen at Untitled

I'm creating a construction query website. And on the home page I want a drop down menu that contains all the trade category's but while it's inactive ( not clicked) I want it to constantly vertical carousel through all the different trades as a previous for what you can pick.

Does anybody have any idea where to start. Doing a Google search I didn't really find any examples of one.

I'm assuming this could be done with JavaScript and CSS. A plugin would be fine though.

If I could create a tombola effect it would be awesome.

Kind regards

Tom 

I'm a beginner - I adapted a portfolio website for my film-making stuff, so I only half know what I'm doing.

I have a datafilter so you can sort my projects by various titles, like 'corporate' or 'music video' for example and see only those projects.

Is there a way to send someone a link so that when the page loads it has a certain filter applied? Like if I'm going for a corporate job, can I send them a link that will open to the page with the filter set to showcase my corporate work? Currently it defaults to 'all'. I've tried anchor links, obviously that doesn't work.

It's complicated by the fact that I simply added to existing code and it worked, but I don't really understand the underlying mechanism.

This is the code that makes it run;

Many Thanks for any help.

  <div class="col-lg-12">
                   <ul class="portfolio__filter">
				  <li class="active" data-filter="*">All</li>
				  <li data-filter=".corporate">Corporate</li>
				   <li data-filter=".mvid">Music Video</li>
				<li data-filter=".director">Director</li>
				<li data-filter=".editor">Editor</li>
				  <li data-filter=".actor">Actor/Presenter/VO</li>
				  <li data-filter=".writer">Writer</li>
				  <li data-filter=".composer">Composer</li>
					<li data-filter=".vfx">VFX</li>
				</ul>
                </div>

Every item is position on the page with top, bottom, left and or right. No floats, no flex...

I had googled and it seems to be rare.

Is this something that was done many years ago, does anyone have experience / opinions on this?

I’ve recently started diving into both web development and mobile app development, and I’m curious about what others think is the smarter focus in today’s digital world.

While web development offers a solid foundation for building websites and web applications, I’ve noticed mobile app development is becoming more essential as businesses shift toward mobile-first strategies. Whether it’s Android or iOS, almost every business today wants a dedicated app to boost engagement and provide better user experience.

That said, I’d love to hear from experienced developers—Which one has better scope, growth, and freelance opportunities right now? Are there any specific frameworks or tech stacks you recommend for beginners in mobile app development?

Let’s share some insights and help each other grow in this fast-moving industry.

Looking forward to your thoughts!
 

<code>

tags is rendered.

Is there any nice script that get rids of rendering and adds proper indentation, or do all instructor websites really make their code blocks manually?

Thanks for your help!

So I found this but in their example they have an onClick() event.

My question is. Do I need 

role="link"

if I have this as my code?

            <a href="#startseite">
              <img
                src="img/startseite.svg"
                alt="Startseite"
                title="Startseite"
              />
            </a>

Many thanks for your help!

As a developer at Gramosoft, I've seen many websites struggle with performance issues. Here are a few tips that can help enhance loading speeds:

1. Optimize Images: Use formats like JPEG for photos and compress them to reduce load times.
2. Minimize HTTP Requests: Combine CSS and JavaScript files to decrease the number of requests.
3. Enable Browser Caching: This stores resources for faster loading on return visits.

Implementing these practices can lead to a noticeable improvement in user experience. What other strategies do you find effective?

Thanks

Thanks,

Wayne

I wanted to take a moment to introduce you all to a project that’s been a true labor of love for me—Gradienty. As a designer myself, I’ve always been looking for ways to speed up my workflow, particularly when it comes to adding those little touches that really make a design pop, like gradients and frosted glass effects. I got tired of tweaking CSS endlessly just to get things looking the way I wanted, so I decided to build something that solves that for us.

That’s where Gradienty comes in.

What is Gradienty?
It’s a free web tool I created specifically for designers who use Tailwind CSS (but honestly, it works well for any CSS-based project). With just a few clicks, you can generate beautiful gradients, text gradients, glassmorphism effects, mesh gradients, and even custom blob shapes. No need to mess around with CSS code or worry about getting the right gradient stop. It’s fast, it’s easy, and it gives you copy-paste-ready CSS to drop into your projects.

Why did I build this?
Like most of you, I’m constantly juggling between client work, side projects, and just general experimentation. I wanted something that could take some of the repetitive work off my plate while still giving me full creative control. After launching the first version last year, the feedback I got from fellow designers really helped shape Gradienty V2 into what it is now. Every feature in the tool has been added with real-world design needs in mind, based on what the community wanted.

Here’s what you can do with Gradienty:

• Generate Gradient Backgrounds: Create smooth, eye-catching backgrounds with multi-layered gradients. Choose your colors, adjust stops, and copy the code—simple as that.

• Text Gradients: Make your typography pop with stylish gradient text effects, perfect for making headers or callouts stand out.

• Gradient Box Shadows: Add depth to your design elements with subtle or bold gradient shadows to give your UI components that extra touch.

• Glassmorphism: Easily craft frosted glass effects that are perfect for modern UIs. With just a few tweaks, you can bring the trendy Glassmorphism style into your projects.

• Mesh Gradients: For more abstract designs, create fluid, multi-color gradients with our mesh generator—great for backgrounds or adding a modern, artistic vibe.

• Blob Generator: Fun, customizable blob shapes to use as design accents or background elements. You can adjust their size, form, and complexity to match your aesthetic.

I know there are tons of tools out there, but what makes Gradienty different is that it’s made by someone who gets the design process. I’ve kept everything free and completely open—no paywalls or hidden features—because I really believe in empowering fellow designers to create beautiful work without barriers.

You can give it a try here: Gradienty.codes.

I’d love to hear your thoughts, suggestions, or feedback. The tool is constantly evolving, and it’s really driven by what you, the design community, needs.

Looking forward to seeing what you create!

I hope you are all great. It has been a minute since I posted. I need to do it more. I hope this topic is in the right place.

I am doing a website for a restaurant and it has been many years since they had an upgrade.

I found the attached as a background to their buttons.

I think I remember doing this 'back in the day'.

But can someone remind me why we did this? Was it because gradients had not been 'invented' yet, or was it to do with cross-border support?

Thanks so much for your help.

@import url ("assets/bootstrap/css/bootstrap.min.css");
@import url ("../assets/fonts/ionicons.min.css");
@import url ("Footer-Basic.css");
@import url ("Navigation-Clean.css");
@import url ("links.css");

the css is stored in assets > css directory  any idea on how to resolve?

I have been working on a learning project to create a form that is similar to the Plate Builder form of https://www.nationwidenumberplates.com/shop/builder. I have been going around in circles and at my wits end. I did find some help here from a post in 2020 but the preview of the plate is somehow misplaced and not in position. This is the thread link of the topic way back in 2020 https://www.webdesignerforum.co.uk/topic/85497-number-plate-designer/

Can someone please help me out. Much appreciated!!

i have a problem with my contact Form ....

Ι fill in the fields of the contact form and click send.

The mail goes normally but blank. Without any of the data I put in the fields.

Look my Code.

sendemail.php File

<?php
$name       = $_POST['name']; 
$from       = $_POST['email']; 
$subject    = $_POST['subject']; 
$message    = $_POST['message']; 
$to           = 'info@geapellas.gr';//replace with your email

$headers   = array();
$headers[] = "MIME-Version: 1.0";
$headers[] = "Content-type: text/plain; charset=iso-8859-1";
$headers[] = "From: {$name} <{$from}>";

mail($to, $subject, $message, $headers);

die;

Html Contact index File

                         <form id="main-contact-form" name="contact-form" method="post" action="sendemail.php">
                               <div class="form-group">
                                <input type="text" placeholder="Όνομα" class="form-control" name="name" id="name">
                            </div>
                            
                            <div class="form-group">
                                <input type="email" placeholder="Email" class="form-control" name="email" id="email">
                            </div>
                            
                            <div class="form-group">
                                <input type="text" placeholder="Θέμα" class="form-control" name="subject" id="subject">
                            </div>
                            
                            <div class="form-group">
                                <textarea rows="6" placeholder="Μήνυμα" class="form-control" name="message" id="message"></textarea>    
                            </div>
                                <button type="submit" id="contact-submit" class="btn btn-primary">Αποστολή</button>
                            </form>

Can someone find the problem please ?

Thanks 

I have a problem with a hamburger menu displaying on a mobile device, everything is fine with the layout on a PC but on a mobile device, the whole menu displays & not the small hamburger type, do I need to post the code or the website name please?

Best wishes,

Graeme

I have tried to call freeze() on the headroom js library when mobile menu open but no luck.. (header stays open, but touch event bs still happens!)

Any ideas guys? ❤️ Will you buy a coffee or two!!! 

Live link: https://rb.gy/k28esn

if (data?.gallerySingle) {
  const gallerySingleUrl = urlFor(data.gallerySingle).url(); data.gallerySingle.blurDataURL = await getBase64Blur(gallerySingleUrl);
}

What would be a better way to generate the blur URLs? Should I do it on the client side instead? Or can you see any issues with the code below?
 

async function getPageData(slug: string) {
  const query = ` *[_type == "fleet" && slug.current == '${slug}'] {
    "currentSlug": slug.current,
    title, mainImage, threedVideoUrl,
    "gallerySingle": gallerySingle.asset->{ _id, url, metadata { dimensions { width, height } } },
  ]}[0]`; 

  const data = await client.fetch(query); if (data?.gallerySingle) { const gallerySingleUrl = urlFor(data.gallerySingle).url(); 

  data.gallerySingle.blurDataURL = await getBase64Blur(gallerySingleUrl); } return data;
}

Using: https://plaiceholder.co/ to generate the base64 blur data Thank you!

Anyone got any ideas on what I'm doing wrong haha. First time using next js!

Would you be able to tell me the name of the attached please?  Thank you

I have just begun learning JS at W3 Schools.
At the Introduction(https://www.w3schools.com/js/js_intro.asp), it is stated that JS is insensitive to the use of either single- or double quotes.
The Introduction states these two lines are the same:

document.getElementById("demo").innerHTML = "Hello JavaScript";

And:

document.getElementById('demo').innerHTML = 'Hello JavaScript';

The first uses double quotes and the second singe quotes.
However, the exercise for changing the src of an image reveals a quote-sensitivity:

<button onclick="document.getElementById('myImage').src='https://www.w3schools.com/js/pic_bulbon.gif' ">On</button>
<img id="myImage" src="https://www.w3schools.com/js/pic_bulboff.gif" />
<button onclick="document.getElementById('myImage').src='https://www.w3schools.com/js/pic_bulboff.gif' ">Off</button>

Here, getElementById('myImage') uses single quotes. This functions properly when ran; please see JSfiddle for example: https://jsfiddle.net/d6kac84f/

However, in the following code I use double quotes to enclose myImage, yielding an apparent syntax error:

<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById("myImage").src='https://www.w3schools.com/js/pic_bulbon.gif' ">On</button>
<img id="myImage" src="https://www.w3schools.com/js/pic_bulboff.gif" />
<button onclick="document.getElementById("myImage").src='https://www.w3schools.com/js/pic_bulboff.gif' ">Off</button>
</body>
</html>

See JSfiddle: https://jsfiddle.net/x42o7sgp/
The JSfiddle console states the following (as a neophyte to me yet unintelligible):

Quote

"<a class='gotoLine' href='#39:129'>39:129</a> Uncaught SyntaxError: Unexpected end of input"
"<a class='gotoLine' href='#41:130'>41:130</a> Uncaught SyntaxError: Unexpected end of input"

This is strange, because the above two codes  use singe- and double quotes without yielding a syntax error:

document.getElementById("demo").innerHTML = "Hello JavaScript";
document.getElementById('demo').innerHTML = 'Hello JavaScript';

It is as if the sensitivity suddenly lies within the parenthesis:

<button onclick="document.getElementById('myImage').src='https://www.w3schools.com/js/pic_bulbon.gif' ">On</button> (This one works)
<button onclick="document.getElementById("myImage").src='https://www.w3schools.com/js/pic_bulbon.gif' ">On</button> (This one doesn't work)

Thank you, should you be willing to point me in the right direction.

Architect

At 2:44:10 of Dave Gray's excellent CSS tutorial for beginners, the intention is to make a hover effect have the same rounded corners as its container, so that they visually match.  My code seems identical to his, but I cannot attain the same effect. Here is my page (JSFiddle). The li:last-child a{border-radius: 0 0 2rem 2rem;} doesn't work yet does not seem erroneous. It is intended to make the last li a:hover assume the same shape as the rounded bottom corners of the nav element, in which the list anchors are nested.

Can anyone point out to me where my code is not identical to his? I apologize; I really cannot see it.

Kindly,

Architect

P.S.
The forum doesn't allow me to form a link to the YouTube video; I'll try to copy/pate it here directly rather than hyperlink a relevant piece of text in my message above: 

P.P.S.
Forum doesn't accept my link to JSFiddle either, so I'll try to copy/paste the link here rather than hyperlink the relevant text above: https://jsfiddle.net/Architect0/28psknzc/7/

Is there something you are supposed to do beyond standard practice? Perhaps a way to control the tag?

This is the code

<div id="#footer-cloud">
  <h2>Popular tags</h2>
  <?php wp_tag_cloud('smallest=8&largest=24&'); ?>
</div>

#footer-cloud {
width: 200px;
float: left;
}

and it probably extends out an additional 200px in width.

Any thoughts as to what I'm doing wrong here?

Some caveats:

• thumbs should stay fairly close to the corresponding text.
• thumbs can overlap, but not fully.
• both the text and the thumb positions should be random on every page refresh
• text and thumbs shouldn't fall outside the screen.
• should be scalable (i.e.. I will have max. 10 texts and max. 10 thumbs for every text. the thumbs could spread concentrically if need be)

See the image for an example of what I mean:

I'm new here, so please let me know if I have posted this in the wrong section.

My query is as follows: I would like to embed / reformat an AI image generator onto a website for a new business I am launching.

I haven't created my own AI image generator, but I am wondering whether it would be possible (and feasible for under $2500) to create a page on a website where an image generator is hosted / embedded and then the generated image is displayed on a different section of the page and emailed to me.

The end goal would be similar to this: a user logs onto my website, can generate an image and we'll then sell them a photo print of said image.

Would this be possible, would it be hugely out of budget, and what are your general thoughts?

Thanks!

However, is there a GitHub project anybody can recommend that will automatically mirror normal site content onto e.g. a sub-domain (to avoid maintaining two sites) in ASCII like format for curl access ?

Im a beginner and not good at javascript..

Here is the code for the whole site:

<!DOCTYPE html>
<html>
<head>
<title>My site</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

body {
   margin: 0px;
   padding: 0px;
   color: black;
   text-align: center;
   background-color: white;
   background-image: url('');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  font-family: ;

}

h2 {
   font-size: 25px;
}

p {
   font-size: 20px;
}

.navbar {
  display: flex;
  justify-content:space-between;
  align-items: center;
  background-color: black;
  color: white;
}

.brand-title {
  font-size: 1.5rem;
  margin: .5rem;
}

.navbar-links ul {
  margin: 0;
  padding: 0;
  display: flex;
}

.navbar-links li {
  list-style: none;
}

.navbar-links li a {
  text-decoration: none;
  color: white;
  padding: 1rem;
  display: block;
}

.navbar-links li:hover {
  background-color: #555;
}

.toggle-button {
  position: absolute;
  top: .75rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

.toggle-button .bar {
  height: 3px;
  width: 100%;
  background-color: white;
  border-radius: 10px;
}

@media (max-width: 700px) {
     .toggle-button {
          display: flex;
}

.navbar-links {
   display: none;
   width: 100%;
}

.navbar {
    flex-direction: column;
    align-items: flex-start;
}

.navbar-links ul {
    width: 100%;
    flex-direction: column;
}

.navbar-links li {
    text-align: center;
}
.navbar-links li a {
    padding: .5rem 1rem;
}

.navbar-links.active {
    display: flex;
}

</style>
</head>

<body>

<nav class="navbar">
<div class="brand-title">Brand Name</div>
<a href="#" class="toggle-button">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
  <li><a href="#news">Kontakt</a></li>
  <li><a href="#contact">Nyheter</a></li>
  <li><a href="#about">Om</a></li>
</ul>
</div>
</nav>

<script>

const toggleButton = document.getElementsByClassName(’.toggle-button')[0]
const navbarLinks = document.getElementsByClassName(’.navbar-links')[0]

toggleButton.addEventListener('click', () => {
  navbarLinks.classlist.toggle('active)
})

</script>

</body>
</html>

I am creating a portfolio section on my website and want to make a showcase with my website projects displayed on different screens.

I have tried to download a transparent png of monitor and phone and then pasted in my screenshots of the site but it doesn't look as good as examples I find online. 

Is there a tool/website that lets me put in an adress to my website and then it will show how it looks on different screens, which I can then download as an image? I have searched but not found anything. If not, how are you creating these nice showcases? 

Ps. It doesn't really have to be different devices, just a monitor could be enough in this case. 

My codepen of the project.

https://codepen.io/aaron_1986/pen/VwdvqWB

  I am trying to remove controls from vimeo videos. Adding &controls=0 no longer seems to work. It seems this is achieved now by accessing the videos via api.

I have no experiene with api's. I understand how to create an app in vimeo and generate the token, and add the following code to display the video's, but there's a chunk in the middle - I assume where the site retrieves the data from the api - that I am missing. 

<div id="made-in-ny"></div>

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
    const options = {
        id: 59777392,
        width: 640,
        loop: true
    };

    const player = new Vimeo.Player('made-in-ny', options);

Can you help?

I have a php script (website), which is mobile ready and gives me this problem:

When I upload my logo to the script, everything works correct on desktop resolution.

But visiting the website on mobile (or zooming in 170%+), results in the bug that the site content is being moved aside by the logo.

Please have a look at my uploaded image.

Do you have any idea how to resolve this?!

Thanks a lot,

Andy

I've recently changed my website but I'm having a slight issue with the way video is displayed.  I've knocked this up myself, so please excuse my confident-idiot mistakes...

I use looping videos on the site, and usually they work fine - except when I resize the browser window in Chrome I get a 1-pixel outline around the videos.  At full size it's fine, at minimum size it's fine, but inbetween these sizes the videos develop this 1-pixel outline in yellow (the background colour).  There's no such issue with images and I can't replicate the problem in Firefox.

https://frankmansfield.co.uk/projects/ywt.php

I've tried searching everywhere, but either I'm using the incorrect search terms (possible) or else I've made some schoolboy error (much more likely).

Could anyone help me out with this?

Cheers!!

-f

im trying to show and hide(toggle)  a div containing text  when 2 buttons are pressed.. e.g.

if your going on the london underground and you select a route going from victoria to bond street .. you click the button called victoria and then click the button called bond street, it needs to display a div which contains the full route on the webpage.. im asking if anyone knows how to do this as im really struggling with this soo much

regards

zed

I would like to create a full width header image that changes in size by percentage according to device. It is an incremental zooming-in-like effect upon one image instead of having to use separate ones of different pixel sizes.

What is the best way to code this effect in CSS and HTML? Working in Dreamweaver, I have tried a number of approaches with no success. With the code below, a narrow strip (only) of the bottom of the image shows in DW the design view div. So the image path is correct. However, no image at all appears in the browser preview. Any help would be greatly appreciated.

<div class="header-image">      
    </div>

.header-image {
        background-image: url("header-image.png");
        background-size: contain;
        background-repeat: no-repeat;      
    } 

@media only screen and (max-width: 992px) {
  .header {
    max-width: 125%;
  }
  
@media only screen and (max-width: 768px) {
  .header {
    max-width: 150%;
  }
}
  
@media only screen and (max-width: 567px) {
  .header {
    max-width: 200%;
  }
}

I've done a 5-page website which is called accessibilitypartners.co.uk., we're 2 disabled people who want to make work-life easier for other disabled people.  We've bought the name, we've built - after a nightmare learning curve - a PASSABLE website on Google Sites - still hugely learning! - and we've got a Google Domains.  Now here's what we THINK we know but you can correct us on any of it because if we were right, this would be working!

These are probably-wrong thoughts, not statements!

1.) Accessibilitypartner.co.uk is the DOMAIN NAME.  Domain names point to websites.

2.) There's 3 kinds of website names, a CNAME which means Canonical Name and an MX name which is Mail Exchange and is where site E_mails go to. The third one is a mile-long mass of letters with your website name embedded in the middle of it all somewheres!

3.)  Complete guess cos we can't work it out (and we're prob. getting something wrong in the above.) The Domain Name should be pointing to the mile-long mass of letters because that's the URL.  But there's 2 URLs, aren't there.  The mile-long mass of letters and a bunch of numbers separated by dots.  We think this is so because we've got both of the latter and they both take us to our site. 

Remember the above's just what we think we know at the moment and we're here cos nothing's working so we've obviously got it wrong somewhere!

We tried typing the numbers separated by dots into the boxes on Google Domains because it seemed logical that that would be what it wanted to point to.  Didn't work. Tried the name of our website with CNAME on the end so we had WWW.accessibilitypartners.co.uk/cname (we tried lower case and capitals).  Didn't work. Tried the same again with /MX on the end instead - were getting desperate by now! - that didn't work.  Found a YouTube video that carefully detailed the whole process on GoDaddy, discovered Google Sites doesn't work the same way as GoDaddy! Couldn't find a YouTube (or anywhere else) vid. detailing the process on Google Sites.  (WE THINK we're WWW.  We're a bit lost as to whether we're WWW, HTTP or HTTPS.)

Which is why we're here.  We are flat, totally, completely out of ideas.  We know more about next week's Lottery numbers (they're all between 1 and 50.  Fact!) Please, could someone use totally dumbed down idiot speak to tell us what the BLEEP we're doing wrong and what we should do?

Just to make you laugh, I've achieved something that would be fairly impressive if only I knew how the heck I'd done it.  I use Firefox. When I do CTRL-T, as you know, I get an empty page full of ads. and links. I'm going to attach a screenshot of one of the links.  It looks like a Facebook link.  The address under it looks like a Facebook address. On my browser - not tried it on anybody else's! - clicking on it takes me to my site, not Fb! But typing in the addy under the link doesn't. 

Got zero idea about that either, but I'm attaching a screenshot anyway. 

im doing a university project on creating a clickable map based journey planner for the london underground trains... i was wondering if someone could make a step by step video on how i use the transport for london ( TFL) API and insert it in my program so that when 2 stations are clicked and they press the continue button data such as each stop the train makes on the chosen route, the duration of the journey, the colour of the lines the route takes etc to be displayed on the second page 

the programs im using for my project are:

HTML

CSS

JavaScript/JQuery

kind regards

Zed

However, if you google redmon wrecker, www.redmonwrecker. com is the first choice in the search results, but if you click that result, the site won't load.

I"m not sure why this is, the url is the same in both the google search and typing it in the browser bar.

Looking at whynopadlock.com it says the ssl cert is not installed correctly, though its odd that the site will load with ssl on some browsers but not all.

Any suggestions are appreciated.