I'm new with css and not formulating my solution search correctly to figure out my problem.
Here's what I'm trying to do:
web page on load
The top row has a static box1 and another box when on mouse_over of the ?, it expands, which pushes the second row down. (props to https://codepen.io/MrJonesOBA/pen/jEzwbJ for this cool code bit)
page after mouse over (current behavior)
I'd like second row (box3) not to be pushed down, so I figure I'm trying to let box 2 ('?') overflow.
I've included the code below. Thanks.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- this is an example from the MDN Layout Cookbook -->
<title>CSS Cookbook: columns with grid</title>
<style>
body {
background-color: #fff;
color: #333;
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
}
.container {
border: 2px solid rgb(75, 70, 74);
border-radius: .5em;
padding: 20px;
width: 500px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
.my-container {
width: 500px;
padding: 10px;
border: 2px solid rgb(95, 97, 110);
border-radius: .5em;
margin: 0;
}
.container>* {
padding: 10px;
border: 2px solid rgb(95, 97, 110);
border-radius: .5em;
margin: 0;
}
.help {
width: 40px;
margin: 0 auto;
}
.help .question {
height: 40px;
width: 40px;
background: #ccc;
font-size: 32px;
line-height: 40px;
text-align: center;
border-radius: 50%;
cursor: pointer;
}
.help .popup, .help .popup2 {
width: 560px;
height: 0px;
text-align: left;
overflow: hidden;
position: relative;
background: #eee;
opacity: 0;
transition: 1s;
}
.help .popup {
left: -40px;
top: 10px;
}
.help .popup2 {
height: 220px;
}
.help .popup2 h4 {
font-size: 18px;
padding: 10px;
margin: 0;
}
.help:hover .popup {
opacity: 1;
height: 270px;
}
.help .tell-me p:first-child {
color: #317eac;
cursor: pointer;
}
.tell-me {
width: 150px;
}
.help .tell-me:hover .popup2 {
top: -220px;
opacity: 1;
}
.help .popup h3 {
margin: 0;
padding: 10px 0 0 10px;
height: 30px;
background: #555;
color: #fff;
font-weight: 400;
font-size: 18px;
}
.help .popup p {
font-size: 14px;
padding: 10px;
margin: 0;
}
.help .popup .popup2 .sub-levels {
padding: 0 0 10px 140px;
}
.help .popup .popup2 .sub-levels strong {
font-size: 20px;
}
.help .popup .popup2 p:nth-child(5) {
padding: 20px 0 0 10px;
}
.help .popup a {
text-decoration: none;
color: #317eac;
}
.help .popup a:visited {
color: #317eac;
}
.help .popup p em {
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<!--div class="flexrow"></div-->
<div >
<h5 class="mt-3 mb-3 p-2">
Box 1
</h5>
</div>
<div class="offset-2">
<div class="help">
<div class="my-flex-container-2">
<div class="question">?</div>
<div class="popup">
<h5>my help header</h5>
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="my-container">
Box 3
</div>
</body>
</html>
Related
Creating a simple product landing page, I'm done with the first part of the webpage. When I try to write a new section for "Why fly with us" that ideally, a user would scroll down to from the first part, and every new element appears on top of the first part.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.nav-container {
height: 70px;
background-color: rgb(0, 221, 221);
}
.navbar {
display: grid;
grid-template-columns: 0.2fr auto 1fr;
align-items: center;
height: 80px;
width: 90%;
max-width: 1720px;
margin: 0 auto;
}
#navbar-logo {
color: white;
justify-self: start;
}
#navbar-logo {
cursor: pointer
}
.nav-menu {
display: grid;
grid-template-columns: repeat(5, auto);
list-style: none;
font-size: 1.2rem;
text-align: center;
width: 50%;
justify-self: end;
}
.nav-links {
color: white
}
.nav-links:hover {
color: #f9e506;
transition: all 0.3s ease-out;
}
.nav-links-btn {
background-color: #f9e506;
padding: 6px 16px;
border-radius: 4px;
}
.nav-links-btn:hover {
background-color: transparent;
color: white;
padding: 5px 15px;
border-radius: 4px;
border: solid 1px #f9e506;
transition: all 0.3s ease-out;
}
.container {
position: fixed;
top: 38%;
left: 32%;
text-align: center;
}
h1 {
color: white;
font-size: 5rem;
margin: 0 0 1rem;
#media (max-width: $bp-s) {
font-size: 2rem;
}
}
h2 {
color: white;
font-weight: 300;
font-size: 2.2rem;
margin: 0 0 1rem;
#media (max-width: $bp-s) {
font-size: 1.5rem;
}
}
h3 {
color: white;
font-weight: 300;
font-size: 2.5rem;
margin: 0 0 1rem;
#media (max-width: $bp-s) {
font-size: 1.5rem;
}
}
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
background-image: url("61766.jpg");
background-repeat: no-repeat;
background-size: cover;
font-family: 'Heebo', sans-serif;
font-size: 100%;
line-height: 1.45;
}
.btn {
width: 300px;
height: 80px;
border: none;
color: aqua;
background-color: #04d9ff;
border-radius: 4px;
box-shadow: inset 0 0 0 0 #f9e506;
transition: ease-out 0.3s;
font-size: 2rem;
outline: none;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: white;
}
.btn:hover {
box-shadow: inset 300px 0 0 0 #f9e506;
cursor: pointer;
color: #000;
}
.description {
background-color: aliceblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>iTravel Agency</title>
<link rel="stylesheet" href="style.css"/>
<script src="script.js"></script>
</head>
<body>
<header>
<div class="nav-container">
<nav class="navbar">
<h3 id="navbar-logo">iTravel</h3>
<div class="menu-toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="nav-menu">
<li>Home</li>
<li>Flights</li>
<li>Hotels</li>
<li>My Bookings</li>
<li>Log In</li>
</ul>
</nav>
</div>
<div class="container">
<h1>iTravel</h1>
<h2>Travelling has never been easier</h2>
<button class="btn">Book Flights Now</button>
</div>
</header>
<div>
<section class="description">
<h4>Why fly with us?</h4>
<p>A travel agency like ours offers a one-stop solution for all your travel needs. From finding the perfect destination to planning..
</p>
</section>
</div>
</body>
</html>
I thought I might've failed to close a HTML tag but I've checked thoroughly and that's not the case. I've tried putting the next part in a div, I've also tried using the section tag but both attempts yielded the same results. I inspected the CSS, especially the html and body selectors, and even tweaked some of the values but to no avail. I suspect I'm missing a very minute detail and would appreciate a keener more experienced eye could help.
I think this might be what you were trying to accomplish. Basically, if you wrap each of your "sections" in an absolute positioned container (I used section) and then within each section have a fixed position container, you can achieve a parallax scroll effect. Assuming each section is 100vh, the trick is that each container needs to have its top property set to 100vh + the top property of the previous section (so the first one is 0, second is 100vh, third is 200vh...). Additionally, each successive section needs a higher z-index.
Run the snippet below and open it in full screen mode to test it out.
/* GLOBAL STYLES */
:root {
--navBarHeight: 3.5rem;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
height: 100%;
background-image: url("61766.jpg");
background-repeat: no-repeat;
background-size: cover;
font-family: 'Heebo', sans-serif;
font-size: 100%;
line-height: 1.45;
}
h1 {
font-size: 5rem;
}
h2 {
font-weight: 300;
font-size: 2.2rem;
}
h3 {
font-weight: 300;
font-size: 2.5rem;
}
a {
color: inherit;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: white;
}
/* NAVBAR STYLES */
.nav-container {
color: white;
background-color: rgb(0, 221, 221);
position: fixed;
width: 100%;
z-index: 1000;
height: var(--navBarHeight);
padding: 0 1rem;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
#navbar-logo {
cursor: pointer;
}
.nav-menu {
display: flex;
margin: 0;
padding: 0;
list-style: none;
gap: .5rem;
}
.nav-links:hover {
color: #f9e506;
transition: all 0.3s ease-out;
}
.nav-links-btn {
background-color: #f9e506;
padding: 6px 16px;
border-radius: 4px;
}
.nav-links-btn:hover {
background-color: transparent;
color: white;
padding: 5px 15px;
border-radius: 4px;
border: solid 1px #f9e506;
transition: all 0.3s ease-out;
}
/* MAIN STYLES: PARALLAX SECTIONS */
main {
position: relative;
}
section {
text-align: center;
position: absolute;
width: 100%;
height: 100vh;
overflow: hidden;
clip: rect(0, auto, auto, 0);
padding: 1rem;
box-shadow: inset 0 1px 2rem hsl(0 0% 0% / .05);
background-color: white;
}
.fixed {
overflow: hidden;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding-top: calc(1rem + var(--navBarHeight));
}
section:nth-child(1) {
top: 0;
z-index: 1;
}
section:nth-child(2) {
top: 100vh;
z-index: 2;
}
section:nth-child(3) {
top: 200vh;
z-index: 3;
}
section:nth-child(4) {
top: 300vh;
z-index: 4;
}
.booknow {
background-color: white;
}
.description {
background-color: lightcyan;
}
.findDeals {
background-color: white;
}
.explore {
background-color: lightyellow;
}
.btn {
width: 300px;
height: 80px;
border: none;
color: aqua;
background-color: #04d9ff;
border-radius: 4px;
box-shadow: inset 0 0 0 0 #f9e506;
transition: ease-out 0.3s;
font-size: 2rem;
outline: none;
}
.btn:hover {
box-shadow: inset 300px 0 0 0 #f9e506;
cursor: pointer;
color: #000;
}
<header>
<div class="nav-container">
<nav class="navbar">
<h3 id="navbar-logo">iTravel</h3>
<div class="menu-toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="nav-menu">
<li>Home</li>
<li>Flights</li>
<li>Hotels</li>
<li>My Bookings</li>
<li>Log In</li>
</ul>
</nav>
</div>
</header>
<main>
<section class="booknow">
<div class="fixed">
<h1>iTravel</h1>
<h2>Travelling has never been easier</h2>
<button class="btn">Book Flights Now</button>
</div>
</section>
<section class="description">
<div class="fixed">
<h3>Why fly with us?</h3>
<p>A travel agency like ours offers a one-stop solution for all your travel needs. From finding the perfect destination to planning...</p>
</div>
</section>
<section class="findDeals">
<div class="fixed">
<h3>Check out these deals!</h3>
</div>
</section>
<section class="explore">
<div class="fixed">
<h3>Explore destinations</h3>
</div>
</section>
</main>
The main problem here is the positioning used for the first element (.container). With position: absolute & position: fixed the elements are removed from the normal flow of the document.
In other words they take no space during layout calculation and therefore are ignored while placing elements that are in the normal document flow.
I have a navbar at the top of my page with an image logo and some hyperlinks. I want to make it so the image is always the max height it can be while staying within the foot print of the navbar. Here's what I mean:
As you can see, the image in the top left has 10px padding, but the image is slightly too small and has a larger gap at the bottom.
This is my code:
HTML:
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<title>Home | Aeron</title>
<link rel="icon" type="image/x-icon" href="./images/favicon.png">
<link rel="stylesheet" media="screen and (min-width: 1294px)" href="main.css">
<link rel="stylesheet" media="screen and (max-width: 1294px)" href="mobile.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="header">
<img src="./images/logo.png" title="Aeron" alt="logo" class="header-logo">
<div class="desktop-nav">
<ul class="desktop-nav-links">
<li>Home</li>
<li>Portfolio</li>
<li>Contact me</li>
<li>About me</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
</ul>
</div>
</body>
</html>
CSS:
html {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
height: 100%;
}
body {
margin: 0;
background: linear-gradient(45deg, #280036 0%, #000836 100%);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
}
.header-logo {
margin: 10px;
float: left;
height: 72px;
}
.header {
background-color: #000000;
overflow: hidden;
width: 100%;
}
.desktop-nav-links {
float: right;
margin-right: 1.5vw;
}
.desktop-nav-links a {
margin: 1.5vw;
display: block;
color: white;
font-size: 1vw;
}
.desktop-nav-links li {
float: left;
list-style: none;
}
How can I make it so no matter what screen size is, the image is always as big as it can be without influening the navbar height?
Basically by making it position:absolute inside the position:relative header, you can control where it begins top:0 and where it'll end bottom:0.
Update:
We will wrap the image inside a container. That container will take 100% of the height by using absolute position with top and bottom equals 0. It will have a padding of the desired 10px, where as inside of it the image will reside having a height of 100%.
:root {
color-scheme: dark;
}
html {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
height: 100%;
}
body {
margin: 0;
background: linear-gradient(45deg, #280036 0%, #000836 100%);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
}
.heading {
margin: 20px;
font-size: 2.5vw;
text-align: center;
color: #ffffff;
}
p {
color: #ffffff;
font-size: 20px;
}
a {
text-decoration: none;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 0%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 50px;
right: 50px;
z-index: 99;
border: none;
background-color: #3a3a3a;
cursor: pointer;
border-radius: 100px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #2a2a2a;
}
.progress-container {
padding: 10px;
}
.headar-logo-container {
position: absolute;
left: 0;
top: 0;
bottom: 0;
padding: 10px;
}
.header-logo {
height: 100%;
}
.header {
background-color: #000000;
overflow: hidden;
width: 100%;
position: relative;
}
.desktop-nav-links {
float: right;
margin-right: 1.5vw;
}
.desktop-nav-links a {
margin: 1.5vw;
display: block;
color: white;
font-size: 1vw;
}
.desktop-nav-links a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav-links li {
float: left;
list-style: none;
}
.menu-button {
display: none;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #000000;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
.footer-links p {
margin: 0;
}
.footer-links a {
color: #ffffff;
margin: auto 10px auto 10px;
}
.footer-links a:hover {
color: #b4b4b4;
}
.about {
text-align: center;
padding: 0 300px;
}
.mobile-nav {
display: none;
}
.footer-logo {
width: 160px;
}
.table-container {
display: grid;
grid-template-columns: auto;
justify-content: center;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
background-color: white;
color: black;
border: 2px solid black;
}
td,
th {
border: 1px solid black;
padding: 10px 20px;
}
th {
font-size: 20px;
}
td {
font-size: 15px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.output {
display: grid;
grid-template-columns: auto;
justify-content: center;
border-radius: 10px;
}
.total1 {
border: none;
}
.pc-border-title {
text-align: center;
}
.intro-heading {
font-size: 25px;
text-align: center;
color: #ffffff;
}
.pcbuilder-link {
color: #cecece;
}
.pcbuilder-link:hover {
color: #adadad;
}
.table-heading {
font-size: 50px;
text-align: center;
color: #000000;
margin-bottom: 10px;
margin-top: 0px;
border: 2px solid #000000;
}
#photo {
padding: 10px;
background-color: #ffffff;
border-radius: 10px;
}
.scrn_button {
font-size: 30px;
background-color: #bfbfbf;
border: 2px solid black;
border-radius: 10px;
color: black;
}
.scrn_button:hover {
cursor: pointer;
background-color: #9b9b9b;
}
.scrn_button:active {
background-color: #797979;
}
.contact-form {
border-radius: 10px;
background-color: #ffffff;
color: #000000;
padding: 10px;
width: auto;
}
.input {
width: 100%;
background-color: #bfbfbf;
border: none;
color: black;
border-radius: 10px 0px 10px 0px;
padding: 5px;
font-size: 18px;
}
.contact-form-container {
margin: 10px 300px;
}
.submit-button-container {
text-align: center;
}
.submit-button {
font-size: 25px;
border-radius: 10px;
border: none;
background-color: #818181;
user-select: none;
}
.submit-button:active {
background-color: #414141;
transition: ease 0.1s;
}
#keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.price::before {
content: "\00a3";
}
#msg {
background-color: #bfbfbf;
border: none;
color: black;
border-radius: 10px 0px 10px 0px;
padding: 5px;
resize: none;
width: 100%;
font-size: 15px;
}
.submit-button:hover::after {
content: ' >';
}
.upload-label {
background-color: #0030b0;
color: white;
padding: 10px;
font-size: 18px;
border-radius: 5px;
cursor: pointer;
border: none;
user-select: none;
}
.upload {
margin: 10px;
text-align: center;
}
#output {
width: 100%;
text-align: center;
padding: 10px;
}
.portfolio-intro {
font-size: 30px;
}
.content {
margin: 10px;
}
.professional:hover:before {
content: 'un-';
font-weight: bolder;
}
.learn-more {
color: #ffd000;
font-size: 20px;
}
.learn-more:hover {
color: #dab200;
transition: all ease 0.3s;
}
.learn-more:active {
color: #bb9900;
transition: all 0s;
}
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<title>Home | Aeron</title>
<link rel="icon" type="image/x-icon" href="./images/favicon.png">
<link rel="stylesheet" media="screen and (min-width: 1294px)" href="main.css">
<link rel="stylesheet" media="screen and (max-width: 1294px)" href="mobile.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="header">
<div class="headar-logo-container">
<img src="https://picsum.photos/30/20" title="Aeron" alt="logo" class="header-logo">
</div>
<div class="desktop-nav">
<ul class="desktop-nav-links">
<li>Home</li>
<li>Portfolio</li>
<li>Contact me</li>
<li>About me</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
</ul>
</div>
<div class="mobile-nav">
<span class="menu-button" onclick="openNav()">☰</span>
<div id="mobile-nav-panel" class="mobile-nav-panel">
+
<ul class="mobile-nav-link-list">
<li class="mobile-nav-link">Home</li>
<hr>
<li class="mobile-nav-link">Portfolio</li>
<hr>
<li class="mobile-nav-link">Contact me</li>
<hr>
<li class="mobile-nav-link">About me</li>
<hr>
<li class="mobile-nav-link">Recipes</li>
<hr>
<li class="mobile-nav-link">Progress</li>
<hr>
<li class="mobile-nav-link">PC Setup Designer</li>
<hr>
<li class="mobile-nav-link">Gallery</li>
<hr>
<li class="mobile-nav-link"></li>
</ul>
</div>
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div class="content">
</div>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron</p>
<div class="footer-links">
About me
<p>|</p>
Policy
<p>|</p>
<a href=contact.html>Contact me</a>
</div>
</footer>
<button onclick="topFunction()" id="return" title="Return To Top"><img src="./images/arrow_upward.svg" width="30px" alt="Return"></button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mobile-nav-panel").style.width = "100%";
}
function closeNav() {
document.getElementById("mobile-nav-panel").style.width = "0";
}
</script>
</body>
</html>
I've done quite a bit of searching on here and on google, but I'm having difficulty in finding what the problem is with my hover style on my link.
I'm changing out what used to be a form box into what is not just going to be a link to a landing page. I have changed my text to a link (see html below) and
essentially what's happening is the link is a permanent purple color (see picture).
HTML
<section class="get-started">
<div class="shadow"></div>
<div class="background"></div>
<div class="inner">
<h3>Contact us today to schedule a demo. <span class="fa fa-arrow-circle-right"></span></h3>
<?php// echo do_shortcode('[form]'); ?>
<script type="text/javascript">
// jQuery(window).ready(function($){
// var form = $('form');
//$('.submit-button').click(function(){
//form.submit();
// });
// });
</script>
</div>
</section>
CSS
section.get-started {
position: relative;
}
.get-started a.view_more {
display: inline-block;
color: #dfdfdf;
transition: color .15s ease;
font-size: 22px;
text-align: center;
text-decoration: none;
}
#media(min-width: 1435px){
.get-started a.view_more {
display: inline-block;
padding: 0 0 0 15px;
vertical-align: middle;
}
}
#media(max-width: 1435px){
.get-started a.view_more {
display: block;
padding: 15px 0;
}
}
.get-started a.view_more:hover {
color: #FFB547;
}
.get-started .view_more span {
display: block;
font-size: 50px;
margin: 0 0 10px 0;
}
.get-started div.shadow {
width: 100%;
height: 50%;
background-color: white;
position: absolute;
top: 0;
left: 0;
z-index: 1;
box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.05);
}
.get-started div.background {
width: 100%;
height: 50%;
background-color: #f7f7f7;
position: absolute;
bottom: 0;
left: 0;
}
.get-started div.inner {
background-color: #FFB547;
overflow: visible;
position: relative;
z-index: 2;
box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.2);
}
#media(min-width: 900px){
.get-started div.inner {
padding: 120px 50px;
height: 220px;
}
}
#media(max-width: 900px){
.get-started div.inner {
padding: 10% 5%;
}
}
.get-started div.inner:before {
content: '';
position: absolute;
right: 100%;
top: 0px;
width: 0px;
height: 0px;
border-top: 460px solid transparent;
border-bottom: 0 solid transparent;
border-right: 200px solid #e5a340;
z-index: -1;
}
.get-started h3 {
font-weight: 300;
margin: 0 0 15px 0;
text-align: center;
color: white;
}
#media(min-width: 500px){
.get-started h3 {
font-size: 50px;
}
}
#media(max-width: 500px){
.get-started h3 {
font-size: 36px;
}
}
.get-started h4 {
text-align: center;
font-weight: 300;
color: white;
font-size: 24px;
margin: 0 0 60px 0;
}
.get-started form {
text-align: center;
}
.get-started form input[type="text"],
.get-started form input[type="email"] {
background-color: transparent;
outline: none;
border: none;
border-bottom: 2px solid rgba(255,255,255,.6);
font-size: 24px;
padding: 0 0 2px 5px;
color: white;
vertical-align: middle;
font-weight: 300;
border-radius: 0;
}
#media(min-width: 1000px){
.get-started form input[type="text"],
.get-started form input[type="email"] {
width: 200px;
display: inline-block;
margin: 0 20px 0 0;
}
.get-started form input[type="email"] {
width: 350px;
}
}
#media(max-width: 1000px){
.get-started form input[type="text"],
.get-started form input[type="email"] {
width: 100%;
max-width: 400px;
display: block;
margin: 0 auto 20px auto;
}
}
.get-started form input[type="text"]::placeholder,
.get-started form input[type="email"]::placeholder {
color: rgba(255,255,255,.6);
}
.get-started form input[type="text"]:-ms-input-placeholder,
.get-started form input[type="email"]:-ms-input-placeholer {
color: rgba(255,255,255,.6);
}
.get-started form input[type="submit"] {
display: none;
}
.get-started form span.fa {
color: white;
font-size: 50px;
position: relative;
top: 10px;
right: 5px;
cursor: pointer;
opacity: .6;
transition: opacity .15s ease;
}
.get-started form span.fa:hover {
opacity: 1;
}
I tried to change the class of the link to view_more it changes to the below image
<div class="inner">
<h3><a class="view_more" href="#">Contact us today to schedule a demo. <span class="fa fa-arrow-circle-right"></span></a></h3>....
But this still isn't the exact style I want, so I think that just changing the classes will work, right?
So I change the class to view_more_optin and add the following CSS:
<div class="inner">
<h3><a class="view_more_optin" href="#">Contact us today to schedule a demo. <span class="fa fa-arrow-circle-right"></span></a></h3>....
.get-started a.view_more_optin {
display: inline-block;
color: #dfdfdf;
transition: color .15s ease;
font-size: 22px;
text-align: center;
text-decoration: none;
}
#media(min-width: 1435px){
.get-started a.view_more_optin {
display: inline-block;
padding: 0 0 0 15px;
vertical-align: middle;
}
}
#media(max-width: 1435px){
.get-started a.view_more_optin {
display: block;
padding: 15px 0;
}
}
.get-started a.view_more_optin:hover {
color: #FFB547;
}
.get-started .view_more_optin span {
display: block;
font-size: 50px;
margin: 0 0 10px 0;
}
But alas, I get a result of the original picture!
What is overruling my new classes that I am making?
It looks like you're in fact asking quite a basic question. You may have a lot of code there from the theme, and perhaps got a bit lost in it.
The best way to control the style of the link is to add a class to it, and then style that class. Below you can see an example of adding the .contact-link class to the anchor element, and then styling it. I hope it helps!
/* this line is only for this example, ignore it */
body {
background-color: seagreen;
}
/* add these lines below to the end of your stylehseet */
a.contact-link,
a.contact-link:visited {
color: white;
}
a.contact-link:hover {
color: blue;
}
<section class="get-started">
<div class="shadow"></div>
<div class="background"></div>
<div class="inner">
<h3><a class="contact-link" href="#">Contact us today to schedule a demo. <span class="fa fa-arrow-circle-right"></span></a></h3>
</div>
</section>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I have check the answers on the related subject and attempted to adapt some of the items in the suggestions but none seems to help. The intro and question items don't become hidden when placed outside the #myQuiz dimensions and neither do any of the other items.
index.html:
#import url(http://fonts.googleapis.com/css?family=Titillium+Web:900|Roboto:400,100);
body {
background-color: #fff;
padding: 20px;
}
#myQuiz {
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 400;
width: 650;
height: 650px;
position: relative;
overflow: hidden;
color: #fff;
background: #bbb url(../images/background.jpg) no-repeat 0px 0px;
}
#myQuiz h1 {
font-weight: 100;
font-size: 2em;
text-transform: uppercase;
margin: 0px;
position: absolute;
top: 25px;
left: 36px;
}
#myQuiz h1 span {
display: block;
font-weight: 900;
font-family: 'Titillium Web', sans-serif;
font-size: 3.2em;
line-height: 65px;
}
#myQuiz h2 {
font-size: 3em;
margin: 0px;
font-weight: 100;
}
#myQuiz h3 {
font-size: 2.4em;
margin: 0px;
font-weight: 100;
}
#myQuiz p {
margin: 0px 0px 14px 0px;
}
#myQuiz .btn {
display: inline-block;
cursor: pointer;
background-color: #c04b01;
color: #fff;
text-decoration: none;
padding: 5px 15px;
border-radius: 6px;
}
/* Intro */
#myQuiz .intro {
position: absolute;
top: 225px;
left: 660px;
width: 550px;
}
#myQuiz .intro p {
margin: 0px 0px 40x 0px;
}
/* Questions */
#myQuiz .question {
width: 550px;
position: absolute;
top: 225px;
left: 650px;
}
#myQuiz .question .txt {
font-size 1.6em;
margin: 0px 0px 20px 0px;
}
#myQuiz .question .ans {
display: inline-block;
font-size: 1.1em;
width: 225px;
border: 2px solid rgba(238, 189, 102, .4);
border-radius: 6px;
padding: 10px;
margin: 0px 15px 15px 0px;
position: relative;
}
#myQuiz .ans.selected {
border-color: #be4b16;
}
#myQuiz .ans.correct {
border-color: #459a2e;
}
#myQuiz .question .ans::after {
content: '';
diplay: block;
width: 20px;
height: 20px;
background: no-repeat 0px 0px;
background-size: 20px 20px;
position: absolute;
top 5px;
right: 5px;
}
#myQuiz .question .ans.selected::after {
background-image: url(../images/icon_incorrect.svg);
}
#myQuiz .question .ans.correct::after {
background-image: url(../images/icon_correct.svg);
}
#myQuiz .question.unanswered .ans {
cursor: pointer;
}
#myQuiz .question.unanswered .ans:hover {
background-color: rgba(238, 189, 102, .2);
}
#myQuiz .question.answered .ans {
cursor: default;
}
/* Feedback */
#myQuiz .feedback {
color: #efbe5e;
margin-top: 50px;
transition: opacity 1.5s, margin-top 1.5s;
visibility: hidden;
opacity: 0;
}
#myQuiz .feedback .btn {
margin-top: 5px;
}
#myQuiz .feedback strong {
color: #fff;
}
#myQuiz .answered .feedback {
visibility: visible;
opacity: 1;
margin-top: 10px;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-
8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>Test Your Knowledge: Saturn</title>
<link rel="stylesheet" type="text/css" href="css/quiz.css">
</head>
<body>
<div id="myQuiz">
<h1>Test Your Knowledge:<span>Saturn</span></h1>
<div class="progress"></div>
<div class="intro">
<h2>Welcome</h2>
<p>Click begin to test your knowledge of Saturn</p>
<p class="btn">Begin</p>
</div>
<!--intro-->
<div class="question answered">
<p class="txt">This is a question</p>
<p class="ans">Answer 1</p>
<p class="ans selected">Answer 2</p>
<p class="ans correct">Answer 3</p>
<p class="ans">Answer 4</p>
<div class="feedback">
<p>Your are <strong>correct</strong>.</p>
<p>Oops! That is not correct.</p>
<p>Addition feedback.</p>
<div class="btn">Continue</div>
<!--btn-->
</div>
<!--feedback -->
</div>
<!--question -->
<div class="results"></div>
</div>
<!-- MyQuiz -->
</body>
</html>
On #myQuiz you miss the unit for the width, making it invalid and ignored by the browser.
You have
width: 650;
and it must be
width: 650px;
#import url(http://fonts.googleapis.com/css?family=Titillium+Web:900|Roboto:400, 100);
body {
background-color: #fff;
padding: 20px;
}
#myQuiz {
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 400;
width: 650px;
height: 650px;
position: relative;
overflow: hidden;
color: #fff;
background: #bbb url(../images/background.jpg) no-repeat 0px 0px;
}
#myQuiz h1 {
font-weight: 100;
font-size: 2em;
text-transform: uppercase;
margin: 0px;
position: absolute;
top: 25px;
left: 36px;
}
#myQuiz h1 span {
display: block;
font-weight: 900;
font-family: 'Titillium Web', sans-serif;
font-size: 3.2em;
line-height: 65px;
}
#myQuiz h2 {
font-size: 3em;
margin: 0px;
font-weight: 100;
}
#myQuiz h3 {
font-size: 2.4em;
margin: 0px;
font-weight: 100;
}
#myQuiz p {
margin: 0px 0px 14px 0px;
}
#myQuiz .btn {
display: inline-block;
cursor: pointer;
background-color: #c04b01;
color: #fff;
text-decoration: none;
padding: 5px 15px;
border-radius: 6px;
}
/* Intro */
#myQuiz .intro {
position: absolute;
top: 225px;
left: 660px;
width: 550px;
}
#myQuiz .intro p {
margin: 0px 0px 40x 0px;
}
/* Questions */
#myQuiz .question {
width: 550px;
position: absolute;
top: 225px;
left: 650px;
}
#myQuiz .question .txt {
font-size 1.6em;
margin: 0px 0px 20px 0px;
}
#myQuiz .question .ans {
display: inline-block;
font-size: 1.1em;
width: 225px;
border: 2px solid rgba(238, 189, 102, .4);
border-radius: 6px;
padding: 10px;
margin: 0px 15px 15px 0px;
position: relative;
}
#myQuiz .ans.selected {
border-color: #be4b16;
}
#myQuiz .ans.correct {
border-color: #459a2e;
}
#myQuiz .question .ans::after {
content: '';
diplay: block;
width: 20px;
height: 20px;
background: no-repeat 0px 0px;
background-size: 20px 20px;
position: absolute;
top 5px;
right: 5px;
}
#myQuiz .question .ans.selected::after {
background-image: url(../images/icon_incorrect.svg);
}
#myQuiz .question .ans.correct::after {
background-image: url(../images/icon_correct.svg);
}
#myQuiz .question.unanswered .ans {
cursor: pointer;
}
#myQuiz .question.unanswered .ans:hover {
background-color: rgba(238, 189, 102, .2);
}
#myQuiz .question.answered .ans {
cursor: default;
}
/* Feedback */
#myQuiz .feedback {
color: #efbe5e;
margin-top: 50px;
transition: opacity 1.5s, margin-top 1.5s;
visibility: hidden;
opacity: 0;
}
#myQuiz .feedback .btn {
margin-top: 5px;
}
#myQuiz .feedback strong {
color: #fff;
}
#myQuiz .answered .feedback {
visibility: visible;
opacity: 1;
margin-top: 10px;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-
8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>Test Your Knowledge: Saturn</title>
<link rel="stylesheet" type="text/css" href="css/quiz.css">
</head>
<body>
<div id="myQuiz">
<h1>Test Your Knowledge:<span>Saturn</span></h1>
<div class="progress"></div>
<div class="intro">
<h2>Welcome</h2>
<p>Click begin to test your knowledge of Saturn</p>
<p class="btn">Begin</p>
</div>
<!--intro-->
<div class="question answered">
<p class="txt">This is a question</p>
<p class="ans">Answer 1</p>
<p class="ans selected">Answer 2</p>
<p class="ans correct">Answer 3</p>
<p class="ans">Answer 4</p>
<div class="feedback">
<p>Your are <strong>correct</strong>.</p>
<p>Oops! That is not correct.</p>
<p>Addition feedback.</p>
<div class="btn">Continue</div>
<!--btn-->
</div>
<!--feedback -->
</div>
<!--question -->
<div class="results"></div>
</div>
<!-- MyQuiz -->
</body>
</html>
First of all i dont know if its permited more than one question in one topic, however i didnt find anything talking about that.
I have been developing a website, but im a bit new to this and my site has some things that need to be worked out, i will be listing the issues bellow and hopefully someone will help me.
1- Slideshow
How i can put the circles (bullet navigation) of the slideshow inside the slideshow ?
Images are not fully the size as the screen, i can see the current slide and a bit of the next slide, what do i do ?
2- Last 2 pages, Mobile & Contacts
If i change
.mobile {
min-width: 1100px;
}
to:
.mobile {
min-width: 1300px;
}
The mobile div will not make text stay on top of the image but the contacts page will not be as responsive as before, just try by yourself.
Thats it, it may simple, but i cant figure it out, i hope theres no problem with this topic, if so tell me.
See it live: http://optential.co.nf/
html,
body { height: 100%; }
body {
margin: 0;
font-family: 'Open Sans', Helvetica, sans-serif;
min-width: 900px;
}
.header {
background-image: url("img/fundo1.jpg");
background-color: rgb(21, 21, 21);
background-size: cover;
color: white;
height: 100%;
min-height: 650px;
position: relative;
}
.header .logo {
width: 230px;
height: 60px;
margin: 20px 8px 8px 6%;
}
.header .menu {
position: absolute;
top: 55px; right: 25px;
}
.header .menu a {
margin: 0 4px;
font-size: 15px;
color: white;
text-decoration: none;
padding: 6px 20px;
}
.header .menu a:hover,
.header .menu a.current {
color: rgb(204, 66, 63);
}
.header .move {
color: white;
width: 40%;
margin: 0;
padding: 10px;
}
.header .move .center {
margin: 260px auto 0;
width: 360px;
}
.header .move h1 {
font-weight: 400;
font-size: 38px;
margin: 6px 0;
}
.header .move p {
font-weight: 300;
font-size: 20px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.header .mail1 {
background-image: url("img/email.png");
background-size: contain;
background-position: 100% 100%;
background-repeat: no-repeat;
width: 560px; height: 560px;
position: absolute;
bottom: 0; right: 0;
}
.header .mail1 form {
position: absolute;
width: 240px;
bottom: 220px; right: 155px;
}
.header .mail1 h1 {
font-weight: 300;
text-align: center;
color: rgb(203, 41, 37);
}
.header .mail1 input {
box-sizing: border-box;
width: 100%;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin-bottom: 12px;
}
.header .mail1 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.header .mail1 input:focus {
outline: 0;
}
.header .mail1 a {
display: block;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px;
font-size: 14px;
}
.header .mail1 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 {
box-shadow: 10px 6px 15px grey;
background-color: white;
background-image: url("img/barra.png");
background-position: 12% 0%;
height: 100px;
background-repeat: no-repeat;
text-align: right;
}
#btn {
width: 10em;
}
.mail2.fixed {
box-shadow: 10px 6px 15px grey;
position: fixed;
display:block;
top: 0; left: 0;
width: 100%;
min-width: 800px;
height: 100px;
z-index: 1;
}
.mail2 form {
display: inline-block;
margin: 30px 0;
padding: 0 10px;
width: 600px;
}
.mail2 h1 {
font-weight: 300;
color: rgb(203, 41, 37);
display: inline;
vertical-align: middle;
font-size: 28px;
}
.mail2 input {
box-sizing: border-box;
width: 220px;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin: 0 6px;
}
.mail2 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.mail2 input:focus {
outline: 0;
}
.mail2 a {
display: inline;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px 4%;
font-size: 14px;
}
.mail2 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 .top {
padding: 8px 6px;
background-color: rgb(51, 51, 51);
}
.mail2 .top:hover {
background-color: rgb(71, 71, 71);
}
#slider {
width: 100%;
height: 100%;
overflow: hidden;
}
#slider .images {
width: 100%;
position: relative;
transition: left 1s;
left: 0;
}
#slider .images img {
z-index: -1;
width: 100%;
background-size: 100%;
position: absolute;
}
.controls {
width: 350px;
margin: 5px auto;
display: flex;
justify-content: center;
}
.controls div {
width: 16px;
height: 16px;
margin: 0 5px;
background: tomato;
border-radius: 50%;
}
.controls .current {
background: red;
}
.mobile {
min-width: 1300px;
}
.mobile .bar {
background-size: cover;
width: 100%;
background: #F4F4F4;
color: #595B61;
min-width: 700px;
display: flex;
justify-content: space-around;
text-align: center;
}
.mobile .bar img {
width: 100%;
background-size: cover;
display: block;
margin: 0 auto;
}
.mobile .content {
background: radial-gradient(ellipse at 55% 50%, #F9F9F9 40%,#B6B5BD 120%);
position: relative;
}
.mobile .content .mobimg {
padding: 3em;
margin-left:10%;
}
.mobile .content .mob {
position: absolute;
top: 0;
left: 60%;
}
.mobile .content h1 {
color: #D6D6D4;
font-size: 120px;
margin-bottom: 0;
}
.mobile .content p {
margin-left: 15px;
width: 410px;
color: #929584;
font-size: 12px;
margin-bottom: 18px
}
.mobile .content .sep {
height: 15px;
border-bottom: 1px solid #C24147;
text-align: center;
}
.mobile .content .sep img {
padding: 0 8px;
background: #F9F9F9;
}
.mobile .content h2 {
margin-left: 15px;
color: #929584;
font-size: 15px;
font-weight: 600;
text-align: center;
}
.mobile .content .buttons {
display: flex;
justify-content: space-around;
width: 400px;
margin-left: 20px;
}
.mobile .content .button {
display: block;
background: #010101;
color: #F8F8F8;
text-decoration: none;
width: 160px;
height: 50px;
border-radius: 6px;
position: relative;
}
.mobile .content .button:hover {
background: #222;
}
.mobile .content .button.apple img {
margin: 10px 0 0 10px;
}
.mobile .content .button.apple span {
font-size: 11px;
font-weight: 400;
position: absolute;
top: 4px; left: 42px;
}
.mobile .content .button.apple h3 {
font-size: 22px;
font-weight: 600;
position: absolute;
top: 14px; left: 42px;
margin: 0;
}
.mobile .content .button.google img {
margin: 18px 0 0 8px;
}
.mobile .content .button.google span {
font-size: 10px;
font-weight: 600;
position: absolute;
top: 4px; left: 40px;
text-transform: uppercase;
}
.mobile .content .button.google h3 {
font-size: 20px;
font-weight: 300;
position: absolute;
top: 16px; left: 38px;
margin: 0;
}
.mobile .content .button.google h3 b {
font-size: 22px;
font-weight: 400;
font-family: 'Cardo', serif;
margin: 0;
margin-right: 4px
}
.contact {
min-width: 1100px;
background-image: url("img/fundo2es.jpg");
background-size: cover;
background-color: rgb(21, 21, 21);
background-repeat: no-repeat;
height:100%;
color:white;
}
.contact .textocon {
text-align: right;
padding: 55px 75px 0 0;
}
.contact .textocon div {
display: inline-block;
width: 290px
}
.contact .textocon h1 {
font-weight: 400;
font-size: 42px;
margin: 6px 0;
}
.contact .textocon p {
font-weight: 300;
font-size: 19px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.contact .col1 {
display: inline-block;
vertical-align: top;
width: 410px;
padding: 10px 6px 10px 60px;
}
.contact .col1 h1 {
font-weight: 300;
font-size: 25px;
margin: 4px 0;
}
.contact .col1 input {
width: 380px;
height: 20px;
}
.contact .col1 input,
.contact .col2 textarea {
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 14px;
font-size: 13px;
color: white;
background-color: transparent;
border: 1px solid rgb(172, 161, 160);
margin: 6px 0;
}
.contact .col1 input:focus,
.contact .col2 textarea:focus {
outline: 0;
border: 1px solid white;
}
.contact .col2 {
display: inline-block;
width: calc(100% - 560px);
padding: 52px 10px 10px 0;
text-align: right;
}
.contact .col2 textarea {
text-align: left;
width: 100%;
box-sizing: border-box;
height: 112px;
}
.contact .col2 #btn {
display: inline-block;
color: white;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 4px;
padding: 10px 0px;
font-size: 20px;
}
.contact .col2 a:hover {
background-color: rgb(224, 86, 83);
}
.contact .info {
padding: 10px 60px;
display: flex;
justify-content: space-between;
}
.contact .info h1 {
font-weight: 300;
font-size: 25px;
}
.contact .info p {
font-size: 12px;
line-height: 12px;
}
.contact .info a {
text-decoration: none;
color: white;
}
.contact .info a:hover {
color: #ddd;
}
.contact .info img {
width: 32px;
margin: 6px;
}
.contact .info img:hover {
opacity: 0.8;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/fixedbar.js"></script>
<script src="js/slider.js"></script>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<title> Layout </title>
</head>
<body>
<div class="header" id="top">
<img class="logo" src="img/logo.png">
<div class="menu">
Home
Product Tour
Pricing
Try
Vision
</div>
<div class="move">
<div class="center">
<h1>Move work forward!</h1>
<p>Optential keeps your team organized, connected, and focused on results.</p>
</div>
</div>
<div class="mail1">
<form action="form/form.php" method="post">
<h1>Try Now!</h1>
<input name="Email" class="Email" type="text" placeholder="Enter your Email address ...">
<input type="submit" value="Get started for free">
</form>
</div>
</div>
<div class="mail2">
<form action="form/form.php" method="post">
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
<input type="submit" id ="btn" value="Get started for free">
<a class="top" href="#top">Top</a>
</form>
</div>
<div id="slider">
<div class="images">
<div class="controls">
<img src="img/3.png" alt="Image-1" />
<img src="img/2.png" alt="Image-2" />
<img src="img/1.png" alt="Image-3" />
<img src="img/4.png" alt="Image-4" />
</div>
</div>
</div>
<div class="mobile">
<div class="bar">
<img src="img/barra2.png">
</div>
<div class="content">
<img class="mobimg" src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/mob.png">
<div class="mob">
<h1>Mobile</h1>
<p>Optential combines the best of responsive software with native IOS and Android apps to provide the best experience and optimal results!</p>
<p>On laptops, desktops, tablets and phones, always get the best experience on the most intuitive project management set of tools in the world!</p>
<p class="sep">
<img src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/a1.png">
</p>
<h2>Get the app!</h2>
<div class="buttons">
<a class="button apple" href="">
<img src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/apple.png">
<span>Download on the</span>
<h3>App Store</h3>
</a>
<a class="button google" href="">
<img src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/google.png">
<span>Get it on</span>
<h3><b>Google</b>play</h3>
</a>
</div>
</div>
</div>
</div>
<div class="contact">
<div class="textocon">
<div>
<h1>Optential</h1>
<p>A new management system<br>for a new management paradigm!</p>
</div>
</div>
<form method="POST" id="contactos_form" action="form/contactengine.php" onsubmit="return submit_form(this);">
<div class="col1">
<h1>Contact us!</h1>
<input type="text" name="Name" size="50" placeholder="Name"/>
<input type="text" name="Email" size="50" placeholder="Email"/>
<input type="text" name="Subject" size="50" placeholder="Subject"/>
</div>
<div class="col2">
<textarea name="Message" rows="5" cols="70" placeholder="Message..."></textarea>
<input type="submit" id="btn"value="Send"/>
</div>
</form>
<div class="info">
<div>
<h1>Mail Us !</h1>
<p>Rua Andrade Corvo, 242</p>
<p>sala 206</p>
<p>4700-204 Braga</p>
<p>Portugal</p>
</div>
<div>
<h1>Call Us !</h1>
<p>+351 987654323</p>
<p>+351 987654323</p>
<p>+351 987654323</p>
</div>
<div>
<h1>Email Us! </h1>
<p>code#angel.com</p>
<p>code_hr#angel.com</p>
<p>code_support#angel.com</p>
</div>
<div>
<h1>Join Us! </h1>
<img src="img/facebook.png">
<img src="img/gplus.png">
<img src="img/twitter.png">
<img src="img/instag.png">
</div>
</div>
</div>
<script src="js/slider.js"></script>
<script>
function submit_form(form){
formulario=$("#contactos_form");
$.ajax({url: formulario.attr("action"), method:formulario.attr("method"), data:formulario.serialize(), success: function(result){
alert(result);
}});
return false;
}
</script>
</body>
</html>
The css of the slideshow is "slider" and "controls".
Hope someone can help.
To answer questions 1
I will be answering the others shortly. To move the button controls first we need to give them a div, however as the controls are being dynamically generated so we have to edit the code which creates them, to do this we go into slider.js and add class="button move" to the
$('#slider .images img').each(function(i) {
var img = $(this);
img.css('left', i * width);
var button = $('<div class="buttonmove">');
controls.append(button);
if (i == 0) {
button.addClass('current')
}
Now we have something that we can edit, the most easiest way to move them is to use position:relative and give them a -100 top value like so.
.buttonmove {
position: relative;
top: -250px;
}
Question 2
Unfortantly I don't see the issue with your question as changing it 1300px works better as the layer don't overlap, please let me know in more detail;
A- the problem
B- what the result should be like
I hope this helped!
EDIT
Here is the jQuery function;
$(document).ready(function() {
var sliderImgH = $(".sliderimages:first").height();
$(".buttonmove:nth-child(1)").css("margin-top", sliderImgH-75);
});
$(window).resize(function() {
var sliderImgH = $(".sliderimages").height();
$(".buttonmove:nth-child(1)").css("margin-top", sliderImgH-75);
});
I also added this CSS;
.buttonmove {
position: relative;
}
#slider {
position: absolute;
}
*NOTE**
Adjust your function order so it goes or it won't work on load,
<script src="js/slider.js"></script>
Then the function I just made
<script src="js/fixedbar.js"></script>
EDIT(sorry forgot to add...)
I forgot to tell you to to add a class called sliderimages to your first or all of the images in your slider.
<div id="slider">
<div class="images">
<div class="controls">
<img class="sliderimages" src="img/3.png" alt="Image-1" />
<img src="img/2.png" alt="Image-2" />
<img src="img/1.png" alt="Image-3" />
<img src="img/4.png" alt="Image-4" />
</div>
</div>
</div>