<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Reliant Industrial Supply</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="canonical" href="https://http://www.reliantindustrialsupply.com/">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work+Sans:300,600">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}#-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
:root {
--background: rgba(299, 299, 299, .95);
}
*, *::before, *::after {
box-sizing: border-box;
}
/* navigation styles start here */
header {
background: var(--background);
text-align: center;
position: fixed;
z-index: 999;
width: 100%;
}
.nav-toggle {
position: absolute;
top: -9999px;
left: -9999px;
}
.nav-toggle:focus ~ .nav-toggle-label {
outline: 3px solid rgba(lightblue, .75);
}
.nav-toggle-label {
position: absolute;
top: 0;
left: 0;
margin-left: 1em;
height: 100%;
display: flex;
align-items: center;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: black;
height: 2px;
width: 2em;
border-radius: 2px;
position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: '';
position: absolute;
}
.nav-toggle-label span::before {
bottom: 7px;
}
.nav-toggle-label span::after {
top: 7px;
}
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--background);
width: 100%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: black;
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
opacity: 0;
transition: opacity 150ms ease-in-out;
}
nav a:hover {
color: #000;
}
.nav-toggle:checked ~ nav {
transform: scale(1,1);
}
.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
amp-carousel {
padding-top: 20em;
}
#media screen and (min-width: 800px) {
.nav-toggle-label {
display: none;
}
header {
display: grid;
grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
}
.logo {
grid-column: 2 / 3;
}
nav {
position: relative;
text-align: left;
transition: none;
transform: scale(1,1);
background: none;
top: initial;
left: initial;
grid-column: 3 / 4;
display: flex;
justify-content: flex-end;
align-items: center;
}
nav ul {
display: flex;
}
nav li {
margin-left: 3em;
margin-bottom: 0;
}
nav a {
opacity: 1;
position: relative;
}
nav a::before {
content: '';
display: block;
height: 5px;
background: black;
position: absolute;
top: -.75em;
left: 0;
right: 0;
transform: scale(0, 1);
transition: transform ease-in-out 250ms;
}
nav a:hover::before {
transform: scale(1,1);
}
}
amp-carousel {
padding-top: 60em;
}
.content {
background-color: dark-grey;
}
.Centered{
text-align: center;
font-family: 'Work Sans';
font-style: normal;
font-weight: 300;
}
.left {
padding-right: 50%;
margin: 2rem;
font-family: 'Work Sans';
font-style: normal;
font-weight: 300;
}
.clearfix {
overflow: auto;
}
.right {
float: right;
}
img {
margin-left: 50%
}
</style>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
</head>
<header>
<h1>logo</h1>
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contact</li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
</header>
<body>
<amp-carousel layout="fixed-height"
type="slides"
height="500"
controls
loop
autoplay
delay="3000" data-next-button-aria-label="Go to next slide"
data-previous-button-aria-label="Go to previous slide">
<amp-img src="http://www.reliantindustrialsupply.com/images/banner1.jpg"
width="100%"
height="100%"></amp-img>
<amp-img src="https://i.imgur.com/xxlkv2g.jpg"
width="100%"
height="100%"></amp-img>
<amp-img src="https://i.imgur.com/mKQncTG.jpg"
width="100%"
height="100%"></amp-img>
<amp-img src="https://i.imgur.com/F4jWDpd.jpg"
width="100%"
height="100%"></amp-img>
<amp-img src="https://i.imgur.com/wWyxGeL.jpg"
width="100%"
height="100%"></amp-img>
<amp-video
layout="fixed"
autoplay
loop
width="100%"
height="100%"
poster="https://i.imgur.com/lNFDJb1.png">
<source src="https://i.imgur.com/3TFahoU.mp4"
type="video/mp4" />
<div fallback>
<p>This browser does not support this video element.</p>
</div>
</amp-video>
</amp-carousel>
<div class='content'>
<h1 class="Centered">Providing solutions for all your surface treatments</h1>
<div class="clearfix">
<p class="left">Reliant Industrial Supply provides solutions for all your surface treatments.Our supplier sia Coated Abrasives, the oldest abrasive manufacturer in the world, brings one of the best abrasives on the market. We supply Flex Trim brushes for all liner and carousel sanding needs. We provide AirVantage Sanders and Coilhose Pneumatics, for when you want the best quality handsanding tools and results. When it comes to machines, we have one of the best and also one of the most experienced machinery manufacturers, Timesavers Wide Belt Sanders. For cutting and shaping we have a wide variety of Exchangeable Saw Blades and Router Bits. Whether cutting, shaping or sanding, you can rely on Reliant. We provide solutions for surface preparation through complete sanding systems which include coated abrasives, pneumatic sanders and machinery.</p>
<img class="right"src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9b21f5a4-2e5f-41f0-8dad-efd23bed0d9a/d4afbws-c0d0181e-3af5-4396-8a25-03179fe90de4.png/v1/fill/w_800,h_200,q_80,strp/blitzle_banner_800x200_by_poketrainertk_d4afbws-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3siaGVpZ2h0IjoiPD0yMDAiLCJwYXRoIjoiXC9mXC85YjIxZjVhNC0yZTVmLTQxZjAtOGRhZC1lZmQyM2JlZDBkOWFcL2Q0YWZid3MtYzBkMDE4MWUtM2FmNS00Mzk2LThhMjUtMDMxNzlmZTkwZGU0LnBuZyIsIndpZHRoIjoiPD04MDAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.i-LS_KPDS28_jEfNNLQ7CuIXHSH38heUTJKHQU_ZYZc"
layout="responsive"
width = 800px;
height = 200px;>
</div>
</div>
</body>
</html>
I have tried many solutions listed on stack overflow, such as display:inline, but they do not work. I have used things such as a responsive layout. Also I am trying to make the AMP compatible so that also might be an issue. I don't know exactly if the syntax of AMP might interfere with position of images and text Thank you for helping me out!
You can wrap the p and img in divs and assign container with the .clearfix class a display of flex. This aligns the bottom paragraph and text right next to eachother.
You would just need to play around with the behavior of the divs for responsiveness.
<!DOCTYPE html>
<html amp lang="en">
<head>
<meta charset="utf-8" />
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Reliant Industrial Supply</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link
rel="canonical"
href="https://http://www.reliantindustrialsupply.com/"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Work+Sans:300,600"
/>
<meta
name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1"
/>
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": ["logo.jpg"]
}
</script>
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both;
}
#-webkit-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
#-moz-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
#-ms-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
#-o-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
#keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
</style>
<noscript
><style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
}
</style></noscript
>
<style amp-custom>
:root {
--background: rgba(299, 299, 299, 0.95);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
/* navigation styles start here */
header {
background: var(--background);
text-align: center;
position: fixed;
z-index: 999;
width: 100%;
}
.nav-toggle {
position: absolute;
top: -9999px;
left: -9999px;
}
.nav-toggle:focus ~ .nav-toggle-label {
outline: 3px solid rgba(lightblue, 0.75);
}
.nav-toggle-label {
position: absolute;
top: 0;
left: 0;
margin-left: 1em;
height: 100%;
display: flex;
align-items: center;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: black;
height: 2px;
width: 2em;
border-radius: 2px;
position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: "";
position: absolute;
}
.nav-toggle-label span::before {
bottom: 7px;
}
.nav-toggle-label span::after {
top: 7px;
}
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--background);
width: 100%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: black;
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
opacity: 0;
transition: opacity 150ms ease-in-out;
}
nav a:hover {
color: #000;
}
.nav-toggle:checked ~ nav {
transform: scale(1, 1);
}
.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
amp-carousel {
padding-top: 20em;
}
#media screen and (min-width: 800px) {
.nav-toggle-label {
display: none;
}
header {
display: grid;
grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
}
.logo {
grid-column: 2 / 3;
}
nav {
position: relative;
text-align: left;
transition: none;
transform: scale(1, 1);
background: none;
top: initial;
left: initial;
grid-column: 3 / 4;
display: flex;
justify-content: flex-end;
align-items: center;
}
nav ul {
display: flex;
}
nav li {
margin-left: 3em;
margin-bottom: 0;
}
nav a {
opacity: 1;
position: relative;
}
nav a::before {
content: "";
display: block;
height: 5px;
background: black;
position: absolute;
top: -0.75em;
left: 0;
right: 0;
transform: scale(0, 1);
transition: transform ease-in-out 250ms;
}
nav a:hover::before {
transform: scale(1, 1);
}
}
amp-carousel {
padding-top: 60em;
}
.content {
background-color: dark-grey;
}
.Centered {
text-align: center;
font-family: "Work Sans";
font-style: normal;
font-weight: 300;
}
.left {
margin: 2rem;
font-family: "Work Sans";
font-style: normal;
font-weight: 300;
}
.clearfix {
overflow: auto;
display: flex;
}
</style>
<script
async
custom-element="amp-carousel"
src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"
></script>
<script
async
custom-element="amp-video"
src="https://cdn.ampproject.org/v0/amp-video-0.1.js"
></script>
</head>
<header>
<h1>logo</h1>
<input type="checkbox" id="nav-toggle" class="nav-toggle" />
<nav>
<ul>
<li>
<a
href="file:///C:/Users/pilot/Documents/GitHub/AMP/Home/Home-Page.html"
>Home</a
>
</li>
<li>Products</li>
<li>
<a
href="file:///C:/Users/pilot/Documents/GitHub/AMP/Contact/Contact.html"
>Contact</a
>
</li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
</header>
<body>
<amp-carousel
layout="fixed-height"
type="slides"
height="500"
controls
loop
autoplay
delay="3000"
data-next-button-aria-label="Go to next slide"
data-previous-button-aria-label="Go to previous slide"
>
<amp-img
src="http://www.reliantindustrialsupply.com/images/banner1.jpg"
width="100%"
height="100%"
></amp-img>
<amp-img
src="https://i.imgur.com/xxlkv2g.jpg"
width="100%"
height="100%"
></amp-img>
<amp-img
src="https://i.imgur.com/mKQncTG.jpg"
width="100%"
height="100%"
></amp-img>
<amp-img
src="https://i.imgur.com/F4jWDpd.jpg"
width="100%"
height="100%"
></amp-img>
<amp-img
src="https://i.imgur.com/wWyxGeL.jpg"
width="100%"
height="100%"
></amp-img>
<amp-video
layout="fixed"
autoplay
loop
width="100%"
height="100%"
poster="https://i.imgur.com/lNFDJb1.png"
>
<source src="https://i.imgur.com/3TFahoU.mp4" type="video/mp4" />
<div fallback>
<p>This browser does not support this video element.</p>
</div>
</amp-video>
</amp-carousel>
<div class="content">
<h1 class="Centered">
Providing solutions for all your surface treatments
</h1>
<div class="clearfix">
<div>
<p class="left">
Reliant Industrial Supply provides solutions for all your surface
treatments.Our supplier sia Coated Abrasives, the oldest abrasive
manufacturer in the world, brings one of the best abrasives on the
market. We supply Flex Trim brushes for all liner and carousel
sanding needs. We provide AirVantage Sanders and Coilhose
Pneumatics, for when you want the best quality handsanding tools and
results. When it comes to machines, we have one of the best and also
one of the most experienced machinery manufacturers, Timesavers Wide
Belt Sanders. For cutting and shaping we have a wide variety of
Exchangeable Saw Blades and Router Bits. Whether cutting, shaping or
sanding, you can rely on Reliant. We provide solutions for surface
preparation through complete sanding systems which include coated
abrasives, pneumatic sanders and machinery.
</p>
</div>
<div>
<img
class="right"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9b21f5a4-2e5f-41f0-8dad-efd23bed0d9a/d4afbws-c0d0181e-3af5-4396-8a25-03179fe90de4.png/v1/fill/w_800,h_200,q_80,strp/blitzle_banner_800x200_by_poketrainertk_d4afbws-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3siaGVpZ2h0IjoiPD0yMDAiLCJwYXRoIjoiXC9mXC85YjIxZjVhNC0yZTVmLTQxZjAtOGRhZC1lZmQyM2JlZDBkOWFcL2Q0YWZid3MtYzBkMDE4MWUtM2FmNS00Mzk2LThhMjUtMDMxNzlmZTkwZGU0LnBuZyIsIndpZHRoIjoiPD04MDAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.i-LS_KPDS28_jEfNNLQ7CuIXHSH38heUTJKHQU_ZYZc"
layout="responsive"
width="800px;"
height="200px;"
/>
</div>
</div>
</div>
</body>
</html>
Related
<!DOCTYPE html>
<html amp lang="en">
<head>
<meta charset="utf-8" />
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Reliant Industrial Supply</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link
rel="canonical"
href="https://http://www.reliantindustrialsupply.com/"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Work+Sans:300,600"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Sora:wght#200&display=swap"
/>
<meta
name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1"
/>
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": ["logo.jpg"]
}
</script>
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both;
}
#-webkit-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
#-moz-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
#-ms-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
#-o-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
#keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
</style>
<noscript
><style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
}
</style></noscript
>
<style amp-custom>
:root {
--background: rgba(299, 299, 299, 0.95);
}
*,
*::before,
*::after {
box-sizing: border-box;
font-family: "Work Sans";
}
/* navigation styles start here */
.header {
background: var(--background);
text-align: center;
position: fixed;
z-index: 999;
width: 100%;
}
.nav-toggle {
position: absolute;
top: -9999px;
left: -9999px;
}
.nav-toggle:focus ~ .nav-toggle-label {
outline: 3px solid rgba(lightblue, 0.75);
}
.nav-toggle-label {
position: absolute;
top: 0;
left: 0;
margin-left: 1em;
height: 100%;
display: flex;
align-items: center;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: black;
height: 2px;
width: 2em;
border-radius: 2px;
position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: "";
position: absolute;
}
.nav-toggle-label span::before {
bottom: 7px;
}
.nav-toggle-label span::after {
top: 7px;
}
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--background);
width: 100%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: black;
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
opacity: 0;
transition: opacity 150ms ease-in-out;
}
nav a:hover {
color: #000;
}
.nav-toggle:checked ~ nav {
transform: scale(1, 1);
}
.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
amp-carousel {
padding-top: 20em;
}
#media screen and (min-width: 800px) {
.nav-toggle-label {
display: none;
}
.header {
display: grid;
grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
}
.logo {
grid-column: 2 / 3;
}
nav {
position: relative;
text-align: left;
transition: none;
transform: scale(1, 1);
background: none;
top: initial;
left: initial;
grid-column: 3 / 4;
display: flex;
justify-content: flex-end;
align-items: center;
}
nav ul {
display: flex;
}
nav li {
margin-left: 3em;
margin-bottom: 0;
}
nav a {
opacity: 1;
position: relative;
}
nav a::before {
content: "";
display: block;
height: 5px;
background: black;
position: absolute;
top: -0.75em;
left: 0;
right: 0;
transform: scale(0, 1);
transition: transform ease-in-out 250ms;
}
nav a:hover::before {
transform: scale(1, 1);
}
}
amp-carousel {
top: 0em;
padding-bottom: 5em;
}
.content {
background-color: dark-grey;
}
.Centered {
text-align: center;
font-family: "Work Sans";
font-style: normal;
font-weight: 300;
padding-bottom: 2em;
}
.left {
margin: 2rem;
font-family: 'Sora', sans-serif;
font-style: normal;
font-weight: 300;
}
.clearfix {
overflow: auto;
display: flex;
padding-bottom: 5em;
}
.footer {
width: 100vw;
display: block;
overflow: hidden;
padding: 20px 0;
box-sizing: border-box;
background-color: #18181a;
}
.innerFooter {
display: block;
margin: 0 auto;
width: 1100px;
height: 100%;
}
.innerFooter .logoContainer {
width: 35%;
float: left;
height: 100%;
display: block;
}
.innerFooter .footerThird {
padding-left: 20px;
width: calc(21.66666667 - 20px);
margin-right: 10px;
float: left;
height: 100%;
}
.innerFooter .footerThird:last-child {
margin-right: 0;
}
.innerFooter .footerThird h1{
font-family: 'Work Sans';
font-size: 22px;
color: white;
display: block;
width: 100%;
margin-bottom: 20px;
}
.innerFooter span {
font-family: 'Work Sans';
font-size: 12px;
color: white;
}
</style>
<script
async
custom-element="amp-carousel"
src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"
></script>
<script
async
custom-element="amp-video"
src="https://cdn.ampproject.org/v0/amp-video-0.1.js"
></script>
</head>
<body>
<div class="header">
<amp-img
src="https://i.imgur.com/vPr7fdQ.png"
width="175px"
height="50px"
></amp-img>
<input type="checkbox" id="nav-toggle" class="nav-toggle" />
<nav>
<ul>
<li>
<a
href="file:///C:/Users/pilot/Documents/GitHub/AMP/Home/Home-Page.html"
>Home</a
>
</li>
<li>Products</li>
<li>
<a
href="file:///C:/Users/pilot/Documents/GitHub/AMP/Contact/Contact.html"
>Contact</a
>
</li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
</div>
<amp-carousel
layout="fixed-height"
type="slides"
height="900"
width="auto"
controls
loop
autoplay
delay="3000"
data-next-button-aria-label="Go to next slide"
data-previous-button-aria-label="Go to previous slide"
>
<amp-img
src="https://i.imgur.com/6H2AFQm.png"
width="1280"
height="720"
></amp-img>
<amp-img
src="https://i.imgur.com/6jOfwYY.png"
width="1280"
height="720"
></amp-img>
<amp-img
src="https://i.imgur.com/AFq0mSz.png"
width="1280"
height="720"
></amp-img>
<amp-img
src="https://i.imgur.com/7tMi95w.png"
width="1280"
height="720"
></amp-img>
<amp-img
src="https://i.imgur.com/G020qk3.png"
width="1280"
height="720"
></amp-img>
<amp-video
layout="fixed"
autoplay
loop
width="1280"
height="720"
poster="https://i.imgur.com/lNFDJb1.png"
>
<source src="https://i.imgur.com/3TFahoU.mp4" type="video/mp4" />
<div fallback>
<p>This browser does not support this video element.</p>
</div>
</amp-video>
</amp-carousel>
<div class="content">
<h1 class="Centered">
Providing solutions for all your surface treatments
</h1>
<div class="clearfix">
<div>
<p class="left">
Reliant Industrial Supply provides solutions for all your surface
treatments.Our supplier sia Coated Abrasives, the oldest abrasive
manufacturer in the world, brings one of the best abrasives on the
market. We supply Flex Trim brushes for all liner and carousel
sanding needs. We provide AirVantage Sanders and Coilhose
Pneumatics, for when you want the best quality handsanding tools and
results. When it comes to machines, we have one of the best and also
one of the most experienced machinery manufacturers, Timesavers Wide
Belt Sanders. For cutting and shaping we have a wide variety of
Exchangeable Saw Blades and Router Bits. Whether cutting, shaping or
sanding, you can rely on Reliant. We provide solutions for surface
preparation through complete sanding systems which include coated
abrasives, pneumatic sanders and machinery.
</p>
</div>
<div>
<img class="right" src="https://i.imgur.com/u8hDnzX.jpg" layout="responsive" width="800px;" height="300px;"/>
</div>
</div>
<div class="footer">
<div class="innerFooter">
<div class="logoContainer">
<amp-img src="https://i.imgur.com/jlRKmij.jpg" height="109" width="200">
</div>
<div class="footerThird">
<h1>Address: 18061 Kirk Ave, Tustin, CA 92780</h1>
<h1>Phone Number: (714) 287-6815 </h1>
</div>
<div class="footerThird">
<span>Copyright 2020 Reliant Industrial Supply<span>
</div>
</div>
</div>
</body>
</html>
Hey All!
If you run this code, it looks good and usable on desktop. But as soon as you decrease the viewport width to simulate mobile, the paragraph looks janky. All I want to do is put the text under the image for mobile only. I understand that your just supposed to put the different css above the media query, but I do not know how to proceed to do that as I don't know how to make it ignore the css that allows the image and the text to be inline on the desktop on the mobile side. Thank you for helping me out!
This is my solution:
#media only screen and (max-width: 768px) {
.clearfix {
flex-flow: column;
}
.clearfix > div {
order: 1;
}
.clearfix > div:first-child {
order: 2;
}
}
To hide the paragraph in mobile viewport, you can add the following code block in the css-
#media only screen and (max-width: 768px) {
.left {
display: none;
}
}
It basically tells the browser that if the screen width is between 0px - 768px(which is the typical width of a mobile screen), then you should not render the < p > tag. In other words, all devices with a screen width of 768px or less, just ignore the < p > tag in html like it doesn't even exist!
Hope it helps! comment if it doesn't work or you need any clarifications.
I try to make responsive part of this size with bootstrap grid. And always when I do resize of window, so there is made new gradient on right. I tried to find it in developer tools what it is, but there is nothing defined. I'm not sure but I have on more site with same design without bootstrap and there it looks nice when I resize window, but here with bootstrap it's bad. I am not sure if it's really bootstrap but looking for solution, because I really don't have idea.
Here is code and screen how it looks
#import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
#import url("https://fonts.googleapis.com/css?family=Titan+One");
body {
background: linear-gradient(45deg, #7b00e0, #ff006a);
margin: 0;
height: auto;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
margin: 0 auto;
overflow: hidden;
}
.menu-container {
background-color: #E59617;
border-radius: 100%;
color: white;
cursor: pointer;
position: absolute;
width: 250px;
height: 250px;
left: -120px;
top: -120px;
transition: all 0.3s;
}
.menu-container.full-menu {
border-radius: 0;
padding: 0 !important;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: all 0.3s;
}
.full-menu .menu {
top: 40px;
left: 40px;
}
.menu {
color: white;
font-size: 2em;
position: absolute;
top: 160px;
left: 160px;
z-index: 100;
transition: all 0.3s;
}
.menu i {
opacity: 0.7;
transform: scale(1);
transition: all 0.3s;
}
.menu i:hover {
opacity: 1;
transform: scale(1.2);
transition: all 0.3s;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
overflow: hidden;
}
.overlay.open {
opacity: .9;
visibility: visible;
height: 100%;
}
.overlay.open li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
animation-delay: .50s;
}
.overlay nav {
font-size: 3.2em;
font-family: "Titan One", san-serif;
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-weight: 400;
text-align: center;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #fff;
text-decoration: none;
overflow: hidden;
opacity: 0.7;
transform: scale(1);
transition: all 0.3s;
}
.overlay ul li a:hover, .overlay ul li a:focus, .overlay ul li a:active {
opacity: 1;
transform: scale(1.2);
transition: all 0.3s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
h1.deti {
font-size: 5em;
font-family: "Titan One", san-serif;
background-color: rgba(255, 0, 106, 0.4);
border-radius: 100%;
box-shadow: 0 0 2em 1em rgba(255, 0, 106, 0.4);
color: white;
margin: 30vh auto;
position: relative;
text-align: center;
text-shadow: 0 8px 0 rgba(123, 0, 224, 0.4);
transform: rotate(-12deg);
width: 800px;
height: auto;
z-index: -1;
}
h1 span {
color: #ffc901;
}
.blob {
animation: blobby 4s infinite;
}
.blob2 {
animation: blobby2 6s infinite;
}
#keyframes blobby {
0% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
100% {
transform: scale(1);
}
}
#keyframes blobby2 {
0% {
transform: scale(1);
}
50% {
transform: scale(1.18);
}
100% {
transform: scale(1);
}
}
svg {
position: absolute;
top: 0;
}
#svg-right {
display: block;
fill: #7b00e0;
opacity: 0.5;
right: 0;
width: 60%;
z-index: -10;
}
#svg-left {
fill: #ff006a;
margin: 0;
width: 60%;
z-index: -10;
}
#media all and (max-width: 980px) {
h1.deti {
font-size: 3em;
font-family: "Titan One", san-serif;
}
}
#media all and (max-width: 480px) {
h1.deti {
font-size: 2em;
font-family: "Titan One", san-serif;
}
.overlay li {
font-size: 0.5em;
}
}
/*komix*/
p {
color: #fff;
}
.row {
display: flex;
height: 200px;
background-color: #7b00e0;
z-index: -99999;
}
h1 span {
color: #ffc901;
}
h1.mobile {
visibility: hidden;
}
.mobile {
display: none;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Kajberšikana</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<div class="mobile"><p class="mobile">Zmizni z mobilu na PC.</p></div>
<div class="title-deti"><h1 class="deti"><span>Lorem</span><br />Ipsum</h1>
<div class="circle"></div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-6"><p>Box 1</p></div>
<div class="col-sm-6 col-md-4 col-lg-6"><p>Box 2</p></div>
<div class="col-sm-6 col-md-4 col-lg-6"><p>Box 2</p></div>
<div class="col-sm-6 col-md-4 col-lg-6"><p>Box 2</p></div>
<div class="col-sm-6 col-md-4 col-lg-6"><p>Box 2</p></div>
<div class="col-sm-6 col-md-4 col-lg-6"><p>Box 2</p></div>
</div>
<div class="container">
<div class="menu-container" id="toggle">
</i>
</div>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>Domov</li>
<li>Pre deti</li>
<li>Pre dospelých</li>
<li>Kontakt</li>
</ul>
</nav>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
**
You have several mistakes in your snippet.
First off, you're supposed to load bootstrap(.min).js after jQuery. You also need popper.js for v4.x.
Secondly, you should never have a .container inside another .container.
Third, you want to keep your .menu-deti from oversizing <body>, using:
.title-deti {
max-width: 100vw;
overflow: hidden;
}
See it fixed:
#import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
#import url("https://fonts.googleapis.com/css?family=Titan+One");
body {
background: linear-gradient(45deg, #7b00e0, #ff006a);
margin: 0;
height: auto;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
margin: 0 auto;
overflow: hidden;
}
.menu-container {
background-color: #E59617;
border-radius: 100%;
color: white;
cursor: pointer;
position: absolute;
width: 250px;
height: 250px;
left: -120px;
top: -120px;
transition: all 0.3s;
}
.menu-container.full-menu {
border-radius: 0;
padding: 0 !important;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: all 0.3s;
}
.full-menu .menu {
top: 40px;
left: 40px;
}
.menu {
color: white;
font-size: 2em;
position: absolute;
top: 160px;
left: 160px;
z-index: 100;
transition: all 0.3s;
}
.menu i {
opacity: 0.7;
transform: scale(1);
transition: all 0.3s;
}
.menu i:hover {
opacity: 1;
transform: scale(1.2);
transition: all 0.3s;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
overflow: hidden;
}
.overlay.open {
opacity: .9;
visibility: visible;
height: 100%;
}
.overlay.open li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
animation-delay: .50s;
}
.overlay nav {
font-size: 3.2em;
font-family: "Titan One", san-serif;
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-weight: 400;
text-align: center;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #fff;
text-decoration: none;
overflow: hidden;
opacity: 0.7;
transform: scale(1);
transition: all 0.3s;
}
.overlay ul li a:hover,
.overlay ul li a:focus,
.overlay ul li a:active {
opacity: 1;
transform: scale(1.2);
transition: all 0.3s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
h1.deti {
font-size: 5em;
font-family: "Titan One", san-serif;
background-color: rgba(255, 0, 106, 0.4);
border-radius: 100%;
box-shadow: 0 0 2em 1em rgba(255, 0, 106, 0.4);
color: white;
margin: 30vh auto;
position: relative;
text-align: center;
text-shadow: 0 8px 0 rgba(123, 0, 224, 0.4);
transform: rotate(-12deg);
width: 800px;
height: auto;
z-index: -1;
}
h1 span {
color: #ffc901;
}
.blob {
animation: blobby 4s infinite;
}
.blob2 {
animation: blobby2 6s infinite;
}
#keyframes blobby {
0% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
100% {
transform: scale(1);
}
}
#keyframes blobby2 {
0% {
transform: scale(1);
}
50% {
transform: scale(1.18);
}
100% {
transform: scale(1);
}
}
svg {
position: absolute;
top: 0;
}
#svg-right {
display: block;
fill: #7b00e0;
opacity: 0.5;
right: 0;
width: 60%;
z-index: -10;
}
#svg-left {
fill: #ff006a;
margin: 0;
width: 60%;
z-index: -10;
}
#media all and (max-width: 980px) {
h1.deti {
font-size: 3em;
font-family: "Titan One", san-serif;
}
}
#media all and (max-width: 480px) {
h1.deti {
font-size: 2em;
font-family: "Titan One", san-serif;
}
.overlay li {
font-size: 0.5em;
}
}
/*komix*/
p {
color: #fff;
}
.row {
display: flex;
height: 200px;
background-color: #7b00e0;
z-index: -99999;
}
h1 span {
color: #ffc901;
}
h1.mobile {
visibility: hidden;
}
.mobile {
display: none;
}
.title-deti {
max-width: 100vw;
overflow: hidden;
}
#media (max-width: 800px) {h1.deti{width: 100vw;}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kajberšikana</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="mobile">
<p class="mobile">Zmizni z mobilu na PC.</p>
</div>
<div class="title-deti">
<h1 class="deti"><span>Lorem</span><br />Ipsum</h1>
<div class="circle"></div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-6">
<p>Box 1</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-6">
<p>Box 2</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-6">
<p>Box 2</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-6">
<p>Box 2</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-6">
<p>Box 2</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-6">
<p>Box 2</p>
</div>
</div>
</div>
<div class="container">
<div class="menu-container" id="toggle">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>Domov</li>
<li>Pre deti</li>
<li>Pre dospelých</li>
<li>Kontakt</li>
</ul>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
My problem is that when I specify the height of the div class "mobile" to 100wh, it only takes on about half of the screen. Another thing is, that I cannot make the list inside the mobile div to appear. My goal is to align them horizontally and vertically using flexbox, and make them appear as I press the hamburger button but so far I cannot see the list elements at all. Thanks for help!
* {
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
.mobile {
position: fixed;
visibility: hidden;
background: rgba(255, 0, 0, 0);
width: 100vw;
height: 500px;
z-index: 1;
transition: visibility 1s, background 1s;
}
.hamburger {
align-items: center;
display: flex;
width: 25px;
height: 15px;
margin-right: 50px;
cursor: pointer;
display: none;
z-index: 2;
}
.hamburger.active .line {
background: rgba(0, 0, 0, 0);
transition: .2s;
}
.hamburger.active .line::before {
transform: rotate(45deg);
top: 0;
transition: .5s;
}
.hamburger.active .line::after {
transform: rotate(135deg);
top: 0;
transition: .5s;
}
.line {
position: relative;
background-color: black;
width: 100%;
height: 1px;
transition: .5s;
}
.line::before,
.line::after {
position: absolute;
content: "";
height: 1px;
width: 100%;
background-color: black;
}
.line::after {
top: 6px;
transition: .5s;
}
.line::before {
top: -6px;
transition: .5s;
}
.nav {
justify-content: flex-end;
display: flex;
flex-wrap: wrap;
letter-spacing: 1px;
padding: 30px 0;
margin-right: 50px;
}
.nav li {
text-align: center;
font-family: "Georgia";
padding-left: 60px;
font-size: .8em;
font-weight: normal;
letter-spacing: 1px;
list-style: none;
}
.nav li a {
position: relative;
text-decoration: none;
color: inherit;
transition: color .5s;
}
.nav li a::before {
top: 2em;
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: black;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.nav li a:hover::before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.nav, nav {
align-items: center;
display: flex;
}
nav .logo {
margin-left: 50px;
display: flex;
justify-content: flex-start;
flex: 1;
font-family: Georgia, serif;
font-size: .8em;
padding: 30px 0;
font-weight: bold;
letter-spacing: 3px;
}
.sublogo {
font-weight: lighter;
margin-left: 10px;
}
.sublogo::before {
content: '|';
margin-right: 10px;
}
#media (max-width: 1120px) {
.nav {
display: none;
}
.hamburger {
display: flex;
-ms-transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
nav .logo {
font-size: 1em;
letter-spacing: 3px;
transition: visibility .5s, opacity .5s;
}
nav .logo .sublogo {
letter-spacing: 3px;
}
.logo.active {
visibility: hidden;
opacity: 0;
transition: visibility .5s, opacity .5s;
}
.mobile.active {
display: flex;
visibility: visible;
background: rgba(255, 25, 55, 1);
transition: background 1s;
}
}
#media (max-width: 600px) {
nav .logo {
font-size: 1em;
letter-spacing: 3px;
}
.sublogo {
display: none;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" href="stylesheet.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.hamburger').click(function(){
$('.hamburger').toggleClass('active');
$('.logo').toggleClass('active');
$('.mobile').toggleClass('active');
})
})
</script>
<meta charset="utf-8">
<title>CSS & HTML NAVIGATION</title>
</head>
<body>
<nav>
<div class="logo">
navigation.
<div class="sublogo">
this is my first example
</div>
</div>
<ul class="nav">
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>python</li>
<li>c++</li>
<li>php</li>
</ul>
<div class="hamburger">
<div class="line">
</div>
</div>
<div class="mobile">
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>python</li>
<li>c++</li>
<li>php</li>
</ul>
</div>
</nav>
</body>
</html>
you made the width:100vw, you seem to left the height:500px;
Anyhow, check on the .mobile div that the position is fixed, but you did not specified any constraints like top:0; left:0; etc; this is why that div is too hight on the page.
The viewport is alright. :D Have a nice day!
I'm still not too familiar with CSS, still working on it and learning through YouTube for the design purpose.
The sticky navigation bar will only stick on bottom IF its position: absolute. And here comes the problem: How do I put my content next to the navigation bar? Foremost the content that I put beneath it won't let the page expand more space/ letting me to scroll anyway.
I've tried to figure this out by adjusting everything like position, float, etc, and I'm still stuck. Forgive me for my ignorance, and thanks for the help.
/* Background slider */
#font-face {
font-family: 'Bebas-Neue';
src: url('BebasNeue.woff') format('woff'), /* Pretty Modern Browsers */
}
.slide-1,.slide-2,.slide-3 {
position:absolute;
width:100%;
height:100%;
z-index:1;
background-attachment:fixed;
}
.slider .line {
position: absolute;
width: 98%;
height: auto;
bottom: 40%;
margin: 10px;
z-index:999;
}
.slider .slider-caption {
font-family:Oswald;
height: 0%;
bottom:25%;
left:16px;
text-transform:uppercase;
font-size:50px;
min-height: 80px;
position: absolute;
font-weight:bold;
z-index:999;
}
.slider .slider-description {
font-family:Oswald;
bottom:20%;
left:16px;
font-size:15px;
height:0%;
position: absolute;
z-index:999;
}
.slide-1 {
background-image:url('../image/01_contentslider_1.jpg');
background-repeat: no-repeat;
background-size:cover;
animation: fade-1 12s infinite;
-webkit-animation: fade-1 12s infinite;
}
.slide-2 {
background-image:url('../image/01_contentslider_2.jpg');
background-repeat: no-repeat;
background-size:cover;
animation: fade-2 12s infinite;
-webkit-animation: fade-2 12s infinite;
}
.slide-3 {
background-image:url('../image/01_contentslider_3.jpg');
background-repeat: no-repeat;
background-size:cover;
animation: fade-3 12s infinite;
-webkit-animation: fade-3 12s infinite;
}
#-webkit-keyframes fade-1 {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fade-1 {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fade-2 {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes fade-2 {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes fade-3 {
0% {
opacity: 0;
}
25% {
opacity: 0;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fade-3 {
0% {
opacity: 0;
}
25% {
opacity: 0;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.transparency { /*Opacity 50*/
position: relative;
width: 100%;
height: 100%;
background:url('../image/00_Transparent.png');
top: 0;
bottom:0;
z-index: -1000;
overflow:hidden;
}
/* Sticky Nav Bar Settings */
.content-layer {
position: absolute;
bottom:0;
float:left;
padding:0;
}
#nav-bar {
overflow: hidden;
background-color: #333;
position:relative;
float:left;
width: 100%;
padding: 0;
bottom:0;
z-index:999;
}
#nav-bar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#nav-bar ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0;
margin-left: 350px;
}
#nav-bar li {
float: left;
}
#nav-bar a:hover {
background-color: #ddd;
color: black;
}
#nav-bar li a {
display: block;
padding: 10px 25px;
text-decoration: none;
font-family: "Arial";
color: #4c4c4c;
border-right: 1px solid #4c4c4c;
}
#nav-bar a.active {
background-color: #4CAF50;
color: white;
}
.page-content {
padding: 16px;
z-index: 999;
bottom: 0;
overflow:hidden;
position:relative;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .page-content {
padding-top: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Home | Reise Web-Portal </title>
<link rel="stylesheet" type="text/css" href="vendor/fontawesome-free/css/all.min.css">
<link rel="stylesheet" type="text/css" href="css/00_Fundamentals.css">
<link rel="stylesheet" type="text/css" href="css/02_Parallax_Slider.css">
<link rel="stylesheet" href="css/00_Loading....css" type="text/css">
<link rel="stylesheet" type="text/css" href="css/00_Bebas_Neue_Font.css">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Oswald|Open+Sans:400,600' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!-- Loading Script -->
<script type="text/javascript">
$(window).on('load', function() {
$('.preloader').addClass('complete')
})
</script>
</head>
<body>
<!-- Loading the Page OP -->
<div class="preloader">
<div class="loader">
</div>
</div>
<!-- Loading the Page ED -->
<script type="text/javascript">
// Appearance of all content
$(function() {
setTimeout(function() {
$('.showcase').removeClass('hidden');
}, 4500);
})();
</script>
<div class="page">
<span class="menu-toggle">
<i class="menu-open fa fa-bars fa-lg"></i>
<i class="menu-close fa fa-times fa-lg"></i>
</span>
<ul class="menu-items">
<img class="menu-logo-pic" alt="Reise Web-Portal" src="image/00_Logo_2.png">
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
<!-- Stuff inside the page -->
<div class="content">
<!-- Home Page -->
<div class="background-slide">
<!-- Slide Show -->
<div class="slider">
<div class="slide-1">
<div class="transparency">
<div class="line">
<hr>
</div>
<div class="slider-caption">
<h4>Start Your Journey</h4>
</div>
<div class="slider-description">
<h2>Now or never.</h2>
</div>
</div>
</div>
<div class="slide-2">
<div class="transparency">
<div class="line">
<hr>
</div>
<div class="slider-caption">
<h4>Enjoy your life without regrets</h4>
</div>
<div class="slider-description">
<h2>By understanding the world in a greater depth.</h2>
</div>
</div>
</div>
<div class="slide-3">
<div class="transparency">
<div class="line">
<hr>
</div>
<div class="slider-caption">
<h4>Reach the sky with your hands</h4>
</div>
<div class="slider-description">
<h2>Fuck this shit.</h2>
</div>
</div>
</div>
</div>
</div>
<div id="nav-bar">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<div class="page-content">
<h3>Sticky Navigation Example</h3>
<p>The navbar will stick to the top when you reach its scroll position.</p>
</div>
</div>
</div>
<!-- Sticky Nav Bar Script -->
<script type="text/javascript">
window.onscroll = function() {
myFunction()
};
var navbar = document.getElementById("nav-bar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
<!-- Off Canvas Script -->
<script type="text/javascript">
var $page = $('.page');
$('.menu-toggle').on('click', function() {
$page.toggleClass('shazam');
});
$('.content').on('click', function() {
$page.removeClass('shazam');
});
</script>
</body>
</html>
/*02_Parallax_Slider.css*/
/* Background slider */
#font-face {
font-family: 'Bebas-Neue';
src: url('BebasNeue.woff') format('woff'), /* Pretty Modern Browsers */
}
.slide-1,
.slide-2,
.slide-3 {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
background-attachment: fixed;
}
.slider .line {
position: absolute;
width: 98%;
height: auto;
bottom: 40%;
margin: 10px;
z-index: 999;
}
.slider .slider-caption {
font-family: Oswald;
height: 0%;
bottom: 25%;
left: 16px;
text-transform: uppercase;
font-size: 50px;
min-height: 80px;
position: absolute;
font-weight: bold;
z-index: 999;
}
.slider .slider-description {
font-family: Oswald;
bottom: 20%;
left: 16px;
font-size: 15px;
height: 0%;
position: absolute;
z-index: 999;
}
.slide-1 {
background-image: url('../image/01_contentslider_1.jpg');
background-repeat: no-repeat;
background-size: cover;
animation: fade-1 12s infinite;
-webkit-animation: fade-1 12s infinite;
}
.slide-2 {
background-image: url('../image/01_contentslider_2.jpg');
background-repeat: no-repeat;
background-size: cover;
animation: fade-2 12s infinite;
-webkit-animation: fade-2 12s infinite;
}
.slide-3 {
background-image: url('../image/01_contentslider_3.jpg');
background-repeat: no-repeat;
background-size: cover;
animation: fade-3 12s infinite;
-webkit-animation: fade-3 12s infinite;
}
#-webkit-keyframes fade-1 {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fade-1 {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fade-2 {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes fade-2 {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes fade-3 {
0% {
opacity: 0;
}
25% {
opacity: 0;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fade-3 {
0% {
opacity: 0;
}
25% {
opacity: 0;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.transparency {
/*Opacity 50*/
position: relative;
width: 100%;
height: 100%;
background: url('../image/00_Transparent.png');
top: 0;
bottom: 0;
z-index: -1000;
overflow: hidden;
}
/* Sticky Nav Bar Settings */
.content-layer {
position: absolute;
bottom: 0;
float: left;
padding: 0;
}
#nav-bar {
overflow: hidden;
background-color: #333;
position: relative;
float: left;
width: 100%;
padding: 0;
bottom: 0;
z-index: 999;
}
#nav-bar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#nav-bar ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0;
margin-left: 350px;
}
#nav-bar li {
float: left;
}
#nav-bar a:hover {
background-color: #ddd;
color: black;
}
#nav-bar li a {
display: block;
padding: 10px 25px;
text-decoration: none;
font-family: "Arial";
color: #4c4c4c;
border-right: 1px solid #4c4c4c;
}
#nav-bar a.active {
background-color: #4CAF50;
color: white;
}
.page-content {
padding: 16px;
z-index: 999;
bottom: 0;
overflow: hidden;
position: relative;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.page-content {
padding-top: 60px;
}
/* 00_Fundamentals.CSS */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-family: Comfortaa;
}
body {
color: white;
}
.page {
height: 200%;
background-color: #000;
}
.content {
height: 50%;
transform-origin: top left;
transition: transform 0.7s cubic-bezier(1, 0.005, 0.24, 1), -webkit-transform 0.7s cubic-bezier(1, 0.005, 0.24, 1);
}
.content-inner {
height: 100%;
overflow-y: auto;
line-height: 30px;
background-color: white;
}
.menu-toggle {
z-index: 1000;
position: fixed;
top: 0;
left: 0;
display: block;
cursor: pointer;
width: 80px;
height: 80px;
background-color: gray;
border-bottom-right-radius: 100%;
}
.menu-toggle:active i {
opacity: 0.8;
}
.menu-toggle i {
color: #f0f0f0;
}
.menu-toggle .menu-open,
.menu-toggle .menu-close {
position: absolute;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: : -12px;
transition: transform 0.7s cubic-bezier(1, 0.005, 0.25, 1), -webkit-transform 0.7s cubic-bezier(1, 0.005, 0.25, 1);
}
.menu-toggle .menu-open {
transform-origin: -100px -100px;
}
.menu-toggle .menu-close {
transform: rotate(20deg);
transform-origin: -100px -160px;
}
.menu-items {
position: fixed;
bottom: 0;
left: 50px;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu-items li {
height: 60px;
margin-bottom: 30px;
transform: translateX(-300px);
transition: transform 0.7s 0s cubic-bezier(1, 0.005, 0.24, 1), -webkit-transform 0.7s 0s cubic-bezier(1, 0.005, 0.24, 1);
}
.menu-items li:nth-child(2) {
margin-left: 40px;
}
.menu-items li:nth-child(3) {
margin-left: 80px;
}
.menu-items li:nth-child(4) {
margin-left: 160px;
}
.menu-items a {
display: block;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
color: #fff;
transition: color .2s;
}
.menu-items a:hover {
color: #f0f0f0;
}
/* the class to Open the menu */
.shazam .content {
transform: rotate(-30deg);
}
.shazam .menu-open {
transform: rotate(-20deg);
opacity: 0;
transition: 0.7s;
}
.shazam .menu-close {
transform: rotate(0);
}
.shazam .menu-items li {
transform: translateX(0);
transition: transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.shazam .menu-items li:nth-child(2) {
transition-delay: .47s;
}
.shazam .menu-items li:nth-child(3) {
transition-delay: .48s;
}
h1 {
padding-bottom: 16px;
border-bottom: 1px solid #ddd;
}
.menu-logo-pic {
width: 55%;
height: 55%;
opacity: 0;
display: block;
position: relative;
pointer-events: none;
transition: .6s;
left: -90px;
}
.shazam .menu-items .menu-logo-pic {
opacity: 1;
transition: .6s;
}
/* Footer */
.center {
text-align: center;
margin: auto;
}
.bg-light {
background: #f4f4f4;
color: #333;
}
.bg-dark {
background: #333;
color: #f4f4f4;
}
footer {
padding: 2.2rem;
position: relative;
bottom: 0;
}
footer p {
margin: 0;
}
.newone {
vertical-align: center;
text-align: center;
}
.row {
margin: 0 auto;
max-width: 840px;
font-family: Arial;
}
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Home | Reise Web-Portal </title>
<link rel="stylesheet" type="text/css" href="vendor/fontawesome-free/css/all.min.css">
<link rel="stylesheet" type="text/css" href="css/00_Fundamentals.css">
<link rel="stylesheet" type="text/css" href="css/02_Parallax_Slider.css">
<link rel="stylesheet" href="css/00_Loading....css" type="text/css">
<link rel="stylesheet" type="text/css" href="css/00_Bebas_Neue_Font.css">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Oswald|Open+Sans:400,600' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!-- Loading Script -->
<script type="text/javascript">
$(window).on('load', function() {
$('.preloader').addClass('complete')
})
</script>
</head>
<body>
<!-- Loading the Page OP -->
<div class="preloader">
<div class="loader">
</div>
</div>
<!-- Loading the Page ED -->
<script type="text/javascript">
// Appearance of all content
$(function() {
setTimeout(function() {
$('.showcase').removeClass('hidden');
}, 4500);
})();
</script>
<div class="page">
<span class="menu-toggle">
<i class="menu-open fa fa-bars fa-lg"></i>
<i class="menu-close fa fa-times fa-lg"></i>
</span>
<ul class="menu-items">
<img class="menu-logo-pic" alt="Reise Web-Portal" src="image/00_Logo_2.png">
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
<!-- Stuff inside the page -->
<div class="content">
<!-- Home Page -->
<div class="background-slide">
<!-- Slide Show -->
<div class="slider">
<div class="slide-1">
<div class="transparency">
<div class="line">
<hr>
</div>
<div class="slider-caption">
<h4>Start Your Journey</h4>
</div>
<div class="slider-description">
<h2>Now or never.</h2>
</div>
</div>
</div>
<div class="slide-2">
<div class="transparency">
<div class="line">
<hr>
</div>
<div class="slider-caption">
<h4>Enjoy your life without regrets</h4>
</div>
<div class="slider-description">
<h2>By understanding the world in a greater depth.</h2>
</div>
</div>
</div>
<div class="slide-3">
<div class="transparency">
<div class="line">
<hr>
</div>
<div class="slider-caption">
<h4>Reach the sky with your hands</h4>
</div>
<div class="slider-description">
<h2>Fuck this shit.</h2>
</div>
</div>
</div>
</div>
</div>
<div id="nav-bar">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<div class="page-content">
<h3>Sticky Navigation Example</h3>
<p>The navbar will stick to the top when you reach its scroll position.</p>
</div>
</div>
</div>
<!-- Sticky Nav Bar Script -->
<script type="text/javascript">
window.onscroll = function() {
myFunction()
};
var navbar = document.getElementById("nav-bar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
<!-- Off Canvas Script -->
<script type="text/javascript">
var $page = $('.page');
$('.menu-toggle').on('click', function() {
$page.toggleClass('shazam');
});
$('.content').on('click', function() {
$page.removeClass('shazam');
});
</script>
</body>
</html>
If you want a navigation bar to always stay at the bottom of the screen regardless of window resizing/size, AND some more content below it scrolling down, you may want to use vh attribute (which stands for view height) doing something like this:
<div style="display:flex;flex-direction:column;height:100vh;background:red;">
<div style="display:flex;flex-direction:column;align-self:flex-start;flex-grow:2;">
//Your upper content
</div>
<div style="display:flex;align-self:flex-start;height:80px;">
//Your nav bar
</div>
</div>
<div style="height:300px;background:gray;">
//rest of the stuff below
</div>
This is what I am trying to code. I am having trouble with positioning elements on the page. To get an idea of where some of what I gave created in the HTML is, I am trying to put a border around a div. This div (id="container") in the end will actually need a border. However, I cannot get one to show up at all.
Here is my full HTML
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<meta charset="UTF-8">
<title>The Pantry</title>
<link rel="stylesheet" href="reset.css"/>
<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="header">
<div class="nav">
<ul>
<li>HOME</li>
<li>MENU</li>
<li id="logo"><img src="Images/pantry logo.png" width="536" height="348"/></li>
<li>CONTACT</li>
<li id="last">ABOUT</li>
</ul>
</div>
</div><!--end header-->
<div id="container">
<div id="slider">
<figure>
<img src="Images/hungarian-goulash_10-20-13_1_ca.jpg" width="600" height="400" alt="Hungarian Sausage Goulash"/>
<img src="Images/G-lasagne-al-forno.jpg" width="600" height="400" alt="Lasagne al Forno"/>
<img src="Images/5357829-svickova.jpg" width="600" height="400" alt="Svickova"/>
<img src="Images/pork shoulder.jpg" width="600" height="400" alt="Pork Shoulder with Dumplings"/>
<img src="Images/hungarian-goulash_10-20-13_1_ca.jpg" width="600" height="400" alt="Hungarian Sausage Goulash"/>
</figure>
</div><!--end slider-->
<div id="menu ad">
</div><!--end menu ad-->
<div id="hours">
</div><!--end hours-->
</div><!--end container-->
<footer>
</footer>
And my CSS
#charset "UTF-8";
body {
background: #f8f8f1;
line-height: 1.5;
}
/*header*/
.header {
width: 960px;
height: 200px;
margin: 0 auto;
text-align: center;
position: relative;
padding: 100px 0px 0px 0px;
}
div ul li {
display: inline-block;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 18px;
color: #4f4d4b;
text-decoration: none;
list-style: none;
vertical-align: middle;
}
.nav ul li {
margin-right: 70px
}
.nav ul li:nth-child(5) {
margin: 0;
}
div ul li a {
list-style: none;
text-decoration: none;
color: #4f4d4b;
}
.nav ul li a:visited {
text-decoration: none;
color: #4f4d4b;
}
#logo a img {
width: 250px;
height: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
#logo {
width: 250px;
position: relative;
}
/*End Header*/
/*Container*/
div.container {
margin: auto 0;
position: relative;
width: 960px;
heigth: 438px;
border: 10px solid red;
}
/*slider*/
#-webkit-keyframes slidy {
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
div#slider { position: relative; overflow: hidden; width: 80%; max-width: 600px; height: auto; max-height: 400px;
margin: 0 auto}
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
font-size: 0;
animation: 20s slidy infinite;
margin: 0; top: 0; left: 0;
-webkit-animation: 20s slidy ease-in-out infinite;
animation: 20s slidy ease-in-out infinite;
}
Please visit the site here to see what is happening.
Thanks for your help.
Your selector:
div.container
Should be:
div#container