I cannot get the text to show on this quotes slider - html

The quotes slider doesn't seem to be loading the text, the buttons and dots are there however the actual quotes in the center are not showing within them there is just a bundle of dots and buttons carefully placed in the center of the screen where the quotes should be. How do I make it so that the quotes show up within the slider buttons
HTML
<div class="testimonials">
<div class="slideshow-container">
<div class="mySlides">
<q>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, vel?</q>
<p class="author">Name Name</p>
</div>
<div class="mySlides">
<q>Quibusdam adipisci ab explicabo. Porro exercitationem delectus nam unde corporis.</q>
<p class="author">Name Name</p>
</div>
<div class="mySlides">
<q>Beatae saepe ab sed, nihil perferendis et, pariatur dolores! Vel.</q>
<p class="author">Name Name</p>
</div>
<a class="prev" onclick='plusSlides(-1)'>❮</a>
<a class="next" onclick='plusSlides(1)'>❯</a>
</div>
<div class="dot-container">
<span class="dot" onclick='currentSlide(1)'></span>
<span class="dot" onclick='currentSlide(2)'></span>
<span class="dot" onclick='currentSlide(3)'></span>
</div>
</div>
CSS
.testimonials {
height: 800px;
}
.slideshow-container {
position: relative;
background: #f1f1f1;
}
.mySlides {
display: none;
padding: 80px;
text-align: center;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -30px;
padding:16px;
color: #888;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 30px 0;
user-select: none;
}
.next {
position: absolte;
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
color:white;
}
.dot-container {
text-align: center;
padding: 20px;
background: #ddd;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background: #717171;
}
q {
color: #1c1c1c;
font-style: italic;
}
.authour {
color: aqua;
}

Related

My timeline is unstructured when commenting on the rest of the cards

