We Keep Coding

React Component CSS not toggling component styles

I'm creating a React Notes App with the feature to switch between Dark/Light Mode.
So basically I've written a React Toggle to switch between Dark and Light Mode.
But apparently the code is only switching the background and h1 color and not switching the notes color as I want .
Apparently the component color doesn't seem to change.
Toggle.js toggles the classname between 'theme-dark' and 'theme-light' and in turn toggles the CSS too. But it doesn't seem to change the CSS of notes component.
Toggle.js:
import React, { useEffect, useState } from 'react';
import '../index.css';
import { setTheme } from '../theme';
import { MdDarkMode, MdOutlineDarkMode } from 'react-icons/md'
function Toggle() {
const [ togClass, setTogClass ] = useState('dark');
let theme = localStorage.getItem('theme');
const handleOnClick = () => {
if (localStorage.getItem('theme') === 'theme-dark') {
setTheme('theme-light');
setTogClass('light')
} else {
setTheme('theme-dark');
setTogClass('dark')
}
}
useEffect(() => {
if (localStorage.getItem('theme') === 'theme-dark') {
setTogClass('dark')
} else if (localStorage.getItem('theme') === 'theme-light') {
setTogClass('light')
}
}, [theme])
return (
<div className="container--toggle"> {
<button
id="toggle"
className={"toggle--button "+togClass}
onClick={handleOnClick}
>
{togClass === 'light' ? <MdOutlineDarkMode size='1.5rem' /> :
<MdDarkMode size='1.5rem'/>}
</button>
}
<label htmlFor="toggle" className="toggle--label">
<span className="toggle--label-background"></span>
</label>
</div>
)
}
export default Toggle
theme.js
function setTheme(themeName) {
localStorage.setItem('theme', themeName);
document.documentElement.className = themeName;
}
function keepTheme() {
if (localStorage.getItem('theme')) {
if (localStorage.getItem('theme') === 'theme-dark') {
setTheme('theme-dark');
} else if (localStorage.getItem('theme') === 'theme-light') {
setTheme('theme-light')
}
} else {
setTheme('theme-dark')
}
}
export {
setTheme,
keepTheme
}
I'm certain the React Toggle.js works fine. Do note that I'm a newbie in CSS Variables ( you can probably tell ) and I think that's where the code messes up.
index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.theme-light {
--dark-text: black;
--light-text: #5E4B56;
--dark-background: #FFCFDF;
--light-background: #FFCFDF;
--accent: #DBE7E4;
--button-border: #5E4B56;
--note: #E0F9B5;
--note-new: #A5DEE5;
}
.theme-dark {
--dark-text: #EEEEEE;
--light-text: #F9F8F8;
--dark-background: #222831;
--light-background: #586F7C;
--accent: #B8DBD9;
--button-border: #B8DBD9;
--note: #EEEEEE;
--note-new: #00ADB5;
}
#root {
background-color: var(--dark-background);
color: var(--dark-text);
}
.toggle--button {
cursor: pointer;
}
.toggle--button.dark {
border: none;
--dark-background: #222831;
background-color: var(--dark-background);
}
.toggle--button.light {
border: none;
background-color: var(--dark-background);
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas,
'Courier New', monospace;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
.container {
max-width: 960px;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
min-height: 100vh;
}
textarea {
color: var(--dark-text);
border: none;
resize: none;
background-color: var(--note-new);
}
textarea:focus {
outline: none;
}
.save {
size: 10rem;
background-color: #e1e1e1;
border: none;
border-radius: 15px;
padding: 5px 10px 5px 10px;
}
.save:hover {
background-color: #ededed;
cursor: pointer;
}
.note {
color: var(--dark-text);
background-color: var(--note);
border-radius: 10px;
padding: 1rem;
min-height: 170px;
display: flex;
flex-direction: column;
justify-content: space-between;
white-space: pre-wrap;
}
.note-footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.notes-list {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(
auto-fill,
minmax(250px, 1fr)
);
}
.note.new {
background-color: var(--note-new);
}
.delete-icon {
cursor: pointer;
}
.search {
display: flex;
align-items: center;
background-color: rgb(233, 233, 233);
border-radius: 10px;
padding: 5px;
margin-bottom: 1.5em;
}
.search input {
border: none;
background-color: rgb(233, 233, 233);
width: 100%;
}
.search-icons {
color: black;
}
.search input:focus {
outline: none;
}
Light Mode:
Dark Mode:
I want the dark mode to switch colors of notes from light mode ones.
This is how I want it to look:

Error on my side, my App.js file had classname set to theme-light which prevented overriding.

Style Element Inside of Component with CSS and React.js

I am trying to make a button that allows the user to switch between light and dark theme. The method I am using is to change the className of my App div. All of the other components in my project are inside of the App component. Then in the individual CSS files for the components I first select the className of the App div which is either .light or .dark. Then I write the name of the component that I want to set a theme color to. For example:
.light p {
background-color: white;
}
However, this doesn't work.
Here are some of the files:
/*App.js*/
import { useState } from "react";
import TaskPage from "./pages/taskPage";
import { fas } from "#fortawesome/free-solid-svg-icons";
import { library } from "#fortawesome/fontawesome-svg-core";
import { MainContextProvider } from "./store/MainContext";
library.add(fas);
function App() {
const [theme, setTheme] = useState("light");
const switchTheme = () => {
setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
};
return (
<MainContextProvider>
<div className={`App ${theme}`}>
<div className="pageTop">
<h1 className="title">Task Board</h1>
</div>
<button className="button" onClick={switchTheme}>
Change theme
</button>
<TaskPage />
</div>
</MainContextProvider>
);
}
export default App;
/*index.css*/
#import url("https://fonts.googleapis.com/css2?family=Roboto:wght#400;500;700&display=swap");
.App {
overflow-x: hidden;
padding-bottom: 40px;
height: 100%;
width: 100%;
}
.light {
background-color: #fcfcfc;
}
.dark {
background-color: #181A1B;
}
.title {
font-family: "Roboto", sans-serif;
font-size: 50px;
font-weight: 700;
text-align: center;
margin-top: 40px;
text-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2);
}
.light .title {
color: black;
}
.dark .title {
color: white;
}
.pageTop {
margin-bottom: 50px;
}
/*todo.module.css*/
.taskCard {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 340px;
height: 260px;
min-width: 340px;
min-height: 260px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
border-radius: 12px;
padding: 14px;
box-sizing: border-box;
}
.light .taskCard {
background-color: white;
}
.dark .taskCard {
background-color: #2B2E30;
}
I used this sandbox as an example: https://codesandbox.io/s/stupefied-jackson-0ynz6?file=/src/App.js
I am a beginner with React.js

Div not overflowing in a Chat

