are saying
How to start basic html page
To start a basic HTML page, follow these steps:
html Copy code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>
<!DOCTYPE html> declaration defines the document type and should be included at the top of every HTML document.<html> element is the root element of an HTML page and contains two child elements: <head> and <body>.<head> element contains meta information about the document, such as the title (<title>).<body> element contains the visible content of the document. This is where you add headings (<h1> to <h6>), paragraphs (<p>), images (<img>), links (<a>), and other HTML elements.Note: You can add CSS styles to your HTML page by creating a separate file with a .css extension and linking to it in the <head> section using <link> tag. You can also add JavaScript to your HTML page by creating a separate file with a .js extension and linking to it at the bottom of the <body> section using <script> tag.
What to use float-left or d-flex weather-temperature in React?
float-left is a CSS property that is used to align elements to the left or right. It can be used to float elements around a page in a specific order.
d-flex is a class from the Bootstrap framework. It is used to create flexible and responsive layouts using a set of flexbox-based utility classes.
In React, it is recommended to use modern CSS approaches like d-flex instead of float. This is because modern CSS layouts are more dynamic and easier to maintain. So, you should use the d-flex class instead of float-left to make the layout more flexible and responsive.
Example:
code Copy code
<div className="d-flex weather-temperature">
// content here
</div>
Note: Make sure to import the Bootstrap framework in your React application. You can use a CDN link or install Bootstrap using npm or yarn. Here's the link to the Bootstrap documentation for more information: https://getbootstrap.com/docs/5.0/getting-started/introduction/
๐ฉโ๐ป display: inline-block
display: inline-block is a CSS property that can be used to display an element as an inline-level block container. This means that the element will be displayed inline as a block, which allows other elements to sit beside it on the same line.
Here's an example in CSS:
code Copy code
.my-element {
display: inline-block;
}
In this example, my-element is the class of an HTML element. By setting display: inline-block, the element will be displayed inline as a block, which is useful for things like creating a horizontal navigation menu or displaying a list of elements side-by-side.
However, display: inline-block can sometimes cause alignment issues, especially when there are multiple elements with different heights. In such cases, it is usually better to use modern CSS approaches like flexbox or grid.
Here's a link to the MDN Web Docs for more information on display: inline-block: https://developer.mozilla.org/en-US/docs/Web/CSS/display-inline-block
๐ฉโ๐ป row mt-3
row mt-3 is a Bootstrap class used for creating a horizontal row and adding margin top to it.
In Bootstrap, a row is used as a container for columns. It is a horizontal element that can contain one or more columns within it.
mt-3 is a margin top class which adds a space of 3 units above the element with the row class.
Here's an example on how to use row mt-3 in HTML with Bootstrap:
code Copy code
<div class="row mt-3">
<div class="col-md-6">Column 1</div>
<div class="col-md-6">Column 2</div>
</div>
In this example, we have a row class with mt-3 added for the whole row. Within the row, there are two columns, each with a width of 6 out of 12 columns (i.e., col-md-6). This will give us two equal-sized columns sitting beside each other within the row.
Here's a link to the Bootstrap documentation for more information on the row and mt classes: https://getbootstrap.com/docs/5.0/layout/grid/
๐ฉโ๐ป Why would the length of a sentence be useful to know?
Knowing the length of a sentence can provide useful insights in various natural language processing tasks, such as text summarization, sentiment analysis, and machine translation.
For example, in text summarization, a system might be designed to generate a summary of a given text that includes only the most important sentences. Knowing the length of each sentence can help the system identify the most important sentences that have the highest content density and therefore, provide a useful summary of the text.
In sentiment analysis, the length of each sentence can also be used to identify the sentiment of the text. Some studies suggest that positive sentences tend to be shorter than negative or neutral ones. Therefore, analyzing the length of sentences can help classify them into different sentiment categories accurately.
Sentence length might also be considered during machine translation. Since sentences with similar lengths tend to translate well than ones with massive differences in length, machine translation models that consider sentence length can produce more accurate translations.
There are other possible applications of knowing the length of sentences, but it is essential to keep in mind that it should always be considered with other features because there might be exceptions where sentence length does not necessarily provide useful insights.
smile face using html css
Here's an example of how you could create a simple smiley face using HTML and CSS:
html Copy code
<!-- HTML Code -->
<div class="smiley-face">
<div class="eyes"></div>
<div class="mouth"></div>
</div>
css Copy code
/* CSS Code */
.smiley-face {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: yellow;
position: relative;
}
.eyes {
position: absolute;
top: 25%;
left: 20%;
width: 15%;
height: 15%;
border-radius: 50%;
background-color: black;
}
.eyes + .eyes {
left: 65%;
}
.mouth {
position: absolute;
top: 50%;
left: 20%;
width: 60%;
height: 20%;
border-radius: 50%;
border-top: 3px solid black;
}
The code above creates a div element with the class smiley-face. This div element has two child elements, which are also div elements: one for the eyes and one for the mouth. The styling for each element is done using CSS.
The smiley-face div has a width and height of 100 pixels, and its border-radius is set to 50% to make it circular. The background color is set to yellow to represent the face's color.
The eyes are created as two div elements with a black background color and border-radius set to 50% to make them circular. They are positioned using the position property and top and left values.
The mouth is created as a div element with a border radius of 50% and a top border of 3 pixels thick to represent a smile. It is positioned in the center of the face using the top and left properties.
By applying the CSS code, the result will be a cute little smiley face with black eyes and smiling mouth.
bounce ball using html css
HTML:
html Copy code
<div class="container">
<div class="ball"></div>
</div>
CSS:
css Copy code
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: blue;
position: absolute;
animation: bounce 1s infinite alternate;
}
@keyframes bounce {
from {
transform: translateY(0);
}
to {
transform: translateY(-100px);
}
}
JavaScript: (none needed for this task)
This code creates a blue ball that bounces up and down using CSS animations. The .container div is used to center the ball on the page vertically and horizontally. The .ball div is positioned absolutely and given a border-radius of 50% to create a circular shape. The @keyframes rule is used to define an animation that moves the ball up and down using the translateY function. The animation property is applied to the .ball div to make it bounce continuously.
how can i have text with a link not underlined
You can achieve this by using CSS to style the link. You can set the "text-decoration" property to "none" to remove the underline from the link. Here's an example in HTML and CSS:
html Copy code
<p>Visit <a href="https://www.example.com" class="no-underline">Example</a></p>
css Copy code
.no-underline {
text-decoration: none;
}
In the example above, the link to Example will not be underlined due to the "no-underline" class, which sets the "text-decoration" property to "none".
how can I delete the underline from a link
To delete the underline from a link, you can use CSS. In the CSS file, you will need to target the <a> tag and set the text-decoration property to none. Here is an example code snippet:
css Copy code
a {
text-decoration: none;
}
This will remove the underline from all the links in your HTML file.
How to only show a button on large screen with styled components?
To only show a button on large screen with Styled Components in React.js, you can use the CSS @media rule to define different styles for different screen sizes. Here is an example code:
jsx Copy code
import styled from "styled-components";
const Button = styled.button`
display: none;
@media (min-width: 768px) {
display: block;
}
`;
In this code, the Button component initially has a display: none property, which means it won't be displayed on any screen size. However, when the screen size is 768px or larger, the @media rule changes the display property to block, which means the button will be displayed.
You can adjust the screen size and the styles to suit your needs.
How to hide a button in the navbar on smaller screens?
To hide a button in the navbar on smaller screens in React.js, we can use CSS media queries to define different styles for different screen sizes.
First, we can add a CSS class to the button we want to hide when the screen is smaller. For example, we can add a class called "hide-on-mobile" to the button in our JSX code:
jsx Copy code
<button className="hide-on-mobile">My Button</button>
Then, we can define a CSS rule for the "hide-on-mobile" class that hides the button when the screen width is less than a certain value. For example, we can add the following CSS code to our stylesheet:
css Copy code
@media (max-width: 768px) {
.hide-on-mobile {
display: none;
}
}
This CSS code defines a media query for screens with a maximum width of 768 pixels (i.e. smaller screens), and sets the "display" property of the "hide-on-mobile" class to "none", which hides the button.
Note that we can adjust the screen size value in the media query to fit our design needs.
In summary, we can use CSS media queries to hide a button in the navbar on smaller screens in React.js by adding a CSS class to the button and defining a CSS rule to hide the class based on the screen size.
how can I add a border to p
To add a border to a paragraph (<p>) element, you can use CSS.
Here's an example CSS code using a class:
css Copy code
.p-border {
border: 1px solid black;
}
You can then add the .p-border class to any <p> element you want to have a border:
html Copy code
<p class="p-border">This paragraph has a black border.</p>
You can adjust the border thickness, color, and style by modifying the values of the border property.
Here's a link to learn more about CSS borders: https://www.w3schools.com/css/css_border.asp
how does @media (max-width) work?
@media (max-width) is a feature in CSS (Cascading Style Sheets) that allows you to target devices with screens up to a certain maximum width.
For example:
css Copy code
@media (max-width: 600px) {
body {
background-color: blue;
}
}
In this CSS code, we are targeting screens with a maximum width of 600px. If the screen is less than or equal to 600px wide, the background color of the body element will be blue.
You can also use @media (min-width) to target screens with a minimum width.
Here's an example where we set a different font size for larger screens:
css Copy code
@media (min-width: 768px) {
body {
font-size: 20px;
}
}
In this code, we are targeting screens with a minimum width of 768px. If the screen is more than or equal to 768px wide, the font size of the body element will be 20px.
You can learn more about media queries at CSS-Tricks.
How do I create an accordion
You can create an accordion using HTML, CSS, and JavaScript. Here is an example code for creating an accordion:
HTML Code:
html Copy code
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header">
Item 1
<span class="icon">▶</span>
</div>
<div class="accordion-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan neque condimentum leo interdum, et gravida orci porttitor.
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
Item 2
<span class="icon">▶</span>
</div>
<div class="accordion-content">
Aliquam erat volutpat. In a odio eu lacus varius malesuada. Nulla eu facilisis felis. Integer eu magna vel risus tincidunt aliquet.
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
Item 3
<span class="icon">▶</span>
</div>
<div class="accordion-content">
Curabitur varius magna in mauris mattis, ut sagittis orci sagittis. In vitae elementum tellus. Fusce sed venenatis ipsum, in congue quam.
</div>
</div>
</div>
CSS Code:
css Copy code
.accordion {
width: 100%;
}
.accordion-item {
background-color: #fff;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
}
.accordion-header {
font-size: 18px;
font-weight: bold;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.accordion-content {
display: none;
padding: 10px;
}
.icon {
font-size: 20px;
margin-left: auto;
transform: rotate(90deg);
transition: all 0.2s ease;
}
.open .icon {
transform: rotate(0);
}
JavaScript Code:
javascript Copy code
const accordionItems = document.querySelectorAll(".accordion-item");
accordionItems.forEach(item =>
item.addEventListener("click", () => {
const isItemOpen = item.classList.contains("open");
accordionItems.forEach(item => item.classList.remove("open"));
if (!isItemOpen) {
item.classList.toggle("open");
}
})
);
Explanation:
how to create :root variable for background image
To set a background image using a :root variable in CSS, you can do the following:
css Copy code
:root {
--bg-image: url('your-image-url.jpg');
}
body {
background-image: var(--bg-image);
}
In the :root selector, you can define the variable --bg-image and set it to the URL of your desired image. Then in the body selector, you can use the background-image property and set it to the value of the --bg-image variable by using the var() function.
Note that :root is a pseudo-class selector for the root element of the document, which is usually <html>. Using :root allows you to define global variables for your entire document that can be used across multiple selectors.
I would like to make 3 columns using html and css
Sure, let me help you with that.
To create 3 columns using HTML and CSS, you can use the <div> tag to create 3 separate divisions and apply CSS styles to position them side by side. Here is an example code snippet to achieve that:
html Copy code
<!DOCTYPE html>
<html>
<head>
<style>
.column {
float: left;
width: 33.33%;
padding: 10px;
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h2>Column 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim vel justo convallis luctus a quis nisi.</p>
</div>
<div class="column">
<h2>Column 2</h2>
<p>Phasellus eu purus nibh. Fusce lacinia risus euismod felis tempus pulvinar. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
<div class="column">
<h2>Column 3</h2>
<p>Suspendisse et ligula convallis, hendrerit turpis vitae, placerat nunc. Sed convallis metus varius urna viverra eleifend.</p>
</div>
</div>
</body>
</html>
In this example, we wrap our 3 columns in a div container with a class of "row" to group them together. We then create another div with a class of "column" for each of the columns we'd like to create. To position the columns side by side, we set float: left for each column and give them a width of 33.33% to fit evenly in a row. Finally, we add some padding and box-sizing to make sure our columns looks good and are properly spaced.
I hope this helps!
Responsive Restaurant website that has a Menu, Order, Location & Contact navbar. With a section about the restaurant and live order form menu with a live payment
HTML:
html Copy code
<!DOCTYPE html>
<html>
<head>
<title>Restaurant Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Order</a></li>
<li><a href="#">Location</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="about">
<h1>About Us</h1>
<p>Insert text about the restaurant here.</p>
</section>
<section class="menu">
<h1>Menu</h1>
<div class="item">
<h2>Item 1 Name</h2>
<p>Item description.</p>
<span>Item price</span>
</div>
<div class="item">
<h2>Item 2 Name</h2>
<p>Item description.</p>
<span>Item price</span>
</div>
<!-- Repeat for each item -->
</section>
<section class="order">
<h1>Order</h1>
<form>
<!-- Live order form goes here -->
</form>
</section>
</main>
<footer>
<p>Insert contact information here.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
CSS:
css Copy code
/* Basic styling */
body {
margin: 0;
font-family: sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 10px 20px;
position: fixed;
width: 100%;
top: 0;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
nav li {
margin: 0 10px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
padding-top: 60px;
}
section {
margin: 50px 20px;
}
h1 {
font-size: 36px;
}
/* Menu styling */
.item {
background-color: #eee;
padding: 20px;
margin-bottom: 20px;
}
.item h2 {
margin-top: 0;
}
.item span {
font-weight: bold;
margin-left: 10px;
}
/* Order form styling */
form {
display: flex;
flex-wrap: wrap;
}
form label {
margin-right: 10px;
}
form input[type="text"],
form select {
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
}
form button[type="submit"] {
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
margin-top: 10px;
}
/* Footer styling */
footer {
background-color: #333;
color: #fff;
padding: 10px 20px;
position: fixed;
bottom: 0;
width: 100%;
}
JavaScript:
javascript Copy code
// Live payment functionality goes here
box-shadow
box-shadow is a CSS property that allows you to add a shadow effect to an element. It takes in four values which can be specified in this order:
offset-x: the horizontal distance of the shadow from the elementoffset-y: the vertical distance of the shadow from the elementblur-radius: the blur radius of the shadow (optional)spread-radius: the size of the shadow (optional)Example in CSS:
code Copy code
.shadow {
box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
This will add a shadow effect to the element with a horizontal distance of 2 pixels, vertical distance of 2 pixels, and a blur radius of 4 pixels with a transparency of 20%.
how can i put a button on an image?
To put a button on an image, you can use HTML and CSS. Here's an example code snippet:
html Copy code
<div class="image-container">
<img src="path/to/image.jpg" alt="Image description">
<a href="#" class="button">Click me</a>
</div>
css Copy code
.image-container {
position: relative;
display: inline-block; /* or block, depending on your design */
}
.button {
position: absolute;
bottom: 10px; /* adjust to desired spacing */
right: 10px; /* adjust to desired spacing */
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
In the HTML code, we have a div container that wraps an img element and an a link element. We can adjust the position of the link element using the CSS position property with a value of absolute. This allows us to position the element relative to its closest positioned ancestor. In this case, the .image-container is positioned relatively, so our link element will be placed relative to it.
The bottom and right properties specify the distance between the button and the bottom and right edges of the image, respectively. You can adjust these values to suit your design. Finally, we style the button with custom background color, text color, padding, border and border-radius.
Note: Depending on your design, you may want to adjust the values of the CSS properties to better position the button on the image.
how do I save changes made on css chrome inspection
Unfortunately, changes made in Chrome DevTools' CSS inspector cannot be saved to the original CSS file. Instead, you need to manually copy the changes made in the inspector and paste them into the corresponding CSS file.
To access the DevTools CSS inspector in Chrome, right-click on an element in the page and select "Inspect" or press Ctrl+Shift+I (Cmd+Shift+I for Mac users). Then, in the Elements panel, select the "Styles" tab and make any desired changes to the element's CSS styles.
To copy the changes made in the inspector, right-click on the CSS rule you modified and select "Copy rule". Then, paste the copied rule into the corresponding CSS file and save the changes.
Here is an example of a CSS rule that was modified in Chrome DevTools and then copied and pasted into the original CSS file:
css Copy code
/* Before modification in DevTools */
p {
color: black;
}
/* After modification in DevTools */
p {
color: red;
}
Copy the modified rule:
css Copy code
/* After modification in DevTools */
p {
color: red;
}
Paste the modified rule into the original CSS file:
css Copy code
p {
color: red;
}
๐ฉโ๐ป how do i open css in visual studio code
To open a CSS file in Visual Studio Code, follow these steps:
Alternatively, you can open a new CSS file in Visual Studio Code by selecting "File" > "New File" and saving the file with a .css extension.
Once the CSS file is open in the editor, you can add, modify, or remove CSS styles as needed. Visual Studio Code also provides helpful features such as syntax highlighting, code completion, and debugging to make working with CSS easier.
๐ฉโ๐ป how do i open css in visual studio html folder code
To open a CSS file in Visual Studio Code that is located in the same folder as an HTML file, follow these steps:
code <filename>.css and press Enter, where <filename> is the name of your CSS file.Alternatively, you can navigate to the CSS file in the file explorer on the left side of the Visual Studio Code window and double-click on the CSS file to open it in a new tab alongside the HTML file.
Once the CSS file is open, you can edit it as needed and the changes will be automatically updated in the HTML file since they are located in the same folder.
how to add button on the image?
To add a button on an image, you can use HTML and CSS. Here is an example code:
html Copy code
<div class="image-container">
<img src="your-image-url-here.jpg" alt="Image">
<button class="button">Click me</button>
</div>
In the example code above, we have an image tag wrapped in a div with a class of "image-container". Then, we added a button with a class of "button" inside the same div.
To add some CSS and position the button over the image, you can set the image container to a relative position and set the button to an absolute position with a z-index higher than the image.
css Copy code
.image-container {
position: relative; /* set container to a relative position */
width: 500px; /* set your desired width */
height: 500px; /* set your desired height */
}
.button {
position: absolute; /* set button to an absolute position */
top: 50%; /* adjust the top position of the button */
left: 50%; /* adjust the left position of the button */
transform: translate(-50%, -50%); /* center the button */
z-index: 2; /* set a higher z-index than the image */
background-color: #007bff; /* set your desired background color */
color: #fff; /* set your desired text color */
border: none; /* remove button border */
padding: 10px 20px; /* set your desired padding */
cursor: pointer; /* change mouse cursor on hover */
}
Adjust the .image-container width and height properties to match the size of your image. You can also adjust the button's properties such as the background-color, color, padding, and cursor to suit your design.
Please, how can I place my div in the center of page?
To place a div in the center of a page, you can use CSS Flexbox. First, set the parent container's display property to flex and use the justify-content and align-items properties to center the child div. Here's an example code snippet using HTML and CSS:
html Copy code
<div class="container">
<div class="centered-div">
<p>This div is centered!</p>
</div>
</div>
css Copy code
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* ensures that the parent container takes up the whole viewport height */
}
.centered-div {
background-color: #ddd;
padding: 20px;
}
This will center the centered-div div horizontally and vertically inside the container div. You can adjust the height of the container div to suit your needs. Here's a CodePen example: https://codepen.io/shecodes/pen/xxqXgJp
How to create a purple button in HTML
To create a purple button in HTML, you can use the button tag and apply CSS styles to it. Here's an example code snippet:
html Copy code
<button style="background-color: purple; color: white;">Click me</button>
This code will create a button with a purple background and white text. You can customize the styles to your liking by adjusting the background-color and color properties in the style attribute.
why text-decoration: none; does not work?
text-decoration: none; is a CSS property used to remove underline from a hyperlink. This property may not work for a couple of reasons:
text-decoration: none; code must be applied to the a tag to remove the underline.text-decoration: none; For more information, here's an example of how to properly use text-decoration: none; in CSS:
a { text-decoration: none; }
what does margin do
use an image as background of the body
how to use an image as background of a webpage
How can i get a hovering block to my paragraphs
If you have any other questions, you can easily reach out to us here
AI stands for Artificial Intelligence. AI bots are able to learn from conversations with users and expand their knowledge this way.
SheCodes Athena will help you with technical questions about your code using artificial intelligence to find the answer. Imagine a super powerful human who has memorized everything on the internet and can access that knowledge in a matter of seconds. ๐คฏ
SheCodes Athena can answer most coding-related questions, even complicated ones! It can even find bugs in your code and tell you how to fix them in just a few seconds. Impressive, right?
Just remember we're still in testing mode so the AI may return strange or incorrect replies. Feel free to message us if this happens!
SheCodes Athena can only reply to coding-related technical questions. The same type of questions you would ask in the channels on Slack.
For questions that are not coding-related, write us here ๐
You should treat Athena like a SheCodes team member, so always be polite! ๐ Ask your questions as detailed as possible, just like you would do on Slack.
Here are some examples:
- Prettier isn't working on my VS Code. How do I fix this?
- How do I make bullet points with different colors using the list element?
- My code in Codesandbox is having some issues. Can you please tell me what the issue is? [Include the link to your Codesandbox]
For now, SheCodes Athena is limited to 5 questions per day for each student.
In that case, you can either ask SheCodes Athena a follow-up question, or you can post on the designated weekly channel on Slack!
Our technical assistants are still available on Slack and are always happy to help! ๐๐ช
Remember, questions are limited to 1000 characters.
- If you're working with an HTML file: Post a snippet of your code related to the issue you're having (just copy the code and paste it into the question box).
- If you're working with Codesandbox: Good news, you can just post the link to your Codesandbox and the AI Assistant will be able to view your code.
- If you have a longer question that would require an entire HTML file or more than 1000 characters, post it in the designated weekly channels on Slack! ๐
Athena was the Greek goddess of wisdom, among other elements. She received her name from the city of Athens, which she is known for protecting.
Much like the goddess Athena, SheCodes Athena is also incredibly wise and can solve complicated coding puzzles in a matter of seconds! ๐
Not likely. AI can automate tasks and make developers' jobs more efficient but it can't fully replace the human ability to deal with complex software. And AI will still require human developers to supervise and improve it further.
So developers may see their tasks change but they won't be replaced by AI. ๐ฉโ๐ป๐ค๐ป