I building my own web page, and I was planning to place a timeline, I've investigated and found one that I want to take as a model, however, I only want to put two cards, but when I comment the rest of the cards, it gets misconfigured and loses its shape, placing itself the second card below the first when I want it to be next to it, how can I put it right next to it without affecting the rest of the structure?
/* Media Queries */
#mixin mq-xs {
#media (min-width: 320px) {
#content;
}
}
#mixin mq-sm {
#media (min-width: 480px) {
#content;
}
}
#mixin mq-md {
#media (min-width: 720px) {
#content;
}
}
#mixin mq-lg {
#media (min-width: 1000px) {
#content;
}
}
$background: #f7f7f7;
$box-shadow: 0px 1px 22px 4px rgba(0, 0, 0, 0.07);
$border: 1px solid rgba(191, 191, 191, 0.4);
$items: 5;
$rows: ceil($items/2);
/* Card sizing */
$card-height: 400px;
$card-width: 450px;
$inner-margin: 15px;
$number-size: 35px;
$stagger: 180px;
$outer-margin: 90px;
$marker-size: 9px;
/* Colors */
$steps: #46b8e9;
$colors: #46b8e9,
#3ee9d1,
#ce43eb,
#4d92eb;
$timeline: #bdbdbd;
/* Calculations */
$container-height: $rows * ($card-height + $outer-margin) + $stagger;
$container-width: $card-width*2 + $outer-margin*3;
$head-height: $number-size + 50;
$body-height: $card-height - $head-height;
$marker-dist: $card-width + $outer-margin/2 - $marker-size/2;
/* Placeholders */
#include mq-lg {
%arrow {
position: absolute;
content: "";
width: 0;
height: 0;
}
%marker {
position: absolute;
content: "";
width: $marker-size;
height: $marker-size;
background-color: $timeline;
border-radius: $marker-size;
box-shadow: 0px 0px 2px 8px $background;
}
}
/* Some Cool Stuff */
$counter: $items - $rows + 2;
#for $i from 1 through $rows {
.demo-card:nth-child(#{$i*2-1}) { order: $i }
.demo-card:nth-child(#{$i*2}) { order: $counter }
$counter: $counter + 1;
}
/* Border Box */
* {
box-sizing: border-box;
}
/* Fonts */
#timeline {
padding: 100px 0;
background: $background;
border-top: $border;
border-bottom: $border;
.logo
{
width: 60px;
border-radius: 10px;
}
h1 {
text-align: center;
font-size: 3rem;
font-weight: 200;
margin-bottom: 20px;
}
p.leader {
text-align: center;
max-width: 90%;
margin: auto;
margin-bottom: 45px;
}
.demo-card-wrapper {
position: relative;
margin: auto;
#include mq-lg {
display: flex;
flex-flow: column wrap;
width: $container-width;
height: $container-height;
margin: 0 auto;
}
&::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
border-left: $border;
#include mq-lg {
border-left: 1px solid $timeline;
}
}
}
.demo-card {
position: relative;
display: block;
margin: 10px auto 80px;
max-width: 94%;
#include mq-sm {
max-width: 60%;
box-shadow: $box-shadow;
}
#include mq-md {
max-width: 40%;
}
#include mq-lg {
max-width: $card-width;
height: $card-height;
margin: $outer-margin;
margin-top: $outer-margin/2;
margin-bottom: $outer-margin/2;
&:nth-child(odd) {
margin-right: $outer-margin/2;
.head::after {
#extend %arrow;
border-left-width: 15px;
border-left-style: solid;
left: 100%;
}
.head::before {
#extend %marker;
left: $marker-dist + 1;
}
}
&:nth-child(even) {
margin-left: $outer-margin/2;
.head::after {
#extend %arrow;
border-right-width: 15px;
border-right-style: solid;
right: 100%;
}
.head::before {
#extend %marker;
right: $marker-dist - 1;
}
}
&:nth-child(2) {
margin-top: $stagger;
}
}
.head {
background-color: black;
position: relative;
display: flex;
align-items: center;
color: #fff;
font-weight: 400;
.number-box {
display: inline;
float: left;
margin: $inner-margin;
padding: 10px;
font-size: $number-size;
line-height: $number-size;
font-weight: 600;
background: rgba(0, 0, 0, 0.17);
}
h2 {
text-transform: uppercase;
font-size: 1.3rem;
font-weight: inherit;
letter-spacing: 2px;
margin: 0;
padding-bottom: 6px;
line-height: 1rem;
#include mq-sm {
font-size: 165%;
line-height: 1.2rem;
}
span {
display: block;
font-size: 0.6rem;
margin: 0;
#include mq-sm {
font-size: 0.8rem;
}
}
}
}
.body {
background: #fff;
border: $border;
border-top: 0;
padding: $inner-margin;
#include mq-lg {
height: $body-height;
}
p {
font-size: 14px;
line-height: 18px;
margin-bottom: $inner-margin;
}
img {
display: block;
width: 100%;
}
}
#for $i from 1 through $items {
&--step#{$i} {
$color: nth($colors, ((($i - 1) % 4) + 1));
background-color: $color;
.head::after {
border-color: $color;
}
}
}
}
}
<section id=timeline>
<h1>A Flexbox Timeline</h1>
<p class="leader">All cards must be the same height and width for space calculations on large screens.</p>
<div class="demo-card-wrapper">
<div class="demo-card demo-card--step1">
<div class="head">
<div class="number-box">
<span><img src="../../assets/img/-.png" class="logo"></span>
</div>
<h2><span class="small">- (2022)</span> -</h2>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
<div class="demo-card demo-card--step2">
<div class="head">
<div class="number-box">
<span><img src="../../assets/img/-.png" class="logo"></span>
</div>
<h2><span class="small">-</span> -</h2>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
<div class="demo-card demo-card--step3">
<div class="head">
<div class="number-box">
<span>03</span>
</div>
<h2><span class="small">Subtitle</span> Adaptation</h2>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
<div class="demo-card demo-card--step4">
<div class="head">
<div class="number-box">
<span>04</span>
</div>
<h2><span class="small">Subtitle</span> Consistency</h2>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
<div class="demo-card demo-card--step5">
<div class="head">
<div class="number-box">
<span>05</span>
</div>
<h2><span class="small">Subtitle</span> Conversion</h2>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
</div>
</section>

How to stop the overlay to cover the content and make it cover only the background?