I'm trying to create a chat, but after some number of messages the new message doesn't appear in screen and i want to overflow, to user scroll down the messages, but just a few messages appears and after that number nothing happens, just appears the previous messages in a static way, i'm using React and Socket.io.
Code:
const [messagesAndAuthors, setMessagesAndAuthors] = useState<any>([]);
useEffect(() => {
socket.on('receivedMessage', (newMessage:{}) => {
messagesAndAuthors([...messagesAndAuthors, newMessage])
});
})
function sendingMessages(e : FormEvent) {
e.preventDefault();
if(message.trim()) {
const messageObject = {
userName,
message,
roomId
};
socket.emit('sendMessage', messageObject);
}
setMessage('');
}
----------------------------BACK-END(SOCKET.IO):
socketInfo.on('sendMessage', (data:any) => {
socketInfo.broadcast.emit('receivedMessage', data);
});
.chat-container {
margin: 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
font: 400 1rem 'Sulphur Point';
background-color: #254441;
padding: 2rem 0;
border-radius: 2rem;
justify-content: space-between;
text-align: center;
max-height: 77.5vh;
overflow: auto;
}
.chat-container h1 {
background-color: #ff6f59;
padding: 0.2rem 4rem;
border-radius: 2rem;
text-align: center;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.messages-container {
text-align: start;
background-color: #254441;
border-radius: 2rem;
height: 90%;
margin-bottom: 0.5rem;
overflow: auto;
}
.messages-mine-style {
width: 15rem;
border: transparent;
border-radius: 1.5rem;
margin-top: 2rem;
text-decoration: none;
text-align: start;
list-style: none;
font: 700 1.4rem 'Sulphur Point';
padding: 0.2rem 0.6rem;
margin: 1rem 0;
}
.messages-mine-style li{
margin-left: 1rem;
}
.messages-mine-style li+li {
font: 400 1.4rem 'Sulphur Point';
}
.chat-container input {
background-color: #ff6f59;
padding: 1rem 4rem;
border-radius: 2rem;
text-align: center;
font: 700 1.2rem 'Sulphur Point';
outline: none;
border: transparent;
}
.chat-container input::placeholder {
color: #254441;
}
<form onSubmit={sendingMessages} className="chat-container">
<h1>Chat</h1>
<div className="messages-container">
{messagesAndAuthors.map((messageWithTheAuthor:any) => {
return (
<>
<ul className="messages-mine-style">
<li key={messageWithTheAuthor.author}>{messageWithTheAuthor.author}: </li>
<li>{messageWithTheAuthor.message}</li>
</ul>
</>
)
})}
</div>
<input value={message} onChange={(e) => {setMessage(e.target.value)}} type="text" placeholder="Digite sua mensagem"/>
</form>

Here's an example. You'll need to modify it to make it work for you, but it should serve as a good starting point.
function updateScroll() {
let el = document.getElementsByClassName("chat")[0];
let offset = el.scrollHeight - el.scrollTop;
if (offset < 120) el.scrollTop = el.scrollHeight;
}
var messageNumber = 1;
function addMessage() {
let msg = "<li class=\"chat-message\">new message "+ messageNumber++ +"</li>";
document.getElementsByClassName("chat-messages")[0].innerHTML += (msg);
updateScroll();
}
setInterval(addMessage, 2000);
addMessage();
.chat {
width: 250px;
height: 100px;
overflow: auto;
background-color: darkgray;
border: solid black 1px;
border-radius: 2px;
}
.chat-message {
list-style-type: none;
}
.chat-messages {
padding: 0px;
padding-left: 5px;
margin: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chat">
<ul class="chat-messages">
</ul>
</div>
This example only scrolls down if the user has scrolled down. If the user has scrolled up (to read previous messages, for example), then it will not scroll down.

How do I create a filter for content displayed using Javascript?

I'm building a film review site, where all of the content is generated on the main page from data input in the admin panel and placed into a container div.
I've got a basic sorting system (by ID, ascending/descending) already which works fine on my end, but I also want to be able to filter the films by genre (e.g if film is marked as Action on database, make all non-action films hidden.
This cannot be done by CSS alone as I'm not able to add classes to the content within the containers, the container for the film image is generated via JS.
I'm assuming I need to create a new function such as
function getFilmListByGenre(genreName)
Or something along those lines, but I don't know how I'd make it work.
Here is the current Javascript that I have, which creates the sort feature.
let db = new PouchDB('films');
let radios = document.getElementsByName("sort");
radios[0].addEventListener("change", getFilmList);
radios[1].addEventListener("change", getFilmList);
getFilmList();
function getFilmList(){
db.allDocs({include_docs: true, descending: radios[0].checked}).then(function(films){
let listContents = '';
for(let i = 0; i < films.total_rows; i++) {
let thisFilm = films.rows[i].doc;
let image = '<a class="btn" href="viewFilm.html?id=' + thisFilm._id +'"><img class="filmImage" src="' + thisFilm.image +'"></a>';
listContents += '<div class="filmRow">'+ image + '</div>';
}
document.getElementById('filmContainer').innerHTML = listContents;
})
}
I basically want to grab the value for genre (which can only be "Action", "Comedy", "Horror" or "Other") for each film from the database, then if the corresponding radio (named filter) is selected, all of the films which aren't labelled as that genre are hidden.
#import url(https://fonts.googleapis.com/css?family=Raleway);
body {
margin: 0;
font-family: 'Raleway', georgia, arial;
background-color: #e0e0e0;
text-align: center;
}
h1 {
color: #aaaaaa;
text-align: left;
}
.sortFilms {
text-align: left;
display: inline-block;
background-color: #ff6699;
width: 80%;
padding: 20px;
}
header {
text-align: center;
display: inline-block;
border-bottom: 5px;
border-top: 0;
border-left: 0;
border-right: 0;
border-style: solid;
border-color: #aaaaaa;
width: 80%;
padding: 20px;
background-color: #e0e0e0;
}
.newFilm {
text-align: left;
display: inline-block;
background-color: #ff6699;
width: 80%;
padding: 20px;
}
label {
font-size: 1em;
padding: 6px;
color: #fff;
font-weight: 700;
display: block;
text-align: left;
}
.form {
margin: auto;
display: flex;
text-align: center;
flex-direction: column;
}
h2 {
font-weight: 700;
font-size: 2em;
width: 50%;
color: #B2365F;
}
#formTitle {
margin-top: 0;
margin-bottom: 0;
}
.row {
margin-left: -20px;
display: grid;
grid-template-columns: 1fr 1fr;
}
.col {
padding: 20px;
}
input,
textarea, select {
width: 100%;
display: block;
border-radius: 25px;
background-color: #e0e0e0;
padding: 10px;
border: none;
box-sizing:border-box; }
}
.tagline {
margin: 0;
color: #333333;
font-size: 1em;
font-weight: 700;
}
input::placeholder {
color: #000;
}
textarea::placeholder {
color: #000;
}
#modifyFilmButton {
float: right;
}
#media only screen and (max-width: 700px) {
.row {
grid-template-columns: 1fr;
}
}
#media screen and (max-width:800px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border: 2px solid #e0e0e0;
background-color: #e0e0e0;
display: block;
margin-bottom: .625em;
border-radius: 20px;
}
table td {
display: block;
font-weight: bold;
font-size: 1.2em;
text-align: left;
padding: 15px;
}
table td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
.oldFilm {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
text-align: left;
display: inline-block;
background-color: #AAAAAA;
width: 80%;
padding: 20px;
}
#oldTitle {
margin-top: 0;
margin-bottom: 0;
color: #ff6699;
padding-bottom: 20px;
}
td {
padding: 5px;
font-weight: bold;
}
table {
border-collapse: collapse;
text-align: center;
width: 100%;
}
thead {
background: #ff6699;
}
.reviewImage {
width: 200px;
border-radius: 20px;
}
.filmRow img {
width: 300px;
height: 420px;
margin: 10px;
border-radius: 20px;
}
.filmRow {
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
#filmContainer {
width: 100%;
margin-top: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
#date {
padding: 5px;
text-align: left;
width: 30%;
}
#date input {
width: auto;
}
#date label {
display: -webkit-inline-box;
}
#oldTitle2 {
margin-top: 0;
margin-bottom: 0;
color: #ff6699;
}
.genre {
padding: 5px;
text-align: left;
width: 60%;
}
.genre input {
width:auto;
}
.genre label {
display: -webkit-inline-box;
}
<div class="sortFilms">
<h2 id="formTitle">Latest reviews</h2>
<div id='filmContainer'></div>
</div>
<div class="oldFilm">
<h2 id="oldTitle2">Sort by</h2>
<div id="date">
<p><b>Age of review</b></p>
<label>Newer<input type="radio" name="sort" checked/></label>
<label>Older<input type="radio" name="sort"/></label>
</div>
<div class="genre">
<p><b>Genre</b></p>
<label>Action<input type="radio" name="filter"/></label>
<label>Comedy<input type="radio" name="filter"/></label>
<label>Horror<input type="radio" name="filter"/></label>
<label>Other<input type="radio" name="filter"/></label>
</div>
</div>

