*{
box-sizing: border-box;
font-family: verdana;
}
#ToDo
{
text-align: center;
color: white;
margin: 0;
padding: 10px;
word-wrap: break-word;
}
.title
{
text-align: center;
}
#Done
{
text-align: center;
color: white;
}
.in
{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 20px auto;
width: 50%;
padding: 5px 2px;
border-radius: 5px;
outline: none;
}
.box
{
background: #444;
padding: 0;
width: 40%;
}
.inBox
{
background: #bbb;
}
#container
{
display: flex;
justify-content: space-around;
background: #03a9f4;
flex-wrap: all;
padding: 50px 10px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>To-Do List</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<div class="title">
<h1>To Do List</h1>
<p id="by">by Me</p>
</div>
<div id="container">
<div class="box">
<div class="inBox">
<h2 id="ToDo">To Do</h2>
</div>
<label for="task"></label>
<input type="text" class="in" placeholder="Enter Task">
<label for="task"></label>
<input type="text" class="in" placeholder="Enter Task">
<label for="task"></label>
<input type="text" class="in" placeholder="Enter Task">
<label for="task"></label>
<input type="text" class="in" placeholder="Enter Task">
<label for="task"></label>
<input type="text" class="in" placeholder="Enter Task">
<label for="task"></label>
<input type="text" class="in" placeholder="Enter Task">
</div>
<div class="box">
<div class="inBox">
<h2 id="ToDo">Done</h2>
</div>
<label for="task"></label>
<input type="text" class="in" placeholder="Enter Task">
<label for="task"></label>
<input type="text" class="in" placeholder="Enter Task">
<label for="task"></label>
<input type="text" class="in" placeholder="Enter Task">
<label for="task"></label>
<input type="text" class="in" placeholder="Enter Task">
<label for="task"></label>
<input type="text" class="in" placeholder="Enter Task">
</div>
</div>
</body>
</html>This HTML and CSS code creates a basic To-Do list with flexbox for centering and responsiveness. I used simple styling to make it visually appealing.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: cadetblue;
}
.title{
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
}
.container{
width: 1100px;
margin-right: auto;
margin-left: auto;
}
.boxes{
display: flex;
justify-content: space-between;
margin-top: 200px;
}
.box{
width:450px;
background: darksalmon;
height: 500px;
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: wrap;
}
.box_title{
color: white;
height: 50px;
width: 200px;
background: cadetblue;
border: 3px black solid;
margin-top: 30px;
text-align: center;
padding: 8px;
}
.inputs{
display: flex;
flex-direction: column;
margin-top: 10px;
}<!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>To-do lista</title>
<link rel="stylesheet" href="./css/style.css>
</head>
<body>
<div class="title>
<h1 class="title__text>Todo List</h1>
<p class="title__paraby Fluerici</p>
</div>
<div class="container ">
<div class="boxes>
<div class="box>
<div class="inbox>
<h2 class="box_title>To Do</h2>
</div>
<div class="inputs>
<label for="task></label>
<input type="text" class="in" placeholder="Enter task>
<label for="task<</label>
<input type="text" class="in" placeholder="Enter task>
<label for="task></label>
<input type="text" class="in" placeholder="Enter task>
<label for="task></label>
<input type="text" class="in" placeholder="Enter task>
<label for="task></label>
<input type="text" class="in" placeholder="Enter task>
</div>
</div>
<div class="box>
<div class="inbox>
<h2 class="box_title>Done</h2>
</div>
<div class="inputs>
<label for="task></label>
<input type="text" class="in" placeholder="Enter task>
<label for="task<</label>
<input type="text" class="in" placeholder="Enter task>
<label for="task></label>
<input type="text" class="in" placeholder="Enter task>
<label for="task></label>
<input type="text" class="in" placeholder="Enter task>
<label for="task></label>
<input type="text" class="in" placeholder="Enter task>
</div>
</div>
</div>
</div>
</body>
</html>How can I create a list item that allows swiping to reveal an archive button? The requirement is for the icon to appear to the left of the text. I'm referring to the documentation on Button Layout: https://ionicframework.com/docs/api/components/item ...
Check out my form here: It seems that the button at the bottom of the form is not displaying correctly in Internet Explorer, despite working fine on other browsers. Below is the CSS code I am using for styling the button: .button { -moz-border-radius: ...
I am dealing with a tag that has href="tel:XXXXXXXXX" and I am looking to capture the click event associated with it. After testing the code below on Chrome, I observed that clicking on the tag calls the application but does not trigger a click event: $(d ...
I have been browsing the Bootstrap documentation, but I am unable to locate the specific class needed to achieve a certain effect. Is there a method for shifting or offsetting a div Row if the parent row has a column that pushes down the bottom div? Can th ...
Could someone please help me identify the issue with this code snippet? I am aiming to style the table with a border, background color, and align it to the top. I appreciate any assistance. Thank you. <td style="border: solid 2px #111111;" bgcolor="#d ...
Currently, I have a page set up on my localhost with the following code: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Times</title> <style type="text/css" media="screen"> input{font:1.5e ...
I'm almost done with my Weather Forecast page for the FCC challenge. However, I'm not satisfied with how the code for swapping the background works. It just doesn't feel right to me. Unfortunately, I can't figure out how to fix it. Addi ...
I've implemented a bootstrap card with a stretched-link to redirect users to the content page upon clicking on the card. However, when utilizing the stretched-link, the hoverImage fails to change accordingly. <div class="container"> ...
My current project involves working with ASP.NET and in the view, I have a code snippet that is causing some issues. When I attempt to use Sweet Alert outside of the function, it works perfectly fine. Similarly, if I switch out Sweet Alert for a regular al ...
I have managed to successfully initiate the HTML service and display the checkbox itself. However, I am facing a challenge in displaying text next to the checkbox as a label. My goal is to have this label text be the return value of a function in the .gs f ...
While following a tutorial at the given link, I encountered an issue. Around the 9:08 mark, the instructor adds some JavaScript and demonstrates that fullpage.js is working. However, when I refresh the page after implementing the new code, it doesn't ...
I'm encountering some issues with HTML tables. The layout of my table is as follows: <table class="shop_table cart" cellspacing="0"> <thead> <tr> <th class="product-remove"> </th> <th clas ...
Review the snippet below: div { display: flex; flex: 0 0 45%; max-width: 45%; } <div>Lorem ipsum dolor sit amet, <strong>dolor sit</strong>tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut ...
Seeking assistance with achieving a unique effect on click event. I have set up a slanted or razor-blade style div using a parent div element and a pseudo-element :after (as shown below). My goal is to change the skew angle when the user clicks on the pare ...
My website features a hero unit with a form displayed on top. Behind the form, a series of images fade in and out smoothly one after another. I'm attempting to overlay the div containing the form over the div with the background images by setting the ...
I have a website where users can register, log in, and update their profile information. However, I am facing an issue where only the data of the first user in the database table is being retrieved. How can I get the data of the currently logged-in user? ...
I am looking to make the app variable in the config parameter dynamic by implementing radio buttons with values. I am curious about how to pass the value based on user preference. If the selection is changed from selection1 to selection2, it should auto-r ...
My attempt to set an image as a background was successful on desktop, but unfortunately, it doesn't work on my phone. I have specified 'cover' as the background-size, expecting it to cover all the space on mobile as well. Here is the code s ...
Searching for a way to obtain the base URL for an HTML page, so that relative URL requests from the browser utilize that base. If you are looking for answers, check out this link: Defining root of HTML in a folder within the site root folder When serving ...
After conducting extensive research on Google, I have been unable to find a satisfactory solution. What I am aiming for is similar to the concept illustrated in this image: https://i.sstatic.net/iq6DE.png I should mention that my current technology stack ...