I am using ::before as an overlay, but I face a problem where the overlay cover all the card including the content (texts), but I just want to cover the background of the card. I can't select any text because of this problem.
/* left-to-right effect box */
.ltr-effect {
position: relative;
}
.ltr-effect::before {
content: "";
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 0%;
height: 100%;
background-color:rgba(215, 227, 250, 0.53);
transition: width 0.5s;
}
.ltr-effect:hover::before {
width: 100%;
}
/* card */
.service-content-box {
text-align: center;
border: 2px solid rgb(208, 228, 228);
background-color: #22beff;
border-radius: 10px;
padding: 30px;
font-size: 1.3em;
width: calc(90%/3);
margin-right: 5%;
position: relative;
}
/* content of services */
.service-content-box .service-title {
text-transform: capitalize;
margin-bottom: 10px;
font-size: 2em;
}
.service-content-box .service-desribtion {
line-height: 30px;
}
.service-content-box a {
margin: 7px 0px;
text-decoration: none;
text-transform: capitalize;
}
<section class="services">
<div class="services-content">
<div class="service-content-box ltr-effect">
<i class="fa fa-solid fa-book-open"></i>
<h4 class="service-title mg-b-10">fast reading</h4>
<p class="service-desribtion">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A fugiat, ea et iure similique nesciunt Et accusantium magni
</p>
learn more
</div>
<div class="clear"></div>
</div><!-- /.services-content -->
</section><!-- /.services -->
You coud set a position: relative; z-index: 1; to elements in the card that you don't wanna cover with the overlay.
You need z-index to make them came up front, and as you may already know, z-index works only with non static positions. That's why I'm using that relative position.
/* left-to-right effect box */
.ltr-effect {
position: relative;
}
.ltr-effect::before {
content: "";
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 0%;
height: 100%;
background-color: rgba(215, 227, 250, 0.53);
transition: width 0.5s;
}
.ltr-effect:hover::before {
width: 100%;
}
/* card */
.service-content-box {
text-align: center;
border: 2px solid rgb(208, 228, 228);
background-color: #22beff;
border-radius: 10px;
padding: 30px;
font-size: 1.3em;
width: calc(90% / 3);
margin-right: 5%;
position: relative;
}
/* content of services */
.service-content-box .service-title {
text-transform: capitalize;
margin-bottom: 10px;
font-size: 2em;
position:relative;
z-index:1;
}
.service-content-box .service-desribtion {
line-height: 30px;
position:relative;
z-index:1;
}
.service-content-box a {
margin: 7px 0px;
text-decoration: none;
text-transform: capitalize;
position:relative;
z-index:1;
}
<section class="services">
<div class="services-content">
<div class="service-content-box ltr-effect">
<i class="fa fa-solid fa-book-open"></i>
<h4 class="service-title mg-b-10">fast reading</h4>
<p class="service-desribtion">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A fugiat, ea et iure similique nesciunt Et accusantium magni
</p>
learn more
</div>
<div class="clear"></div>
</div>
</section>

Why are my heading elements overlapping on small screens?