You should seperate your display logic and your fetching logic, then you can just filter out the results that aren't the genre you wanted. I would do it something like this:
var db = {
allDocs: () => {
return new Promise((resolve) => resolve([{genre: 'Horror', title: 'The Hills Have Eyes'}, {genre: 'Comedy', title: 'Dumb and Dumber'}]))
}
}
function getFilmList() {
return db.allDocs();
}
function getFilmsByGenre(genre) {
return getFilmList().then(films => films.filter(film => film.genre === genre));
}
function displayFilms(films) {
let listContents = '';
for(let i = 0; i < films.length; i++) {
let thisFilm = films[i].title;
listContents += '<div class="filmRow">'+ thisFilm + '</div>';
}
document.getElementById('filmContainer').innerHTML = listContents;
}
document.getElementById('all').addEventListener('click', () => {
getFilmList().then(displayFilms)
})
document.querySelectorAll('[name="filter"]').forEach(radio => radio.addEventListener('change', (event) => {
getFilmsByGenre(event.target.parentNode.textContent).then(displayFilms)
}))
<div id="filmContainer"></div>
<button id="all">All</button>
<label>Action<input type="radio" name="filter"/></label>
<label>Comedy<input type="radio" name="filter"/></label>
<label>Horror<input type="radio" name="filter"/></label>
<label>Other<input type="radio" name="filter"/></label>

Display buttons in one line no matter what size is the div

