So I have this front page and I'm trying to have the button align towards the middle like below the text, but I've tried adding margins and it won't move. Any tips?
.parallax {
height: 100vh;
width: 100%;
background-color: #C4CBCA;
background-attachment: scroll; /*fixed: image scrolls; scroll: image stays*/
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.create {
background-color: #a4cdd1;
color: white;
min-width: 214px;
border: none;
height: 43px;
display: inline-block;
float: right;
font: 700 15px Lato, arial, helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
align-items: center;
padding: 13px 15px 10px;
/*margin-left: 300px;*/
/*margin-top: 10px;*/
border: none;
cursor: pointer;
}
#animated-example {
font: 700 30px Lato, arial, helvetica, sans-serif;
color: #5D5F71;
float: right;
margin-top: 200px;
margin-right: 20px;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
animation-timing-function: linear;
}
#keyframes lightSpeedIn {
0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
}
.lightSpeedIn {
animation-name: lightSpeedIn;
animation-timing-function: ease-out;
}
.animated.lightSpeedIn {
animation-duration: 1s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>front page</title>
<link rel="stylesheet" href="front.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato|Raleway">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow">
</head>
<body>
<div class="parallax">
<div id="animated-example" class="animated lightSpeedIn">
<p>SOME TEXT HERE</p>
</div>
<div class="photo">
<img src="macmockup.png" style="width:675px; height:675px; margin-left:20px; margin-top:15px;">
</div>
<div class="create">
Create Template
</div>
</div>
</body>
</html>
So whats killing you here is the float right it is overriding anything you add after that.
Now i don't think this is the best solution but if you remove the float you can then add whatever margin left you need to get the button to move.
something to look into for you would be bootstrap, it is a much cleaner way to format a lot of this http://getbootstrap.com/
Try to do this Remove float: right from .create
<div class="create_wrapper">
<div class="create">
Create Template
</div>
</div>
CSS
.create {
background-color: #a4cdd1;
color: white;
min-width: 214px;
border: none;
height: 43px;
display: inline-block;
font: 700 15px Lato, arial, helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
align-items: center;
padding: 13px 15px 10px;
margin: auto;
border: none;
cursor: pointer;
}
.create_wrapper {
width: 100%;
text-align: center
}
Try to align .create to center if you want it in the middle.
.create{ text-align: center; }
add following css on your style:
.parallax {
position: relative;
}
.create {
position: absolute;
bottom: 0;
right:0;
}
check live http://codepen.io/sifulislam/pen/qaAjgY
Related
I've build a webpage currently only with the header in it with simple html and css. And I've made sure that I've only used the px unit to specify the root font size and the rest to use rem unit, yet the page is not responsive. When the windows is scaled down the fonts are staying the same.
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}
body {
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.7;
color: #777;
padding: 3rem;
}
.text-box {
position: absolute;
top: 40%;
left: 50%;
transform: translate(
-50%,
-50%
);
text-align: center;
}
.header {
height: 95vh;
background-image: linear-gradient(
to right bottom,
rgba(126, 213, 111, 0.8),
rgba(40, 180, 133, 0.8)
),
url(../img/hero.jpg);
background-size: cover;
background-position: top;
clip-path: polygon(
0 0,
100% 0,
100% 75vh,
0 100%
);
position: relative;
}
.logo-box {
position: absolute;
top: 4rem;
left: 4rem;
}
.logo {
height: 3.5rem;
}
.text-box {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.heading-primary {
color: #fff;
text-transform: uppercase;
backface-visibility: hidden;
margin-bottom: 6rem;
}
.heading-primary-main {
display: block;
font-size: 6rem;
font-weight: 400;
letter-spacing: 3.5rem;
animation-name: moveInLeft;
animation-duration: 1s;
animation-timing-function: ease-in;
}
.heading-primary-sub {
display: block;
font-size: 2rem;
font-weight: 700;
letter-spacing: 1.75rem;
animation: moveInRight 1s ease-in;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/icon-font.css" />
<link rel="stylesheet" href="css/style.css" />
<!-- tab icon -->
<link rel="shortcut icon" type="image/png" href="img/favicon.png" />
<title>Natours | Exciting tours for adventurous people</title>
</head>
<body>
<header class="header">
<div class="logo-box">
<img class="logo" src="img/logo-white.png" alt="logo" />
</div>
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">Outdoors</span>
<span class="heading-primary-sub">is where life happends</span>
</h1>
Discover out tours
</div>
</header>
</body>
</html>
Anybody see where I screwed up?
Browser: Chrome
Change font-size to units of vw instead of rem.
.heading-primary-main {
display: block;
font-size: 10vw;
font-weight: 400;
letter-spacing: 1.0rem;
animation-name: moveInLeft;
animation-duration: 1s;
animation-timing-function: ease-in;
}
.heading-primary-sub {
display: block;
font-size: 4vw;
font-weight: 700;
letter-spacing: .75rem;
animation: moveInRight 1s ease-in;
}
You will have to play with your letter spacing to get it to your liking.
I would recommend calling the font from the CSS so you only use it when you need it.
Another recommendation would be that you use endpoints in css and when you want to change the font use the !important
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
I am working on this web page designing. I used visual studio code for this. And used HTML and CSS. Also I'm a beginner to web designing.
Design gets messy when resize the browser window size. Texts,images and other contents moves here and there.
Design changes when browser change (IE,chrome,Firefox). ex:-Border margins change.
What should I do?
*{
margin: 0%;
padding: 0%;
box-sizing: content-box;
}
html{
font-size: 10px;
font-family: 'Amatic SC', cursive;
}
section{
width: 100%;
height: 100%;
color: #fff;
background: linear-gradient(45deg,#770a0a,#a01919,#d3163f,#d3511e,#ee2f16);
background-size: 400% 400%;
position: relative;
animation: change 30s ease-in-out infinite;
}
h1{
font-size: 380%;
letter-spacing: 0.5vh;
text-transform: uppercase;
border: 0.3vh solid white;
border-radius: 7vh;
float: left;
position: absolute;
padding: 1% 5%;
padding-left: 1%;
top: 80%;
left: 50%;
transform: translate(-50%,-50%);
}
.imp:hover{
color:rgb(245, 231, 167);
}
#keyframes change{
0%{
background-position:0 50% ;
}
50%{
background-position:100% 50% ;
}
100%{
background-position:0 50% ;
}
}
.icon{
width: 11%;
position: absolute;
top: 32.5%;
left: 53%;
transform: translate(-50%,-50%);
}
.menu{
font-size: 280%;
border: 0.3vh solid white;
border-radius: 7vh;
float: right;
position: relative;
margin-right: 2%;
margin-top: 2%;
}
.menu ul li{
display: inline-block;
line-height: 150%;
margin: 0 3vh;
padding: 0.009%;
cursor: pointer;
position:relative;
font-weight: bold;
}
.menu ul li:hover{
font-size: 130%;
}
a:link, a:visited {
color: white;
cursor: auto;
}
a:link:active, a:visited:active {
color: white;
}
.Home{
color: rgb(245, 231, 167);
}
.about{
font-size: 300%;
position: absolute;
padding: 2%;
top: 53%;
left: 50%;
text-align: center;
transform: translate(-50%,-50%);
}
.hola{
font-size: 250%;
}
.next{
width: 3%;
position: absolute;
top: 80%;
left: 56%;
transform: translate(-50%,-50%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title>ImpressMe | Home</title>
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght#700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<img class="icon" src="cute.png" alt="Boy" title="Hola....">
<div class="go">
<a href="sendme/sendme.html" class="imp">
<h1>Impress Me</h1>
<img class="next" src="go.png" alt="go"></a>
</div>
<div class="about">
<p class="hola">Hola.....!</p><p>you look familiar<br>I'm pretty sure you got something to impress me<br>Tell me<br>I would love to hear from you</p>
</div>
<div class="menu">
<ul>
<a href="index.html">
<li class="Home">Home</li></a>
<a href="About/about.html">
<li class="#">About</li></a>
<li class="#">Contact</li>
</ul>
</div>
</section>
</body>
</html>
I recommend you to learn about Bootstrap for example here. For your problem you actually only need Container and Grid System Basics, to make your site responsive.
Also for your problem with different browsers use Normalize.css to make it look more consistent. (It's already included in Bootstrap)
I am trying to get these two buttons to align side by side, in the center of the page both vertically and horizontally.
I have been fiddling with it for hours trying everything and I just can't get it to both center align to the page and line up side by side
I was hoping someone could point me in the right direction. Thank you..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
body{ margin:0;
font:normal 75% Arial, Helvetica, sans-serif;
background-color:grey;}
canvas{ display: block; vertical-align: bottom; }
/* ---- particles.js container ---- */
#particles-js{ position:absolute; width: 100%;
height: 45%;
background-image: url("star-sky.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
z-index: -2;}
.count-particles{
position: absolute;
top: 48px;
left: 0;
width: 80px;
color: #13E8E9;
font-size: .8em;
text-align: left;
text-indent: 4px;
line-height: 14px;
padding-bottom: 2px;
font-family: Helvetica, Arial, sans-serif; font-weight: bold; }
.js-count-particles{ font-size: 1.1em; }
#stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; }
#stats{ border-radius: 3px 3px 0 0; overflow: hidden; }
.count-particles {
border-radius: 0 0 3px 3px;
}
h1 {
color:white;
text-align: center;
}
button {
border-color:white;
border-width: 2px;
display: inline-flex;
justify-content: center;
position: absolute;
top: 45%;
transform: translate(-50%, -50%);
border-color:white;
border-width: 2px;
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
}
/* add glow to button *\
</style>
</head>
<body>
<div>
<h1><button>GitHub</button></h1>
<h1><button>Test</button></h1>
<div>
<div class="particlesdiv2" id="particles-js"></div>
<div>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
</div>
<script> particlesJS("particles-js", {"particles":{"number":{"value":80,"density":{"enable":true,"value_area":800}},"color":{"value":"#ffffff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":true,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});var count_particles, stats, update; stats = new Stats; stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles'); update = function() { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);;
</script>
</body>
</html>
There is no float: center. Put a container element around them and apply text-align: center to that one for the horizontal alignment.
In the following snippet I did that plus defined the h1 elements as inline-block, plus some other settings -> see the last three CSS rules.
body {
margin: 0;
font: normal 75% Arial, Helvetica, sans-serif;
background-color: grey;
}
canvas {
display: block;
vertical-align: bottom;
}
/* ---- particles.js container ---- */
#particles-js {
position: absolute;
width: 100%;
height: 45%;
background-image: url("star-sky.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
z-index: -2;
}
.count-particles {
position: absolute;
top: 48px;
left: 0;
width: 80px;
color: #13E8E9;
font-size: .8em;
text-align: left;
text-indent: 4px;
line-height: 14px;
padding-bottom: 2px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
}
.js-count-particles {
font-size: 1.1em;
}
#stats,
.count-particles {
-webkit-user-select: none;
margin-top: 5px;
margin-left: 5px;
}
#stats {
border-radius: 3px 3px 0 0;
overflow: hidden;
}
.count-particles {
border-radius: 0 0 3px 3px;
}
h1 {
color: white;
text-align: center;
}
.button-container {
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
.button-container h1 {
display: inline-block;
}
button {
border-color: white;
border-width: 2px;
display: inline-flex;
justify-content: center;
border-color: white;
border-width: 2px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="button-container">
<h1><button>GitHub</button></h1>
<h1><button>Test</button></h1>
</div>
<div class="particlesdiv2" id="particles-js"></div>
<div>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
</div>
So I want to make my website have an initial first background sort of like the one on this website. For some reason, the picture is way too big and I can't resize it with any position property or even the background-size property regardless of everything I have tried for the past 2+ days. I also need it to be visible through the transparent nav-bar I have. I would then continue all the content of the webpage underneath the background. Also, I am new to this website so I'm not sure how to insert a random image to serve as an example of the problem, but you can see in the snippet where I inserted the image as the last piece of code in the HTML.
Here is my code:
/**********BODY GENERAL**********/
body {
margin: 0;
}
strong {
font-weight: bold;
}
/*********NAVIGATION*********/
nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 1em;
grid-auto-rows: auto;
text-align: center;
align-items:center;
background: /*rgba(255, 51, 0, .95);
*/
list-style-type: none;
z-index: 10;
}
#media screen and (max-width: 900px) {
nav {
grid-template-columns: 100%;
grid-template-rows: auto;
grid-gap: 1em;
}
}
.menu1 {
grid-column: 1;
}
.menu2 {
grid-column: 2;
}
.logo {
grid-column: 3;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
font-size: 28px;
width:500px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 7vh;
margin-bottom: 25px;
color: #000;
text-transform: uppercase;
letter-spacing: 3px;
}
.menu3 {
grid-column: 4;
}
.menu4 {
grid-column: 5;
}
/**************HOVER ANIMATION**************/
div > a {
font-family: 'Raleway';
text-transform: uppercase;
text-decoration: none;
color: #000;
position: relative;
font-size: 0.8rem;
}
div > a:hover {
color: #000;
}
div > a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -4px;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
div > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/**********MAIN HEADER***********/
header {
color: white;
justify-content: center;
align-content: center;
top: 0;
bottom: 0;
left: 0;
}
#header-div {
height: 100%;
width: 100%;
top: 0;
left: 0;
background: url(Images/BkgImg/HSNCT%202018%205th%20in%20Nation.jpg) no-repeat center;
position: absolute;
z-index: -5;
background-size: 275px 125px !important;
}
.titel-text {
color: #fff;
font-size: 10em;
text-align: center;
width: 100%;
padding-top: 100px;
}
/**********BODY*****************/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Centennial It's Academic</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
</head>
<body>
<header>
<nav class="container">
<div class="menu1">
<a class="navLinks" href="#home">Home</a>
</div>
<div class="menu2">
<a class="navLinks" href="#upcoming">Tournaments</a>
</div>
<div class="logo">
<p>It's Academic</p>
</div>
<div class="menu3">
<a class="navLinks" href="#history">History</a>
</div>
<div class="menu4">
<a class="navLinks" href="#faq">Contact Info</a>
</div>
</nav>
<!-- Background Image -->
<div id="header-div">
<img src="Images/BkgImg/It's%20Ac%20semi%20finals%202017-18%20%20(8).JPG">
</div>
</header>
<p> askdfhkjsdhfl;</p>
</body>
</html>
Sounds like you need to add a background-size: cover. Remove your div and img tags and then wrap your header tags with a div and add a class bg-img to it. Then add this following CSS:
.bg-img {
background: url(''https://images.unsplash.com/photo-1508781015212-46d58946bb05?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39b69f4b9e54ea449f90e3d714bf9215&auto=format&fit=crop&w=1951&q=80) no-repeat center center;
background-size: cover;
height: 100vh;
}
I made this CSS typewriter animation however, I'm unable to make it responsive.
The below is my code:
HTML:
<div class="animation">
<p>CRISTIANO RONALDO</p>
</div>
CSS:
.animation p{
color: #D64933;
font-family: 'Lato', cursive;
font-size: 50px;
white-space: nowrap;
overflow: hidden;
width: 30em;
animation: title 7s steps(70, end);
margin-bottom: 40px;
}
#keyframes title{
from { width: 0; opacity: 0.0;}
to { opacity: 1.0; }
}
I want the animation to start from center of the page and also be responsive. Any thoughts on how it can be achieved?
Link to CodePen
Pretty straight forward with flexbox.
wrap your animation in a container.
set display to flex
justify-content and align items to center
set height of body html and container to 100%
set font size to a view height so it remains responsive
body, html{
height: 100%;
}
.container{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.animation p{
color: #D64933;
font-family: 'Lato', cursive;
font-size: 10vh;
white-space: nowrap;
overflow: hidden;
width: 30em;
animation: title 7s steps(70, end);
margin-bottom: 40px;
}
#keyframes title{
from { width: 0; opacity: 0.0;}
to { opacity: 1.0; }
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="animation">
<p class="text-center">CRISTIANO RONALDO</p>
</div>
</div>
I'm not saying it's the best fix but at least it works (tho there is some shaking) :
/*CSS*/
.animation {
width: 100%;
text-align: center;
}
.animation p{
margin: 0;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
color: #D64933;
font-family: 'Lato', cursive;
font-size: 50px;
white-space: nowrap;
overflow: hidden;
width: 30em;
animation: title 3s steps(70, end);
margin-bottom: 40px;
}