I'm trying to write a code which will allow me to show 8 pins on the map with different data (location, images, alt text, etc.), but when I run the code I get 8 pins with the exact same data. What am I doing wrong? As far as I am concerned, the getRandomInt function should produce various data, and since it's then used in the for loop, the data should be different each time. But I suppose I don't understand something correctly so if you can, please help me.
Thanks in advance!
'use strict';
var TYPES = ['palace', 'flat', 'house', 'bungalo'];
var map = document.querySelector('.map');
var mapOverlay = document.querySelector('.map__overlay');
var pins = document.querySelector('.map__pins');
var ADS_COUNT = 8;
var getRandomInt = function (min, max) {
return Math.floor(Math.random() * (max - min)) + min;
};
var similarAds = {
'author': {
'avatar': 'img/avatars/user0' + getRandomInt(1, ADS_COUNT) + '.png',
},
'offer': {
'type': TYPES[getRandomInt(0, TYPES.length - 1)],
},
'location': {
'x': getRandomInt(0, mapOverlay.offsetWidth),
'y': getRandomInt(130, 630),
}
};
var renderPin = function (pinData) {
var element = document.createElement('button');
var newImage = document.createElement('img');
element.className = 'map__pin';
element.style.top = pinData.location.y + 'px';
element.style.left = pinData.location.x + 'px';
newImage.src = pinData.author.avatar;
newImage.alt = pinData.offer.type;
element.appendChild(newImage);
return element;
};
var renderPins = function () {
var fragment = document.createDocumentFragment();
for (var i = 0; i < ADS_COUNT; i++) {
fragment.appendChild(renderPin(similarAds));
}
pins.appendChild(fragment);
};
map.classList.remove('map--faded');
renderPins();
/* Общие стили. Каркас
========================================================================== */
#font-face {
font-family: "Roboto";
src: url("../fonts/Roboto-Bold.woff2") format("woff2"),
url("../fonts/Roboto-Bold.woff") format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
}
#font-face {
font-family: "Roboto";
src: url("../fonts/Roboto-Regular.woff2") format("woff2"),
url("../fonts/Roboto-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
#font-face {
font-family: "Roboto";
src: url("../fonts/Roboto-Medium.woff2") format("woff2"),
url("../fonts/Roboto-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.content-box-component {
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}
.hidden {
display: none;
}
body {
max-width: 1200px;
margin: 0 auto;
color: #353535;
font-family: "Roboto", "Arial", sans-serif;
font-size: 16px;
background-color: #f0f0ea;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
}
/* Карта с объявлениями
========================================================================== */
.promo {
position: absolute;
z-index: 1;
top: 40px;
left: 50%;
width: 211px;
height: 45px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.map {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
height: 750px;
background-color: #82bcc0;
background-image: url("../img/map.jpg");
background-repeat: no-repeat;
background-position: center bottom;
border-radius: 0 0 10px 10px;
}
.map__pins {
position: relative;
width: 100%;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.map__overlay {
position: absolute;
width: 100%;
height: 100%;
-webkit-transition: opacity 300ms ease-in;
-o-transition: opacity 300ms ease-in;
transition: opacity 300ms ease-in;
opacity: 0;
background-color: rgba(0, 0, 0, 0.3);
}
.map__title {
width: 100%;
margin: 0;
padding: 0;
margin-top: 170px;
font-size: 85px;
font-weight: 700;
text-align: center;
color: #ffffff;
}
.map--faded .map__overlay {
opacity: 1;
}
/**
* Метка объявления
*/
.map__pin {
position: absolute;
z-index: 1;
width: 50px;
height: 70px;
margin: 0;
padding: 0;
border: 0;
background: none;
}
.map__pin:focus {
outline: none;
-webkit-filter: drop-shadow(0 0 5px red);
filter: drop-shadow(0 0 5px red);
}
.map__pin img {
position: absolute;
z-index: 1;
top: 5px;
left: 0;
right: 0;
margin: auto;
border-radius: 50%;
}
.map__pin:not(.map__pin--main)::after {
content: "";
position: absolute;
width: 50px;
height: 70px;
top: 0;
left: 0;
background-image: url("../img/pins.svg");
background-repeat: no-repeat;
background-position: 0 -9px;
}
.map__pin:not(.map__pin--main):hover::after,
.map__pin:not(.map__pin--main):active::after,
.map__pin--active:not(.map__pin--main)::after {
background-position: 0 -88px;
}
.map__pin:active img,
.map__pin--active img {
-webkit-box-shadow: 0 0 15px 15px rgba(255, 86, 53, 0.7);
box-shadow: 0 0 15px 15px rgba(255, 86, 53, 0.7);
}
.map__pin--main {
width: 65px;
height: 65px;
cursor: move;
}
.map__pin--main img {
position: relative;
z-index: 1;
padding: 2px 6px 6px;
-webkit-transform: translateY(-7px);
-ms-transform: translateY(-7px);
transform: translateY(-7px);
border: solid 5px #ff5635;
border-radius: 50%;
background-color: #ffffff;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.map__pin--main:active img,
.map__pin--main--active img {
background-color: #ffffff;
}
.map__pin--main svg {
position: absolute;
z-index: 0;
top: -50px;
left: -47px;
width: 156px;
height: 156px;
-webkit-transition: -webkit-transform 300ms ease-in;
transition: -webkit-transform 300ms ease-in;
-o-transition: transform 300ms ease-in;
transition: transform 300ms ease-in;
transition: transform 300ms ease-in, -webkit-transform 300ms ease-in;
-webkit-transform: rotate(120deg) scale(0);
-ms-transform: rotate(120deg) scale(0);
transform: rotate(120deg) scale(0);
-webkit-transform-origin: 78px 78px;
-ms-transform-origin: 78px 78px;
transform-origin: 78px 78px;
}
.map__pin--main:hover ellipse {
fill: rgba(255, 86, 53, 0.9);
}
.map__pin--main::after {
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
content: "";
border: solid 5px transparent;
border-top: solid 18px #fff;
border-bottom: 0;
-webkit-transition: -webkit-transform 300ms ease-in;
transition: -webkit-transform 300ms ease-in;
-o-transition: transform 300ms ease-in;
transition: transform 300ms ease-in;
transition: transform 300ms ease-in, -webkit-transform 300ms ease-in;
-webkit-transform: translate(-50%, -6px);
-ms-transform: translate(-50%, -6px);
transform: translate(-50%, -6px);
border-top-width: 22px;
border-top-color: #ff5635;
}
.map--faded .map__pin--main svg {
-webkit-transform: rotate(-20deg) scale(1);
-ms-transform: rotate(-20deg) scale(1);
transform: rotate(-20deg) scale(1);
}
.map--faded .map__pin--main::after {
-webkit-transform: translate(-50%, -30px);
-ms-transform: translate(-50%, -30px);
transform: translate(-50%, -30px);
}
.map__pin--main text {
font-size: 7px;
font-weight: 700;
fill: #ffffff;
}
/**
* Фильтры объявления
*/
.map__filters-container {
width: 100%;
background-color: rgba(3, 28, 45, 0.5);
}
.map__filters {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 960px;
height: 46px;
margin: 0 auto;
-webkit-transition: opacity 300ms ease-in;
-o-transition: opacity 300ms ease-in;
transition: opacity 300ms ease-in;
opacity: 1;
}
.map--faded .map__filters {
opacity: 0;
}
.map__filter {
height: 30px;
margin-right: 10px;
font-size: 14px;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
}
.map__filter:hover {
border: 1px solid #ffaa99;
}
.map__filter:focus {
outline: none;
-webkit-box-shadow: 0 0 2px 2px #ff6547;
box-shadow: 0 0 2px 2px #ff6547;
}
.map__feature {
display: inline-block;
overflow: hidden;
width: 30px;
height: 28px;
font-size: 0;
vertical-align: middle;
cursor: pointer;
background-color: #f8f8f8;
background-image: url("../img/sprite-feature.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 25px 345px;
border-radius: 3px;
}
.map__feature--wifi {
background-position: 2px 5px;
}
.map__checkbox:checked + .map__feature--wifi {
background-position: 2px -172px;
}
.map__feature--dishwasher {
background-position: 2px -25px;
}
.map__checkbox:checked + .map__feature--dishwasher {
background-position: 2px -202px;
}
.map__feature--parking {
background-position: 3px -55px;
}
.map__checkbox:checked + .map__feature--parking {
background-position: 2px -232px;
}
.map__feature--washer {
background-position: 2px -85px;
}
.map__checkbox:checked + .map__feature--washer {
background-position: 2px -262px;
}
.map__feature--elevator {
background-position: 2px -143px;
}
.map__checkbox:checked + .map__feature--elevator {
background-position: 2px -321px;
}
.map__feature--conditioner {
background-position: 3px -114px;
}
.map__checkbox:checked + .map__feature--conditioner {
background-position: 2px -291px;
}
.map__feature:hover {
-webkit-box-shadow: inset 0 0 0 1px #ffaa99;
box-shadow: inset 0 0 0 1px #ffaa99;
}
.map__feature:focus,
.map__checkbox:focus + .map__feature {
-webkit-box-shadow: 0 0 2px 2px #ff6547;
box-shadow: 0 0 2px 2px #ff6547;
}
.map__feature:active {
-webkit-box-shadow: none;
box-shadow: none;
background-color: #ff6547;
}
.map__checkbox:checked + .map__feature {
background-color: #ff6547;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
}
/**
* Карточка объявления
*/
.map__card {
position: absolute;
z-index: 2;
top: 150px;
left: 20px;
padding: 10px 10px 20px;
width: 230px;
font-size: 12px;
border-radius: 5px;
background-color: #ffffff;
}
.popup__avatar {
position: absolute;
bottom: 100%;
left: 0;
margin-bottom: 10px;
}
.popup__close {
position: absolute;
bottom: 100%;
right: 0;
padding: 0;
font-size: 0;
border: 0;
background: none;
}
.popup__close:active {
-webkit-transform: translate(1px, 1px);
-ms-transform: translate(1px, 1px);
transform: translate(1px, 1px);
}
.popup__close:focus {
outline: none;
-webkit-box-shadow: 0 0 10px 3px #ff6547;
box-shadow: 0 0 10px 3px #ff6547;
}
.popup__close::after {
font-size: 50px;
line-height: 40px;
display: block;
content: "×";
color: #000000;
}
.popup__title {
margin: 0;
margin-bottom: 10px;
font-size: 16px;
line-height: 18px;
}
.popup__text {
margin: 0;
margin-bottom: 10px;
}
.popup__text--price {
font-size: 22px;
font-weight: 700;
}
.popup__price span {
font-size: 16px;
}
.popup__type {
margin: 0;
margin-bottom: 5px;
}
.popup__text--capacity {
margin-bottom: 0;
}
.popup__features {
margin: 0;
padding: 0;
list-style: none;
}
.popup__features {
margin-bottom: 10px;
}
.popup__feature {
display: inline-block;
overflow: hidden;
width: 30px;
height: 28px;
font-size: 0;
background-image: url("../img/sprite-feature.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 25px 345px;
}
.popup__feature--wifi {
background-position: 2px 5px;
}
.popup__feature--dishwasher {
background-position: 2px -25px;
}
.popup__feature--parking {
background-position: 3px -55px;
}
.popup__feature--washer {
background-position: 2px -85px;
}
.popup__feature--elevator {
background-position: 2px -143px;
}
.popup__feature--conditioner {
background-position: 3px -114px;
}
.popup__photos {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.popup__photo {
margin-right: 5px;
margin-bottom: 5px;
}
.popup__photo:hover {
border: 2px solid #ff5635;
}
/**
* Сообщения об успешном и неуспешном создании объявления
*/
.success,
.error {
position: fixed;
top: 0;
left: 0;
z-index: 2;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
overflow: auto;
padding-top: 300px;
text-align: center;
vertical-align: middle;
background-color: rgba(0, 0, 0, 0.8);
}
.success__message,
.error__message {
position: relative;
color: #ffffff;
font-size: 50px;
font-weight: 700;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Кексобукинг</title>
</head>
<body>
<main>
<div class="promo">
<h1 class="promo__title visually-hidden">Keksobooking. Кексы по соседству</h1>
<img src="img/keksobooking.svg" alt="Keksobooking. Кексы по соседству" width="215" height="45">
</div>
<!-- Карта объявлений -->
<section class="map map--faded">
<!-- Метки объявлений -->
<div class="map__pins">
<div class="map__overlay">
<h2 class="map__title">И снова Токио!</h2>
</div>
<button class="map__pin map__pin--main" style="left: 570px; top: 375px;">
<img src="img/muffin-red.svg" width="40" height="44" draggable="false" alt="Метка объявления">
<svg viewBox="0 0 70 70" width="156" height="156" aria-label="Метка для поиска жилья">
<defs>
<path d="M35,35m-23,0a23,23 0 1,1 46,0a23,23 0 1,1 -46,0" id="tophalf" />
</defs>
<ellipse cx="35" cy="35" rx="35" ry="35" fill="rgba(255, 86, 53, 0.7)" />
<text><textPath xlink:href="#tophalf" startOffset="0">Поставь меня куда-нибудь</textPath></text>
</svg>
</button>
</div>
The problem is in your variable similarAds. You have already defined it once and use the same value in your loop. So the simple way is to put your variable into the loop to redefined it with every new step.
'use strict';
var TYPES = ['palace', 'flat', 'house', 'bungalo'];
var map = document.querySelector('.map');
var mapOverlay = document.querySelector('.map__overlay');
var pins = document.querySelector('.map__pins');
var ADS_COUNT = 8;
var getRandomInt = function (min, max) {
return Math.floor(Math.random() * (max - min)) + min;
};
var renderPin = function (pinData) {
var element = document.createElement('button');
var newImage = document.createElement('img');
element.className = 'map__pin';
element.style.top = pinData.location.y + 'px';
element.style.left = pinData.location.x + 'px';
newImage.src = pinData.author.avatar;
newImage.alt = pinData.offer.type;
element.appendChild(newImage);
return element;
};
var renderPins = function () {
var fragment = document.createDocumentFragment();
for (var i = 0; i < ADS_COUNT; i++) {
let similarAds = {
'author': {
'avatar': 'img/avatars/user0' + getRandomInt(1, ADS_COUNT) + '.png',
},
'offer': {
'type': TYPES[getRandomInt(0, TYPES.length - 1)],
},
'location': {
'x': getRandomInt(0, mapOverlay.offsetWidth),
'y': getRandomInt(130, 630),
}
};
fragment.appendChild(renderPin(similarAds));
}
pins.appendChild(fragment);
};
map.classList.remove('map--faded');
renderPins();
/* Общие стили. Каркас
========================================================================== */
#font-face {
font-family: "Roboto";
src: url("../fonts/Roboto-Bold.woff2") format("woff2"),
url("../fonts/Roboto-Bold.woff") format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
}
#font-face {
font-family: "Roboto";
src: url("../fonts/Roboto-Regular.woff2") format("woff2"),
url("../fonts/Roboto-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
#font-face {
font-family: "Roboto";
src: url("../fonts/Roboto-Medium.woff2") format("woff2"),
url("../fonts/Roboto-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.content-box-component {
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}
.hidden {
display: none;
}
body {
max-width: 1200px;
margin: 0 auto;
color: #353535;
font-family: "Roboto", "Arial", sans-serif;
font-size: 16px;
background-color: #f0f0ea;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
}
/* Карта с объявлениями
========================================================================== */
.promo {
position: absolute;
z-index: 1;
top: 40px;
left: 50%;
width: 211px;
height: 45px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.map {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
height: 750px;
background-color: #82bcc0;
background-image: url("../img/map.jpg");
background-repeat: no-repeat;
background-position: center bottom;
border-radius: 0 0 10px 10px;
}
.map__pins {
position: relative;
width: 100%;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.map__overlay {
position: absolute;
width: 100%;
height: 100%;
-webkit-transition: opacity 300ms ease-in;
-o-transition: opacity 300ms ease-in;
transition: opacity 300ms ease-in;
opacity: 0;
background-color: rgba(0, 0, 0, 0.3);
}
.map__title {
width: 100%;
margin: 0;
padding: 0;
margin-top: 170px;
font-size: 85px;
font-weight: 700;
text-align: center;
color: #ffffff;
}
.map--faded .map__overlay {
opacity: 1;
}
/**
* Метка объявления
*/
.map__pin {
position: absolute;
z-index: 1;
width: 50px;
height: 70px;
margin: 0;
padding: 0;
border: 0;
background: none;
}
.map__pin:focus {
outline: none;
-webkit-filter: drop-shadow(0 0 5px red);
filter: drop-shadow(0 0 5px red);
}
.map__pin img {
position: absolute;
z-index: 1;
top: 5px;
left: 0;
right: 0;
margin: auto;
border-radius: 50%;
}
.map__pin:not(.map__pin--main)::after {
content: "";
position: absolute;
width: 50px;
height: 70px;
top: 0;
left: 0;
background-image: url("../img/pins.svg");
background-repeat: no-repeat;
background-position: 0 -9px;
}
.map__pin:not(.map__pin--main):hover::after,
.map__pin:not(.map__pin--main):active::after,
.map__pin--active:not(.map__pin--main)::after {
background-position: 0 -88px;
}
.map__pin:active img,
.map__pin--active img {
-webkit-box-shadow: 0 0 15px 15px rgba(255, 86, 53, 0.7);
box-shadow: 0 0 15px 15px rgba(255, 86, 53, 0.7);
}
.map__pin--main {
width: 65px;
height: 65px;
cursor: move;
}
.map__pin--main img {
position: relative;
z-index: 1;
padding: 2px 6px 6px;
-webkit-transform: translateY(-7px);
-ms-transform: translateY(-7px);
transform: translateY(-7px);
border: solid 5px #ff5635;
border-radius: 50%;
background-color: #ffffff;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.map__pin--main:active img,
.map__pin--main--active img {
background-color: #ffffff;
}
.map__pin--main svg {
position: absolute;
z-index: 0;
top: -50px;
left: -47px;
width: 156px;
height: 156px;
-webkit-transition: -webkit-transform 300ms ease-in;
transition: -webkit-transform 300ms ease-in;
-o-transition: transform 300ms ease-in;
transition: transform 300ms ease-in;
transition: transform 300ms ease-in, -webkit-transform 300ms ease-in;
-webkit-transform: rotate(120deg) scale(0);
-ms-transform: rotate(120deg) scale(0);
transform: rotate(120deg) scale(0);
-webkit-transform-origin: 78px 78px;
-ms-transform-origin: 78px 78px;
transform-origin: 78px 78px;
}
.map__pin--main:hover ellipse {
fill: rgba(255, 86, 53, 0.9);
}
.map__pin--main::after {
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
content: "";
border: solid 5px transparent;
border-top: solid 18px #fff;
border-bottom: 0;
-webkit-transition: -webkit-transform 300ms ease-in;
transition: -webkit-transform 300ms ease-in;
-o-transition: transform 300ms ease-in;
transition: transform 300ms ease-in;
transition: transform 300ms ease-in, -webkit-transform 300ms ease-in;
-webkit-transform: translate(-50%, -6px);
-ms-transform: translate(-50%, -6px);
transform: translate(-50%, -6px);
border-top-width: 22px;
border-top-color: #ff5635;
}
.map--faded .map__pin--main svg {
-webkit-transform: rotate(-20deg) scale(1);
-ms-transform: rotate(-20deg) scale(1);
transform: rotate(-20deg) scale(1);
}
.map--faded .map__pin--main::after {
-webkit-transform: translate(-50%, -30px);
-ms-transform: translate(-50%, -30px);
transform: translate(-50%, -30px);
}
.map__pin--main text {
font-size: 7px;
font-weight: 700;
fill: #ffffff;
}
/**
* Фильтры объявления
*/
.map__filters-container {
width: 100%;
background-color: rgba(3, 28, 45, 0.5);
}
.map__filters {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 960px;
height: 46px;
margin: 0 auto;
-webkit-transition: opacity 300ms ease-in;
-o-transition: opacity 300ms ease-in;
transition: opacity 300ms ease-in;
opacity: 1;
}
.map--faded .map__filters {
opacity: 0;
}
.map__filter {
height: 30px;
margin-right: 10px;
font-size: 14px;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
}
.map__filter:hover {
border: 1px solid #ffaa99;
}
.map__filter:focus {
outline: none;
-webkit-box-shadow: 0 0 2px 2px #ff6547;
box-shadow: 0 0 2px 2px #ff6547;
}
.map__feature {
display: inline-block;
overflow: hidden;
width: 30px;
height: 28px;
font-size: 0;
vertical-align: middle;
cursor: pointer;
background-color: #f8f8f8;
background-image: url("../img/sprite-feature.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 25px 345px;
border-radius: 3px;
}
.map__feature--wifi {
background-position: 2px 5px;
}
.map__checkbox:checked + .map__feature--wifi {
background-position: 2px -172px;
}
.map__feature--dishwasher {
background-position: 2px -25px;
}
.map__checkbox:checked + .map__feature--dishwasher {
background-position: 2px -202px;
}
.map__feature--parking {
background-position: 3px -55px;
}
.map__checkbox:checked + .map__feature--parking {
background-position: 2px -232px;
}
.map__feature--washer {
background-position: 2px -85px;
}
.map__checkbox:checked + .map__feature--washer {
background-position: 2px -262px;
}
.map__feature--elevator {
background-position: 2px -143px;
}
.map__checkbox:checked + .map__feature--elevator {
background-position: 2px -321px;
}
.map__feature--conditioner {
background-position: 3px -114px;
}
.map__checkbox:checked + .map__feature--conditioner {
background-position: 2px -291px;
}
.map__feature:hover {
-webkit-box-shadow: inset 0 0 0 1px #ffaa99;
box-shadow: inset 0 0 0 1px #ffaa99;
}
.map__feature:focus,
.map__checkbox:focus + .map__feature {
-webkit-box-shadow: 0 0 2px 2px #ff6547;
box-shadow: 0 0 2px 2px #ff6547;
}
.map__feature:active {
-webkit-box-shadow: none;
box-shadow: none;
background-color: #ff6547;
}
.map__checkbox:checked + .map__feature {
background-color: #ff6547;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
}
/**
* Карточка объявления
*/
.map__card {
position: absolute;
z-index: 2;
top: 150px;
left: 20px;
padding: 10px 10px 20px;
width: 230px;
font-size: 12px;
border-radius: 5px;
background-color: #ffffff;
}
.popup__avatar {
position: absolute;
bottom: 100%;
left: 0;
margin-bottom: 10px;
}
.popup__close {
position: absolute;
bottom: 100%;
right: 0;
padding: 0;
font-size: 0;
border: 0;
background: none;
}
.popup__close:active {
-webkit-transform: translate(1px, 1px);
-ms-transform: translate(1px, 1px);
transform: translate(1px, 1px);
}
.popup__close:focus {
outline: none;
-webkit-box-shadow: 0 0 10px 3px #ff6547;
box-shadow: 0 0 10px 3px #ff6547;
}
.popup__close::after {
font-size: 50px;
line-height: 40px;
display: block;
content: "×";
color: #000000;
}
.popup__title {
margin: 0;
margin-bottom: 10px;
font-size: 16px;
line-height: 18px;
}
.popup__text {
margin: 0;
margin-bottom: 10px;
}
.popup__text--price {
font-size: 22px;
font-weight: 700;
}
.popup__price span {
font-size: 16px;
}
.popup__type {
margin: 0;
margin-bottom: 5px;
}
.popup__text--capacity {
margin-bottom: 0;
}
.popup__features {
margin: 0;
padding: 0;
list-style: none;
}
.popup__features {
margin-bottom: 10px;
}
.popup__feature {
display: inline-block;
overflow: hidden;
width: 30px;
height: 28px;
font-size: 0;
background-image: url("../img/sprite-feature.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 25px 345px;
}
.popup__feature--wifi {
background-position: 2px 5px;
}
.popup__feature--dishwasher {
background-position: 2px -25px;
}
.popup__feature--parking {
background-position: 3px -55px;
}
.popup__feature--washer {
background-position: 2px -85px;
}
.popup__feature--elevator {
background-position: 2px -143px;
}
.popup__feature--conditioner {
background-position: 3px -114px;
}
.popup__photos {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.popup__photo {
margin-right: 5px;
margin-bottom: 5px;
}
.popup__photo:hover {
border: 2px solid #ff5635;
}
/**
* Сообщения об успешном и неуспешном создании объявления
*/
.success,
.error {
position: fixed;
top: 0;
left: 0;
z-index: 2;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
overflow: auto;
padding-top: 300px;
text-align: center;
vertical-align: middle;
background-color: rgba(0, 0, 0, 0.8);
}
.success__message,
.error__message {
position: relative;
color: #ffffff;
font-size: 50px;
font-weight: 700;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Кексобукинг</title>
</head>
<body>
<main>
<div class="promo">
<h1 class="promo__title visually-hidden">Keksobooking. Кексы по соседству</h1>
<img src="img/keksobooking.svg" alt="Keksobooking. Кексы по соседству" width="215" height="45">
</div>
<!-- Карта объявлений -->
<section class="map map--faded">
<!-- Метки объявлений -->
<div class="map__pins">
<div class="map__overlay">
<h2 class="map__title">И снова Токио!</h2>
</div>
<button class="map__pin map__pin--main" style="left: 570px; top: 375px;">
<img src="img/muffin-red.svg" width="40" height="44" draggable="false" alt="Метка объявления">
<svg viewBox="0 0 70 70" width="156" height="156" aria-label="Метка для поиска жилья">
<defs>
<path d="M35,35m-23,0a23,23 0 1,1 46,0a23,23 0 1,1 -46,0" id="tophalf" />
</defs>
<ellipse cx="35" cy="35" rx="35" ry="35" fill="rgba(255, 86, 53, 0.7)" />
<text><textPath xlink:href="#tophalf" startOffset="0">Поставь меня куда-нибудь</textPath></text>
</svg>
</button>
</div>
Related
So pretty much I have a avatar that is floating up and down, but I also want to add a way for when you hover over it, text will slide in that says my name. I don't care if it is JavaScript or CSS, I also want to keep the hover animation that happen when you hover over the image.
Here is my code so far.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Floating Avatar</title>
<link rel="stylesheet" href="./styles/main.css">
<script src="./js/main.js" defer></script>
</head>
<body>
<div class="container">
<div class="avatar">
<img src="assets/images/avatar.png" alt="avatar" class="avatarimage"/>
</a>
</div>
</div>
</body>
</html>
CSS:
body,
html {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Helvetica', sans-serif;
background: linear-gradient(90deg, #FDBB2D 0%, #3A1C71 100%);
}
h1 {
font-size: 24px;
margin: 10px 0 0 0;
font-weight: lighter;
text-transform: uppercase;
color: #eeeeee;
}
p {
font-size: 12px;
font-weight: light;
color: #333333;
}
span a {
font-size: 18px;
color: #cccccc;
text-decoration: none;
margin: 0 10px;
transition: all 0.4s ease-in-out;
&:hover {
color: #ffffff;
}
}
#keyframes float {
0% {
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);
}
50% {
box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
transform: translatey(-20px);
}
100% {
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);
}
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.avatar {
width: 150px;
height: 150px;
box-sizing: border-box;
border: 5px white solid;
overflow: hidden;
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);
animation: float 6s ease-in-out infinite;
img { width: 1000%; height: auto; }
}
.avatarimage:hover {
transform: scale(1.05);
}
.avatarimage {
width: 100%;
transition: all .5s ease-in-out;
}
This is totally possible with CSS and isn't that hard to accomplish since you already have overflow hidden set on your .avatar class.
Basically you'll just add your name inside .avatar:
<div class="avatar">
<img src="assets/images/avatar.png" alt="avatar" class="avatarimage" />
<p class="avatarname">Your Name</p>
</div>
Then, you'll add the CSS to transition that in on the hover of .avatar:
.avatarname {
color: white;
font-size: 2rem;
left: 0;
position: absolute;
top: 0;
transform: translateX(-100%);
transition: all 0.5s ease-in-out;
}
.avatar:hover .avatarname {
transform: translateX(0%);
}
You'll also need to add position: relative; to your .avatar CSS.
Here's an example on codepen
This works, but there are some other things that we can clean up. You have a few things defined in a few places. Your img styles for example, that could be in one place, especially since you're using SCSS. Here is a cleaned up example for you:
body,
html {
height: 100%;
margin: 0;
padding: 0;
font-family: "Helvetica", sans-serif;
background: linear-gradient(90deg, #fdbb2d 0%, #3a1c71 100%);
}
#keyframes float {
0% {
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
transform: translatey(0px);
}
50% {
box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
transform: translatey(-20px);
}
100% {
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
transform: translatey(0px);
}
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.avatar {
animation: float 6s ease-in-out infinite;
border: 5px white solid;
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
box-sizing: border-box;
height: 150px;
overflow: hidden;
position: relative;
transform: translatey(0px);
width: 150px;
}
.avatar img {
object-fit: cover;
height: 100%;
transition: all 0.5s ease-in-out;
width: 100%;
}
.avatar .avatarname {
color: white;
font-size: 2rem;
left: 0;
position: absolute;
top: 0;
transform: translateX(-100%);
transition: all 0.5s ease-in-out;
}
.avatar:hover img {
transform: scale(1.05);
}
.avatar:hover .avatarname {
transform: translateX(0%);
}
<div class="container">
<div class="avatar">
<img src="https://images.unsplash.com/photo-1520423465871-0866049020b7?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg0NjUwNjI&ixlib=rb-4.0.3&q=80" alt="avatar" class="avatarimage" />
<p class="avatarname">Your Name</p>
</div>
</div>
I am working on making a search bar that will filter my site for reports(urls) based on what is typed in. It currently works sort of. It will filter the items but you have the have the menus expanded for it to filter them.
I am looking for a way to either only have the results that match the search show(get rid of the headers for the dropdowns and only show links). OR to auto expand the dropdowns when a character is typed into the search bar
(closest I could get for a repeatable example.)
function searchSite() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('searchbar');
filter = input.value.toUpperCase();
ul = document.getElementById("Sidebar");
li = ul.getElementsByTagName('li');
closestClass = ul.closest('.parent');
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
.evolve .barTop {
-webkit-transform: rotate(-45deg) translate(-8px, 8px);
transform: rotate(-45deg) translate(-8px, 8px);
}
.evolve .barMid {
opacity: 0;
transition: 0.1s ease-in;
}
.evolve .barBot {
-webkit-transform: rotate(-45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
#main {
transition: margin-left 0.5s;
position: relative
}
.content {
max-height: 0px;
overflow: hidden;
background-color: transparent;
transition: max-height 1s ease-out;
box-shadow: inset 0px 0px 7px 7px rgba(0, 0, 0, 0.15);
}
.content .content-stuff {
background-color: #20396120;
border-left: outset #203961 13px;
padding: .5rem 1rem;
}
.content .content-stuff .subcontent {
max-height: 0px;
overflow: hidden;
background-color: transparent;
transition: max-height .75s ease-out;
}
.content .content-stuff .subcontent .subcontent-stuff {
border-bottom: solid grey 3px;
padding: .5rem;
}
.button:checked+.header+.content {
max-height: inherit;
}
.subbutton:checked+.subheader+.subcontent {
max-height: inherit;
}
.content .content-stuff .clickLink {
cursor: pointer;
}
hr {
border-style: solid;
color: #20396150;
border-height: .5px;
}
ul.Links {
list-style-type: none;
margin: 0;
padding: 0px;
}
li:not(:last-child) {
margin-bottom: 10px;
}
.fade-in-image {
position: absolute;
top: 13px;
left: 60px;
transition: FadeIn 1.0s ease-in;
}
.fade-in-image h2 {
margin-top: 1px;
margin-left: 45px;
color: #fca445;
white-space: nowrap;
font-family: 'Roboto', sans-serif;
font-weight: 400;
text-shadow: 3px 6px 6px rgba(0, 0, 0, 0.19), 0px -7.5px 15px rgba(255, 255, 255, 0.10);
;
}
#keyframes slide-right {
0% {
margin-left: -10%
}
;
100 {
margin-left: 80%
}
;
}
.fade-in-image img {
position: absolute;
animation: move 3s ease infinite;
}
#keyframes move {
0% {
margin-left: -10px;
}
5% {
margin-left: -9.25px;
}
10% {
margin-left: -10px;
}
15% {
margin-left: -10px;
}
75% {
margin-left: 3px;
}
80% {
margin-left: -11.5px;
}
85% {
margin-left: -5.5px;
}
87.25% {
margin-left: -11px;
}
90% {
margin-left: -7px;
}
95% {
margin-left: -10.5px;
}
97.5% {
margin-left: -9.25px;
}
100% {
margin-left: -10px;
}
}
}
/* popup code credit: codeconvey.com */
.sidebar .pop {
position: absolute;
width: 50%;
margin: auto;
padding: 20px;
height: 50%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#media (max-width: 640px) {
.pop {
position: relative;
width: 100%;
}
}
.sidebar .pop .modal {
z-index: 2;
opacity: 0;
visibility: hidden;
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: opacity 500ms ease-in-out;
transition: opacity 500ms ease-in-out;
}
.sidebar .pop .modal__inner {
-webkit-transform: translate(-50%, -50%) scale(0.75);
transform: translate(-50%, -50%) scale(0.75);
top: 50%;
left: 50%;
width: 50%;
background: white;
padding: 30px;
position: absolute;
color: black;
}
#media (max-width: 640px) {
.pop .modal__inner {
width: 100%;
}
}
.sidebar .btn-close {
color: #fff;
text-align: center;
}
.sidebar .pop label {
position: absolute;
top: 8px;
right: 55px;
padding: 1px 19px 1px 19px;
font-size: 45px;
cursor: pointer;
transition: 0.2s;
color: #fca445;
}
.sidebar .pop label.open:hover {
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
border-radius: 5px;
background-color: #33d62b60;
font-size: 45px;
}
.sidebar .pop input {
display: none;
}
.sidebar .pop input:checked+.modal {
opacity: 1;
visibility: visible;
}
.sidebar .pop input:checked+.modal .modal__inner {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.sidebar .pop input:checked+.modal .modal__inner p {
font-size: 1.25rem;
line-height: 125%;
}
.sidebar .pop input:checked+.modal label {
position: absolute;
top: 0;
right: 0;
padding: 4px 8px 4px 8px;
font-size: 20px;
cursor: pointer;
transition: 0.2s;
color: #000;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.sidebar .pop input:checked+.modal label:hover {
background-color: #ff141860;
}
<div id="Sidebar" class="sidebar">
<p style="text-align:center;"><input id="searchbar" onkeyup="searchSite()" type="text" name="search" placeholder="Search" title="Report or Category Name" style="width: 300px;" /></p>
<input id="OpsButton" class="button" type="checkbox">
<label for="OpsButton" class="header">Operations</label>
<div class="content">
<div class="content-stuff">
<input id="Button1" class="subbutton" type="checkbox">
<label for="Button1" class="subheader">Header1</label>
<div class="subcontent">
<div class="subcontent-stuff">
<ul class="Links">
<li><a title="Region" href="X" target="bodyinfo">Region</a></li>
<li><a title="range" href="X" target="bodyinfo">range</a></li>
</ul>
</div>
</div>
<input id="FinancialButton" class="subbutton" type="checkbox">
<label for="FinancialButton" class="subheader">Financials</label>
<div class="subcontent">
<div class="subcontent-stuff">
<ul class="Links">
<li><a title="Region2" href="X" target="bodyinfo">Region2</a></li>
<li><a title="range2" href="X" target="bodyinfo">range2</a></li>
</ul>
</div>
</div>
<p>
</p>
<ul class="Links">
<li>Turnover Report</li>
</ul>
<p></p>
</div>
</div>
</div>
Okay figured it out by creating a function that will click all of the header buttons to expand the menus. and adding this function call to my main function. So if the menu is already expanded, it won't close it- otherwise it'll open it. Rinse and repeat for all buttons in your webpage.
var something = (function() {
var executed = false;
return function() {
if (!executed) {
executed = true;
var OpsButton = document.getElementById("OpsButton");
var next = document.getElementById("w/e");
if (!OpsButton.checked) {
OpsButton.click(); }
if (!next.checked) {
next.click(); }
}
};
})();
I have a div that has the name speech-bubble1 and I want to put a hover element to that, it will expand the scale however, it is not working, I have tried putting other hovering properties and they are working fine, please help me.
I want to scale the speech bubble once I hover over it. Thank you in advance!
#import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
:root {
font-size: 16px;
font-family: "Open Sans";
}
body {
margin: 0;
padding: 0;
background-color: #191921;
overflow: hidden; /* Hide scrollbars */
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-thumb {
background: #43434f;
}
main {
color: white;
margin-left: 3rem;
padding: 1rem;
}
.greetings h1 {
padding: 0;
margin: 0;
}
.text1 {
position: relative;
left: 90px;
top: 250px;
margin-left: 0;
padding: 0;
z-index: -1;
}
.text1 p {
display: block;
width: 100%;
font-family: Arial;
font-size: 20px;
margin: 0;
padding: 0;
color: #25252c;
}
.speech-bubble1 {
position: relative;
right: 20px;
display: inline-block;
background-color: white;
width: 800px;
height: 50px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble1 700ms ease-in-out 400ms;
transform: translateX(150%);
animation-fill-mode: forwards;
transition: 1s ease;
}
#keyframes speech-bubble1 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
main .speech-bubble1:hover {
width: 584px;
height: 712px;
transition: 1s ease;
}
.speech-bubble2 {
position: relative;
right: 60px;
display: inline-block;
background-color: white;
width: 800px;
height: 90px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble2 700ms ease-in-out 600ms;
animation-fill-mode: forwards;
transform: translateX(150%);
}
#keyframes speech-bubble2 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
.speech-bubble3 {
position: relative;
right: 60px;
display: inline-block;
background-color: white;
width: 800px;
height: 55px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble2 700ms ease-in-out 800ms;
animation-fill-mode: forwards;
transform: translateX(150%);
}
#keyframes speech-bubble3 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
span {
font-weight: bold;
font-size: 20px;
margin: 0;
padding: 0;
font-family: Arial Rounded MT;
}
.Aljon {
width: 484px;
height: 612px;
position: absolute;
left: 65%;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-image: url(../Resources/Aljon.png);
animation: aljon-load 300ms ease 200ms;
transform: translateY(150%);
animation-fill-mode: forwards;
transition: 1s ease;
}
#keyframes aljon-load {
0% {
transform: translateY(150%);
}
100% {
transform: translateX(0);
}
}
.Aljon:hover {
width: 584px;
height: 712px;
transition: 1s ease;
}
.navbar {
position: fixed;
background-color: var(--bg-primary);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
animation: nav-load 600ms ease-in-out;
}
#keyframes nav-load {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
.navbar-nav {
list-style: none;
padding: 110px 0 0 0;
margin: 0;
flex-direction: column;
align-items: center;
height: 100%;
bottom: 30px;
position: relative;
background-color: #23232e;
}
.nav-item a {
display: block;
text-decoration: none;
background: #23232e;
color: #ffffff;
padding: 10;
margin: 2px 0;
width: 200px;
display: flex;
align-items: center;
margin-left: -173px;
transition: 0.2s ease;
}
.nav-item a:hover {
margin-left: -5;
color: #ffffff;
font-weight: bold;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 15px 5px 5px -5px rgba(0, 3, 7, 0.8);
}
li i#active {
filter: grayscale(0) opacity(1);
background-color: #14141a;
}
li a#active {
filter: grayscale(0) opacity(1);
background-color: #14141a;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
li i {
color: white;
font-size: 27px;
padding: 0;
filter: grayscale(100%) opacity(0.1);
width: 100%;
text-align: right;
transition: 0.2s ease;
}
Li i:hover {
color: white;
filter: grayscale(0) opacity(1);
text-align: right;
transition: 0.2s ease;
}
.logo h1 {
font-family: Rustico;
font-size: 35px;
margin: 0;
padding: 0;
background: -webkit-linear-gradient(rgb(255, 7, 7), rgb(14, 14, 255));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
.logo h1:hover {
transition: 0.6s ease-in-out;
cursor: pointer;
transform: rotateZ(360deg);
}
.logo p {
color: #ececec;
position: relative;
bottom: 35px;
font-size: 10px;
font-family: APEX;
text-align: center;
}
hr {
border: 2px solid white;
padding: 0 5px;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
}
.wrapper .icon {
padding: 10px;
text-align: center;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
z-index: 2;
transition: 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span {
color: #0c0c0c;
padding: 0;
margin: 0;
display: block;
height: 40px;
width: 40px;
background: #fff;
border-radius: 50%;
position: relative;
z-index: 2;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span i {
line-height: 40px;
font-size: 25px;
text-align: center;
}
.wrapper .icon .tooltip {
position: absolute;
left: 80px;
z-index: 1;
background: #fff;
color: #fff;
padding: 10px 18px;
font-size: 20px;
font-weight: 500;
border-radius: 25px;
opacity: 0;
pointer-events: none;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
transition: 0.4s ease-in-out;
}
.wrapper .icon:hover .tooltip {
left: 50px;
top: 8px;
opacity: 1;
transition: 0.1s ease-in-out;
}
.wrapper .icon:hover span {
color: #fff;
filter: opacity(1);
}
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
}
.wrapper .facebook:hover span,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip:before {
background: #3b5999;
}
.wrapper .youtube:hover span,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip:before {
background: #de463b;
}
#loading {
position: fixed;
width: 100%;
height: 100vh;
background: #51516a url(../Resources/Loader.gif) no-repeat center center;
filter: opacity(0.1);
z-index: 99999;
}
/* Small screens */
#media only screen and (max-width: 600px) {
.navbar {
bottom: auto;
width: 100vw;
height: 3rem;
}
.navbar-nav {
flex-direction: row;
bottom: auto;
width: 100vw;
height: 3rem;
}
.wrapper .icon span {
margin-left: 450px;
bottom: 30px;
}
.wrapper .icon:hover .tooltip {
right: 100;
top: 0;
opacity: 1;
transition: 0.4s ease-in-out;
}
}
/* Large screens */
#media only screen and (min-width: 600px) {
.navbar {
top: 0;
width: 3rem;
height: 100vh;
}
}
<div class="text1">
<div class="speech-bubble1">
<p>Nice to meet you and welcome to my Website!
I'm <span>Aljon Gabriel A. Valdez</span> and I am a <span>Bachelor's of Science in Information Technology graduate.</span>
</p>
</div>
Because you have given z-index: -1; remove or make it z-index:
#import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
:root {
font-size: 16px;
font-family: "Open Sans";
}
body {
margin: 0;
padding: 0;
background-color: #191921;
overflow: hidden; /* Hide scrollbars */
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-thumb {
background: #43434f;
}
main {
color: white;
margin-left: 3rem;
padding: 1rem;
}
.greetings h1 {
padding: 0;
margin: 0;
}
.text1 {
position: relative;
left: 90px;
top: 250px;
margin-left: 0;
padding: 0;
z-index: 1;
}
.text1 p {
display: block;
width: 100%;
font-family: Arial;
font-size: 20px;
margin: 0;
padding: 0;
color: #25252c;
}
.speech-bubble1 {
position: relative;
right: 20px;
display: inline-block;
background-color: white;
width: 800px;
height: 50px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble1 700ms ease-in-out 400ms;
transform: translateX(150%);
animation-fill-mode: forwards;
transition: 1s ease;
}
.speech-bubble1:hover {
width: 100%;
}
#keyframes speech-bubble1 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
main .speech-bubble1:hover {
width: 584px;
height: 712px;
transition: 1s ease;
}
.speech-bubble2 {
position: relative;
right: 60px;
display: inline-block;
background-color: white;
width: 800px;
height: 90px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble2 700ms ease-in-out 600ms;
animation-fill-mode: forwards;
transform: translateX(150%);
}
#keyframes speech-bubble2 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
.speech-bubble3 {
position: relative;
right: 60px;
display: inline-block;
background-color: white;
width: 800px;
height: 55px;
margin: 5px;
padding: 25px;
border-radius: 500px;
animation: speech-bubble2 700ms ease-in-out 800ms;
animation-fill-mode: forwards;
transform: translateX(150%);
}
#keyframes speech-bubble3 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
span {
font-weight: bold;
font-size: 20px;
margin: 0;
padding: 0;
font-family: Arial Rounded MT;
}
.Aljon {
width: 484px;
height: 612px;
position: absolute;
left: 65%;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-image: url(../Resources/Aljon.png);
animation: aljon-load 300ms ease 200ms;
transform: translateY(150%);
animation-fill-mode: forwards;
transition: 1s ease;
}
#keyframes aljon-load {
0% {
transform: translateY(150%);
}
100% {
transform: translateX(0);
}
}
.Aljon:hover {
width: 584px;
height: 712px;
transition: 1s ease;
}
.navbar {
position: fixed;
background-color: var(--bg-primary);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
animation: nav-load 600ms ease-in-out;
}
#keyframes nav-load {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
.navbar-nav {
list-style: none;
padding: 110px 0 0 0;
margin: 0;
flex-direction: column;
align-items: center;
height: 100%;
bottom: 30px;
position: relative;
background-color: #23232e;
}
.nav-item a {
display: block;
text-decoration: none;
background: #23232e;
color: #ffffff;
padding: 10;
margin: 2px 0;
width: 200px;
display: flex;
align-items: center;
margin-left: -173px;
transition: 0.2s ease;
}
.nav-item a:hover {
margin-left: -5;
color: #ffffff;
font-weight: bold;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 15px 5px 5px -5px rgba(0, 3, 7, 0.8);
}
li i#active {
filter: grayscale(0) opacity(1);
background-color: #14141a;
}
li a#active {
filter: grayscale(0) opacity(1);
background-color: #14141a;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
li i {
color: white;
font-size: 27px;
padding: 0;
filter: grayscale(100%) opacity(0.1);
width: 100%;
text-align: right;
transition: 0.2s ease;
}
Li i:hover {
color: white;
filter: grayscale(0) opacity(1);
text-align: right;
transition: 0.2s ease;
}
.logo h1 {
font-family: Rustico;
font-size: 35px;
margin: 0;
padding: 0;
background: -webkit-linear-gradient(rgb(255, 7, 7), rgb(14, 14, 255));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
.logo h1:hover {
transition: 0.6s ease-in-out;
cursor: pointer;
transform: rotateZ(360deg);
}
.logo p {
color: #ececec;
position: relative;
bottom: 35px;
font-size: 10px;
font-family: APEX;
text-align: center;
}
hr {
border: 2px solid white;
padding: 0 5px;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
}
.wrapper .icon {
padding: 10px;
text-align: center;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
z-index: 2;
transition: 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span {
color: #0c0c0c;
padding: 0;
margin: 0;
display: block;
height: 40px;
width: 40px;
background: #fff;
border-radius: 50%;
position: relative;
z-index: 2;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span i {
line-height: 40px;
font-size: 25px;
text-align: center;
}
.wrapper .icon .tooltip {
position: absolute;
left: 80px;
z-index: 1;
background: #fff;
color: #fff;
padding: 10px 18px;
font-size: 20px;
font-weight: 500;
border-radius: 25px;
opacity: 0;
pointer-events: none;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
transition: 0.4s ease-in-out;
}
.wrapper .icon:hover .tooltip {
left: 50px;
top: 8px;
opacity: 1;
transition: 0.1s ease-in-out;
}
.wrapper .icon:hover span {
color: #fff;
filter: opacity(1);
}
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
}
.wrapper .facebook:hover span,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip:before {
background: #3b5999;
}
.wrapper .youtube:hover span,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip:before {
background: #de463b;
}
#loading {
position: fixed;
width: 100%;
height: 100vh;
background: #51516a url(../Resources/Loader.gif) no-repeat center center;
filter: opacity(0.1);
z-index: 99999;
}
/* Small screens */
#media only screen and (max-width: 600px) {
.navbar {
bottom: auto;
width: 100vw;
height: 3rem;
}
.navbar-nav {
flex-direction: row;
bottom: auto;
width: 100vw;
height: 3rem;
}
.wrapper .icon span {
margin-left: 450px;
bottom: 30px;
}
.wrapper .icon:hover .tooltip {
right: 100;
top: 0;
opacity: 1;
transition: 0.4s ease-in-out;
}
}
/* Large screens */
#media only screen and (min-width: 600px) {
.navbar {
top: 0;
width: 3rem;
height: 100vh;
}
}
<div class="text1">
<div class="speech-bubble1">
<p>Nice to meet you and welcome to my Website!
I'm <span>Aljon Gabriel A. Valdez</span> and I am a <span>Bachelor's of Science in Information Technology graduate.</span>
</p>
</div>
1"
.text1 {
position: relative;
left: 90px;
top: 250px;
margin-left: 0;
padding: 0;
z-index: -1;
}
and add:
.speech-bubble1:hover {
width: 100%;
}
If you just want scale the "speech bubble" when hover it, you need to :
FIRST = replace translate animation on <div class="text1">
SECOND = place a scale transform on <div class="speech-bubble1">
Like this :
.text1 {
position: relative;
left: 90px;
top: 250px;
margin-left: 0;
padding: 0;
z-index: -1;
}
.text1 p {
display: block;
width: 100%;
font-family: Arial;
font-size: 20px;
margin: 0;
padding: 0;
color: #25252c;
animation: speech-bubble1 700ms ease-in-out 400ms;
transform: translateX(150%);
animation-fill-mode: forwards;
transition: 1s ease;
}
.speech-bubble1 {
position: relative;
right: 20px;
display: inline-block;
background-color: white;
width: 800px;
height: 50px;
margin: 5px;
padding: 25px;
border-radius: 500px;
}
.speech-bubble1:hover {
width: 584px;
height: 712px;
transform: scale(1.1);
transition: 1s ease;
}
#keyframes speech-bubble1 {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0);
}
}
I would like to add the full page parallax scroll effect on a one-page website, but I have no idea how to add this effect.
I have tried to set up the section height: 100vh, but the result goes out that the last section covers the above sections.
Do you have any suggestions? Any help is appreciated. Thank you so much.
HTML:
<html lang="en">
<body>
<div class="twinkling"></div>
<header>
<div class="header-container">
<h1>Constellations</h1>
</div>
<div class="button-container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>12 Constellations</li>
<li>Stargazing</li>
</ul>
</nav>
</div>
</header>
<section id="section1" class="background">
<div id="crystal-animation">
<figure>
<img src="img/crystal.svg" alt="" class="crystal">
</figure>
</div>
</section>
<section id="section2" class="background">
<article class="content">
<h2>What is Constellations?</h2>
<p>Constellations are patterns in the night sky often formed by the most prominent stars to the naked eye. </p>
<p>Constellations often carry names and take the shape of gods, hunters, princesses, objects and mythical beasts associated with Greek mythology – however, at times. </p>
<aside><img src="img/crystal-animation.svg" alt="" class="crystal-animation"></aside>
</article>
</section>
<section id="section3" class="background">
<h2 >12 Constellations</h2>
<p>Click the constellation cards and understand more.</p>
<div class="card">
<ul class="gallery">
<li><img src="img/12-constellation-cards/1.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/4.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/7.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/10.svg" alt="" class="svg"></li>
</ul>
<ul class="gallery">
<li><img src="img/12-constellation-cards/2.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/5.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/8.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/11.svg" alt="" class="svg"></li>
</ul>
<ul class="gallery">
<li><img src="img/12-constellation-cards/3.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/6.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/9.svg" alt="" class="svg"></li>
<li><img src="img/12-constellation-cards/12.svg" alt="" class="svg"></li>
</ul>
</div>
</section>
<section id="section4" class="background">
<div class="s3-content">
<h2>How to Find Constellations in the Night Sky?</h2>
<p class="s3">Using a star map will be your best bet for assisting in finding where to look for constellations, depending on your location and time of year. It’s different depending on where you live and on the seasons. You can also need the additional app to help find the constellations, that lets you enter your location and gives you a customized star map. </p>
<p class="s3">All you need is a dark sky, so as far away from cities as possible, and for extra visual aide, a pair of binoculars or a telescope. With binoculars or a telescope, you’ll see fainter stars and other features like nebulae and star clusters. When you’re out observing, you’ll want to generally orient yourself towards the North Star.</p>
</div>
</section>
</body>
</html>
JavaScript:
$(document).ready(function () {
let hamburgerClicked = false;
$("#toggle").on("click", function () {
if (hamburgerClicked == false) {
$(".top").css(
"transform",
"translateY(11px) translateX(0) rotate(45deg)"
);
$(".middle").css("display", "none");
$(".bottom").css(
"transform",
"translateY(-11px) translateX(0) rotate(-45deg)"
);
hamburgerClicked = true;
} else {
$(".top").css("transform", "translateY(0px) translateX(0) rotate(0deg)");
$(".middle").css("display", "");
$(".bottom").css(
"transform",
"translateY(0px) translateX(0) rotate(0deg)"
);
hamburgerClicked = false;
}
$("#overlay").toggleClass("active");
$("#overlay").toggleClass("open");
});
});
CSS:
* {
box-sizing: border-box;
list-style: none;
}
html {
height: 100%;
scroll-behavior: smooth;
}
body {
height: 100%;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 200;
font-size: 15px;
color: #fff;
background-image: url(../img/background/background.png);
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#meteor-shower {
position: absolute;
top: 0;
left: 0;
}
section {
height: 100vh;
transform: translateY(40vh);
will-change: transform;
transform: translateY(30vh);
transition-timing-function: .2s all, cubic-bezier(0.22, 0.44, 0, 1);
text-decoration: none;
scroll-behavior: smooth;
}
.twinkling {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 95%;
display: block;
}
.twinkling {
position: absolute;
background: transparent url(../img/background/2446101-03.png) repeat top center;
background-color: rgba(0, 0, 0, 0);
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
-webkit-animation: move-twink-back 16s infinite;
-moz-animation: move-twink-back 16s infinite;
-o-animation: move-twink-back 16s infinite;
animation: move-twink-back 16s infinite;
}
#keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
#-webkit-keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
header {
height: 3em;
position: fixed;
}
.header-container {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.header-container h1 {
font-family: 'Gabriela', serif;
font-size: 1.5em;
float: left;
padding-top: 5px;
padding-left: 20px;
display: block;
}
.button-container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity 0.25s ease;
opacity: 1;
content: "";
}
.button-container:hover {
opacity: 0.7;
}
.top:active {
transform: translate(11px) translateX(0) rotate(45deg);
}
.middle:active {
opacity: 0;
}
.bottom:active {
transform: translateY(-11px) translateX(0) rotate(-45deg);
}
span {
background: #fff;
border: none;
height: 4px;
width: 32px;
position: absolute;
top: 0;
left: 0;
transition: all 0.35s ease;
cursor: pointer;
border-radius: 3px;
}
.middle {
top: 10px;
}
.bottom {
top: 20px;
}
.overlay {
z-index: 500;
position: fixed;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
width: 5%;
height: 0%;
opacity: 0.6;
visibility: hidden;
transition: opacity 0.35s, visibility 0.35s, height 0.35s;
}
li {
animation: fadeInRight 0.5s ease forwards;
animation-delay: 0.35s;
}
li:nth-of-type(2) {
animation-delay: 0.4s;
}
li:nth-of-type(3) {
animation-delay: 0.45s;
}
li:nth-of-type(4) {
animation-delay: 0.5s;
}
nav {
position: relative;
height: 70%;
top: 20%;
transform: translateY(-50%);
font-size: 0.8em;
}
ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
li {
display: block;
height: 25%;
min-height: 50px;
position: relative;
opacity: 0;
}
a {
display: block;
position: relative;
text-decoration: none;
overflow: hidden;
}
a:hover {
transform: scale(1);
}
a:hover:after,
a:focus:after,
a:active:after {
width: 30%;
}
a:after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: rgba(0, 0, 0, 0.6);
transition: 0.35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.active {
visibility: visible;
}
#section1 {
background: rgba(0, 0, 0, 0);
height: 100vh;
}
#section1 {
:nth-child(1) {
padding-top: 0px;
display: flex;
}
}
#crstal-animation {
overflow: hidden;
display: block;
}
.crystal {
width: 25%;
position: absolute;
top: -46px;
left: 40%;
margin: 0;
margin-right: -50%;
transform-style: preserve-3d;
-webkit-animation: rotation 8s infinite linear;
-moz-animation: rotation 8s infinite linear;
-o-animation: rotation 8s infinite linear;
animation: rotation 8s infinite linear;
}
#-webkit-keyframes rotation {
0% {
-webkit-transform: rotate(0deg);
filter: drop-shadow(16px 16px 10px rgb(255, 255, 255, 0.8));
}
35% {
-webkit-transform: rotate(38deg) rotateX(5deg);
filter: drop-shadow(0px 10px 16px rgb(255, 255, 255, 0.8));
}
65% {
-webkit-transform: rotate(-38deg) rotateX(2deg);
filter: drop-shadow(16px 0px 10px rgb(255, 255, 255, 0.8));
}
86% {
-webkit-transform: rotateX(-20deg) rotateY(1deg);
filter: drop-shadow(0px 10px 16px rgb(255, 255, 255, 0.8));
}
100% {
-webkit-transform: rotate(0deg);
filter: drop-shadow(16px 16px 10px rgb(255, 255, 255, 0.8));
}
}
#section2 {
padding: 60px 130px;
display: inline-block;
background: rgba(0, 0, 0, 0);
height: 100vh;
}
.content {
width: 59%;
background: rgba(0, 0, 0, 0.6);
position: relative;
padding-bottom: 30px;
padding-left: 30px;
display: block;
}
.content p {
width: 88%;
margin: 15px;
text-align: left;
}
.content h2 {
text-align: center;
padding-top: 30px;
}
.crystal-animation {
width: 68%;
float: right;
margin-top: -56%;
margin-right: -80%;
-webkit-filter: drop-shadow(5px 5px 5px #222);
-moz-filter: drop-shadow(5px 5px 5px #222);
-o-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
aside {
display: block;
}
#section3 {
background: rgba(0, 0, 0, 0);
height: 100vh;
}
#section3:nth-child(2) {
display: flex;
align-items: center;
justify-content: center;
}
.gallery {
list-style: none outside none;
flex-direction: row;
display: flex;
align-content: center;
flex-flow: row wrap;
justify-content: center;
}
h2,
p {
text-align: center;
}
.heading {
text-align: center;
}
.gallery li {
margin: 10px;
}
.gallery li:hover {
transform: scale(1.1)
}
.svg {
width: 75%;
filter: drop-shadow(10px)rgba(0, 0, 0, 0.6);
-moz-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
}
#section3-content {
padding-right: 100px;
padding-left: 100px;
margin-top: -90px;
overflow: hidden;
transition-timing-function: ease;
transition: .3s;
}
.intro h3 {
font-family: 'Gabriela', serif;
}
.content-text {
background: rgba(0, 0, 0, 0.8);
position: relative;
padding-bottom: 30px;
padding-left: 20px;
}
.constellation-img {
opacity: .35;
width: 50%;
float: left;
top: -80px;
position: relative;
}
.constellation-star {
width: 56%;
opacity: 1;
float: left;
left: 1%;
margin-top: -80px;
position: absolute;
}
.intro {
float: right;
width: 50%;
top: 40%;
padding-top: 30px;
padding-bottom: 10px;
padding-right: 100px;
color: floralwhite;
}
.constellation-pattern {
width: 11%;
opacity: .9;
margin-left: -10px;
margin-bottom: -15px;
}
.intro p {
text-align: left;
font-size: .9em;
margin-bottom: 15px;
font-weight: 200;
}
.constellation-icon {
list-style: none;
padding: 0;
margin: 0;
display: block;
}
.constellation-icon li {
display: table-cell;
vertical-align: middle;
padding: 1px;
padding-top: 15px;
}
.constellation-button {
width: 50%;
}
.constellation-button:hover {
background: rgb(0, 0, 205, 0.7);
filter: brightness(3);
border-radius: 80px;
border: 2px solid rgb(0, 0, 205, 0.7);
}
.constellation-button:active {
background: rgb(0, 0, 205);
filter: grayscale(.2);
transition-timing-function: linear;
}
.constellation-star-aq {
width: 46%;
opacity: 1;
float: left;
left: 1%;
margin-top: -10px;
position: absolute;
}
.constellation-star-ca {
width: 36%;
opacity: 1;
float: left;
left: 1%;
margin-top: 30px;
margin-left: 40px;
position: absolute;
transform: rotate(16deg);
}
.constellation-img-ca {
opacity: .35;
width: 50%;
float: left;
top: -40px;
position: relative;
}
.constellation-star-ge {
width: 36%;
opacity: 1;
float: left;
left: 1%;
margin-top: 90px;
margin-left: 60px;
position: absolute;
transform: rotate(-3deg);
}
.constellation-img-leo {
opacity: .35;
width: 50%;
float: left;
top: -40px;
position: relative;
}
.constellation-star-leo {
width: 40%;
opacity: 1;
float: left;
left: 1%;
margin-top: 20px;
margin-left: 70px;
position: absolute;
transform: rotate(5deg);
}
.constellation-img-sc {
opacity: .35;
width: 50%;
float: left;
top: -20px;
position: relative;
}
#section4 {
height: 100vh;
display: block;
align-content: center;
background: rgba(0, 0, 0, 0.8);
position: relative;
padding: 0;
margin: 0;
}
.s3 {
text-align: left;
}
.s3-content {
width: 74%;
padding-top: 16%;
padding-left: 30%;
}
Here is a rough working demo on JSFiddle: https://jsfiddle.net/ha3c04yL/4/
Here is a link to my webpage https://taniaswebpages.com/, specifically Website 5 - Snowfall that I am currently working on, the webpage only works for me on Safari on Iphone6s, and doesn't apply the css on Mac Chrome/Safari. But for others it works... why is it changing depending on the type of platform or user?
HTML/CSS:
body.mainpage2 {
margin: 0;
padding: 0;
font-family: lato;
background-color: #e74c3c;
}
.color {
margin-top: 350px;
text-align: center;
}
#hex {
display: block;
color: white;
font-size: 40px;
text-transform: uppercase;
margin: 15px;
letter-spacing: 0.1em;
}
.color button {
background: none;
outline: none;
color: white;
border: 2px solid white;
cursor: pointer;
font-size: 22px;
border-radius: 5px;
box-shadow: 5px 6px 30px 5px #fff;
width: 200px;
}
body.mainpage3 {
background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(221, 106, 95, 0.81));
margin: 0;
padding: 2em 2em 4em;
font-family: Lato;
font-size: 16.5px;
line-height: 24px;
float;
align-content: flex-start;
display: block;
}
input[type=button] {
width: 8%;
border: none;
padding: 8px 8px;
cursor: pointer;
color: palevioletred;
}
.image1 {
position: relative;
right: -400px;
bottom: 600px;
animation: shake 0.9s;
animation-iteration-count: infinite;
}
.image2 {
position: relative;
right: -100px;
bottom: 200px;
animation: shake 0.9s;
animation-iteration-count: infinite;
}
#keyframes shake {
0% {
transform: translate(1px, 1px) rotate(0deg);
}
10% {
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
transform: translate(-3px, 0px) rotate(1deg);
}
30% {
transform: translate(3px, 2px) rotate(0deg);
}
40% {
transform: translate(1px, -1px) rotate(1deg);
}
50% {
transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
transform: translate(-3px, 1px) rotate(0deg);
}
70% {
transform: translate(3px, 1px) rotate(-1deg);
}
80% {
transform: translate(-1px, -1px) rotate(1deg);
}
90% {
transform: translate(1px, 2px) rotate(0deg);
}
100% {
transform: translate(1px, -2px) rotate(-1deg);
}
}
body.mainpage4 {
margin: 0;
padding: 0;
background-color: darkseagreen;
}
.container1 {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.container1 span {
text-transform: uppercase;
display: block;
}
.Words1 {
color: forestgreen;
font-family: monospace;
font-size: 60px;
font-weight: 700;
letter-spacing: 6px;
margin-bottom: 4px;
position: relative;
}
.Words2 {
color: red;
font-family: cursive;
font-size: 40px;
font-weight: 750;
letter-spacing: 2px;
animation: blinkingText 1s linear infinite;
}
#keyframes blinkingText {
0% {
color: #f00;
}
49% {
color: transparent;
}
50% {
color: transparent;
}
99% {
color: transparent;
}
100% {
color: #f00;
}
}
.image {
background-size: cover;
width: 100%;
height: 1000px;
position: relative;
overflow: hidden;
}
.snow1 {
background: url(https://taniaswebpages.com/snow.png);
background-repeat: repeat;
width: 100%;
height: 2000px;
position: absolute;
top: 0;
left: 0;
animation: snowfall 3s infinite linear;
}
.snow2 {
background: url(snow.png);
background-repeat: repeat;
width: 100%;
height: 2000px;
position: absolute;
top: 0;
left: 0;
animation: snowfall 8s infinite linear;
}
#keyframes snowfall {
0% {
background-position: 0px 0px
}
100% {
background-position: 100px 650px
}
}
#keyframes snowfallSecond {
0% {
background-position: 0px -100px
}
100% {
background-position: 0px 650px
}
}
<!DOCTYPE html>
<html>
<head>
<link href="taniaWebsite2.css" type=text/css rel=Stylesheet>
</head>
<body class="mainpage4">
<div class="container1">
<span class="Words1">Merry Christmas</span>
<span class="Words2"> and Happy Holidays!</span>
</div>
<div class="image">
<div class="snow1"></div>
<div class="snow2"></div>
</div>
</body>
</html>
Try changing
<link href="taniaWebsite2.css" type=text/css rel=Stylesheet>
to
<link href="taniaWebsite2.css" type="text/css" rel="stylesheet">
With quotes around the attribute values and all lowercase.