I am trying to display 4 pictures on a website, each one has different description below it. And there is a button at the end bottom. Since each picture has different description, it means amount of lines differs, but the size of div should be the same and button position should be in one line with all buttons of other pictures. Please see attached image to know what I mean.
I want to display the buttons in the same line with the last picture on right "Andy Clarke". So that when I resize page it won't mess them up.
Please help!
Code is:
html {
box-sizing: border-box
}
*,
*:before,
*:after {
box-sizing: inherit
}
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block
}
progress {
vertical-align: baseline
}
audio:not([controls]) {
display: none;
height: 0
}
[hidden],
template {
display: none
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects;
text-decoration: none;
}
a:active,
a:hover {
outline-width: 0
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted
}
dfn {
font-style: italic
}
mark {
background: #ff0;
color: #000
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -0.25em
}
sup {
top: -0.5em
}
figure {
margin: 1em 40px
}
img {
border-style: none
}
svg:not(:root) {
overflow: hidden
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible
}
button,
input,
select,
textarea {
font: inherit;
margin: 0
}
optgroup {
font-weight: bold
}
button,
input {
overflow: visible
}
button,
select {
text-transform: none
}
button,
html [type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button
}
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0
}
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: .35em .625em .75em
}
legend {
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal
}
textarea {
overflow: auto
}
.ppl-font {
font-family: 'Simonetta';
font-size: 18px;
}
[type=checkbox],
[type=radio] {
padding: 0
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
/* End extract */
html,
body {
font-family: Verdana, sans-serif;
font-size: 15px;
line-height: 1.5
}
html {
overflow-x: hidden
}
h1 {
font-size: 36px
}
h2 {
font-size: 30px
}
h3 {
font-size: 24px
}
h4 {
font-size: 20px
}
h5 {
font-size: 18px
}
h6 {
font-size: 16px
}
.w3-serif {
font-family: serif
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Segoe UI", Arial, sans-serif;
font-weight: 400;
margin: 10px 0
}
.w3-wide {
letter-spacing: 4px
}
hr {
border: 0;
border-top: 1px solid #eee;
margin: 20px 0
}
.w3-image {
max-width: 100%;
height: auto
}
img {
margin-bottom: -5px
}
a {
color: inherit
}
.w3-btn,
.w3-button {
border: none;
display: inline-block;
outline: 0;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap;
}
.w3-btn:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
.w3-btn,
.w3-button {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.w3-disabled,
.w3-btn:disabled,
.w3-button:disabled {
cursor: not-allowed;
opacity: 0.3
}
.w3-disabled *,
:disabled * {
pointer-events: none
}
.w3-btn.w3-disabled:hover,
.w3-btn:disabled:hover {
box-shadow: none
}
.w3-input {
padding: 8px;
display: block;
border: none;
border-bottom: 1px solid #ccc;
width: 100%
}
.w3-container:after,
.w3-container:before,
.w3-panel:after,
.w3-panel:before,
.w3-row:after,
.w3-row:before,
.w3-row-padding:after,
.w3-row-padding:before,
.w3-cell-row:before,
.w3-cell-row:after,
.w3-clear:after,
.w3-clear:before,
.w3-bar:before,
.w3-bar:after {
content: "";
display: table;
clear: both
}
.w3-col,
.w3-half,
.w3-third,
.w3-twothird,
.w3-threequarter,
.w3-quarter {
float: left;
width: 100%;
}
.w3-col.s1 {
width: 8.33333%
}
.w3-col.s2 {
width: 16.66666%
}
.w3-col.s3 {
width: 24.99999%
}
.w3-col.s4 {
width: 33.33333%
}
.w3-col.s5 {
width: 41.66666%
}
.w3-col.s6 {
width: 49.99999%
}
.w3-col.s7 {
width: 58.33333%
}
.w3-col.s8 {
width: 66.66666%
}
.w3-col.s9 {
width: 74.99999%
}
.w3-col.s10 {
width: 83.33333%
}
.w3-col.s11 {
width: 91.66666%
}
.w3-col.s12 {
width: 99.99999%
}
#media (min-width:601px) {
.w3-col.m1 {
width: 8.33333%
}
.w3-col.m2 {
width: 16.66666%
}
.w3-col.m3,
.w3-quarter {
width: 24.99999%
}
.w3-col.m4,
.w3-third {
width: 33.33333%
}
.w3-col.m5 {
width: 41.66666%
}
.w3-col.m6,
.w3-half {
width: 49.99999%
}
.w3-col.m7 {
width: 58.33333%
}
.w3-col.m8,
.w3-twothird {
width: 66.66666%
}
.w3-col.m9,
.w3-threequarter {
width: 74.99999%
}
.w3-col.m10 {
width: 83.33333%
}
.w3-col.m11 {
width: 91.66666%
}
.w3-col.m12 {
width: 99.99999%
}
}
#media (min-width:993px) {
.w3-col.l1 {
width: 8.33333%
}
.w3-col.l2 {
width: 16.66666%
}
.w3-col.l3 {
width: 24.99999%
}
.w3-col.l4 {
width: 33.33333%
}
.w3-col.l5 {
width: 41.66666%
}
.w3-col.l6 {
width: 49.99999%
}
.w3-col.l7 {
width: 58.33333%
}
.w3-col.l8 {
width: 66.66666%
}
.w3-col.l9 {
width: 74.99999%
}
.w3-col.l10 {
width: 83.33333%
}
.w3-col.l11 {
width: 91.66666%
}
.w3-col.l12 {
width: 99.99999%
}
}
.w3-content {
max-width: 980px;
margin: auto
}
.w3-rest {
overflow: hidden
}
#media (max-width:600px) {
.w3-modal-content {
margin: 0 10px;
width: auto!important
}
.w3-modal {
padding-top: 30px
}
.w3-dropdown-hover.w3-mobile .w3-dropdown-content,
.w3-dropdown-click.w3-mobile .w3-dropdown-content {
position: relative
}
.w3-hide-small {
display: none!important
}
.w3-mobile {
display: block;
width: 100%!important
}
.w3-bar-item.w3-mobile,
.w3-dropdown-hover.w3-mobile,
.w3-dropdown-click.w3-mobile {
text-align: center
}
.w3-dropdown-hover.w3-mobile,
.w3-dropdown-hover.w3-mobile .w3-btn,
.w3-dropdown-hover.w3-mobile .w3-button,
.w3-dropdown-click.w3-mobile,
.w3-dropdown-click.w3-mobile .w3-btn,
.w3-dropdown-click.w3-mobile .w3-button {
width: 100%
}
}
#media (max-width:768px) {
.w3-modal-content {
width: 500px
}
.w3-modal {
padding-top: 50px
}
}
#media (min-width:993px) {
.w3-modal-content {
width: 900px
}
.w3-hide-large {
display: none!important
}
.w3-sidebar.w3-collapse {
display: block!important
}
}
#media (max-width:992px) and (min-width:601px) {
.w3-hide-medium {
display: none!important
}
}
#media (max-width:992px) {
.w3-sidebar.w3-collapse {
display: none
}
.w3-main {
margin-left: 0!important;
margin-right: 0!important
}
}
.w3-top,
.w3-bottom {
position: fixed;
width: 100%;
z-index: 1
}
.w3-top {
top: 0
}
.w3-bottom {
bottom: 0
}
.w3-overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2
}
.w3-display-topleft {
position: absolute;
left: 0;
top: 0
}
.w3-display-topright {
position: absolute;
right: 0;
top: 0
}
.w3-display-bottomleft {
position: absolute;
left: 0;
bottom: 0
}
.w3-display-bottomright {
position: absolute;
right: 0;
bottom: 0
}
.w3-display-middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.w3-row-padding,
.w3-row-padding>.w3-half,
.w3-row-padding>.w3-third,
.w3-row-padding>.w3-twothird,
.w3-row-padding>.w3-threequarter,
.w3-row-padding>.w3-quarter,
.w3-row-padding>.w3-col {
padding: 0 8px
}
.w3-container,
.w3-panel {
padding: 0.01em 16px
}
#keyframes w3-spin {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(359deg)
}
}
#keyframes fading {
0% {
opacity: 0
}
50% {
opacity: 1
}
100% {
opacity: 0
}
}
.w3-animate-opacity {
animation: opac 0.8s
}
.w3-animate-input {
transition: width 0.4s ease-in-out
}
.w3-animate-input:focus {
width: 100%!important
}
.w3-opacity,
.w3-hover-opacity:hover {
opacity: 0.60
}
.w3-opacity-off,
.w3-hover-opacity-off:hover {
opacity: 1
}
.w3-opacity-max {
opacity: 0.25
}
.w3-opacity-min {
opacity: 0.75
}
.w3-greyscale-max,
.w3-grayscale-max,
.w3-hover-greyscale:hover,
.w3-hover-grayscale:hover {
filter: grayscale(100%)
}
.w3-greyscale,
.w3-grayscale {
filter: grayscale(75%)
}
.w3-greyscale-min,
.w3-grayscale-min {
filter: grayscale(50%)
}
.w3-sepia {
filter: sepia(75%)
}
.w3-sepia-max,
.w3-hover-sepia:hover {
filter: sepia(100%)
}
.w3-sepia-min {
filter: sepia(50%)
}
.w3-tiny {
font-size: 10px!important
}
.w3-small {
font-size: 12px!important
}
.w3-medium {
font-size: 15px!important
}
.w3-large {
font-size: 18px!important
}
.w3-xlarge {
font-size: 24px!important
}
.w3-xxlarge {
font-size: 36px!important
}
.w3-xxxlarge {
font-size: 48px!important
}
.w3-jumbo {
font-size: 64px!important
}
.w3-left-align {
text-align: left!important
}
.w3-right-align {
text-align: right!important
}
.w3-justify {
text-align: justify!important
}
.w3-center {
text-align: center!important
}
.w3-border-0 {
border: 0!important
}
.w3-border {
border: 1px solid #ccc!important
}
.w3-border-top {
border-top: 1px solid #ccc!important
}
.w3-border-bottom {
border-bottom: 1px solid #ccc!important
}
.w3-border-left {
border-left: 1px solid #ccc!important
}
.w3-border-right {
border-right: 1px solid #ccc!important
}
.w3-topbar {
border-top: 6px solid #ccc!important
}
.w3-bottombar {
border-bottom: 6px solid #ccc!important
}
.w3-leftbar {
border-left: 6px solid #ccc!important
}
.w3-rightbar {
border-right: 6px solid #ccc!important
}
.w3-section,
.w3-code {
margin-top: 16px!important;
margin-bottom: 16px!important
}
.w3-margin {
margin: 16px!important
}
.w3-margin-top {
margin-top: 16px!important
}
.w3-margin-bottom {
margin-bottom: 16px!important
}
.w3-margin-left {
margin-left: 16px!important
}
.w3-margin-right {
margin-right: 16px!important
}
.w3-padding-small {
padding: 4px 8px!important
}
.w3-padding {
padding: 8px 16px!important
}
.w3-padding-large {
padding: 12px 24px!important
}
.w3-padding-16 {
padding-top: 16px!important;
padding-bottom: 16px!important
}
.w3-padding-24 {
padding-top: 24px!important;
padding-bottom: 24px!important
}
.w3-padding-32 {
padding-top: 32px!important;
padding-bottom: 32px!important
}
.w3-padding-48 {
padding-top: 48px!important;
padding-bottom: 48px!important
}
.w3-padding-64 {
padding-top: 64px!important;
padding-bottom: 64px!important
}
.w3-left {
float: left!important
}
.w3-right {
float: right!important
}
.w3-button:hover {
color: #000!important;
background-color: #ccc!important
}
.w3-transparent,
.w3-hover-none:hover {
background-color: transparent!important
}
.w3-hover-none:hover {
box-shadow: none!important
}
/* Colors */
.w3-amber,
.w3-hover-amber:hover {
color: #000!important;
background-color: #ffc107!important
}
.w3-aqua,
.w3-hover-aqua:hover {
color: #000!important;
background-color: #00ffff!important
}
.w3-blue,
.w3-hover-blue:hover {
color: #fff!important;
background-color: #2196F3!important
}
.w3-light-blue,
.w3-hover-light-blue:hover {
color: #000!important;
background-color: #87CEEB!important
}
.w3-brown,
.w3-hover-brown:hover {
color: #fff!important;
background-color: #795548!important
}
.w3-cyan,
.w3-hover-cyan:hover {
color: #000!important;
background-color: #00bcd4!important
}
.w3-blue-grey,
.w3-hover-blue-grey:hover,
.w3-blue-gray,
.w3-hover-blue-gray:hover {
color: #fff!important;
background-color: #607d8b!important
}
.w3-green,
.w3-hover-green:hover {
color: #fff!important;
background-color: #4CAF50!important
}
.w3-light-green,
.w3-hover-light-green:hover {
color: #000!important;
background-color: #8bc34a!important
}
.w3-indigo,
.w3-hover-indigo:hover {
color: #fff!important;
background-color: #3f51b5!important
}
.w3-khaki,
.w3-hover-khaki:hover {
color: #000!important;
background-color: #f0e68c!important
}
.w3-lime,
.w3-hover-lime:hover {
color: #000!important;
background-color: #cddc39!important
}
.w3-orange,
.w3-hover-orange:hover {
color: #000!important;
background-color: #ff9800!important
}
.w3-deep-orange,
.w3-hover-deep-orange:hover {
color: #fff!important;
background-color: #ff5722!important
}
.w3-pink,
.w3-hover-pink:hover {
color: #fff!important;
background-color: #e91e63!important
}
.w3-purple,
.w3-hover-purple:hover {
color: #fff!important;
background-color: #9c27b0!important
}
.w3-deep-purple,
.w3-hover-deep-purple:hover {
color: #fff!important;
background-color: #673ab7!important
}
.w3-red,
.w3-hover-red:hover {
color: #fff!important;
background-color: #f44336!important
}
.w3-sand,
.w3-hover-sand:hover {
color: #000!important;
background-color: #fdf5e6!important
}
.w3-teal,
.w3-hover-teal:hover {
color: #fff!important;
background-color: #009688!important
}
.w3-yellow,
.w3-hover-yellow:hover {
color: #000!important;
background-color: #ffeb3b!important
}
.w3-white,
.w3-hover-white:hover {
color: #000!important;
background-color: #fff!important
}
.w3-black,
.w3-hover-black:hover {
color: #fff!important;
background-color: #000!important
}
.w3-red,
.w3-hover-black:hover {
color: red!important;
background-color: #000!important
}
.w3-grey,
.w3-hover-grey:hover,
.w3-gray,
.w3-hover-gray:hover {
color: #000!important;
background-color: #bbb!important
}
.w3-light-grey,
.w3-hover-light-grey:hover,
.w3-light-gray,
.w3-hover-light-gray:hover {
color: #000!important;
background-color: #f1f1f1!important;
}
.w3-dark-grey,
.w3-hover-dark-grey:hover,
.w3-dark-gray,
.w3-hover-dark-gray:hover {
color: #fff!important;
background-color: #616161!important
}
.w3-pale-red,
.w3-hover-pale-red:hover {
color: #000!important;
background-color: #ffdddd!important
}
.w3-pale-green,
.w3-hover-pale-green:hover {
color: #000!important;
background-color: #ddffdd!important
}
.w3-pale-yellow,
.w3-hover-pale-yellow:hover {
color: #000!important;
background-color: #ffffcc!important
}
.w3-pale-blue,
.w3-hover-pale-blue:hover {
color: #000!important;
background-color: #ddffff!important
}
.w3-text-red,
.w3-hover-text-red:hover {
color: #f44336!important
}
.w3-text-green,
.w3-hover-text-green:hover {
color: #4CAF50!important
}
.w3-text-blue,
.w3-hover-text-blue:hover {
color: #2196F3!important
}
.w3-text-yellow,
.w3-hover-text-yellow:hover {
color: #ffeb3b!important
}
.w3-text-white,
.w3-hover-text-white:hover {
color: #fff!important
}
.w3-text-op,
.w3-hover-text-op:hover {
color: #a1a1a1!important
}
.w3-text-black,
.w3-hover-text-black:hover {
color: #000!important
}
.w3-text-grey,
.w3-hover-text-grey:hover,
.w3-text-gray,
.w3-hover-text-gray:hover {
color: #757575!important
}
.w3-text-amber {
color: #ffc107!important
}
.w3-text-aqua {
color: #00ffff!important
}
.w3-text-light-blue {
color: #87CEEB!important
}
.w3-text-brown {
color: #795548!important
}
.w3-text-cyan {
color: #00bcd4!important
}
.w3-text-blue-grey,
.w3-text-blue-gray {
color: #607d8b!important
}
.w3-text-light-green {
color: #8bc34a!important
}
.w3-text-indigo {
color: #3f51b5!important
}
.w3-text-khaki {
color: #b4aa50!important
}
.w3-text-lime {
color: #cddc39!important
}
.w3-text-orange {
color: #ff9800!important
}
.w3-text-deep-orange {
color: #ff5722!important
}
.w3-text-pink {
color: #e91e63!important
}
.w3-text-purple {
color: #9c27b0!important
}
.w3-text-deep-purple {
color: #673ab7!important
}
.w3-text-sand {
color: #fdf5e6!important
}
.w3-text-teal {
color: #009688!important
}
.w3-text-light-grey,
.w3-hover-text-light-grey:hover,
.w3-text-light-gray,
.w3-hover-text-light-gray:hover {
color: #f1f1f1!important
}
.w3-border-grey,
.w3-hover-border-grey:hover,
.w3-border-gray,
.w3-hover-border-gray:hover {
border-color: #bbb!important
}
<div class="w3-container w3-padding-32" id="People">
<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Interesting People Every Web Designer Should Know</h3>
</div>
<div class="w3-row-padding w3-grayscale">
<div class="w3-col l3 m6 w3-margin-bottom">
<img src="ppl1.jpg" alt="Ethan" style="width:100%">
<h3>Ethan Marcotte</h3>
<p class="w3-opacity">Founder of Responsive Web Design</p>
<p class="ppl-font">
If there's one man in the web industry who probably doesn't need an introduction, it's </br>Ethan Marcotte.</br>
One of the web's best-known designers. </br>Ethan is a regular and popular speaker on the conference circuit and, in his own words, the one who "started that whole 'responsive web design' thing".
<form>
<input class="w3-button w3-light-grey w3-block" type="button" value="Click" onclick="window.open('https://ethanmarcotte.com/')" />
</form>
</p>
</div>
<div class="w3-col l3 m6 w3-margin-bottom">
<img src="ppl2.jpg" alt="Chris" style="width:100%">
<h3>Chris Coyier</h3>
<p class="w3-opacity">Founder / Writer / Designer</p>
<p class="ppl-font">A world-known CSS expert and HTML guru, Chris Coyier writes one of the most popular CSS blogs on the web, CSS-Tricks. Throughout his career, Chris has published many tutorials, websites, and scripts to help designers improve their skills. A designer
at CodePen, Chris can also be found at web design and development podcast ShopTalk.
<form>
<input class="w3-button w3-light-grey w3-block" type="button" value="Click" onclick="window.open('https://chriscoyier.net/')" />
</form>
</p>
</div>
<div class="w3-col l3 m6 w3-margin-bottom">
<img src="ppl3.jpg" alt="Karen" style="width:100%">
<h3>Karen McGrane</h3>
<p class="w3-opacity">UX and content strategy for web and mobile</p>
<p class="ppl-font">
UX expert Karen McGrane motto is simple - 'On a good day, I make the web more awesome. A content strategist and user experience designer, Karen has over 15 years experience of making big, complicated websites. Currently managing partner of Bond Art +
Science, she is also the author of Content Strategy for Mobile.
<form>
<input class="w3-button w3-light-grey w3-block" type="button" value="Click" onclick="window.open('https://karenmcgrane.com/')" />
</form>
</p>
</div>
<div class="w3-col l3 m6 w3-margin-bottom">
<img src="ppl4.jpg" alt="Andy" style="width:100%">
<h3>Andy Clarke</h3>
<p class="w3-opacity">Founder of a Welsh-based design studio</p>
<p class="ppl-font">Andy is a well-known speaker on the conference circuit, and is the founder of a Welsh-based design studio, Stuff and Nonsense, that boasts clients including the likes of The Home Office, STV and the International Organization for Standardization.
Andy is perhaps best known for his book, Hardboiled Web Design, which combined the idea of progressive enhancement with responsive web design.
<form>
<input class="w3-button w3-light-grey w3-block div-size4" type="button" value="Click" onclick="window.open('https://stuffandnonsense.co.uk/')" />
</form>
</p>
</div>
</div>

