Problems with CSS and javascript animation - javascript
I am building a website and have come across a stumbling point. I'm trying to include some animated image/caption on hover, but I can't, for the life of me, get it to work.. I'm getting very annoyed at this problem as it should not be a problem, I must be failing to see where I'm going wrong.
My website is:
theystolemybaby.uk.undo.it, and the the picture towards the bottom of the page is supposed to animate like in the demo.. but it doesnt!
The HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Author: Jamie Lindsey -->
<head>
<meta name="google-site-verification" content="1z0df9M7OshAE_NKuk-F46UbwLY9e4MabbypjmTCu_w" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:url" content="http://theystolemybaby.uk.undo.it/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Coming Soon | theystolemybaby.uk.undo.it" />
<meta property="og:description" content="Our aim is provide a place to share the damage UK Social Services are causing thousands of families each year, a place to connect with others, to motivate, to inform, a network of thousands of bereaved parents, children, supporters, carers, whistleblowers. We need you all to be a part of what is to…" />
<meta property="og:image" content="http://theystolemybaby.uk.undo.it/images/blue-eyes-baby-bg1.jpg" />
<meta property="og:updated_time" content="1443911486" />
<meta content="2015-10-06T12:21:00+01:00" property="og:article:published">
<title>Social Services Are Stealing Babies UK</title>
<meta content="The UK is the only country in Europe, and one of a tiny minority of countries in the world, that actively participates in Forced Adoption." name="description"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="theystolemybaby.uk.undo.it,Social services scandal,UK,Child Trafficking,Baby snatching,stealing,crime without punishment,forced adoption,Family,Social,Stealing Babies,Uk Social Services,Child,Services,Uk,Social,Care,Forced,Adoption,Children,Countdown Below Social,Court,Means,Local,Many,Social Services,Parents,Local,Authorities,Adoption,Again,Down Adoption Statistics,Birth,Uk,Only Country,Authorities" />
<!--css-->
<link rel="stylesheet" href="web/css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="web/css/TimeCircles.css" type="text/css"/>
<link rel="stylesheet" href="web/css/header-effects.css" type="text/css"/>
<link rel="stylesheet" type="text/css" href="web/css/component1.css" />
<style type="text/css">
/*<![CDATA[*/
div.c1 {width: 100%;}
/*]]>*/
</style>
<!--/css-->
<!--javascript-->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="web/js/TimeCircles.js"></script>
<script type="text/javascript" src="web/js/waypoints.min.js"></script>
<script type="text/javascript" src="web/js/toucheffects.js"></script>
<!--/javascript-->
<!--fonts-->
<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css' />
<!--/fonts-->
</head>
<body>
<div class="container1">
<!-- start wrap -->
<!-- start content -->
</div>
<header id="ha-header" class="ha-header content-header">
<div class="ha-header-perspective">
<div class="ha-header-front">
<h1>
<span>theystolemybaby.uk</span>
</h1>
<nav>
<!-- TODO create simple nav menu -->
</nav>
</div>
<div class="ha-header-bottom">
<nav>
<a>Dalliance</a>
<a>Inglenook</a>
<a>Lagniappe</a>
<a>Mellifluous</a>
<a>Erstwhile</a>
<a>Wafture</a>
<a>Serendipity</a>
<a>Love</a>
</nav>
</div>
</div>
</header>
<br><br><br><br>
<div class="article-section-1">
<section>
<h2>Have UK Social Services stolen your child?</h2>
<p>This website is currently under construction but we are in the final stages of development.</p>
<p>(see the countdown below)</p>
<br>
</section>
<section class="article-section-1">
<h2>Social Services Are Stealing Babies in the UK!!</h2>
<p>Our aim is provide a place to share the damage UK Social Services are causing to thousands of families each year, a place to connect with others, to motivate, to inform, a network of thousands of bereaved parents, children, supporters, carers, whistleblowers.</p>
<p>The scandal is affecting too many of us to just sit back and do nothing.</p>
<p>Our voices - Your voices - need to be heard.</p>
<p>We need you all to be a part of what is to come!!</p>
</section>
</div>
<br>
<div class="article-section-2">
<section class="ha-waypoint" data-animate-down="content-header-solid" data-animate-up="content-header">
<h2>The ugly truth!</h2>
<p>The UK is the <b>only</b> country in Europe, and one of a tiny minority of countries in the world, that actively participates in <b>Forced Adoption</b>. This Draconian act means taking a child away from his family without - and usually against - the agreement of all family members. Apparantly this is very much a last resort in a desperate situation, undergone when there is no safe way for children to stay with their immediate family. However, there’s no denying that this is done expeditiously and it is extremely brutal for those involved.</p>
<p>It is being claimed that the number of children with an Adoption Order has dramatically fallen. What this actually means is that there are still just as many children in the care system - for instance, being fostered - but fewer who have been recommended by local authorities to be placed for adoption by strangers. This basically means that because there is a massive profit to be made from fostering children - normally around £400 per week per child fostered - and the fact that so many people are aware of what is happening, Local Authorities are bending the rule books again and choosing to foster children off to starngers instead, this brings down adoption statistics and gets the attention away from the Local Authorities.This year alone, the number of children in care with an Adoption Plan fell again, by 37 per cent. For many of these parents, and children, cast adrift in a sea of uncertainty, this is a depressing state of affairs.</p>
<p>The key reason for this results from judgments made by the Supreme Court and the Court of Appeal which reminded local authorities and courts of the huge significance of adoption. Adoption legally and permanently severs the child’s legal relationship with their birth family. Again, the UK is the <b>only</b> country in Europe to do this, however often contact does continue with both siblings, grandparents and sometimes birth parents. <b>Forced Adoption</b> is more accurately referred to in the care sector as ‘contested adoption’.</p>
</section>
</div>
<br>
<div class="fb-like" data-href="https://http://theystolemybaby.uk.undo.it" data-width="100" data-layout="box_count" data-action="like" data-show-faces="true" data-share="true"></div>
<section class="ha-waypoint" data-animate-down="ha-header-rotateBack" data-animate-up="content-header-solid">
<div class="timer-box">
<div class="timer-header">
<h2>We're counting the days 'til we're live..</h2>
<div id="DateCountdown" data-date="2016-01-12 01:00:00" style="width: 100%;">
</div>
</div>
</div>
</section>
<section class="ha-waypoint" data-animate-down="ha-header-rotate" data-animate-up="ha-header-rotateBack">
<div class="clear"></div>
<ul class="grid cs-style-4">
<li>
<figure>
<div><img src="web/images/5.png" alt="img05"></div>
<figcaption>
<h3>Safari</h3>
<span>Jacob Cummings</span>
Take a look
</figcaption>
</figure>
</li>
<!-- TODO
<li>
<figure>
<div><img src="web/images/6.png" alt="img06"></div>
<figcaption>
<h3>Game Center</h3>
<span>Jacob Cummings</span>
Take a look
</figcaption>
</figure>
</li>
<li>
<figure>
<div><img src="web/images/2.png" alt="img02"></div>
<figcaption>
<h3>Music</h3>
<span>Jacob Cummings</span>
Take a look
</figcaption>
</figure>
</li>
<li>
<figure>
<div><img src="web/images/4.png" alt="img04"></div>
<figcaption>
<h3>Settings</h3>
<span>Jacob Cummings</span>
Take a look
</figcaption>
</figure>
</li>
<li>
<figure>
<div><img src="web/images/1.png" alt="img01"></div>
<figcaption>
<h3>Camera</h3>
<span>Jacob Cummings</span>
Take a look
</figcaption>
</figure>
</li>
<li>
<figure>
<div><img src="web/images/3.png" alt="img03"></div>
<figcaption>
<h3>Phone</h3>
<span>Jacob Cummings</span>
Take a look
</figcaption>
</figure>
</li>
TODO END -->
</ul>
<!-- start notify-->
<div class="notify">
<form>
<input type="text" class="textbox" value="Type your email here..." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}"/>
<input class="md-trigger md-setperspective" data-modal="top-scorll" type="button" value="Subscribe"/>
</form>
</div>
</section>
<!--End notify-->
<!--start social icons-->
<div class="social-icons">
<h3>Social Sharing on the web</h3>
<ul>
<li><img src="web/images/facebook.png" title="Share on Facebook" alt="Facebook Share Icon" /></li>
<li><img src="web/images/twitter.png" title="Share on Twitter" alt="Twitter Share Icon" /></li>
<li><img src="web/images/g+.png" title="Share on Google+" alt="Google+ Share Icon" /></li>
<li><img src="web/images/rss.png" title="Rss" alt="RSS Feed Icon" /></li>
</ul>
</div>
<!-- End social icons-->
<!-- start copy right -->
<div class="copy-right">
<p>Design by Jamie Lindsey</p>
<br>
</div>
<!-- End copy right -->
<!-- End Content -->
<!--End wrap -->
</body>
<!--js-->
<script type="text/javascript">
$("#DateCountdown").TimeCircles({
"animation": "smooth",
"bg_width": 0.4,
"fg_width": 0.04,
"circle_bg_color": "#6cb7f9",
"time": {
"Days": {
"text": "Days",
"color": "#f9f68a",
"show": true
},
"Hours": {
"text": "Hours",
"color": "#99CCFF",
"show": true
},
"Minutes": {
"text": "Minutes",
"color": "#BBFFBB",
"show": true
},
"Seconds": {
"text": "Seconds",
"color": "#FF9999",
"show": true
}
}
});
</script>
<script type="text/javascript">
var $head = $( '#ha-header' );
$( '.ha-waypoint' ).each( function(i) {
var $el = $( this ),
animClassDown = $el.data( 'animateDown' ),
animClassUp = $el.data( 'animateUp' );
$el.waypoint( function( direction ) {
if( direction === 'down' && animClassDown ) {
$head.attr('class', 'ha-header ' + animClassDown);
}
else if( direction === 'up' && animClassUp ){
$head.attr('class', 'ha-header ' + animClassUp);
}
}, { offset: '100%' } );
} );
</script>
<script type="application/x-javascript">
<![CDATA[
addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }
]]>
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!--TODO <script src="web/js/toucheffects.js"></script> -->
<!--js-->
</html>`
And the CSS:
/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0px;padding:0px;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* start editing from here */
a{text-decoration:none;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{ vertical-align:baseline;}/* vertical align baseline */
.vertical-top{ vertical-align:top;}/* vertical align top */
nav.vertical ul li{ display:block;}/* vertical menu */
nav.horizontal ul li{ display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/
body{
background: url(../images/blue-eyes-baby-bg2.jpg) no-repeat #E7E7E7;
background-color: #10CAD1;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 1400px ;
font-family: 'Ubuntu', sans-serif;
/*background-position: top left bottom right;*/
/* *** this will pan the background***
-webkit-animation: mymove 180s infinite;
/* Chrome, Safari, Opera */
/* ***animation: mymove 180s infinite;*/
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
75% {background-position: center;}
}
/* Standard syntax */
#keyframes mymove {
75% {background-position: center;}
}
body:after {
background: rgba(134,6,71,0.7);
}
.container1{
/*width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background: transparent url(../images/pattern.png) repeat top left;
z-index: 2;--*/
}
/*end reset*/
#font-face {
font-family: 'Ubuntu', sans-serif;
font-weight: normal;
font-style: normal;
}
.wrap{
width:80%;
margin:0 auto;
}
/* ---------- TIMER ---------- */
.timer-box {
background-color: #92D9E1;
}
.timer-header h2{
color: #fff;
font-size: 4em;
font-weight: inherit;
border-bottom: 1px solid #fff;
}
/*---start-content-header----*/
.content-header {
background: rgba(228, 133, 186, 0.66);
height: 65px;
font-size: 12px;
}
.content-header h1{
padding: 0;
color: #fff;
font-size: 4em;
font-weight: inherit;
border-bottom: 1px solid #fff;
position:fixed;
top: 0px;
margin:auto;
z-index:100000;
width:100%;
text-align: left;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
.content-header a {
color: #FFF;
font-size: 23px;
font-weight: inherit;
float: right;
position:fixed;
margin-right: 5px;
}
.article-section-1 h2 {
color: #FFF;
font-size: 46px;
font-weight: 500;
text-align: center;
text-decoration: underline;
}
.article-section-1 {
color: #FFF;
font-size: 24px;
font-weight: inherit;
text-align: center;
margin-top: 100px;
padding-right: 50px;
padding-left: 50px;
}
.article-section-2 {
color: #FFF;
font-size: 24px;
font-weight: inherit;
text-align: center;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
margin-right: 10%;
margin-left: 10%;
}
.article-section-2 h2 {
color: #FFF;
font-size: 46px;
font-weight: 500;
text-align: left;
background-color: rgba(146, 217, 225, 0.79);
}
//*---start-notify-form----*/
.notify{
text-align: center;
background: rgba(0, 0, 0, 0.36);
width: 50%;
margin: 2em auto 0 auto;
padding: 0.5em 2em 2em 2em;
font-family: 'Ubuntu', sans-serif;
}
.notify h3{
font-size: 1em;
color: #FFF;
text-transform: uppercase;
padding: 1em 0;
word-spacing: 2px;
}
.notify input[type="text"]{
width:80%;
padding:12px;
border:none;
outline:none;
font-family: 'Ubuntu', sans-serif;
}
.notify input[type="button"]{
padding:12px;
border:none;
outline:none;
font-family: 'Ubuntu', sans-serif;
background: #10CAD1 none repeat scroll 0% 0%;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
color:#FFF;
cursor:pointer;
}
.notify input[type="button"]:hover{
padding:12px;
border:none;
outline:none;
font-family: 'Ubuntu', sans-serif;
background: #fff none repeat scroll 0% 0%;
background-color: #fff;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
color: #10CAD1;
cursor: pointer;
}
.notify {
width: 50%;
margin: 0 auto;
text-align: center;
background: rgba(0, 0, 0, 0.31);
background-color: #fff;
padding: 2em;
margin-top: 2em;
}
.notify input[type="submit"]:hover{
background:#fff;
color:#000;
}
.notify input[type="submit"]:active{
background:#fff;
color:#000;
-webkit-animation: swing 1s ease;
-moz-animation: swing 1s ease;
-ms-animation: swing 1s ease;
-o-animation: swing 1s ease;
animation: swing 1s ease;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/*---start-socail-icons----*/
.social-icons h3{
color: #FFF;
font-size: 1em;
margin: 1em 1em 0.5em 1em;
word-spacing: 4px;
}
.social-icons ul li{
display:inline-block;
}
.social-iconsl ul li a{
display:block;
}
.social-icons ul li img{
display:block;
}
.social-icons ul li a{
background: rgba(54, 239, 254, 0.25) none repeat scroll 0% 0%;
padding: 10px;
border-radius: 30em;
margin: 5px;
display: block;
-webkit-transition: all 1s cubic-bezier(0.2,0.77,0.75,0.48) 0s;
-moz-transition: all 1s cubic-bezier(0.2,0.77,0.75,0.48) 0s;
-ms-transition: all 1s cubic-bezier(0.2,0.77,0.75,0.48) 0s;
-o-transition: all 1s cubic-bezier(0.2,0.77,0.75,0.48) 0s;
transition: all 1s cubic-bezier(0.2,0.77,0.75,0.48) 0s;
}
.social-icons ul li a:hover{
background: rgba(252, 246, 246, 0.56) none repeat scroll 0% 0%;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.social-icons ul li a:active{
-webkit-transform: scale(1.8);
-moz-transform: scale(1.8);
-ms-transform: scale(1.8);
-o-transform: scale(1.8);
transform: scale(1.8);
}
.social-icons {
text-align: center;
}
/*----start-copy-right-----*/
.copy-right{
text-align:center;
padding-top:1em;
background: rgba(126, 146, 149, 0.53);
}
.copy-right p{
color: #fff;
font-size: 1em;
font-weight: inherit;
word-spacing: 0.2em;
}
.copy-right p a{
color: #10CAD1;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.copy-right p a:hover{
color:#fff;
}
/*-----start-responsive-design------*/
#media (max-width: 1440px){
#counter {
width: 67%;
margin-left: 25%;
}
.digit {
top: 9px!important;
}
.notify {
width: 39%;
}
.notify input[type="text"] {
width: 76%;
}
}
#media(max-width:1024px){
.content-header h1 {
color: #fff;
font-size: 3.4em;
margin:0 0 0.3em 0;
}
.notify {
width: 50%;
}
}
#media(max-width:768px){
.content-header h1 {
font-size: 2.5em;
margin: 0 0 0.2em;
}
.content-header p {
color: #fff;
font-size: 0.85em;
}
.notify {
width: 57%;
}
.notify input[type="text"] {
width: 71%;
}
}
#media(max-width:640px){
.content-header h1 {
font-size: 2em;
}
.notify {
width: 75%;
}
}
#media(max-width:480px){
.content-header h1 {
font-size: 1.5em;
margin:0 0 0.5em;
}
.content-header p {
font-size: 0.8em;
line-height: 1.6em;
}
.notify {
width: 71%;
padding: 1em;
margin-top: 1em;
}
.notify input[type="text"] {
width: 52%;
}
.copy-right p {
font-size: 0.7em;
}
}
#media(max-width:320px){
.content-header h1 {
font-size: 1.2em;
margin: 0 0 0.5em;
line-height: 1.6em;
}
.content-header p {
font-size: 0.7em;
line-height: 1.6em;
}
.content-header {
margin-top: 5em;
}
.notify {
width: 77%;
}
}
The Tutorial and source for the Caption Hover Effects is:
On codrops here
I think it may be better not to include all the code as there is quite a lot and all the resources can be found in the links.
The Question..
Why is the animation not working?
I have linked all my css and javascripts correctly as far as I can tell (although I havent slept for 48 hours so I might be missing something stupid). Please ask if you require any more info and I will be happy to edit my question to include anything relevant. Thanks in advance.
Related
Accordion takes 2 clicks to initiate + icon rotation
I pieced together some code I found for a FAQ accordion on my site.
I am not sure how to make the title expand with 1 click, as it currently takes 2.
I would also like the icon to rotate upon expanding/collapsing.
It is currently only rotating on/off hover.
I am including a short example of what I currently have.
Any help would be much appreciated, thank you.
$('.js-question').on('click', function(e) {
var $answer = $(this).next(),
actveClass = 'active',
isActive = $answer.hasClass(actveClass);
$('.answer').slideUp().addClass(actveClass);
if (isActive) {
$answer.toggleClass(actveClass);
$answer.slideToggle();
}
});
.faqContainer {
width: 100%;
margin-right: auto;
margin-left: auto;
height: 100%;
}
.question {
font-family: Arial MT Pro!important;
font-size: 14px;
color: #000;
letter-spacing: 3px;
font-weight: 300;
cursor: pointer;
overflow: hidden;
display: table-cell;
width: 100%;
vertical-align: middle;
}
.answer {
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 10px;
line-height: 1.7;
text-transform: uppercase;
letter-spacing: 1px;
color: #333;
overflow: hidden;
display: none;
margin: 10px 0 15px
}
.answer a{
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 10px;
line-height: 1.7;
text-transform: uppercase;
letter-spacing: 1px;
color: #333!important;
}
.answer:hover a{
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 10px;
line-height: 1.7;
text-transform: uppercase;
color: #ababab!important;
letter-spacing: 1px;
transition: all 0.4s ease-in-out 0s
}
.faqContainer hr {
opacity: 0;
}
.bracket-button .outer {
letter-spacing: 0px;
font-family: 'Arial MT Pro';
position: absolute;
margin-top: 0px;
margin-left: 8px;
}
.bracket-button .inner {
display: inline-block;
background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
background-size: cover;
height: 10px;
width: 10px;
transform: rotate(45deg);
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
padding: 0px;
-webkit-backface-visibility: hidden;
}
.bracket-button:hover .inner {
transform: rotate(135deg);
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
padding: 0px;
}
.bracket-button.active .inner {
transform: rotate(0deg);
background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
background-size: cover;
background-position-y: 0px;
}
.bracket-button.active:hover .inner {
transform: rotate(90deg);
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<div class="faqContainer">
<p class="question js-question bracket-button">LOGISTICS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">Pre-order items will ship roughly 2-3 weeks from the end date specified in the product description.<br />This can sometimes take longer due to print shop schedules/holidays.<br />All in stock orders are shipped within 48 hours of purchase, usually less.<br />Orders placed Friday evenings will typically ship the following Monday.<br />Most domestic orders are delivered within a week.<br />Please allow additional time in transit for delivery.<br /> If your order contains pre-order and in stock items,<br />your order will ship when all items are on-hand.<br />Please place separate orders if you need the in stock item(s) sooner.</div>
<hr />
<p class="question js-question bracket-button">DISCOUNTS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">Domestic orders $75+ receive free shipping. <br /> Canada orders $125+ receive free shipping. <br /> Everywhere else orders $150+ receive free shipping.</div>
<hr />
<p class="question js-question bracket-button">CANCELLATIONS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">If you canceled an order, expect to see the funds back in your account<br />within 2-3 business days, depending on your bank.</div>
<hr />
</div>
You're sending contradicting orders to your function. Here $('.answer').slideUp().addClass(actveClass); you're sliding up all of the answers and adding the active class to all of them (I believe you wanted to remove it).
Then, you ask if the target answer has the active class (the answer is obviously yes, no matter what, because you have added it to all of the elements right before).
This conditional if (isActive) {, even if your previous code was correct, would be completely unnecessary. What you can do remove the active class from all of answers except the target one, and then toggle the clicked answer only, which you have already targeted here $answer = $(this).next().
So the working code would be:
$('.js-question').on('click', function(e) {
var $answer = $(this).next(),
actveClass = 'active';
$('.answer').not($answer).slideUp().removeClass(actveClass); /* remove instead of add and apply in every answer except the clicked one*/
/* remove unnecessary conditional */
$answer.toggleClass(actveClass);
$answer.slideToggle();
});
.faqContainer {
width: 100%;
margin-right: auto;
margin-left: auto;
height: 100%;
}
.question {
font-family: Arial MT Pro!important;
font-size: 14px;
color: #000;
letter-spacing: 3px;
font-weight: 300;
cursor: pointer;
overflow: hidden;
display: table-cell;
width: 100%;
vertical-align: middle;
}
.answer {
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 10px;
line-height: 1.7;
text-transform: uppercase;
letter-spacing: 1px;
color: #333;
overflow: hidden;
display: none;
margin: 10px 0 15px
}
.answer a{
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 10px;
line-height: 1.7;
text-transform: uppercase;
letter-spacing: 1px;
color: #333!important;
}
.answer:hover a{
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 10px;
line-height: 1.7;
text-transform: uppercase;
color: #ababab!important;
letter-spacing: 1px;
transition: all 0.4s ease-in-out 0s
}
.faqContainer hr {
opacity: 0;
}
.bracket-button .outer {
letter-spacing: 0px;
font-family: 'Arial MT Pro';
position: absolute;
margin-top: 0px;
margin-left: 8px;
}
.bracket-button .inner {
display: inline-block;
background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
background-size: cover;
height: 10px;
width: 10px;
transform: rotate(45deg);
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
padding: 0px;
-webkit-backface-visibility: hidden;
}
.bracket-button:hover .inner {
transform: rotate(135deg);
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
padding: 0px;
}
.bracket-button.active .inner {
transform: rotate(0deg);
background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
background-size: cover;
background-position-y: 0px;
}
.bracket-button.active:hover .inner {
transform: rotate(90deg);
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<div class="faqContainer">
<p class="question js-question bracket-button">LOGISTICS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">Pre-order items will ship roughly 2-3 weeks from the end date specified in the product description.<br />This can sometimes take longer due to print shop schedules/holidays.<br />All in stock orders are shipped within 48 hours of purchase, usually less.<br />Orders placed Friday evenings will typically ship the following Monday.<br />Most domestic orders are delivered within a week.<br />Please allow additional time in transit for delivery.<br /> If your order contains pre-order and in stock items,<br />your order will ship when all items are on-hand.<br />Please place separate orders if you need the in stock item(s) sooner.</div>
<hr />
<p class="question js-question bracket-button">DISCOUNTS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">Domestic orders $75+ receive free shipping. <br /> Canada orders $125+ receive free shipping. <br /> Everywhere else orders $150+ receive free shipping.</div>
<hr />
<p class="question js-question bracket-button">CANCELLATIONS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">If you canceled an order, expect to see the funds back in your account<br />within 2-3 business days, depending on your bank.</div>
<hr />
</div>
Update to have the icon working properly
Same method as for the .answer. You remove the active class from all the buttons except the clicked one, and then toggle the clicked button class.
$('.js-question').on('click', function(e) {
var $answer = $(this).next(),
actveClass = 'active';
$('.bracket-button').not($(this)).removeClass(actveClass);
$('.answer').not($answer).slideUp().removeClass(actveClass);
$(this).toggleClass(actveClass);
$answer.toggleClass(actveClass);
$answer.slideToggle();
});
.faqContainer {
width: 100%;
margin-right: auto;
margin-left: auto;
height: 100%;
}
.question {
font-family: Arial MT Pro!important;
font-size: 14px;
color: #000;
letter-spacing: 3px;
font-weight: 300;
cursor: pointer;
overflow: hidden;
display: table-cell;
width: 100%;
vertical-align: middle;
}
.answer {
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 10px;
line-height: 1.7;
text-transform: uppercase;
letter-spacing: 1px;
color: #333;
overflow: hidden;
display: none;
margin: 10px 0 15px
}
.answer a{
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 10px;
line-height: 1.7;
text-transform: uppercase;
letter-spacing: 1px;
color: #333!important;
}
.answer:hover a{
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 10px;
line-height: 1.7;
text-transform: uppercase;
color: #ababab!important;
letter-spacing: 1px;
transition: all 0.4s ease-in-out 0s
}
.faqContainer hr {
opacity: 0;
}
.bracket-button .outer {
letter-spacing: 0px;
font-family: 'Arial MT Pro';
position: absolute;
margin-top: 0px;
margin-left: 8px;
}
.bracket-button .inner {
display: inline-block;
background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
background-size: cover;
height: 10px;
width: 10px;
transform: rotate(45deg);
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
padding: 0px;
-webkit-backface-visibility: hidden;
}
.bracket-button:hover .inner {
transform: rotate(135deg);
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
padding: 0px;
}
.bracket-button.active .inner {
transform: rotate(0deg);
background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
background-size: cover;
background-position-y: 0px;
}
.bracket-button.active:hover .inner {
transform: rotate(90deg);
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<div class="faqContainer">
<p class="question js-question bracket-button">LOGISTICS<span class="outer"><span class="inner"></span></span>
</p>
<div class="answer">Pre-order items will ship roughly 2-3 weeks from the end date specified in the product description.<br />This can sometimes take longer due to print shop schedules/holidays.<br />All in stock orders are shipped within 48 hours of purchase, usually less.<br
/>Orders placed Friday evenings will typically ship the following Monday.<br />Most domestic orders are delivered within a week.<br />Please allow additional time in transit for delivery.<br /> If your order contains pre-order and in stock items,<br
/>your order will ship when all items are on-hand.<br />Please place separate orders if you need the in stock item(s) sooner.</div>
<hr />
<p class="question js-question bracket-button">DISCOUNTS<span class="outer"><span class="inner"></span></span>
</p>
<div class="answer">Domestic orders $75+ receive free shipping. <br /> Canada orders $125+ receive free shipping. <br /> Everywhere else orders $150+ receive free shipping.</div>
<hr />
<p class="question js-question bracket-button">CANCELLATIONS<span class="outer"><span class="inner"></span></span>
</p>
<div class="answer">If you canceled an order, expect to see the funds back in your account<br />within 2-3 business days, depending on your bank.</div>
<hr />
</div>
HTML anchor links break site / don't work properly?
Working on personal site, found that whenever ANY of the HTML anchors is clicked, it completely breaks the site OR simply doesn't link to the appropriate location on the webpage. Typically occurs on Firefox, but site works fine on Edge and Chrome.
The live version of the site is here: http://smithchrisgraphics.com/
The issue is most obvious when using Firefox; when I tested my site using Edge, I didn't have any problems. I tried reducing the HTML and CSS down to see if I could pinpoint the issue, and I still don't know what is causing the bug. Any help pinpointing what's wrong would help. I removed all external js files.
#charset "UTF-8";
/* CSS Document */
html
{
overflow-x:hidden;
scroll-behavior: smooth;
}
body
{
min-height: 500vh;
max-width: 100vw;
width: 100%;
font-family: 'Roboto Slab', serif;
overflow: hidden;
position: absolute;
left: -13px;
z-index: -3;
/*outline: 1px solid red;*/
}
.displaySection
{
position: relative;
top: 100vh;
left: 0;
width: 100%;
background-color: red;
padding: 20px 0 20px;
margin: 5px 0 5px 5px;
min-height: 100vh;
overflow-y: visible;
overflow-x: hidden;
}
a
{
text-decoration: none;
}
ul
{
list-style: none;
}
hr
{
margin: 50px 10px 10px 10px;
}
#wrapper
{
width:100vw;
}
#NameDrop
{
position: relative;
top: 50vh;
transform: translateY(-60%);
list-style:none;
margin:0;
padding:0;
text-align:center;
z-index: 5;
}
#NameDrop ul
{
text-decoration-line: none;
list-style-type: none;
margin: 0 auto;
left: 40%;
}
#NameDrop ul li
{
text-decoration-line: none;
display: inline;
text-align: center;
width: 25%;
margin: 0 auto;
}
#NameDrop li a
{
display:inline-block;
position: relative;
padding:10px 20px;
left: -20px;
color: black;
text-decoration-line: none;
font-size: 14pt;
border-radius: 30px;
opacity: 1;
/* Safari 4.0 - 8.0 */
-webkit-animation-name: SlowFade;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0.7s;
-webkit-animation-iteration-count: 1;
/* Standard syntax */
animation-name: SlowFade;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 0.7s;
animation-iteration-count: 1;
animation-direction: forwards;
animation-fill-mode: forwards;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
-mozilla-transition: 0.3s;
transition: 0.3s;
}
#NameDrop li a:hover
{
background-color:rgba(151,0,2,1.00);
color: white;
text-decoration-line: none;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
<!-- External CSS Files -->
<link href="css/home.css" rel="stylesheet" type="text/css">
<!-- Need script for anchors due to HTML5 Bug on browsers -->
<script>
function snapToAnchor(anchor)
{
document.getElementById(anchor).scrollIntoView(true);
}
</script>
</head>
<body>
<div id="NameDrop">
<ul>
<li>About</li>
<li><a onclick="snapToAnchor('link02')">Design</a></li>
<li><a onclick="snapToAnchor('link03')">Experience</a></li>
<li>Education</li>
<li><a onclick="snapToAnchor('link05')">Contact</a></li>
</ul>
</div>
<!-- Each section should take up a minimum of at least 1 full screen -->
<div id="link01" class="displaySection">
</div>
<div id="link02" class="displaySection">
</div>
<div id="link03" class="displaySection">
</div>
<div id="link04" class="displaySection">
</div>
<div id="link05" class="displaySection">
</div>
</body>
</html>
If there is ANY extra details I can provide to help, or you have any clue what could be causing this, please let me know!
I am trying to stack the cards side by side I have tried the following
Below is where I think the issue is to fix the card display issue
I appreciate your help so much.
justify-content: space-evenly;
/*flex-start: no* items are stacked to the far left
*space-around:no items are stacked on top of the other*
*padding: no*
space-between no items are stacked to the far left */
/*added
align-content: center;
*/
I want to stack the cards side by side but I have given it many values and it is still not working it either lines it to far left, far right center and I want the cards to be aligned side by side.
Thank you so much.
HEre is my style.css
*{
margin: 0;
padding: 0;
font-family: 'Vollkorn', serif;
list-style-type: none;/*Removing the default list-type*/
text-decoration: none; /*Removing the default list-type*/
box-sizing: border-box;
outline: none;
}
/*Decreasing the default size of the html element*/
html{
font-size: 62.5%;
}
/*Creating a css variable to have a global scope*/
:root{
--primary-color: #2b81e4;
--secondary-color: #eee;
--white-color: #fff;
--grey-color: #555;
--light-grey-color: #777;
}
/*instead of creating every div for us to center it we will just give every html element a css class of center*/
.center{
display: flex;
justify-content: center;
align-items: center;
}
.container{
/*To be able to use the css variables we use the keyword var*/
background-color: var(--secondary-color);
margin: 3.5rem;
/*Creating a shadow effect*/
box-shadow: 0 1rem 3rem var(--grey-color);
overflow: hidden;
}
.header{
width: 100%;
/*100vh is 100 percent and I subtract 7rem from all four sides*/
height: calc(100vh-7rem);
background: linear-gradient(rgba(18,113,255,0.5),rgba(18,113,255,0.3)), url(images/parachute.jpg) center no-repeat;
background-size: cover;
position: relative;
}
.header-text{
/*text-align: center;*/
text-transform: uppercase;
letter-spacing: 0.1rem;
/*Adding text shadow*/
text-shadow: 0 0.3rem 0.5rem var(--light-grey-color);
}
.heading{
font-size: 8rem;
color: var(--secondary-color);
/*perspective property defines how far an object is away from the user*/
perspective: 100rem;
}
.header-paragraph{
font-size: 3rem;
font-weight: 500;
color: var(--primary-color);
/*paragraph text too stretched out*/
max-width: 70rem;
/*Center text*/
margin: auto;
}
/*Creating a logo*/
.logo{
position: absolute;
top: 4rem;
right: 4rem;
}
.logo h1{
display: flex;
}
.logo h1 span{
font-size: 2rem;
font-weight: 900;
color: blue;
text-transform: uppercase;
background-color: var(--white-color);
/*Defining the width and height of each letter*/
width: 3.5rem;
height: 3.5rem;
margin: 0.5rem;
border-radius: 50%;
}
.logo h1 span:nth-child(1)
{
animation: drop-letters 7s 0.1s infinite;
}
.logo h1 span:nth-child(2)
{
animation: drop-letters 7s 0.2s infinite;
}
.logo h1 span:nth-child(3)
{
animation: drop-letters 7s 0.3s infinite;
}
.logo h1 span:nth-child(4)
{
animation: drop-letters 7s 0.4s infinite;
}
.logo h1 span:nth-child(5)
{
animation: drop-letters 7s 0.5s infinite;
}
.logo h1 span:nth-child(6)
{
animation: drop-letters 7s 0.6s infinite;
}
.logo h1 span:nth-child(7)
{
animation: drop-letters 7s 0.7s infinite;
}
.logo h1 span:nth-child(8)
{
animation: drop-letters 7s 0.8s infinite;
}
.logo h1 span:nth-child(9)
{
animation: drop-letters 7s 0.9s infinite;
}
.logo h1 span:nth-child(10)
{
animation: drop-letters 7s 1.0s infinite;
}
/*Animation keyframes namewhatyouwan*/
#keyframes drop-letters{
0%{
transform: translateY(0);
}
10%{
transform: translateY(0);
}
15%{
transform: translateY(-100%);
}
20%{
transform: translateY(0);
}
100%{
transform: translateY(0);
}
}
.header-image{
width: 35%;
animation: image-float 150s infinite;
}
#keyframes image-float{
0%{
transform: translateZ(40rem);
opacity: 1;
}
40%{
/* translateX(150rem) means move the image a bit to the right side*/
transform: translateZ(-500rem) translateX(150rem);
opacity: 0.8;
}
70%{
/* translateZ(-1500) means move the move the image even deeper inside
* translateX(150rem) means move the image a bit to the right side*/
transform: translateZ(-1500rem) translateX(800rem);
opacity: 0.6;
}
80%{
/* translateX(150rem) means move the image a bit to the right side*/
transform: translateZ(-50rem) translateX(100rem);
opacity: 0.8;
}
/*Remember 100% has to equal 0% for it to be looping the animation*/
100%{
transform: translateZ(40rem);
opacity: 1;
}
}
.popular-tours{
padding: 5rem 0 10rem 0;
}
.popular-tours-heading{
font-size: 9rem;
text-align: center;
margin-bottom: 9rem;
color: var(--primary-color);
text-shadow: 0 0.1rem 0.2rem var(--primary-color);
}
/*Align the cards side by side*/
.cards-wrapper{
display: flex;
/*even space between each card*/
justify-content: flex-start;
/*Added padding*/
padding: 25px 50px 25px;
align-content: space-between;
}
/*Give each card a specific dimension*/
.card{
width: 30rem;
}
/*This will inherit the width from the parent element card and when you want to make corners of an element rounded use border-radius property*/
.card-image{
width: 100%;
/*border-radius: topleft topright bottomright bottomleft */
border-radius: 0.3rem 0.3rem 0 0;
}
.front-side{
text-align: center;
background-color: var(--white-color);
/*Make the front-side a bit rounded*/
border-radius: 0.4rem;
/*to positon the child relative to its parent*/
position: relative;
}
.tour-name{
font-size: 2.5rem;
font-weight: 700;
text-transform: uppercase;
position: absolute;
top:40%;
right: 1.5rem;
color: var(--white-color);
text-shadow: 0 0 2rem #000;
}
.card-list{
width:80%;
margin: auto;
/*Create space within the list*/
padding: 2rem 0rem 3rem 0;/
}
.card-list-item{
font-size:1.7rem;
font-weight: 500;
color: var(--light-grey-color);
margin: 2rem 0;
border-bottom: 0.1rem solid var(--primary-color);
}
<!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"/>
<link href="https://fonts.googleapis.com/css?family=Vollkorn:400,400i,600,700,900&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="style.css"/>
<title>Responsive WebS</title>
</head>
<body>
<div class="container">
<!-- ASSIGNING CSS center to tag-->
<header class="header center">
<div class="header-text">
<h1 class="heading">2526 56837 27736259</h1>
<p class="header-paragraph">43 56837 86 2633 46 2 263 569 53835 244 8463</p>
</div>
<img src="images/parachute.jpg" alt="2526 Image" class="header-Image">
<!--CREATING A LOGO -->
<div class="logo">
<h2>
<span class="center">2</span>
<span class="center">5</span>
<span class="center">2</span>
<span class="center">6</span>
<span class="center">5</span>
<span class="center">6</span>
<span class="center">8</span>
<span class="center">3</span>
<span class="center">7</span>
<span class="center">2</span>
</h2>
</div>
</header>
<!--End of header-->
<section class="popular-tours">
<h1 class="popular-tours-heading">The Most Popular PL according to Nelan is 2. This is because it is easy, non-cryptic and developer-friendly according to 63426</h1>
<!--Wrapper Class of the cards -->
<div class="cards-wrapper">
<!--Creating the first card -->
<div class="card A">
<div class="front-side">
<img src="images/assembly.jpg" width="200" height="200" alt="FAV PL OF 2526" class="card-image">
<h1 class="name-of-Pl">The Best PL According To Nelan</h1>
<ul class="card-list">
<li class="card-list-item">MCGA</li>
<li class="card-list-item">Make C MAndatory to Learn at IS because 63527 Works There</li>
<li class="card-list-item">4 Required PL: C, Assembly, Machine Code, Objective-C</li>
<li class="card-list-item">Incorporate 366745377 BECAUSE 2526 56837 THEM</li>
<li class="card-list-item">Cryptic Difficulty: EASY BECAUSE 63527 56837 THEM</li>
</ul>
<button class="navigation-button">
price >>
</button>
</div>
<div class="back-side">
<button class="navigation-button">
<< back
</button>
<h3 class="tour-price">What it costs to go around seeing Nelans, C, Assembly, Compilers,Pintos and Machine Code:$FREE</h3>
<button class="card-button">Book Noew To Learn More ABout C,A,C,P,MC</button>
</div>
<div class="card B">
<div class="front-side">
<img src="images/tswift.jpg" width="200" height="200" alt="FAV ARTIST 2526" class="card-image">
<h1 class="name-of-Pl">The Best Artist For Nelan</h1>
<ul class="card-list">
<li class="card-list-item">But I knew you</li>
<li class="card-list-item">Dancing in your Levi's Drunk under a streetlight,</li>
<li class="card-list-item">I I knew you blabla balbal athis is 63527'S</li>
<li class="card-list-item">Goto Song</li>
</ul>
<button class="navigation-button">
price >>
</button>
</div>
<div class="back-side">
<button class="navigation-button">
<< back
</button>
<h3 class="tour-price">What it costs to go around seeing Nelans, C, Assembly, Compilers,Pintos and Machine Code:$3</h3>
<button class="card-button">Book Noew To Learn More ABout C,A,C,P,MC</button>
</div>
</div>
</div>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
Check out this snippet:
*{
margin: 0;
padding: 0;
font-family: 'Vollkorn', serif;
list-style-type: none;/*Removing the default list-type*/
text-decoration: none; /*Removing the default list-type*/
box-sizing: border-box;
outline: none;
}
/*Decreasing the default size of the html element*/
html{
font-size: 62.5%;
}
/*Creating a css variable to have a global scope*/
:root{
--primary-color: #2b81e4;
--secondary-color: #eee;
--white-color: #fff;
--grey-color: #555;
--light-grey-color: #777;
}
/*instead of creating every div for us to center it we will just give every html element a css class of center*/
.center{
display: flex;
justify-content: center;
align-items: center;
}
.container{
/*To be able to use the css variables we use the keyword var*/
background-color: var(--secondary-color);
margin: 3.5rem;
/*Creating a shadow effect*/
box-shadow: 0 1rem 3rem var(--grey-color);
overflow: hidden;
}
.header{
width: 100%;
/*100vh is 100 percent and I subtract 7rem from all four sides*/
height: calc(100vh-7rem);
background: linear-gradient(rgba(18,113,255,0.5),rgba(18,113,255,0.3)), url(images/parachute.jpg) center no-repeat;
background-size: cover;
position: relative;
}
.header-text{
/*text-align: center;*/
text-transform: uppercase;
letter-spacing: 0.1rem;
/*Adding text shadow*/
text-shadow: 0 0.3rem 0.5rem var(--light-grey-color);
}
.heading{
font-size: 8rem;
color: var(--secondary-color);
/*perspective property defines how far an object is away from the user*/
perspective: 100rem;
}
.header-paragraph{
font-size: 3rem;
font-weight: 500;
color: var(--primary-color);
/*paragraph text too stretched out*/
max-width: 70rem;
/*Center text*/
margin: auto;
}
/*Creating a logo*/
.logo{
position: absolute;
top: 4rem;
right: 4rem;
}
.logo h1{
display: flex;
}
.logo h1 span{
font-size: 2rem;
font-weight: 900;
color: blue;
text-transform: uppercase;
background-color: var(--white-color);
/*Defining the width and height of each letter*/
width: 3.5rem;
height: 3.5rem;
margin: 0.5rem;
border-radius: 50%;
}
.logo h1 span:nth-child(1)
{
animation: drop-letters 7s 0.1s infinite;
}
.logo h1 span:nth-child(2)
{
animation: drop-letters 7s 0.2s infinite;
}
.logo h1 span:nth-child(3)
{
animation: drop-letters 7s 0.3s infinite;
}
.logo h1 span:nth-child(4)
{
animation: drop-letters 7s 0.4s infinite;
}
.logo h1 span:nth-child(5)
{
animation: drop-letters 7s 0.5s infinite;
}
.logo h1 span:nth-child(6)
{
animation: drop-letters 7s 0.6s infinite;
}
.logo h1 span:nth-child(7)
{
animation: drop-letters 7s 0.7s infinite;
}
.logo h1 span:nth-child(8)
{
animation: drop-letters 7s 0.8s infinite;
}
.logo h1 span:nth-child(9)
{
animation: drop-letters 7s 0.9s infinite;
}
.logo h1 span:nth-child(10)
{
animation: drop-letters 7s 1.0s infinite;
}
/*Animation keyframes namewhatyouwan*/
#keyframes drop-letters{
0%{
transform: translateY(0);
}
10%{
transform: translateY(0);
}
15%{
transform: translateY(-100%);
}
20%{
transform: translateY(0);
}
100%{
transform: translateY(0);
}
}
.header-image{
width: 35%;
animation: image-float 150s infinite;
}
#keyframes image-float{
0%{
transform: translateZ(40rem);
opacity: 1;
}
40%{
/* translateX(150rem) means move the image a bit to the right side*/
transform: translateZ(-500rem) translateX(150rem);
opacity: 0.8;
}
70%{
/* translateZ(-1500) means move the move the image even deeper inside
* translateX(150rem) means move the image a bit to the right side*/
transform: translateZ(-1500rem) translateX(800rem);
opacity: 0.6;
}
80%{
/* translateX(150rem) means move the image a bit to the right side*/
transform: translateZ(-50rem) translateX(100rem);
opacity: 0.8;
}
/*Remember 100% has to equal 0% for it to be looping the animation*/
100%{
transform: translateZ(40rem);
opacity: 1;
}
}
.popular-tours{
padding: 5rem 0 10rem 0;
}
.popular-tours-heading{
font-size: 9rem;
text-align: center;
margin-bottom: 9rem;
color: var(--primary-color);
text-shadow: 0 0.1rem 0.2rem var(--primary-color);
}
/*Align the cards side by side*/
.cards-wrapper{
display: flex;
/*even space between each card*/
justify-content: flex-start;
/*Added padding*/
padding: 25px 50px 25px;
align-content: space-between;
}
/*Give each card a specific dimension*/
.card{
width: 30rem;
}
/*This will inherit the width from the parent element card and when you want to make corners of an element rounded use border-radius property*/
.card-image{
width: 100%;
/*border-radius: topleft topright bottomright bottomleft */
border-radius: 0.3rem 0.3rem 0 0;
}
.front-side{
text-align: center;
background-color: var(--white-color);
/*Make the front-side a bit rounded*/
border-radius: 0.4rem;
/*to positon the child relative to its parent*/
position: relative;
}
.tour-name{
font-size: 2.5rem;
font-weight: 700;
text-transform: uppercase;
position: absolute;
top:40%;
right: 1.5rem;
color: var(--white-color);
text-shadow: 0 0 2rem #000;
}
.card-list{
width:80%;
margin: auto;
/*Create space within the list*/
padding: 2rem 0rem 3rem 0;/
}
.card-list-item{
font-size:1.7rem;
font-weight: 500;
color: var(--light-grey-color);
margin: 2rem 0;
border-bottom: 0.1rem solid var(--primary-color);
}
<!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"/>
<link href="https://fonts.googleapis.com/css?family=Vollkorn:400,400i,600,700,900&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="style.css"/>
<title>Responsive WebS</title>
</head>
<body>
<div class="container">
<!-- ASSIGNING CSS center to tag-->
<header class="header center">
<div class="header-text">
<h1 class="heading">2526 56837 27736259</h1>
<p class="header-paragraph">43 56837 86 2633 46 2 263 569 53835 244 8463</p>
</div>
<img src="images/parachute.jpg" alt="2526 Image" class="header-Image">
<!--CREATING A LOGO -->
<div class="logo">
<h2>
<span class="center">2</span>
<span class="center">5</span>
<span class="center">2</span>
<span class="center">6</span>
<span class="center">5</span>
<span class="center">6</span>
<span class="center">8</span>
<span class="center">3</span>
<span class="center">7</span>
<span class="center">2</span>
</h2>
</div>
</header>
<!--End of header-->
<section class="popular-tours">
<h1 class="popular-tours-heading">The Most Popular PL according to Nelan is 2. This is because it is easy, non-cryptic and developer-friendly according to 63426</h1>
<!--Wrapper Class of the cards -->
<div class="cards-wrapper">
<!--Creating the first card -->
<div class="card A">
<div class="front-side">
<img src="images/assembly.jpg" width="200" height="200" alt="FAV PL OF 2526" class="card-image">
<h1 class="name-of-Pl">The Best PL According To Nelan</h1>
<ul class="card-list">
<li class="card-list-item">MCGA</li>
<li class="card-list-item">Make C MAndatory to Learn at IS because 63527 Works There</li>
<li class="card-list-item">4 Required PL: C, Assembly, Machine Code, Objective-C</li>
<li class="card-list-item">Incorporate 366745377 BECAUSE 2526 56837 THEM</li>
<li class="card-list-item">Cryptic Difficulty: EASY BECAUSE 63527 56837 THEM</li>
</ul>
<button class="navigation-button">
price >>
</button>
</div>
<div class="back-side">
<button class="navigation-button">
<< back
</button>
<h3 class="tour-price">What it costs to go around seeing Nelans, C, Assembly, Compilers,Pintos and Machine Code:$FREE</h3>
<button class="card-button">Book Noew To Learn More ABout C,A,C,P,MC</button>
</div>
</div>
<div class="card B">
<div class="front-side">
<img src="images/tswift.jpg" width="200" height="200" alt="FAV ARTIST 2526" class="card-image">
<h1 class="name-of-Pl">The Best Artist For Nelan</h1>
<ul class="card-list">
<li class="card-list-item">But I knew you</li>
<li class="card-list-item">Dancing in your Levi's Drunk under a streetlight,</li>
<li class="card-list-item">I I knew you blabla balbal athis is 63527'S</li>
<li class="card-list-item">Goto Song</li>
</ul>
<button class="navigation-button">
price >>
</button>
</div>
<div class="back-side">
<button class="navigation-button">
<< back
</button>
<h3 class="tour-price">What it costs to go around seeing Nelans, C, Assembly, Compilers,Pintos and Machine Code:$3</h3>
<button class="card-button">Book Noew To Learn More ABout C,A,C,P,MC</button>
</div>
</div>
</div>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
Actually you forget to add </div> for Card A.
Why does my wrapper move outside its position when i add an animation to it?
i am doing a simple animation to my header text box which i placed in the center of the header however when i added a animation the entire wrapper move down and to the right. how do i fix this? i added a code snippet as well as a image to see where the wrapper is moved
$(document).ready(function(){
$('.header-text-box').addClass('text-animation');
});
/*--#00b300*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body{
background-color: #fff;
color:#333333;
font-family: 'Raleway', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
.clearfix{zoom: 1}
.clearfix:after{
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
.row{
max-width: 1240px;
margin: 0 auto;
}
.row-small{
max-width: 100%;
margin: 0 auto;
}
section{
padding: 80px 0;
}
h1,
h2{
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
}
h2{
font-size: 250%;
word-spacing: 2px;
text-align: center;
margin-bottom: 30px;
}
h2:after{
display: block;
height: 2px;
background-color: #00919b;
content: " ";
width: 180px;
margin: 0 auto;
margin-top: 20px;
}
/* --------------------------------------------------- HEADER -------------------------------*/
header{
height: 100vh;
background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 34%, rgba(31, 31, 31, 0.69) 190%);
}
.header-text-box{
width: 1140px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.header-text-box h1{
border: 5px solid #333333;
padding: 5px;
font-size: 450%;
font-weight: 400;
color: #333333;
}
.header-text-box h3{
font-size: 150%;
font-weight: 300;
color: #00919b;
}
.anim{
-webkit-animation-duration: 1s;
-animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes text-animation{
0%{
opacity: 0;
-webkit-transform: translateY(-100px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
}
}
#keyframes text-animation{
0%{
opacity: 0;
-webkit-transform: translateY(-60px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
}
}
.text-animation{
-webkit-animation-name: text-animation;
animation-name: text-animation;
display:block !important;
}
<html lang = "en-us">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link rel="stylesheet" type = "text/css" href="css/grid.css">
<link rel="stylesheet" type = "text/css" href="css/animate.css">
<link rel="stylesheet" type = "text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" type = "text/css" href="css/main.css">
<link rel="stylesheet" type = "text/css" href="css/responsive.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:200,300,300i,400" rel="stylesheet">
<title>Carlos Elizondo</title>
</head>
<body>
<header>
<nav>
</nav>
<div class="header-text-box anim">
<h3>Hi. My name is </h3>
<h1>Carlos Elizondo</h1>
<h3>I am an aspiring web developer and current graduate</h3>
</div>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src = "js/jquery.waypoints.min.js"></script>
<script src= "js/wow.min.js"></script>
<script>new WOW().init();</script>
<script src = "js/portfolio.js"></script>
</body>
</html>
There were few errors with positioning. The main problem was that you positioned .header-text-box div absolutely and added left: 50% property to it, which caused that basically the div was constantly moved off the left margin of the document by 50% of the parent element length. I have just deleted that property and centered it horizontally and vertically with flex. Jsfiddle link Edit: Centering some content with following code: left: 50%; transform: translateY(-50%); Is quite handy when you want to center element with minimal width, e.g. a straight, vertical line. But in such cases as yours, it doesn't work properly because it just moves the element by 50% away of the left margin of the parent element, without taking element's width into account. You can easily notice it on my attached image: That's why you should use flexbox. However, it had some problems with compability with older browsers though, but currently the most of the modern browsers supports it and it's quite easy to implement.
Cannot get images or text centred
I am creating a portfolio website for myself, but the recent projects and companies I have working for sections are supposed to be centred but I can't get them centred.
How can I fix the code? I'm not good with technical programming words.
HTML:
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="assets/img/favicon.ico">
<title>Jacob Lane - Portfolio</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/ionicons.min.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="assets/js/ie10-viewport-bug-workaround.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="h">
<div class="logo">
<h2>PHOTOGRAPHY</h2>
</div>
<!--/logo-->
<div class="container centered">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1>Hello, my name is <b>Jacob Lane</b>.<br/>Enjoy. :)</h1>
</div>
</div>
<!--/row-->
<div class="row mt">
<div class="col-sm-4">
<i class="ion-ios7-copy-outline"></i>
<h3>Secure Photos</h3>
</div>
<!--/col-md-4-->
<div class="col-sm-4">
<i class="ion-monitor"></i>
<h3>Professionally Edited</h3>
</div>
<!--/col-md-4-->
<div class="col-sm-4">
<i class="ion-camera"></i>
<h3>Professionally Taken</h3>
</div>
<!--/col-md-4-->
</div>
<!--/row-->
</div>
<!--/container-->
</div>
<!--H-->
<div class="container ptb">
<div class="row">
<h2 class="centered mb"><b>My Gear:</b></h2>
<div class="col-md-6">
<p>To get the best shot in all photos, I use high-quality gear to make sure your memories can last a lifetime. Memories are an extraordinary thing to keep in your lifetime so using the best high-quality gear out it is good for what I offer.</p>
</div>
<!--/col-md-6-->
<div class="col-md-6">
<p>You can book a trial session or an event session below in the contact my area. Alternatively, you can see the feedback from I have gotten from past customers to get a realistic view of how good my gear can make memories last.</p>
</div>
<!--/col-md-6-->
</div>
<!--/row-->
</div>
<!-- /.container -->
<div class="container" id="j">
<div class="row">
<p class="text-align-center"><strong>My Camera</strong>, Known for its ablilty to have a good photo, the Canon EOS 1200D has a stunning lens to capture high definition moments. I use this camera as it is capable of taking stunning high definition photo's for those
beautiful moments in life.</p>
Canon EOS 1200D
<p class="text-align-center"><strong>My Lens</strong>, The Lengs on the camera help the camera become more high definition and let me create more stunning zoomed in shots when needed.</p>
Canon EF-S 18-55mm f/3.5-5.6 IS STM Zoom Lens //\\ Canon EF 75-300mm f/4.0-5.6 III Lens
<p class="text-align-center"><strong>My Tripod</strong>, The allows me to be at the right comfortable height when I am taking photos, it also allows me to take pictures more stable so that the focus is better.</p>
Velbon EF -61 Tripod
<!--/col-md-6-->
</div>
<!--/row-->
</div>
<!--/.container-->
<div id="g">
<div class="container">
<div class="row centered">
<h2>Past work:</h2>
<div class="col-md-8 col-md-offset-2">
<p>Here are some pass work that I have been allowed to put up :)</p>
</div>
<!--/col-md-8-->
</div>
<!--/row-->
</div>
<!--/.container-->
<div class="portfolio-centered mt">
<div class="recentitems portfolio">
<div class="portfolio-item graphic-design">
<div class="he-wrap tpl6">
<img src="assets/img/portfolio/portfolio_09.jpg" class="img-responsive" alt="">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<h3 class="a1" data-animate="fadeInDown">Motorbikes</h3>
<a data-rel="prettyPhoto" href="assets/img/portfolio/portfolio_09.jpg" class="dmbutton a2" data-animate="fadeInUp"><i class="ion-search"></i></a>
<i class="ion-link"></i>
</div>
<!-- he bg -->
</div>
<!-- he view -->
</div>
<!-- he wrap -->
</div>
<!-- end col-12 -->
</div>
<!-- portfolio -->
</div>
<!-- portfolio container -->
<div class="container mt">
<div class="row clients centered">
<p class="mb">Some clients that I had the pleasure to working for.</p>
<div class="col-sm-2 col-sm-offset-1">
<img src="assets/img/client1.png" alt="">
</div>
</div>
<!--/row-->
</div>
<!--/container-->
</div>
<!--/.G-->
<div id="sep">
<div class="container">
<div class="row centered">
<div class="col-md-8 col-md-offset-2">
<h1>I live in the amazing United Kingdom</h1>
<h3 class="mb">Click the button below to request prices and information about me.</h3>
<button class="btn btn-conf btn-clear">Request for Information</button>
</div>
</div>
<!--/row-->
</div>
<!--/container-->
</div>
<!--/.sep-->
<div id="f">
<div class="container">
<div class="row centered">
<div class="col-md-8 col-md-offset-2">
<p class="white">
Copyright © 2016 Jacob Lane Photography.
</p>
</div>
<!--/col-md-8-->
</div>
</div>
<!--/container-->
</div>
<!--/.F-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/retina-1.1.0.js"></script>
<script src="assets/js/jquery.hoverdir.js"></script>
<script src="assets/js/jquery.hoverex.min.js"></script>
<script src="assets/js/jquery.prettyPhoto.js"></script>
<script src="assets/js/jquery.isotope.min.js"></script>
<script src="assets/js/custom.js"></script>
<script>
// Portfolio
(function($) {
"use strict";
var $container = $('.portfolio'),
$items = $container.find('.portfolio-item'),
portfolioLayout = 'fitRows';
if ($container.hasClass('portfolio-centered')) {
portfolioLayout = 'masonry';
}
$container.isotope({
filter: '*',
animationEngine: 'best-available',
layoutMode: portfolioLayout,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
},
masonry: {}
}, refreshWaypoints());
function refreshWaypoints() {
setTimeout(function() {}, 1000);
}
$('nav.portfolio-filter ul a').on('click', function() {
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector
}, refreshWaypoints());
$('nav.portfolio-filter ul a').removeClass('active');
$(this).addClass('active');
return false;
});
function getColumnNumber() {
var winWidth = $(window).width(),
columnNumber = 1;
if (winWidth > 1200) {
columnNumber = 5;
} else if (winWidth > 950) {
columnNumber = 4;
} else if (winWidth > 600) {
columnNumber = 3;
} else if (winWidth > 400) {
columnNumber = 2;
} else if (winWidth > 250) {
columnNumber = 1;
}
return columnNumber;
}
function setColumns() {
var winWidth = $(window).width(),
columnNumber = getColumnNumber(),
itemWidth = Math.floor(winWidth / columnNumber);
$container.find('.portfolio-item').each(function() {
$(this).css({
width: itemWidth + 'px'
});
});
}
function setPortfolio() {
setColumns();
$container.isotope('reLayout');
}
$container.imagesLoaded(function() {
setPortfolio();
});
$(window).on('resize', function() {
setPortfolio();
});
})(jQuery);
</script>
</body>
</html>
CSS:
/* ################################################################
1. GENERAL STRUCTURES
################################################################# */
/* Import fonts */
#import url(http://fonts.googleapis.com/css?family=Roboto:300,400,700,900);
#import url("prettyPhoto.css") screen;
#import url("hoverex-all.css") screen;
/* cyrillic-ext */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
* {
margin: 0;
padding: 0px;
font-family: 'Roboto', sans-serif;
}
body {
background: #fff;
margin: 0;
color: #5a5a5a;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
p {
padding: 0;
margin-bottom: 12px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 18px;
line-height: 28px;
color: #666;
margin-top: 10px;
}
html,
body {
height: 100%;
}
.alignleft { float: left; }
.alignright { float: right; }
.aligncenter {
margin-left: auto;
margin-right: auto;
display: block;
clear: both;
}
.centered {text-align: center}
.mt {margin-top: 50px;}
.mb {margin-bottom: 50px;}
.mtb {margin-top: 50px; margin-bottom: 50px;}
.mtb2 { margin-top: 100px; margin-bottom: 100px;}
.ptb {padding-top: 80px; padding-bottom: 80px;}
.clear {
clear: both;
display: block;
font-size: 0;
height: 0;
line-height: 0;
width:100%;
}
::-moz-selection {
color: #fff;
text-shadow:none;
background:#2B2E31;
}
::selection {
color: #fff;
text-shadow:none;
background:#2B2E31;
}
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
a {
padding: 0;
margin: 0;
text-decoration: none;
-webkit-transition: background-color .4s linear, color .4s linear;
-moz-transition: background-color .4s linear, color .4s linear;
-o-transition: background-color .4s linear, color .4s linear;
-ms-transition: background-color .4s linear, color .4s linear;
transition: background-color .4s linear, color .4s linear;
color: #1abc9c;
}
a:hover,
a:focus {
text-decoration: none;
color:#696E74;
}
.nopadding {
padding: 0px !important;
margin: 0px;
}
/* FORM CONFIGURATION */
input {
font-size: 16px;
min-height: 40px;
border-radius: 2px;
line-height: 20px;
padding: 11px 30px 12px;
border: 1px solid #b9b9af;
margin-bottom: 10px;
background-color: #fff;
-webkit-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.white {
color: #fff;
}
.subscribe-input {
float: left;
width: 65%;
text-align: left;
margin-right: 2px;
}
.subscribe-submit {
right: 0;
}
.btn-download {
background: #FDE3A7;
}
.btn-conf {
border-radius: 50px;
margin-right: 15px;
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 14px 28px 13px 28px;
}
.btn-clear {
background: transparent;
color: white;
border: 2px solid white;
}
.btn-clear:hover {
background: white;
color: #2f2f2f;
}
.dmbutton:hover,
.dmbutton:active,
.dmbutton:focus{
color: #ffffff;
background-color: #222222;
border-color: #ffffff;
}
.dmbutton {
background:rgba(0, 0, 0, 0);
border: 1px solid #ffffff;
color: #ffffff;
-webkit-border-radius: 2px;
border-radius: 2px;
padding-top: 1.025rem;
padding-right: 2.25rem;
letter-spacing:0.85px;
padding-bottom: 1.0875rem;
padding-left: 2.25rem;
font-size: 1.55rem;
cursor: pointer;
font-weight: normal;
line-height: normal;
margin: 0 0 1.25rem;
text-decoration: none;
text-align: center;
display: inline-block;
-webkit-transition: background-color 300ms ease-out;
-moz-transition: background-color 300ms ease-out;
transition: background-color 300ms ease-out;
-webkit-appearance: none;
font-weight: normal !important;
}
/* HEADER SECTION */
#h {
background: url(../img/header.jpg) no-repeat center top;
padding-top: 5px;
background-attachment: relative;
background-position: center center;
min-height: 700px;
width: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: white;
}
#h .logo {
margin-top: 30px;
margin-left: 40px;
padding-bottom: 150px;
}
#h .logo h3{
font-weight: 900;
color: white;
letter-spacing: 1px;
}
#h3 {
font-weight: 900;
color: white;
letter-spacing: 1px;
}
#h .logo h2{
font-weight: 900;
color: white;
letter-spacing: 1px;
}
#h h3 {
margin-top: 10px;
}
#h i {
font-size: 50px;
}
#j {
padding-bottom: 50px;
}
/* GREY SECTION */
#g {
padding-top: 50px;
padding-bottom: 50px;
background: #f5f5f5;
}
.portfolio {
padding:0 !important;
margin:0 !important;
display:block;
}
.portfolio-item .title:before {border-radius:0; display:none}
.portfolio-item p {margin:0px 0 30px;}
.portfolio-item h3 {margin:-10px 0 10px; font-size:16px; text-transform:uppercase;}
.tpl6 h3
{
color:#fff;
margin:0;
padding:40px 5px 0;
font-size:16px;
text-transform:uppercase;
}
.tpl6 .dmbutton
{
display:inline-block;
margin:30px 5px 20px 5px;
font-size:13px;
}
.tpl6 .bg
{
height:100%;
width:100%;
background-color:#673AB7;
background-color:rgba(103,58,183,.9);
text-align:center;
}
/* CLIENTS */
.clients img {
max-width: 140px;
max-height: 60px;
vertical-align: middle;
}
.clients .col-sm-2 {
height: 80px;
line-height: 80px;
}
/* CONTACT SEPARATOR */
#sep {
background: url(../img/sep.jpg) no-repeat center top;
padding-top: 100px;
background-attachment: relative;
background-position: center center;
min-height: 450px;
width: 100%;
color: white;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: white;
}
#sep h3 {
font-weight: 300;
letter-spacing: 2px;
}
/* FOOTER */
#f {
padding-top: 25px;
padding-bottom: 25px;
background-color: #673AB7;
}
#f i {
margin-right: 30px;
font-size: 35px;
}
#f a {
color: white;
}
/* HEADER 2 - PORTFOLIO SECTION */
#h2 {
background: url(../img/header-2.jpg) no-repeat center top;
padding-top: 5px;
background-attachment: relative;
background-position: center center;
min-height: 700px;
width: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: white;
}
#h2 .logo {
margin-top: 30px;
margin-left: 40px;
padding-bottom: 150px;
}
#h2 .logo h2{
font-weight: 900;
color: white;
letter-spacing: 1px;
}
#h2 h3 {
margin-top: 30px;
letter-spacing: 1px;
}
You can try something like this: <div style='text-align:center'> You can put an image, text or whatever you want here ... </div>
I don't understand your question,
you can make a class in css called be centred so:
.centered {
position: absolute;
left: 50%;
margin-left: -100px;
}
in CSS file you have to put a . before the class name
then in the html file under a tag that you want to center add that class so for example inside the image that you want to centre or text that you want to center you can centre by referring to the class that you made so
< p class = centered>
or you can use the center tag around the paragraph you want to be centred so
<center> <p> paragraph <p> <center>