I am new to frontend dev. When I reduce the browser window size the layout breaks. Elements overlap each other and height of section changes etc.
Here is my HTML code in which I have made a navbar and a section in which I created 3 items.
#import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Lobster&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Lobster&family=Varela+Round&display=swap');
* {
margin: 0;
padding: 0;
}
ul li {
list-style-type: none;
text-decoration: none;
}
#navbar {
display: flex;
align-items: center;
position: relative;
top: 0;
/* justify-content: center; */
}
#navbar::before {
content: "";
background-color: black;
position: absolute;
height: 100%;
width: 100%;
z-index: -1;
opacity: 0.4;
}
/* Logo */
#logo {
margin: 10px 34px;
}
/* Logo and Image */
#logo img {
margin: 3px 6px;
height: 56px;
}
#navbar ul {
display: flex;
font-size: 1.3rem;
}
#navbar ul li a {
text-decoration: none;
display: block;
padding: 3px 23px;
border-radius: 20px;
color: white;
}
#navbar ul li a:hover {
background-color: white;
color: black;
}
/* Home section */
#home {
display: flex;
flex-direction: column;
padding: 3px 200px;
height: 278px;
justify-content: center;
align-items: center;
font-family: 'Lobster', cursive;
}
#home::before {
content: "";
background: url('../bg1.jpg') no-repeat center center/cover;
position: absolute;
height: 56%;
width: 100%;
z-index: -1;
opacity: 0.89;
top: 0px;
left: 0px;
}
#home h1 {
color: white;
text-align: center;
}
#home p {
color: white;
text-align: center;
font-size: 1.5rem;
}
.h-primary {
font-size: 3.8rem;
padding: 12px;
font-family: 'Varela Round', sans-serif;
}
.h-secondary {
font-size: 2.2rem;
padding: 12px;
font-family: 'Varela Round', sans-serif;
}
.h-tertiary {
font-size: 0.9rem;
padding: 12px;
font-family: 'Varela Round', sans-serif;
}
#services {
margin: 110px 0;
margin-left: 20px;
margin-right: 20px;
display: flex;
}
#services .box {
border: 2px solid brown;
padding: 20px;
margin: 3px 6px;
border-radius: 20px;
background-color: rgb(236, 229, 229);
}
#services .box img {
display: block;
height: 171px;
margin: auto;
}
.btn {
padding: 6px 20px;
border: 2px solid white;
background-color: brown;
color: white;
margin: 17px;
font-size: 1.5rem;
border-radius: 10px;
cursor: pointer;
}
.center {
text-align: center;
}
<nav id="navbar">
<div id="logo">
<img src="logo.png" alt="">
</div>
<ul>
<li class="items">Home</li>
<li class="items">Service</li>
<li class="items">About</li>
<li class="items">Contact</li>
</ul>
</nav>
<section id="home">
<h1 class="h-primary">Welcome to Myonline meal</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem aperiam quaerat cumque consequatur quasi
</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis consequatur </p>
<button class="btn">Order Now</button>
</section>
<section class="services-container">
<h1 class="h-primary center">Our Service</h1>
<div id="services">
<div class="box">
<img src="img/1.png" alt="">
<h2 class="h-secondary center">Food Ordering</h2>
<p class="center h-tertiary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium quia atque, corrupti</p>
</div>
<div class="box">
<img src="img/2.png" alt="">
<h2 class="h-secondary center">Food Ordering</h2>
<p class="center h-tertiary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium quia atque, corruptir</p>
</div>
<div class="box">
<img src="img/3.png" alt="">
<h2 class="h-secondary center">Food Ordering</h2>
<p class="center h-tertiary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium quia atque, corruptir</p>
</div>
</div>
</section>
You should learn about responsiveness, when you make a website, it usually looks different on different screen sizes and devices, and in order to make it look better on smaller screens, you need to style your page differently according to the device's size, for example using media queries.
In your case you mostly use px unit to set sizes for margins, paddings and such in your css, but there are better units that are described as relative, such as %, em and rem.
You can learn more about all this just googling or watching tutorials, but in short, percentage unit is relative to the parent's size, em is relative to this element's font-size, and rem is relative to the root font-size (html tag) which is usually 16px, so for example if you set a font-size on a div of 3rem, that would mean 3 * 16px, which is 48px, but the difference between saying 3rem and just 48px, is that in some cases 3rem might become smaller or larger depending on the device or any other factor.
div {
display: flex;
flex-direction: column;
align-items: start;
margin: 1em 0;
}
.small button {
font-size: 16px;
}
.big button {
font-size: 48px;
}
.non-relative {
padding: 8px 16px;
}
.relative {
padding: 0.5em 1em;
}
<div class="small">
<button class="non-relative">Non-Relative</button>
<button class="relative">Relative</button>
</div>
<div class="big">
<button class="non-relative">Non-Relative</button>
<button class="relative">Relative</button>
</div>
Here you can see that, when I set the button's padding with px, it stays the same no matter the font size, but with the em unit, it will be relative to it, so proportionally it will be the same as the smaller version. Hope this is a good enough example, I am kind of sleepy and might've missed something, but hope this helps you!

Feels impossible to remove the whitespace below the footer