Same line elements
Setting a height to the text that is displayed below the pictures should give a good height to put a button:
Example with scroll y overflow:
* {
box-sizing: border-box;
}
.Card {
display: inline-block;
width: 200px;
height: 400px;
box-shadow: 1px 1px 2px black;
margin: 0.5em;
}
.Card img {
display: block;
margin: 0 auto;
width: 150px;
}
.Card h1 {
margin: 0;
}
/*Magic starts here*/
.Card p {
display: block;
height: 100px;
overflow-y: auto;
}
.Card button {
display: block;
height: 2em;
width: 100%;
border: none;
background-color: cornflowerblue;
box-shadow: 1px 1px 1px black;
}
<div class="Card">
<img src="http://lorempixel.com/150/150"/>
<h1>Name</h1>
<p>Text goes here, Text goes here, Text goes here, Text goes here, Text goes here, Text goes here, Text goes here, Text goes here, Text goes here, Text goes here, Text goes here, Text goes here,</p>
<button>Press me!</button>
</div>
<div class="Card">
<img src="http://lorempixel.com/150/150"/>
<h1>Nameru</h1>
<p>Text goes here</p>
<button>Press me!</button>
</div>
<div class="Card">
<img src="http://lorempixel.com/150/150"/>
<h1>Nameru</h1>
<p>Text goes here</p>
<button>Press me!</button>
</div>
<div class="Card">
<img src="http://lorempixel.com/150/150"/>
<h1>Nameru</h1>
<p>Text goes here</p>
<button>Press me!</button>
</div>

