I'm new to Stack Overflow. I hope that I'm doing this correctly. ❤
I'm working on an old Etch-a-Sketch JavaScript project from months ago and decided to rework the 'mobile' form of the project because I hadn't bothered to do so at the time. At first, I tried just moving the buttons to the top horizontally, but I didn't like any of the variations I tried. So I decided I'd be better off with a dropdown menu instead that would appear when the screen is 500px or smaller, replacing the buttons.
The dropdown menu is supposed to do exactly what the buttons do - when a certain mode is selected, that's the mode that the program is supposed to switch to. For example, when the "Party mode" button is clicked, the program switches to "party mode". I want the dropdown menu to behave similarly - when the "party mode" option is selected, the program should switch to "party mode".
My logic was that I needed a function that grabbed the value of the dropdown menu, and then an "if" condition would run that pretty much says "If the value is x, x mode should run; else if the value is y, y mode should run", and so on. I added the function to the existing window.onload function so it would run upon the window loading. This didn't work.
Note that the dropdown menu will, in the future, only appear when the screen size is 500px or less. In addition, I still have the buttons on the screen for all sizes, just for testing/debugging purposes. When I'm done and have this figured out, the buttons will have "display = 'none'" and be hidden for the "mobile size".
Anyway, so yeah, the program is still just listening to the buttons, and not the dropdown menu. That leads me to believe that I need to somehow turn "off" the button mode? If that's the case, how do I do that? If that's not the case, what am I supposed to do here? Any help or insight would be greatly appreciated. Thanks!
const defaultMode = 'default';
const defaultSize = 30;
const defaultColor = '#0b478b';
let currentMode = defaultMode;
let currentSize = defaultSize;
let currentColor = defaultColor;
// Sets the program's current mode
function setCurrentMode(newMode) {
activeButton(newMode);
currentMode = newMode;
}
// Sets the grid's size
function setCurrentSize(newSize) {
currentSize = newSize;
}
// Sets the color of the square (if in default mode)
function setCurrentColor(newColor) {
currentColor = newColor;
}
// Links the various HTML elements to this script
const sizeValue = document.querySelector('#sizevalue');
const sizeSlider = document.querySelector('#sizeslider');
const colorPicker = document.querySelector('#colorpicker');
const defaultBtn = document.querySelector('#default');
const partyBtn = document.querySelector('#party');
const grayBtn = document.querySelector('#grayscale');
const eraserBtn = document.querySelector('#eraser');
const clearBtn = document.querySelector('#clear');
const grid = document.querySelector('#maincontainer');
// DOM manipulations for buttons, color picker, and size slider
colorPicker.onchange = (e) => setCurrentColor(e.target.value);
defaultBtn.onclick = () => setCurrentMode('default');
partyBtn.onclick = () => setCurrentMode('party');
grayBtn.onclick = () => setCurrentMode('gray');
eraserBtn.onclick = () => setCurrentMode('eraser');
clearBtn.onclick = () => reloadGrid();
sizeSlider.onmousemove = (e) => updateSizeValue(e.target.value);
sizeSlider.onchange = (e) => changeSize(e.target.value);
// When the size is changed, we set the grid size, update the size value (text), and reload the grid.
function changeSize(num) {
setCurrentSize(num);
updateSizeValue(num);
reloadGrid();
}
// When we update the size value, the text changes to reflect the value. (It's a square, so the value is always the same for length and width).
function updateSizeValue(num) {
sizeValue.innerHTML = `${num} x ${num}`;
}
// When we reload the grid (which happens when "Clear grid" is pressed), we ensure that we clear the grid and that the size is still the current size.
function reloadGrid() {
clearGrid()
makeGrid(currentSize)
}
// When we clear the grid, it clears the grid.
function clearGrid() {
grid.innerHTML = ''
}
// Creates the base grid and includes the code that says "when the mouse goes over the squares, draw."
function makeGrid(size) {
grid.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
grid.style.gridTemplateRows = `repeat(${size}, 1fr)`;
for (i = 0; i < size * size; i++) {
let square = document.createElement('div');
square.addEventListener('mouseover', changeColor);
grid.appendChild(square);
}
}
// These are the conditions to set the color of the "pen" (squares)
function changeColor(e) {
if (currentMode === 'party') {
const randomR = Math.floor(Math.random() * 256);
const randomG = Math.floor(Math.random() * 256);
const randomB = Math.floor(Math.random() * 256);
e.target.style.backgroundColor = `rgb(${randomR}, ${randomG}, ${randomB})`;
} else if (currentMode === 'default') {
e.target.style.backgroundColor = currentColor;
} else if (currentMode === 'gray') {
e.target.style.backgroundColor = calculateGray(e);
} else if (currentMode === 'eraser') {
e.target.style.backgroundColor = 'white';
}
}
// Shading mode code
function calculateGray(e) {
let clr = returnRGB(e.target.style.backgroundColor);
if (!clr || clr[1] !== clr[2] || clr[1] !== clr[3]) {
return `rgb(255, 255, 255)`;
}
return clr[1] <= 0 ? `rgb(255, 255, 255)` : `rgb(${clr[1]-25}, ${clr[1]-25}, ${clr[1]-25})`;
}
function returnRGB(num) {
return num.match(/rgb\(([0-9]*), ([0-9]*), ([0-9]*)\)/);
}
// Changes the button styling to indicate which mode is the active mode
function activeButton(newMode) {
if (currentMode === 'party') {
partyBtn.classList.remove('active');
} else if (currentMode === 'default') {
defaultBtn.classList.remove('active');
} else if (currentMode === 'gray') {
grayBtn.classList.remove('active');
} else if (currentMode === 'eraser') {
eraserBtn.classList.remove('active');
}
if (newMode === 'party') {
partyBtn.classList.add('active');
} else if (newMode === 'default') {
defaultBtn.classList.add('active');
} else if (newMode === 'gray') {
grayBtn.classList.add('active');
} else if (newMode === 'eraser') {
eraserBtn.classList.add('active');
}
}
// Ensures that, when we load the page, we make the grid and activate the correct mode (default).
window.onload = () => {
makeGrid(defaultSize);
activeButton(defaultMode);
dropdownModeThing(document.getElementById('dropdown-mode').value);
}
// Code for the dropdown menu
function dropdownModeThing(val) {
if (val === 'default') {
setCurrentMode('default');
} else if (val === 'party') {
setCurrentMode('party');
} else if (val === 'shading') {
setCurrentMode('gray');
} else if (val === 'eraser') {
setCurrentMode('eraser');
} else if (val === 'clear') {
reloadGrid();
}
}
body,
html {
min-height: 100vh;
height: 100%;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin: 0;
padding: 0;
background-color: white;
overflow-x: hidden;
}
header {
text-align: center;
margin: 0;
border-bottom: 1px solid black;
background-color: #0b478b;
color: white;
padding: 10px;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
p {
margin: 0;
}
h1 {
text-align: center;
margin: 0;
font-size: 2.5rem;
padding: 0;
}
#maincontainer {
background-color: white;
margin: 20px auto 10px auto;
display: grid;
border: 1px solid black;
width: 45vw;
height: 45vw;
min-height: 300px;
min-width: 300px;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
.testing {
padding-top: 100%;
color: hsla(0, 0%, 68%, 0.596);
}
#btncontainer {
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
a {
color: #2aa5a1;
text-decoration: none;
}
a:hover {
color: white;
}
button {
background-color: #2aa5a1;
color: white;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
border: 1px solid black;
margin: 10px 15px;
padding: 8px 10px;
font-size: .9em;
transition: 0.3s;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
button:active {
background-color: #3F86D8;
color: white;
border: 1px solid black;
}
.active {
background-color: #3F86D8;
transition: 0.3s;
color: white;
border: 1px solid black;
}
button:hover {
background-color: #0b478b;
color: white;
border: 1px solid black;
opacity: 1;
}
#rightside {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: center;
min-height: 500px;
padding: 0;
margin: 0;
}
#sizevalue {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin-bottom: 0;
}
input[type=range] {
background-color: white;
height: 28px;
-webkit-appearance: none;
margin: 0;
margin-bottom: 35px;
width: 250px;
padding: 0;
}
input[type=range]:focus {}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 11px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000;
background: #3F86D8;
border-radius: 13px;
border: 0px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 2px #000031;
border: 1px solid #00001E;
height: 20px;
width: 20px;
border-radius: 15px;
background: #FFFFFF;
cursor: pointer;
-webkit-appearance: none;
margin-top: -5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #3F86D8;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 11px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000;
background: #3F86D8;
border-radius: 13px;
border: 0px solid #010101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 2px #000031;
border: 1px solid #00001E;
height: 20px;
width: 20px;
border-radius: 15px;
background: #F3EEED;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 11px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #3F86D8;
border: 0px solid #010101;
border-radius: 26px;
box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-fill-upper {
background: #3F86D8;
border: 0px solid #010101;
border-radius: 26px;
box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-thumb {
margin-top: 1px;
box-shadow: 1px 1px 2px #000031;
border: 1px solid #00001E;
height: 20px;
width: 20px;
border-radius: 15px;
background: #F3EEED;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #3F86D8;
}
input[type=range]:focus::-ms-fill-upper {
background: #3F86D8;
}
main {
display: flex;
justify-content: center;
margin: 0;
margin-bottom: 20px;
padding: 0;
}
#colorpicker {
-webkit-appearance: none;
border-radius: 100vw;
width: 50px;
height: 50px;
padding: 0;
margin: 0 auto 10px auto;
overflow: hidden;
border: 1px solid black;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
input[type='color']:hover {
transform: scale(1.05);
}
input[type='color']::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type='color']::-webkit-color-swatch {
border: none;
border-radius: 50px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
/* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%;
/* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
footer {
color: white;
text-align: center;
background-color: #0b478b;
position: fixed;
bottom: 0;
width: 100%;
margin: 0;
padding-top: 10px;
padding-bottom: 15px;
}
#media (max-width: 500px) {
main {
flex-direction: column;
}
#btncontainer {
margin: 0 auto;
padding: 20px 10px 5px 10px;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
}
#btncontainer button {
margin: 0 3px;
height: 35px;
}
#colorpicker {
-webkit-appearance: none;
border-radius: 100px;
width: 35px;
height: 35px;
padding: 0;
margin: 0 auto 10px auto;
overflow: hidden;
border: 1px solid black;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
}
<!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">
<!-- CSS spreadsheet -->
<link href="styles.css" rel="stylesheet">
<title>Etch-a-Sketch</title>
</head>
<body>
<!-- Note that this is set up in various divs so
that we can use Flex to create our wanted layout. -->
<div id="entirepage">
<header>
<h1>Etch-a-Sketch</h1>
<p title="Testing">Select a color or a different mode, then select your size, and get drawing!</p>
</header>
<main>
<div id="btncontainer">
<select id="dropdown-mode">
<option value="default">Default mode</option>
<option value="party">Party mode</option>
<option value="shading">Shading</option>
<option value="eraser">Eraser mode</option>
<option value="clear">Clear grid</option>
</select>
<input type="color" id="colorpicker" value="#0b478b">
<button id="default">Default mode</button>
<button id="party">Party mode</button>
<button id="grayscale">Shading</button>
<button id="eraser">Eraser mode</button>
<button id="clear">Clear grid</button>
</div>
<div id="rightside">
<div id="maincontainer">
</div>
<label for="sizeslider" id="sizevalue">30 x 30</label>
<input type="range" min="1" max="100" value="30" id="sizeslider">
</div>
</main>
<footer>
<p>Created by Sara Dunlop (RiscloverYT)</p>
</footer>
</div>
<!-- JavaScript script -->
<script src="script.js"></script>
</body>
</html>
Luckily, there's an easy way to do that. Add this piece of code into your javascript file and see the magic.
const dropdown = document.getElementById('dropdown-mode');
dropdown.addEventListener('change', (e) => {
setCurrentMode(e.target.value);
});
Read more about change event here.
Making a sliding button to switch website theme using a CSS variable and javascript. It is working properly except there is a small bug that I am unable to fix. If I reload the page is light theme, the functionality of the button is being reversed. The "On" state of the button turns on light mode and off state toggles dark mode. However, the initial configuration is entirely opposite.
As you can see in the executable code snippet below, I tried solving this using click() function. This problem arises only when the value of num is 0 and page is reloaded. So, I thought if I store a variable in localStorage as false and check its value at the beginning of the function and if its false, then click the button and dont execute function, if its not false, then execute normally.
But it is not working for some reason. Please check this code:
if (!localStorage.getItem('thisvarisgud4me')) {
localStorage.setItem("thisvarisgud4me", "1")
}
document.getElementById("btn").addEventListener("click", change);
var c = "true";
if (!localStorage.getItem("clickc"))
{
localStorage.setItem("clickc", c);
}
function change() {
if (localStorage.getItem("clickc") == "false") {
localStorage.setItem("clickc","true");
document.getElementById("btn").click();
}
else if (localStorage.getItem("clickc") == "true") {
if (localStorage.getItem('thisvarisgud4me') == '1') {
localStorage.setItem("thisvarisgud4me", '0')
} else {
localStorage.setItem("thisvarisgud4me", '1')
}
var num = Number(localStorage.getItem('thisvarisgud4me'));
let root = document.documentElement;
root.style.setProperty("--numvar", num);
console.log(num);
if (num == 0) {
window.addEventListener("beforeunload", function (event) {
console.log("The page is redirecting")
alert("Reload");
localStorage.setItem("clickc", "false");
// document.getElementById("btn").click();
// debugger;
});
}
}
}
var num = Number(localStorage.getItem('thisvarisgud4me'));
let root = document.documentElement;
root.style.setProperty("--numvar", num);
:root {
--numvar: 0;
}
html {
filter: invert(var(--numvar));
}
body {
background: #fff;
}
.outer-button {
display: inline-block;
height: 28px;
width: 28px;
position: relative;
margin: 0 3px;
}
.inner-button {
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px 2px white;
border-radius: 20px;
background: #f5f5f5;
}
span {
display: inline-block;
vertical-align: middle;
}
.status-text {
color: white;
text-transform: uppercase;
font-size: 11px;
font-family: Futura, sans-serif;
transition: all 0.2s ease;
}
.sliding-switch {
height: 28px;
width: 72px;
position: relative;
}
.outer-switch-box {
overflow: hidden;
height: 100%;
width: 100%;
display: inline-block;
border-radius: 20px;
position: relative;
box-shadow: inset 0 1px 3px 0px #818181, 0px 1px 2px 1px white;
transition: all 0.3s ease;
transition-delay: 65ms;
position: absolute;
z-index: 1;
}
.inner-switch-box {
position: relative;
width: 175px;
transition: all 0.3s ease;
}
/* .switch-checkbox:checked+.outer-switch-box .unchecked-text {
color: transparent;
}
.switch-checkbox:not(:checked)+.outer-switch-box .checked-text {
color: transparent;
} */
.switch-checkbox:checked+.outer-switch-box .inner-switch-box {
left: -27px;
/*OFF*/
}
.switch-checkbox:not(:checked)+.outer-switch-box .inner-switch-box {
left: 20px;
/*ON*/
}
.switch-checkbox:checked+.outer-switch-box {
/* background-image: linear-gradient(#b6d284, #b6d284); */
background: #492d7b;
/* background: #b6d284; */
}
.switch-checkbox:not(:checked)+.outer-switch-box {
/* background-image: linear-gradient(#cbcbcb, #dbdbdb); */
background: #dbdbdb;
}
[type="checkbox"] {
margin: 0;
padding: 0;
appearance: none;
width: 100%;
height: 100%;
border: 1px solid black;
position: absolute;
top: 0;
left: 0;
z-index: 100;
opacity: 0;
}
.unchecked-text {
color: black !important;
font-weight: 700;
}
.btn-heading {
color: black;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', 'sans-serif';
padding: .4vw 0;
}
body {
float: left;
<!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>Document</title>
<body>
<div class="btn-heading">Dark Mode</div>
<div class="sliding-switch">
<input type="checkbox" id="btn" class="switch-checkbox" />
<div class="outer-switch-box">
<div class="inner-switch-box">
<span class="status-text checked-text" id="textp1">on</span>
<span class="outer-button">
<span class="inner-button"></span>
</span>
<span class="status-text unchecked-text" id="textp2">off</span>
</div>
</div>
</div>
</body>
</html>
As you might have noticed, I also tried manipulating CSS pseudo class properties using JS. But that was a complete mess. Then, I thought of this approach and I was quite confident that it is correct but looks like I was wrong :(
Just adding a condition to setting "clickc" to "true" will probably do the trick. Here I've used a similar condition to that you've already used for the "thisvarisgud4me" key.
I took the opportunity to test out a utility I created that essentially implements the Storage API (that's what <script src="https://heretic-monkey.link/FauxStorage.js"></script> is in the HTML, and why all of your localStorage references now say localStore).
So if you decide to copy and paste this into your own code, just do a search and replace of localStore with localStorage.
if (!localStore.getItem('thisvarisgud4me')) {
localStore.setItem("thisvarisgud4me", "1")
}
document.getElementById("btn").addEventListener("click", change);
var c = "true";
if (!localStore.getItem("clickc")) {
localStore.setItem("clickc", c);
}
function change() {
if (localStore.getItem("clickc") == "false") {
document.getElementById("btn").click();
localStore.getItem("clickc") = "true";
} else if (localStore.getItem("clickc") == "true") {
if (localStore.getItem('thisvarisgud4me') == '1') {
localStore.setItem("thisvarisgud4me", '0')
} else {
localStore.setItem("thisvarisgud4me", '1')
}
var num = Number(localStore.getItem('thisvarisgud4me'));
let root = document.documentElement;
root.style.setProperty("--numvar", num);
console.log(num);
if (num == 0) {
window.addEventListener("beforeunload", function(event) {
console.log("The page is redirecting")
alert("Reload");
localStore.setItem("clickc", "false");
// document.getElementById("btn").click();
// debugger;
});
}
}
}
var num = Number(localStore.getItem('thisvarisgud4me'));
let root = document.documentElement;
root.style.setProperty("--numvar", num);
:root {
--numvar: 0;
}
html {
filter: invert(var(--numvar));
}
body {
background: #fff;
}
.outer-button {
display: inline-block;
height: 28px;
width: 28px;
position: relative;
margin: 0 3px;
}
.inner-button {
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px 2px white;
border-radius: 20px;
background: #f5f5f5;
}
span {
display: inline-block;
vertical-align: middle;
}
.status-text {
color: white;
text-transform: uppercase;
font-size: 11px;
font-family: Futura, sans-serif;
transition: all 0.2s ease;
}
.sliding-switch {
height: 28px;
width: 72px;
position: relative;
}
.outer-switch-box {
overflow: hidden;
height: 100%;
width: 100%;
display: inline-block;
border-radius: 20px;
position: relative;
box-shadow: inset 0 1px 3px 0px #818181, 0px 1px 2px 1px white;
transition: all 0.3s ease;
transition-delay: 65ms;
position: absolute;
z-index: 1;
}
.inner-switch-box {
position: relative;
width: 175px;
transition: all 0.3s ease;
}
/* .switch-checkbox:checked+.outer-switch-box .unchecked-text {
color: transparent;
}
.switch-checkbox:not(:checked)+.outer-switch-box .checked-text {
color: transparent;
} */
.switch-checkbox:checked+.outer-switch-box .inner-switch-box {
left: -27px;
/*OFF*/
}
.switch-checkbox:not(:checked)+.outer-switch-box .inner-switch-box {
left: 20px;
/*ON*/
}
.switch-checkbox:checked+.outer-switch-box {
/* background-image: linear-gradient(#b6d284, #b6d284); */
background: #492d7b;
/* background: #b6d284; */
}
.switch-checkbox:not(:checked)+.outer-switch-box {
/* background-image: linear-gradient(#cbcbcb, #dbdbdb); */
background: #dbdbdb;
}
[type="checkbox"] {
margin: 0;
padding: 0;
appearance: none;
width: 100%;
height: 100%;
border: 1px solid black;
position: absolute;
top: 0;
left: 0;
z-index: 100;
opacity: 0;
}
.unchecked-text {
color: black !important;
font-weight: 700;
}
.btn-heading {
color: black;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', 'sans-serif';
padding: .4vw 0;
}
<!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>Document</title>
<script src="https://heretic-monkey.link/FauxStorage.js"></script>
</head>
<body>
<div class="btn-heading">Dark Mode</div>
<div class="sliding-switch">
<input type="checkbox" id="btn" class="switch-checkbox" />
<div class="outer-switch-box">
<div class="inner-switch-box">
<span class="status-text checked-text" id="textp1">on</span>
<span class="outer-button">
<span class="inner-button"></span>
</span>
<span class="status-text unchecked-text" id="textp2">off</span>
</div>
</div>
</div>
</body>
</html>
Here's how I would refactor it. This is more of an object-oriented way of doing things; it might not appeal to everyone and it certainly isn't meant to. It works for me and I'm the only one I need to make happy with it :).
class ThemeStore {
_darkModeKey = "thisvarisgud4me";
_darkMode = null;
get darkMode() {
if (this._darkMode === null) {
if (!localStore.getItem(this._darkModeKey)) {
localStore.setItem(this._darkModeKey, 0);
}
this._darkMode = JSON.parse(localStore.getItem(this._darkModeKey));
}
return this._darkMode;
}
set darkMode(value) {
this._darkMode = value;
}
persist() {
localStore.setItem("thisvarisgud4me", JSON.stringify(this.darkMode));
}
}
var themeStore = new ThemeStore();
document.getElementById("btn").addEventListener("click", change);
function change(e) {
themeStore.darkMode = e.target.checked ? 0 : 1;
let root = document.documentElement;
root.style.setProperty("--numvar", themeStore.darkMode);
console.log(themeStore.darkMode);
if (themeStore.darkMode === 0) {
window.addEventListener("beforeunload", function(event) {
console.log("The page is redirecting")
themeStore.persist();
});
}
}
document.getElementById("btn").dispatchEvent(new CustomEvent("change"));
:root {
--numvar: 0;
}
html {
filter: invert(var(--numvar));
}
body {
background: #fff;
}
.outer-button {
display: inline-block;
height: 28px;
width: 28px;
position: relative;
margin: 0 3px;
}
.inner-button {
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px 2px white;
border-radius: 20px;
background: #f5f5f5;
}
span {
display: inline-block;
vertical-align: middle;
}
.status-text {
color: white;
text-transform: uppercase;
font-size: 11px;
font-family: Futura, sans-serif;
transition: all 0.2s ease;
}
.sliding-switch {
height: 28px;
width: 72px;
position: relative;
}
.outer-switch-box {
overflow: hidden;
height: 100%;
width: 100%;
display: inline-block;
border-radius: 20px;
position: relative;
box-shadow: inset 0 1px 3px 0px #818181, 0px 1px 2px 1px white;
transition: all 0.3s ease;
transition-delay: 65ms;
position: absolute;
z-index: 1;
}
.inner-switch-box {
position: relative;
width: 175px;
transition: all 0.3s ease;
}
/* .switch-checkbox:checked+.outer-switch-box .unchecked-text {
color: transparent;
}
.switch-checkbox:not(:checked)+.outer-switch-box .checked-text {
color: transparent;
} */
.switch-checkbox:checked+.outer-switch-box .inner-switch-box {
left: -27px;
/*OFF*/
}
.switch-checkbox:not(:checked)+.outer-switch-box .inner-switch-box {
left: 20px;
/*ON*/
}
.switch-checkbox:checked+.outer-switch-box {
/* background-image: linear-gradient(#b6d284, #b6d284); */
background: #492d7b;
/* background: #b6d284; */
}
.switch-checkbox:not(:checked)+.outer-switch-box {
/* background-image: linear-gradient(#cbcbcb, #dbdbdb); */
background: #dbdbdb;
}
[type="checkbox"] {
margin: 0;
padding: 0;
appearance: none;
width: 100%;
height: 100%;
border: 1px solid black;
position: absolute;
top: 0;
left: 0;
z-index: 100;
opacity: 0;
}
.unchecked-text {
color: black !important;
font-weight: 700;
}
.btn-heading {
color: black;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', 'sans-serif';
padding: .4vw 0;
}
<script src="https://heretic-monkey.link/FauxStorage.js"></script>
<div class="btn-heading">Dark Mode</div>
<div class="sliding-switch">
<input type="checkbox" id="btn" class="switch-checkbox" />
<div class="outer-switch-box">
<div class="inner-switch-box">
<span class="status-text checked-text" id="textp1">on</span>
<span class="outer-button">
<span class="inner-button"></span>
</span>
<span class="status-text unchecked-text" id="textp2">off</span>
</div>
</div>
</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>