enter image description hereThis is the html code i have written for the index.html or home page. I have used sass code to compile it into the css . I tried everything i could find on the internet related to how to get rid of white space but nothing helped and i don't want to use sticky footer or keep its position set to fixed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css?family=Dosis&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/main.css" />
<title>John | UI/UX Designer & Photographer</title>
</head>
<body>
<!--header-->
<header id="header-home">
<div class="container">
<nav id="main-nav">
<h2>the deck</h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="header-content">
<h1>
I am John The
<span
class="txt-type"
data-wait="3000"
data-words='["Photographer", "Designer", "UI/UX Developer"]'
></span>
</h1>
<p class="lead">I specialize in UI and Photography</p>
View My Work
</div>
</div>
</header>
//These all the contents of the html page divided everything into sections A,B,C...respectively.
<!--SECTION A SPECIALIZE -->
<section id="home-a" class="text-center py-2">
<div class="container">
<h2 class="section-title">I SPECIALIZE IN</h2>
<div class="bottom-line"></div>
<p class="lead">
Photography as well as creating digital masterpieces and UI/UX layouts
for websites and mobile applications
</p>
<div class="specials">
<div>
<i class="fas fa-file-alt fa-2x"></i>
<h3>Concepting</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet
beatae, omnis ipsa voluptates labore aperiam placeat, nostrum
nulla alias dignissimos?
</p>
</div>
<div>
<i class="fas fa-desktop fa-2x"></i>
<h3>UI/UX</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet
beatae, omnis ipsa voluptates labore aperiam placeat, nostrum
nulla alias dignissimos?
</p>
</div>
<div>
<i class="fas fa-object-ungroup fa-2x"></i>
<h3>VISUAL DESIGN</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet
beatae, omnis ipsa voluptates labore aperiam placeat, nostrum
nulla alias dignissimos?
</p>
</div>
<div>
<i class="fas fa-thumbs-up fa-2x"></i>
<h3>INTERACTION</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet
beatae, omnis ipsa voluptates labore aperiam placeat, nostrum
nulla alias dignissimos?
</p>
</div>
</div>
</div>
</section>
<!--SECTION B STATS-->
<section id="home-b" class="text-center py-2">
<div class="stats">
<div>
<ul>
<li><i class="fas fa-users fa-3x"></i></li>
<li class="stats-title">Clients</li>
<li class="stats-numbers">100</li>
</ul>
</div>
<div>
<ul>
<li><i class="fas fa-award fa-3x"></i></li>
<li class="stats-title">Awards</li>
<li class="stats-numbers">3</li>
</ul>
</div>
<div>
<ul>
<li><i class="fas fa-hourglass-start fa-3x"></i></li>
<li class="stats-title">Hours Worked</li>
<li class="stats-numbers">3500</li>
</ul>
</div>
<div>
<ul>
<li><i class="fas fa-code-branch fa-3x"></i></li>
<li class="stats-title">Projects Completed</li>
<li class="stats-numbers">100</li>
</ul>
</div>
</div>
</section>
<!-- SECTION C MY CREATIVE PROCESS -->
<section id="home-c" class="text-center py-2">
<div class="container">
<h2 class="section-title">
MY CREATIVE PROCESS
</h2><div class="bottom-line"></div>
<p class="lead">All of my UI/UX and design projects are based off of a practiced
formula to get the result that I am looking for
</p>
<div class="process">
<div>
<i class="fas fa-file-alt fa-4x process-icon my-2">
<div class="process-step">1</div>
</i>
<div class="clear"></div>
<h3>DISCUSS THE PROJECT
</h3>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi voluptate
earum quaerat itaque officia soluta?
</div>
<div>
<i class="fas fa-desktop fa-4x process-icon my-2">
<div class="process-step">2</div>
</i>
<div class="clear"></div>
<h3>BRAINSTORMING ^ CONCEPT
</h3>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi voluptate
earum quaerat itaque officia soluta?
</div>
<div>
<i class="fas fa-object-ungroup fa-4x process-icon my-2">
<div class="process-step">3</div>
</i>
<div class="clear"></div>
<h3>UI/UX PLANNING
</h3>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi voluptate
earum quaerat itaque officia soluta?
</div>
<div>
<i class="fas fa-thumbs-up fa-4x process-icon my-2">
<div class="process-step">4</div>
</i>
<div class="clear"></div>
<h3>INTERACTION
</h3>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi voluptate
earum quaerat itaque officia soluta?
</div>
</div>
</div>
</section>
</div>
<!-- FOOTER -->
<footer id="main-footer">
<div class="footer-content container">
<p>Copyright © 2019. All Rights Reserved
</p>
<div class="social">
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-linkedin"></i>
</div>
</div>
</footer>
<script src="js/typewriter.js"></script>
</body>
</html>
I have used sass in the making of this website and all the code related to it is here.
#import "config";
#import "utilities";
#import "item_grid";
//GENERAL STYLES
* {
margin: 0;
padding: 0;
}
#main {
height: 100%;
}
body {
flex-direction: column;
margin: 0;
font-family: "Dosis", sans-serif;
line-height: 1.6;
}
a {
text-decoration: none;
color: $dark-color;
}
ul {
list-style: none;
}
h2,
h3,
h4 {
text-transform: uppercase;
}
img {
width: 100%;
}
//LOGO
#logo {
width: 70px;
height: 70px;
color: #fff;
text-transform: uppercase;
}
//MAIN NAV
#main-nav {
display: flex;
justify-content: space-between;
padding-top: 1rem;
ul {
display: flex;
}
li {
padding: 1rem 1.5rem;
}
a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
border-bottom: 3px transparent solid;
padding-bottom: 0.5rem;
transition: border-color 0.5s;
&:hover {
border-color: $medium-color;
}
&.current {
border-color: $main-color;
}
}
}
//HEADER
#header {
//HEADER HOME WHOLE
&-home {
background: $bg-image no-repeat center right / cover;
color: #fff;
//HEADER CONTENT
.header-content {
padding-top: 20%;
text-align: center;
h1 {
font-size: 4rem;
line-height: 1.2;
}
}
}
// HEADER INNER PAGES CONTENT
&-inner {
background: $bg-image no-repeat 20% 30% / cover;
height: 5.5rem;
border-bottom: 3px solid $main-color;
}
}
//HOME SECTIONS
#home {
//HOME SECTION A
&-a {
padding-top: 100px;
width: 100%;
height: 20rem;
.container {
padding-left: 0;
padding-right: 0;
}
.specials {
margin-top: 1rem 0;
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(4, 1fr);
.fas {
color: $main-color;
padding-bottom: 0.8rem;
}
}
}
//HOME SECTION B
&-b {
height: 300px;
.container {
height: 100%;
padding: 0;
margin: 0;
}
.stats {
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
li {
padding-top: 2rem;
line-height: 1;
&.stats-title {
font-size: 2rem;
font-weight: bold;
}
&.stats-numbers {
font-size: 1.5rem;
font-weight: bold;
}
}
div {
padding: 2rem 0;
margin: 0;
&:nth-child(odd) {
background: $light-color;
}
&:nth-child(even) {
background: $medium-color;
}
}
}
}
&-c {
margin-top: 50px;
height: 500px;
.container {
padding-left: 0;
padding-right: 0;
}
.process {
display: grid;
grid-gap: 3rem;
grid-template-columns: repeat(4, 1fr);
text-align: center;
&-step {
position: absolute;
top: 0;
right: 0;
font-size: 28px;
background: $main-color;
border-radius: 50%;
height: 15px;
width: 15px;
line-height: 15px;
padding: 1rem;
transition: all 1s;
}
//PROCESS ICON
&-icon {
border-radius: 50%;
background: $dark-color;
color: #fff;
padding: 2rem;
width: 70px;
height: 70px;
line-height: 70px;
text-align: center;
position: relative;
transition: all 1s;
&:hover {
background: $main-color;
width: 90px;
height: 90px;
line-height: 90px;
.process-step {
background: $dark-color;
}
}
}
}
}
}
// FOOTER
#main-footer {
background: $dark-color;
color: #fff;
height: 6rem;
.footer-content {
display: flex;
justify-content: space-between;
height: 6rem;
align-items: center;
}
.social .fab {
margin: 1rem;
border: 2px #fff solid;
border-radius: 50%;
height: 20px;
width: 20px;
line-height: 20px;
text-align: center;
padding: 0.5rem;
&:hover {
background: $main-color;
}
}
}
config.scss code
//VARIABLES
$website-width:1280px;
$main-color:#ffbc00;
$light-color: #f4f4f4;
$medium-color:#ccc;
$dark-color:#333;
$bg-image:url('../images/main.jpg');
//SET TEXT COLOR FUNCTION
#function set-text-color($color) {
#if(lightness($color) > 50 ) {
#return #000 ;
}
#else {
#return #fff;
}
}
utilities.scss code :
.container {
max-width: $website-width;
height: 100vh;
padding: 0 350px;
margin: auto;
overflow: hidden;
}
//BUTTONS
%btn-shared {
display: inline-block;
padding: 0.8rem 2rem;
transition: all 0.5s;
border: none;
cursor: pointer;
}
.btn {
&-main {
#extend %btn-shared;
color: #333;
background-color: $main-color;
}
&-light {
#extend %btn-shared;
color: #333;
background-color: $light-color;
}
&-dark {
#extend %btn-shared;
color: #f4f4f4;
background-color: $dark-color;
}
}
button[class^='btn-']:hover,
a[class^='btn-']:hover,
input[class^='btn-']:hover {
background-color: $main-color;
}
// ABOUT BACKGROUNDS
.bg {
&-main {
background: $main-color;
color: set-text-color($main-color);
}
&-dark {
background: $dark-color;
color: set-text-color($dark-color);
}
&-light {
background: $light-color;
color: set-text-color($light-color);
}
&-medium {
background: $medium-color;
color: set-text-color($medium-color);
}
}
.lead {
font-size: 1.3rem;
margin-bottom: 2rem;
}
.text-center {
text-align: center;
}
//PADDING
.py {
&-1 {
padding: 1rem 0;
}
&-2 {
padding: 2rem 0;
}
&-3 {
padding: 3rem 0;
}
&-4 {
padding: 4rem 0;
}
}
//MARGIN
.my {
&-1 {
margin: 1rem 0;
}
&-2 {
margin: 2rem 0;
}
&-1 {
margin: 3rem 0;
}
&-1 {
margin: 4rem 0;
}
}
.section-title {
font-size: 2rem ;
display: block;
padding-bottom: 0.5rem;
text-align: center;
font-weight: 100;
text-transform: uppercase;
}
.bottom-line {
height: 2px;
width: 3rem;
background: $main-color;
display: block;
margin: 0 auto 1rem auto;
}
The code related to item_grid.scss is completely unrelated to this page. Thank you for the help.
Have you tried this :
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}