try to add this code into your CSS. I hope it will work.
.w3-row-padding {
display: flex;
}
form {
position: absolute;
bottom: 0;
}
.w3-row-padding >div {
position: relative;
}
.w3-row-padding >div>p {
margin-bottom: 50px;
}

I recommend reading about how to use flexbox, or alternatively potenially using tables or display:table. Each of those can force your columns to be the same height, and you can then position your buttons at the bottom of each one.
[edit]
Here's a JSFiddle that shows how you can use it to smash the button to the bottom:
https://jsfiddle.net/hsnohum5/1/

Without redoing the whole thing, I can come up with so called padding trick. The idea is to set the height of the container to 0px and make padding look as if it is the height. Set relative position for this outer container as well. Also place another container inside it and set its position to absolute and stretch it to take all the space within the outer one. In your code I added <div> right inside .w3-col and placed all the content there. I set the following additional styles:
.w3-col form {
position: absolute;
bottom: 1rem;
width: 100%;
text-align: center;
}
.w3-btn, .w3-button {
width: 90%;
}
.w3-col {
padding-bottom: 80%!important;
position: relative;
height: 0px;
}
.w3-col > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
If your blocks are static - which seems to be the case - you just need to set padding-bottom properly for .w3-col to fit all the content. The whole thing (you may want to polish responsiveness for different viewports):
html {
box-sizing: border-box
}
*,
*:before,
*:after {
box-sizing: inherit
}
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block
}
progress {
vertical-align: baseline
}
audio:not([controls]) {
display: none;
height: 0
}
[hidden],
template {
display: none
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects;
text-decoration: none;
}
a:active,
a:hover {
outline-width: 0
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted
}
dfn {
font-style: italic
}
mark {
background: #ff0;
color: #000
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -0.25em
}
sup {
top: -0.5em
}
figure {
margin: 1em 40px
}
img {
border-style: none
}
svg:not(:root) {
overflow: hidden
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible
}
button,
input,
select,
textarea {
font: inherit;
margin: 0
}
optgroup {
font-weight: bold
}
button,
input {
overflow: visible
}
button,
select {
text-transform: none
}
button,
html [type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button
}
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0
}
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: .35em .625em .75em
}
legend {
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal
}
textarea {
overflow: auto
}
.ppl-font {
font-family: 'Simonetta';
font-size: 18px;
}
[type=checkbox],
[type=radio] {
padding: 0
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
/* End extract */
html,
body {
font-family: Verdana, sans-serif;
font-size: 15px;
line-height: 1.5
}
html {
overflow-x: hidden
}
h1 {
font-size: 36px
}
h2 {
font-size: 30px
}
h3 {
font-size: 24px
}
h4 {
font-size: 20px
}
h5 {
font-size: 18px
}
h6 {
font-size: 16px
}
.w3-serif {
font-family: serif
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Segoe UI", Arial, sans-serif;
font-weight: 400;
margin: 10px 0
}
.w3-wide {
letter-spacing: 4px
}
hr {
border: 0;
border-top: 1px solid #eee;
margin: 20px 0
}
.w3-image {
max-width: 100%;
height: auto
}
img {
margin-bottom: -5px
}
a {
color: inherit
}
.w3-btn,
.w3-button {
border: none;
display: inline-block;
outline: 0;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap;
width: 90%;
}
.w3-col form {
position: absolute;
bottom: 1rem;
width: 100%;
text-align: center;
}
.w3-btn:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
.w3-btn,
.w3-button {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.w3-disabled,
.w3-btn:disabled,
.w3-button:disabled {
cursor: not-allowed;
opacity: 0.3
}
.w3-disabled *,
:disabled * {
pointer-events: none
}
.w3-btn.w3-disabled:hover,
.w3-btn:disabled:hover {
box-shadow: none
}
.w3-input {
padding: 8px;
display: block;
border: none;
border-bottom: 1px solid #ccc;
width: 100%
}
.w3-container:after,
.w3-container:before,
.w3-panel:after,
.w3-panel:before,
.w3-row:after,
.w3-row:before,
.w3-row-padding:after,
.w3-row-padding:before,
.w3-cell-row:before,
.w3-cell-row:after,
.w3-clear:after,
.w3-clear:before,
.w3-bar:before,
.w3-bar:after {
content: "";
display: table;
clear: both
}
.w3-col {
padding-bottom: 80%!important;
position: relative;
height: 0px;
}
.w3-col > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.w3-col,
.w3-half,
.w3-third,
.w3-twothird,
.w3-threequarter,
.w3-quarter {
float: left;
width: 100%;
}
.w3-col.s1 {
width: 8.33333%
}
.w3-col.s2 {
width: 16.66666%
}
.w3-col.s3 {
width: 24.99999%
}
.w3-col.s4 {
width: 33.33333%
}
.w3-col.s5 {
width: 41.66666%
}
.w3-col.s6 {
width: 49.99999%
}
.w3-col.s7 {
width: 58.33333%
}
.w3-col.s8 {
width: 66.66666%
}
.w3-col.s9 {
width: 74.99999%
}
.w3-col.s10 {
width: 83.33333%
}
.w3-col.s11 {
width: 91.66666%
}
.w3-col.s12 {
width: 99.99999%
}
#media (min-width:601px) {
.w3-col.m1 {
width: 8.33333%
}
.w3-col.m2 {
width: 16.66666%
}
.w3-col.m3,
.w3-quarter {
width: 24.99999%
}
.w3-col.m4,
.w3-third {
width: 33.33333%
}
.w3-col.m5 {
width: 41.66666%
}
.w3-col.m6,
.w3-half {
width: 49.99999%
}
.w3-col.m7 {
width: 58.33333%
}
.w3-col.m8,
.w3-twothird {
width: 66.66666%
}
.w3-col.m9,
.w3-threequarter {
width: 74.99999%
}
.w3-col.m10 {
width: 83.33333%
}
.w3-col.m11 {
width: 91.66666%
}
.w3-col.m12 {
width: 99.99999%
}
}
#media (min-width:993px) {
.w3-col.l1 {
width: 8.33333%
}
.w3-col.l2 {
width: 16.66666%
}
.w3-col.l3 {
width: 24.99999%
}
.w3-col.l4 {
width: 33.33333%
}
.w3-col.l5 {
width: 41.66666%
}
.w3-col.l6 {
width: 49.99999%
}
.w3-col.l7 {
width: 58.33333%
}
.w3-col.l8 {
width: 66.66666%
}
.w3-col.l9 {
width: 74.99999%
}
.w3-col.l10 {
width: 83.33333%
}
.w3-col.l11 {
width: 91.66666%
}
.w3-col.l12 {
width: 99.99999%
}
}
.w3-content {
max-width: 980px;
margin: auto
}
.w3-rest {
overflow: hidden
}
#media (max-width:600px) {
.w3-modal-content {
margin: 0 10px;
width: auto!important
}
.w3-modal {
padding-top: 30px
}
.w3-dropdown-hover.w3-mobile .w3-dropdown-content,
.w3-dropdown-click.w3-mobile .w3-dropdown-content {
position: relative
}
.w3-hide-small {
display: none!important
}
.w3-mobile {
display: block;
width: 100%!important
}
.w3-bar-item.w3-mobile,
.w3-dropdown-hover.w3-mobile,
.w3-dropdown-click.w3-mobile {
text-align: center
}
.w3-dropdown-hover.w3-mobile,
.w3-dropdown-hover.w3-mobile .w3-btn,
.w3-dropdown-hover.w3-mobile .w3-button,
.w3-dropdown-click.w3-mobile,
.w3-dropdown-click.w3-mobile .w3-btn,
.w3-dropdown-click.w3-mobile .w3-button {
width: 100%
}
}
#media (max-width:768px) {
.w3-modal-content {
width: 500px
}
.w3-modal {
padding-top: 50px
}
}
#media (min-width:993px) {
.w3-modal-content {
width: 900px
}
.w3-hide-large {
display: none!important
}
.w3-sidebar.w3-collapse {
display: block!important
}
}
#media (max-width:992px) and (min-width:601px) {
.w3-hide-medium {
display: none!important
}
}
#media (max-width:992px) {
.w3-sidebar.w3-collapse {
display: none
}
.w3-main {
margin-left: 0!important;
margin-right: 0!important
}
}
.w3-top,
.w3-bottom {
position: fixed;
width: 100%;
z-index: 1
}
.w3-top {
top: 0
}
.w3-bottom {
bottom: 0
}
.w3-overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2
}
.w3-display-topleft {
position: absolute;
left: 0;
top: 0
}
.w3-display-topright {
position: absolute;
right: 0;
top: 0
}
.w3-display-bottomleft {
position: absolute;
left: 0;
bottom: 0
}
.w3-display-bottomright {
position: absolute;
right: 0;
bottom: 0
}
.w3-display-middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.w3-row-padding,
.w3-row-padding>.w3-half,
.w3-row-padding>.w3-third,
.w3-row-padding>.w3-twothird,
.w3-row-padding>.w3-threequarter,
.w3-row-padding>.w3-quarter,
.w3-row-padding>.w3-col {
padding: 0 8px
}
.w3-container,
.w3-panel {
padding: 0.01em 16px
}
#keyframes w3-spin {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(359deg)
}
}
#keyframes fading {
0% {
opacity: 0
}
50% {
opacity: 1
}
100% {
opacity: 0
}
}
.w3-animate-opacity {
animation: opac 0.8s
}
.w3-animate-input {
transition: width 0.4s ease-in-out
}
.w3-animate-input:focus {
width: 100%!important
}
.w3-opacity,
.w3-hover-opacity:hover {
opacity: 0.60
}
.w3-opacity-off,
.w3-hover-opacity-off:hover {
opacity: 1
}
.w3-opacity-max {
opacity: 0.25
}
.w3-opacity-min {
opacity: 0.75
}
.w3-greyscale-max,
.w3-grayscale-max,
.w3-hover-greyscale:hover,
.w3-hover-grayscale:hover {
filter: grayscale(100%)
}
.w3-greyscale,
.w3-grayscale {
filter: grayscale(75%)
}
.w3-greyscale-min,
.w3-grayscale-min {
filter: grayscale(50%)
}
.w3-sepia {
filter: sepia(75%)
}
.w3-sepia-max,
.w3-hover-sepia:hover {
filter: sepia(100%)
}
.w3-sepia-min {
filter: sepia(50%)
}
.w3-tiny {
font-size: 10px!important
}
.w3-small {
font-size: 12px!important
}
.w3-medium {
font-size: 15px!important
}
.w3-large {
font-size: 18px!important
}
.w3-xlarge {
font-size: 24px!important
}
.w3-xxlarge {
font-size: 36px!important
}
.w3-xxxlarge {
font-size: 48px!important
}
.w3-jumbo {
font-size: 64px!important
}
.w3-left-align {
text-align: left!important
}
.w3-right-align {
text-align: right!important
}
.w3-justify {
text-align: justify!important
}
.w3-center {
text-align: center!important
}
.w3-border-0 {
border: 0!important
}
.w3-border {
border: 1px solid #ccc!important
}
.w3-border-top {
border-top: 1px solid #ccc!important
}
.w3-border-bottom {
border-bottom: 1px solid #ccc!important
}
.w3-border-left {
border-left: 1px solid #ccc!important
}
.w3-border-right {
border-right: 1px solid #ccc!important
}
.w3-topbar {
border-top: 6px solid #ccc!important
}
.w3-bottombar {
border-bottom: 6px solid #ccc!important
}
.w3-leftbar {
border-left: 6px solid #ccc!important
}
.w3-rightbar {
border-right: 6px solid #ccc!important
}
.w3-section,
.w3-code {
margin-top: 16px!important;
margin-bottom: 16px!important
}
.w3-margin {
margin: 16px!important
}
.w3-margin-top {
margin-top: 16px!important
}
.w3-margin-bottom {
margin-bottom: 16px!important
}
.w3-margin-left {
margin-left: 16px!important
}
.w3-margin-right {
margin-right: 16px!important
}
.w3-padding-small {
padding: 4px 8px!important
}
.w3-padding {
padding: 8px 16px!important
}
.w3-padding-large {
padding: 12px 24px!important
}
.w3-padding-16 {
padding-top: 16px!important;
padding-bottom: 16px!important
}
.w3-padding-24 {
padding-top: 24px!important;
padding-bottom: 24px!important
}
.w3-padding-32 {
padding-top: 32px!important;
padding-bottom: 32px!important
}
.w3-padding-48 {
padding-top: 48px!important;
padding-bottom: 48px!important
}
.w3-padding-64 {
padding-top: 64px!important;
padding-bottom: 64px!important
}
.w3-left {
float: left!important
}
.w3-right {
float: right!important
}
.w3-button:hover {
color: #000!important;
background-color: #ccc!important
}
.w3-transparent,
.w3-hover-none:hover {
background-color: transparent!important
}
.w3-hover-none:hover {
box-shadow: none!important
}
/* Colors */
.w3-amber,
.w3-hover-amber:hover {
color: #000!important;
background-color: #ffc107!important
}
.w3-aqua,
.w3-hover-aqua:hover {
color: #000!important;
background-color: #00ffff!important
}
.w3-blue,
.w3-hover-blue:hover {
color: #fff!important;
background-color: #2196F3!important
}
.w3-light-blue,
.w3-hover-light-blue:hover {
color: #000!important;
background-color: #87CEEB!important
}
.w3-brown,
.w3-hover-brown:hover {
color: #fff!important;
background-color: #795548!important
}
.w3-cyan,
.w3-hover-cyan:hover {
color: #000!important;
background-color: #00bcd4!important
}
.w3-blue-grey,
.w3-hover-blue-grey:hover,
.w3-blue-gray,
.w3-hover-blue-gray:hover {
color: #fff!important;
background-color: #607d8b!important
}
.w3-green,
.w3-hover-green:hover {
color: #fff!important;
background-color: #4CAF50!important
}
.w3-light-green,
.w3-hover-light-green:hover {
color: #000!important;
background-color: #8bc34a!important
}
.w3-indigo,
.w3-hover-indigo:hover {
color: #fff!important;
background-color: #3f51b5!important
}
.w3-khaki,
.w3-hover-khaki:hover {
color: #000!important;
background-color: #f0e68c!important
}
.w3-lime,
.w3-hover-lime:hover {
color: #000!important;
background-color: #cddc39!important
}
.w3-orange,
.w3-hover-orange:hover {
color: #000!important;
background-color: #ff9800!important
}
.w3-deep-orange,
.w3-hover-deep-orange:hover {
color: #fff!important;
background-color: #ff5722!important
}
.w3-pink,
.w3-hover-pink:hover {
color: #fff!important;
background-color: #e91e63!important
}
.w3-purple,
.w3-hover-purple:hover {
color: #fff!important;
background-color: #9c27b0!important
}
.w3-deep-purple,
.w3-hover-deep-purple:hover {
color: #fff!important;
background-color: #673ab7!important
}
.w3-red,
.w3-hover-red:hover {
color: #fff!important;
background-color: #f44336!important
}
.w3-sand,
.w3-hover-sand:hover {
color: #000!important;
background-color: #fdf5e6!important
}
.w3-teal,
.w3-hover-teal:hover {
color: #fff!important;
background-color: #009688!important
}
.w3-yellow,
.w3-hover-yellow:hover {
color: #000!important;
background-color: #ffeb3b!important
}
.w3-white,
.w3-hover-white:hover {
color: #000!important;
background-color: #fff!important
}
.w3-black,
.w3-hover-black:hover {
color: #fff!important;
background-color: #000!important
}
.w3-red,
.w3-hover-black:hover {
color: red!important;
background-color: #000!important
}
.w3-grey,
.w3-hover-grey:hover,
.w3-gray,
.w3-hover-gray:hover {
color: #000!important;
background-color: #bbb!important
}
.w3-light-grey,
.w3-hover-light-grey:hover,
.w3-light-gray,
.w3-hover-light-gray:hover {
color: #000!important;
background-color: #f1f1f1!important;
}
.w3-dark-grey,
.w3-hover-dark-grey:hover,
.w3-dark-gray,
.w3-hover-dark-gray:hover {
color: #fff!important;
background-color: #616161!important
}
.w3-pale-red,
.w3-hover-pale-red:hover {
color: #000!important;
background-color: #ffdddd!important
}
.w3-pale-green,
.w3-hover-pale-green:hover {
color: #000!important;
background-color: #ddffdd!important
}
.w3-pale-yellow,
.w3-hover-pale-yellow:hover {
color: #000!important;
background-color: #ffffcc!important
}
.w3-pale-blue,
.w3-hover-pale-blue:hover {
color: #000!important;
background-color: #ddffff!important
}
.w3-text-red,
.w3-hover-text-red:hover {
color: #f44336!important
}
.w3-text-green,
.w3-hover-text-green:hover {
color: #4CAF50!important
}
.w3-text-blue,
.w3-hover-text-blue:hover {
color: #2196F3!important
}
.w3-text-yellow,
.w3-hover-text-yellow:hover {
color: #ffeb3b!important
}
.w3-text-white,
.w3-hover-text-white:hover {
color: #fff!important
}
.w3-text-op,
.w3-hover-text-op:hover {
color: #a1a1a1!important
}
.w3-text-black,
.w3-hover-text-black:hover {
color: #000!important
}
.w3-text-grey,
.w3-hover-text-grey:hover,
.w3-text-gray,
.w3-hover-text-gray:hover {
color: #757575!important
}
.w3-text-amber {
color: #ffc107!important
}
.w3-text-aqua {
color: #00ffff!important
}
.w3-text-light-blue {
color: #87CEEB!important
}
.w3-text-brown {
color: #795548!important
}
.w3-text-cyan {
color: #00bcd4!important
}
.w3-text-blue-grey,
.w3-text-blue-gray {
color: #607d8b!important
}
.w3-text-light-green {
color: #8bc34a!important
}
.w3-text-indigo {
color: #3f51b5!important
}
.w3-text-khaki {
color: #b4aa50!important
}
.w3-text-lime {
color: #cddc39!important
}
.w3-text-orange {
color: #ff9800!important
}
.w3-text-deep-orange {
color: #ff5722!important
}
.w3-text-pink {
color: #e91e63!important
}
.w3-text-purple {
color: #9c27b0!important
}
.w3-text-deep-purple {
color: #673ab7!important
}
.w3-text-sand {
color: #fdf5e6!important
}
.w3-text-teal {
color: #009688!important
}
.w3-text-light-grey,
.w3-hover-text-light-grey:hover,
.w3-text-light-gray,
.w3-hover-text-light-gray:hover {
color: #f1f1f1!important
}
.w3-border-grey,
.w3-hover-border-grey:hover,
.w3-border-gray,
.w3-hover-border-gray:hover {
border-color: #bbb!important
}
<div class="w3-container w3-padding-32" id="People">
<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Interesting People Every Web Designer Should Know</h3>
</div>
<div class="w3-row-padding w3-grayscale">
<div class="w3-col l3 m6 w3-margin-bottom">
<div>
<img src="ppl1.jpg" alt="Ethan" style="width:100%">
<h3>Ethan Marcotte</h3>
<p class="w3-opacity">Founder of Responsive Web Design</p>
<p class="ppl-font">
If there's one man in the web industry who probably doesn't need an introduction, it's </br>Ethan Marcotte.</br>
One of the web's best-known designers. </br>Ethan is a regular and popular speaker on the conference circuit and, in his own words, the one who "started that whole 'responsive web design' thing".</p>
<form>
<input class="w3-button w3-light-grey w3-block" type="button" value="Click" onclick="window.open('https://ethanmarcotte.com/')" />
</form>
</div>
</div>
<div class="w3-col l3 m6 w3-margin-bottom"><div>
<img src="ppl2.jpg" alt="Chris" style="width:100%">
<h3>Chris Coyier</h3>
<p class="w3-opacity">Founder / Writer / Designer</p>
<p class="ppl-font">A world-known CSS expert and HTML guru, Chris Coyier writes one of the most popular CSS blogs on the web, CSS-Tricks. Throughout his career, Chris has published many tutorials, websites, and scripts to help designers improve their skills. A designer
at CodePen, Chris can also be found at web design and development podcast ShopTalk.</p>
<form>
<input class="w3-button w3-light-grey w3-block" type="button" value="Click" onclick="window.open('https://chriscoyier.net/')" />
</form>
</div>
</div>
<div class="w3-col l3 m6 w3-margin-bottom"><div>
<img src="ppl3.jpg" alt="Karen" style="width:100%">
<h3>Karen McGrane</h3>
<p class="w3-opacity">UX and content strategy for web and mobile</p>
<p class="ppl-font">
UX expert Karen McGrane motto is simple - 'On a good day, I make the web more awesome. A content strategist and user experience designer, Karen has over 15 years experience of making big, complicated websites. Currently managing partner of Bond Art +
Science, she is also the author of Content Strategy for Mobile.</p>
<form>
<input class="w3-button w3-light-grey w3-block" type="button" value="Click" onclick="window.open('https://karenmcgrane.com/')" />
</form>
</div>
</div>
<div class="w3-col l3 m6 w3-margin-bottom"><div>
<img src="ppl4.jpg" alt="Andy" style="width:100%">
<h3>Andy Clarke</h3>
<p class="w3-opacity">Founder of a Welsh-based design studio</p>
<p class="ppl-font">Andy is a well-known speaker on the conference circuit, and is the founder of a Welsh-based design studio, Stuff and Nonsense, that boasts clients including the likes of The Home Office, STV and the International Organization for Standardization.
Andy is perhaps best known for his book, Hardboiled Web Design, which combined the idea of progressive enhancement with responsive web design.</p>
<form>
<input class="w3-button w3-light-grey w3-block div-size4" type="button" value="Click" onclick="window.open('https://stuffandnonsense.co.uk/')" />
</form>
</div>
</div>
</div>