How To Create Equal Height Columns with CSS only and without flexbox? [duplicate]

This question already has answers here:
CSS - Equal Height Columns?
(11 answers)
Closed 2 years ago.
I have 3 columns in my footer (f-box). I want them to have equal height. I don't want to use flexbox for this one. I am trying to achieve the result using - display:table on my container of the boxes and make display:table-cell for every box. But it doesn't work. Why? How to do it with this display: table method
#import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;600;700;800&family=Quantico:wght#400;700&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Open Sans", sans-serif;
line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Quantico", sans-serif;
margin-bottom: 20px;
}
p {
font-size: 15px;
color: #666;
line-height: 26px;
margin-bottom: 15px;
}
a {
font-family: "Quantico", sans-serif;
text-decoration: none;
color: #111;
}
ul {
list-style: none;
}
img {
width: 100%;
display: block;
}
/* Theme */
.container {
margin: auto;
max-width: 1500px;
padding: 0 15px;
}
.logo {
font-size: 30px;
padding: 20px 0;
float: left;
margin: 0;
}
.main-color {
color: #009603;
}
.btn {
display: inline-block;
text-transform: uppercase;
background: #009603;
color: #fff;
padding: 14px 30px;
font-weight: 700;
}
/* Nav */
nav {
overflow: hidden;
text-transform: uppercase;
}
nav ul {
float: right;
}
nav ul li {
float: left;
margin-right: 32px;
position: relative;
}
nav ul li a {
display: block;
padding: 31px 8px;
font-weight: 700;
}
nav ul li a:after {
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background: #009603;
content: "";
opacity: 0;
transition: all 0.3s;
}
nav ul li.active a:after {
opacity: 1;
}
nav ul li:hover > a:after {
opacity: 1;
}
/* Showcase */
#showcase {
background: url("../img/bg.jpg") no-repeat center center/cover;
height: 900px;
}
#showcase .showcase-content {
color: #fff;
text-align: center;
padding-top: 300px;
}
#showcase .showcase-content h2 {
font-size: 60px;
font-weight: 700;
text-transform: uppercase;
}
#showcase .showcase-content p {
margin-bottom: 30px;
line-height: 30px;
color: #fff;
}
/* Features */
#features {
padding-bottom: 60px;
}
#features .container {
margin-top: -70px;
max-width: 1400px;
overflow: hidden;
}
#features .box {
background: #fff;
float: left;
max-width: 30%;
margin: 0 15px 30px 15px;
padding: 10px 10px 18px 10px;
box-shadow: 0px 10px 25px rgba(206, 206, 206, 0.5);
text-align: center;
}
#features .box img {
margin-bottom: 28px;
}
#features .box h3 {
color: #191039;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 10px;
font-size: 30px;
}
/* Footer */
footer {
padding-top: 70px;
overflow: hidden;
background-color: #000;
}
footer .container {
max-width: 1400px;
display: table;
}
footer .f-box {
display: table-cell;
float: left;
max-width: 33.3%;
margin-bottom: 30px;
padding: 0 15px;
}
footer .logo {
padding-top: 0;
color: #fff;
text-transform: uppercase;
float: none;
}
footer p {
color: #c4c4c4;
margin-bottom: 20px;
}
footer .social i {
color: #fff;
margin-right: 20px;
}
footer h5 {
color: #fff;
text-transform: uppercase;
font-size: 20px;
font-weight: 700px;
margin-bottom: 35px;
padding-top: 5px;
}
footer img {
float: left;
width: calc(33.33% - 5px);
margin-right: 5px;
}
footer form {
position: relative;
}
footer input {
width: 100%;
height: 50px;
font-size: 15px;
color: #c4c4c4;
padding-left: 20px;
border: 1px solid #009603;
background: transparent;
}
footer form button {
font-size: 18px;
color: #fff;
background: #009603;
height: 50px;
width: 50px;
border: none;
position: absolute;
right: 0;
top: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pacocha | Garden Projects</title>
<link rel="stylesheet" href="css/style.css" />
<script
src="https://kit.fontawesome.com/1685e275a4.js"
crossorigin="anonymous"
></script>
</head>
<body>
<header>
<nav>
<div class="container">
<a href="index.html">
<h1 class="logo"><i class="fas fa-leaf main-color"></i> Pacocha</h1>
</a>
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div>
</nav>
<div id="showcase">
<div class="container">
<div class="showcase-content">
<h2>Garden Projects</h2>
<p>
We have the best home improvement projects, expert advice, and DIY
home improvement ideas for your home. <br />
You can create your dream home with smart planning and the right
home improvement contractors.
</p>
About Us
</div>
</div>
</div>
</header>
<!-- Features -->
<section id="features">
<div class="container">
<div class="box">
<img src="img/feat1.jpeg" alt="" />
<h3>Gardening</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores
magnam reprehenderit aspernatur neque nam ipsum enim, vitae minus
totam voluptates.
</p>
</div>
<div class="box">
<img src="img/feat2.jpg" alt="" />
<h3>Decorating</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores
magnam reprehenderit aspernatur neque nam ipsum enim, vitae minus
totam voluptates.
</p>
</div>
<div class="box">
<img src="img/feat3.jpg" alt="" />
<h3>Ideas</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores
magnam reprehenderit aspernatur neque nam ipsum enim, vitae minus
totam voluptates.
</p>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="f-box">
<h1 class="logo"><i class="fas fa-leaf main-color"></i> Pacocha</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione
corporis nostrum ex perferendis! Adipisci, molestias.
</p>
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-youtube"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
<div class="f-box">
<h5>Instagram</h5>
<img src="img/insta1.jpg" alt="" />
<img src="img/insta2.jpg" alt="" />
<img src="img/insta3.jpg" alt="" />
</div>
<div class="f-box">
<h5>Subscribe</h5>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Necessitatibus, vel?
</p>
<form action="">
<input type="email" placeholder="Email" />
<button type="submit"><i class="fa fa-send"></i></button>
</form>
</div>
</div>
</footer>
</body>
</html>
you just need this css
footer {
padding: 70px 0;
}
footer .f-box {
display: table-cell;
float: none;
width: 33.3%;
margin-bottom: 30px; /*the margin property is not applicable to display:table-cell elements.*/
padding: 0 15px;
}
and it will behave like this - equal column height