Center image in the middle of list with 50% overhang

Center image in the middle of list with 50% overhang - javascript

I am trying to get my image to center in the middle of my four list items (2 either side), however when trying to get it to work the list items just go below the image! I want the image to be responsive so if the page gets smaller then say 1000px it will simply move into the right place (i understand that will need to be done with different media screens.
Note: I am using CoolKitten One Page website framework as I have no understanding of Javascript
Live Demo
JSFiddle
HTML Code:
<!DOCTYPE HTML>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
<title>Brand New Club</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<!-- <link rel="stylesheet" href="css/style.min.css" type="text/css" media="screen"> -->
<!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div class="menu">
<div class="container clearfix">
<div id="nav" class="grid_9 omega">
<ul class="navigation">
<li data-slide="1">Home</li>
<li data-slide="2">About Us</li>
<div id="logo">
<img src="http://www.brandnewclub.com/images/brand-new-club-logo-final.png">
</div>
<li data-slide="3">Services</li>
<li data-slide="4">Contact</li>
</ul>
</div>
</div>
</div>
<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
<div class="container clearfix">
<div id="content" class="grid_7">
<h1>Top Slide</h1>
<h2>Get ready to make magic!</h2>
<p>Remember that this is a BETA version. This is my first framework so if you see any issue please let me know it. </p>
<p>Don't forget to follow me!</p>
<p><img src="images/twitter.png"> <img src="images/dribbble.png"></p>
</div>
<div id="decorative" class="grid_5 omega">
<img src="images/decorative.png">
</div>
</div>
</div>
<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">
<div class="container clearfix">
<div id="content" class="grid_12">
<h1>Parallax Scrolling</h1>
<h2>What you've seen its called parallax scrolling</h2>
</div>
</div>
</div>
<div class="slide" id="slide3" data-slide="3" data-stellar-background-ratio="0.5">
<div class="container clearfix">
<div id="content" class="grid_12">
<h1>Grid</h1>
<h2>See how the grid changes when you resize your screen</h2>
</div>
<div id="test" class="grid_1">1</div> <div id="test" class="grid_11 omega">11</div>
<div id="test" class="grid_2">2</div> <div id="test" class="grid_10 omega">10</div>
<div id="test" class="grid_3">3</div> <div id="test" class="grid_9 omega">9</div>
<div id="test" class="grid_4">4</div> <div id="test" class="grid_8 omega">8</div>
<div id="test" class="grid_5">5</div> <div id="test" class="grid_7 omega">7</div>
<div id="test" class="grid_6">6</div> <div id="test" class="grid_6 omega">6</div>
<div id="test" class="grid_7">7</div> <div id="test" class="grid_5 omega">5</div>
<div id="test" class="grid_8">8</div> <div id="test" class="grid_4 omega">4</div>
<div id="test" class="grid_9">9</div> <div id="test" class="grid_3 omega">3</div>
<div id="test" class="grid_10">10</div> <div id="test" class="grid_2 omega">2</div>
<div id="test" class="grid_11">11</div> <div id="test" class="grid_1 omega">1</div>
<div id="test" class="grid_12">12</div>
</div>
</div>
<div class="slide" id="slide4" data-slide="4" data-stellar-background-ratio="0.5">
<div class="container clearfix">
<div id="content" class="grid_12">
<h1>Credits</h1>
<h2>Cool Kitten was made by Jalxob.</h2>
<p>Don't forget to follow me!</p>
<p><img src="images/twitter.png"> <img src="images/dribbble.png"></p>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
<script type="text/javascript" src="js/waypoints.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<!-- <script type="text/javascript" src="js/scripts.min.js"></script> -->
</body>
</html>
CSS Code:
/* Global */
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 1em;
color: #8a8683;
background-color:#ffffff;
}
img {
max-width: 100%;
}
a:link {
color: #f68f67;
text-decoration: none;
}
a:hover {
color: #bde2df;
text-decoration: none;
}
a:visited {
color: #f68f67;
text-decoration: none;
}
/* Navigation */
.menu {
position:fixed;
top:0px;
width:100%;
height:auto;
background-color:#bbb;
z-index:100;
}
#logo {
padding: 10px;
}
#logo img {
width: 300px;
}
#nav {
text-align: center;
height: 100px;
margin: 30px auto;
min-width: 1100px;
}
.navigation{
list-style: none;
text-align: center;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
height: 100px;
line-height: 200px;
}
.navigation li{
padding:0 0 0 50px;
float: left;
display: inline;
}
.navigation li:hover{
cursor:pointer;
color: #a9d3d0;
}
.navigation .active{
cursor:pointer;
color: #f68f67;
font-weight:bold;
}
/* General Slides */
.slide{
background-attachment: fixed;
width:100%;
height:auto;
position: relative;
padding:140px 0;
}
/* Slide 1 */
#slide1{
background-color:#156;
}
#slide1 h1 {
font-size: 3.8em;
letter-spacing: -3px;
line-height: 0px;
color:#8a8683;
font-weight: 700;
}
#slide1 h2 {
font-size: 2em;
color: #8a8683;
line-height: 0px;
padding-bottom:20px;
font-weight: 400;
}
/* Slide 2 */
#slide2{
background-image:url('../images/footprints.png');
background-color:#f68f67;
color:#ffffff;
}
#slide2 h1 {
font-size: 3.8em;
letter-spacing: -3px;
line-height: 0px;
color:#ffffff;
font-weight: 700;
}
#slide2 h2 {
font-size: 2em;
color: #ffffff;
line-height: 0px;
padding-bottom:20px;
font-weight: 400;
}
/* Slide 3 */
#slide3{
background-color:#ffffff;
}
#slide3 h1 {
font-size: 3.8em;
letter-spacing: -3px;
line-height: 0px;
color:#8a8683;
font-weight: 700;
}
#slide3 h2 {
font-size: 2em;
color: #8a8683;
line-height: 0px;
padding-bottom:20px;
font-weight: 400;
}
#test{
background-color:#bde2df;
color:#ffffff;
text-align:center;
font-size: 2em;
font-weight: 400;
}
/* Slide 4 */
#slide4{
background-image:url('../images/sunglasses.png');
background-color:#8a8683;
color:#ffffff;
}
#slide4 h1 {
font-size: 3.8em;
letter-spacing: -3px;
line-height: 0px;
color:#ffffff;
font-weight: 700;
}
#slide4 h2 {
font-size: 2em;
color: #ffffff;
line-height: 0px;
padding-bottom:20px;
font-weight: 400;
}
/* Tablet */
#media screen and (max-width: 1024px) {
#logo {
width: 100%;
text-align: center;
}
#nav {
width:100%;
text-align:center;
margin:10px 0;
}
.navigation{
width: 100%;
float: center;
list-style: none;
margin: 0;
padding:0;
}
.navigation li{
float: left;
width:25%;
padding:0;
}
.slide{
background-attachment: fixed;
width:100%;
position: relative;
padding:150px 0;
}
#decorative {
display:none;
}
#content {
text-align:center;
width:100%;
}
#slide1 h1 {
line-height: 1em;
}
#slide1 h2 {
line-height: 1em;
}
#slide2 h1 {
line-height: 1em;
}
#slide2 h2 {
line-height: 1em;
}
#slide3 h1 {
line-height: 1em;
}
#slide3 h2 {
line-height: 1em;
}
#slide4 h1 {
line-height: 1em;
}
#slide4 h2 {
line-height: 1em;
}
}
/* Mobile */
#media screen and (max-width: 480px) {
#logo {
width: 100%;
text-align: center;
}
#nav {
width:100%;
margin:5px 0;
}
.navigation{
width: 100%;
float: left;
list-style: none;
margin: 0;
padding:0;
}
.navigation li{
float: left;
width:25%;
}
.slide{
background-attachment: fixed;
width:100%;
position: relative;
padding:150px 0;
}
#slide1 h1 {
line-height: 1em;
}
#slide1 h2 {
line-height: 1em;
}
#slide2 h1 {
line-height: 1em;
}
#slide2 h2 {
line-height: 1em;
}
#slide3 h1 {
line-height: 1em;
}
#slide3 h2 {
line-height: 1em;
}
#slide4 h1 {
line-height: 1em;
}
#slide4 h2 {
line-height: 1em;
}
}
Any tips and advice would be much appreciated!
Thanks in advance!

I have got it working for you using only CSS and not tables.
The way I saw best to do it was to split the lists and give one the property of float:left and the other float:right. I have to admit it is not the cleanest way of doing it but it works and for me that is the main thing.
JSFiddle
*Note: This will work on the larger screens better then smaller, I would suggest using media screen {} in your CSS for this to work *
Hope this helps!

I go for table in this context. Please find a sample.
<table width="100%" border="1" style="height:100%; padding:0px; margin:0px;">
<tr><td>Home</td><td></td><td>About Us</td></tr>
<tr><td rowspan="1"></td><td style="background:url(deep-forest.jpg) no-repeat; background-size:100%;width:400px;"></td><td rowspan="1"></td></tr>
<tr><td>Services</td><td></td><td>Contact</td></tr>
</table>
Image:
Let me know of any corrections.

You could done this that way :
#logo {
width: 100%;
text-align: center;
position: relative;
}
#logo img {
width: 300px;
height: auto;
margin-left: -150px;
position: absolute;
left: 50%;
}
Everything is explained here

Related

class text-content set into class slider but it is pushed down?

I am coding a very simple HTML CSS program and here is my problem.
I made a picture in id named slider, and I want to write some text into it. And as the tutorial, I wrote a class named text-content in the slider. Very easy to understand, right?
Here is all of my index.html code
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: Arial, Helvetica, sans-serif;
}
#main {
}
#header {
height: 46px;
background-color: #000;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#header .search-btn {
float: right;
padding: 12px 24px;
}
#header .search-btn:hover {
background-color: #f44336;
cursor: pointer;
}
#header .search-icon {
color: #fff;
font-size: 20px;
}
#nav {
display: inline-block;
}
#nav li {
position: relative;
}
#nav > li {
display: inline-block;
}
#nav li a {
text-decoration: none;
line-height: 46px;
padding: 0 24px;
display: block;
}
#nav .subnav li:hover a,
#nav > li:hover > a {
color : #000;
background-color: #ccc;
}
#nav > li > a {
color: #fff;
text-transform: uppercase;
}
#nav li:hover .subnav {
display: block;
}
#nav, .subnav {
list-style-type: none;
}
#nav .subnav {
display: none;
position: absolute;
background-color: #fff;
top :100%;
left :0;
box-shadow : 0 0 10px rgba(0, 0, 0, 0.3);
}
#nav .subnav a {
color: #000;
padding: 0px 16px;
min-width: 160px;
}
#nav .nav-arrow-down {
font-size: 14px;
}
#slider {
margin-top: 46px;
height: 400px;
min-height: 500px;
background-color: #333;
padding-top: 50%;
background: url('/assets/css/img/slider/slider1.jpg') top center / cover no-repeat;
}
#slider .text-heading {
}
#slider .text-description {
}
#content {
}
#footer {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./assets/css/styles.css">
<link rel="stylesheet" href="./assets/css/themify-icons-font/themify-icons/themify-icons.css">
</head>
<body>
<div id="main">
<div id="header">
<ul id="nav">
<li>HOME</li>
<li>BAND</li>
<li>TOUR</li>
<li>CONTACT</li>
<li>
<a href="">MORE
<i class="nav-arrow-down ti-arrow-circle-down"></i>
<ul class="subnav">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</a></li>
</ul>
<div class="search-btn">
<i class="search-icon ti-search"></i>
</div>
</div>
<div id="slider">
<div class="text-content">
<h2 class="text-heading">New York</h2>
<div class="text-description">We had the best time playing at Venice Beach!</div>
</div>
</div>
<div id="content" style="height: 1000px; background: #ccc;">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
That is all of my code.
Here is the tutorial's picture, as you can see, the text is in the picture
Because when I click on the picture, it said to me that it is in the slider.
As you can see in this picture
I thought that if the picture is in the slider, and the text-content is in the slider, the text-content must in the picture?
My question is, I put class text-content in id slider, but the class text-content is pushed down, as you can see in this picture
Could you please explain this problem to me? Thank you very much for your time.

I assume you want to make a Hero Image. You can move the text position up.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: Arial, Helvetica, sans-serif;
}
#main {
}
#header {
height: 46px;
background-color: #000;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#header .search-btn {
float: right;
padding: 12px 24px;
}
#header .search-btn:hover {
background-color: #f44336;
cursor: pointer;
}
#header .search-icon {
color: #fff;
font-size: 20px;
}
#nav {
display: inline-block;
}
#nav li {
position: relative;
}
#nav > li {
display: inline-block;
}
#nav li a {
text-decoration: none;
line-height: 46px;
padding: 0 24px;
display: block;
}
#nav .subnav li:hover a,
#nav > li:hover > a {
color : #000;
background-color: #ccc;
}
#nav > li > a {
color: #fff;
text-transform: uppercase;
}
#nav li:hover .subnav {
display: block;
}
#nav, .subnav {
list-style-type: none;
}
#nav .subnav {
display: none;
position: absolute;
background-color: #fff;
top :100%;
left :0;
box-shadow : 0 0 10px rgba(0, 0, 0, 0.3);
}
#nav .subnav a {
color: #000;
padding: 0px 16px;
min-width: 160px;
}
#nav .nav-arrow-down {
font-size: 14px;
}
#slider {
margin-top: 46px;
height: 400px;
min-height: 500px;
background-color: #333;
padding-top: 50%;
background: url('https://images.unsplash.com/photo-1474692295473-66ba4d54e0d3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=784&q=80') top center / cover no-repeat;
}
#slider .text-content{
position: absolute;
bottom: 25%;
}
#slider .text-heading {
}
#slider .text-description {
}
#content {
}
#footer {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./assets/css/styles.css">
<link rel="stylesheet" href="./assets/css/themify-icons-font/themify-icons/themify-icons.css">
</head>
<body>
<div id="main">
<div id="header">
<ul id="nav">
<li>HOME</li>
<li>BAND</li>
<li>TOUR</li>
<li>CONTACT</li>
<li>
<a href="">MORE
<i class="nav-arrow-down ti-arrow-circle-down"></i>
<ul class="subnav">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</a></li>
</ul>
<div class="search-btn">
<i class="search-icon ti-search"></i>
</div>
</div>
<div id="slider">
<div class="text-content">
<h2 class="text-heading">New York</h2>
<p class="text-description">We had the best time playing at Venice Beach!</p>
</div>
</div>
<div id="content" style="height: 1000px; background: #ccc;">
</div>
<div id="footer">
</div>
</div>
</body>
</html>

As you question that you want to create a hero image section and you facing some design issue. so you have to look for CSS properties that should you've to use. If you want a demo section like that then I can suggest you check this manual.
https://www.w3schools.com/howto/howto_css_hero_image.asp
You can redesign your section as you want.

For the #slider div, use display:inline-block:
#slider{display:inline-block}

Resizing Screen: Messes up sections on website

I was creating a website and am stuck because I keep resizing the screen and trying to make it mobile friendly. However, there are two sections that I cannot seem to fix. I cannot remember how I got the first three sections to stop moving while I resized the screen. I was wondering if I could get some help.
My website is shivaniahuja.com
If you look at the contact me page and the footer and try to resize them you will see the problem. Please let me know if you can help and I can attach my code if needed.
*{
margin: 0;
padding: 0;
}
#main{
width: 100%;
height: 100vh;
background-image: url(../imgs/Background.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
display: flex;
}
img{
width: 15%;
height: 100%;
}
#first-name{
display: inline-block;
font-family: 'Roboto', sans-serif;
font-size: 14px;
color: #2f3338;
padding-left: 2%;
font-size: 2vmin;
}
nav{
width: 100%;
height: 10vh;
background-color: #FFFFFF;
line-height: 80px;
z-index: 1;
position: fixed;
}
nav ul li{
list-style-type: none;
display: inline-block;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li a{
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-size: 2vmin;
color: #2f3338;
padding: 20px;
}
nav ul li a:hover{
color: #3377CC;
}
#main p{
position: absolute;
top: -1000px;
text-align: center;
color: white;
font-size: 50px;
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
section{
width: 100%;
text-align: center;
padding-top: 7%;
}
html{
scroll-behavior: smooth;
overflow-x: hidden;
}
section#about-me #p2{
width: 40%;
position: relative;
height: 40%;
float: right;
top: 40%;
margin-top: 3%;
right: 10%;
line-height: 200%;
font-family: 'Libre Franklin', sans-serif;
text-align: justify;
font-size: 2.2vmin;
}
section#about-me{
height: 60vh;
}
section#photography{
height: 110vh;
background-color: #F5F5F5;
}
section#experience{
height: 280vh;
background-color: #F5F5F5;
}
section#contact{
}
#contact-header{
font-size: 2.5vmin;
top: 20%;
}
section#about-me #pic{
width: 40%;
height: 40%;
position: absolute;
right: 55%;
margin-top: 2%
}
#contact-div{
position: relative;
top: 50%;
}
section#blog{
width: 100%;
padding-top: 8.5%;
}
.navs::before,
.navs::after {
display: inline-block;
content: "";
border-top: 2px solid black;
width: 5%;
margin: 0 1rem;
transform: translateY(-0.5rem);
}
h2{
position: relative;
top: -200;
}
#title{
position: absolute;
top: 50%;
font-size: 10vmin;
color: white;
left: 35%;
}
span{
position: absolute;
top: 60%;
font-size: 300%;
color: white;
left: 35%;
display: inline-block;
}
span:before{
content: 'HTML';
animation: animate infinite 8s;
position: relative;
left: 50%;
font-size: 6vmin;
}
#keyframes animate{
0%{
content: 'ENGINEER';
}
25%{
content: 'ENGINEER';
}
50%{
content: 'DEVELOPER';
}
75%{
content: 'DEVELOPER';
}
100%{
content: 'ANALYST';
}
}
.pic-and-text{
width: 18%;
height: 22%;
border-radius: 15%
}
section#experience #pic01{
left: -20%;
margin-top: 2%;
margin-bottom: 5%;
position: relative;
}
section#experience #berkeley-name{
position: relative;
font-size: 3vmin;
left: 5%;
top: 0%;
color: #3377CC;
font-family: 'Roboto', sans-serif;
}
section#experience #berkeley-major{
position: relative;
font-size: 16px;
bottom: 200px;
left: 78px;
color: #5E9515;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
section#experience #berkeley-location{
position: relative;
font-size: 16px;
bottom: 195px;
right: 65px;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
section#experience #berkeley-description{
position: relative;
bottom: 180px;
height: 40px;
width: 600px;
right: -610px;
font-family: 'Libre Franklin', sans-serif;
line-height: 30px;
font-size: 2vmin;
}
section#blog #full-blog{
position: relative;
top: -40px;
}
section#blog .blog-description{
font-size: 20px;
font-family: 'Libre Franklin', sans-serif;
line-height: 30px;
}
#pic001{
width: 17.5%;
}
#pic002{
width: 17.5%;
}
#pic003{
width: 17.5%;
}
.header{
font-size: 3.5vmin;
}
.blog-pics{
margin-left: .5%;
margin-top: 1%
}
section#blog #blog-description01{
margin-top: 15px;
}
#photography-paragraph{
font-size: 2.5vmin;
font-family: 'Libre Franklin', sans-serif;
margin-bottom: 2vh;
margin-top: 2vh;
}
.polaroid {
cursor:pointer;
margin:10px;
border: 1px solid #cccccc78;
background-color: #ffffff;
padding: 7%;
box-shadow: 4px 6px 4px #00000012;
text-align: center;
font-family: 'Caveat','Arial', sans-serif;
}
.polaroid .square {
background:black;
}
.polaroid .picture {
width:100%;
padding-top: 100%;
background-position: center;
background-size:cover;
opacity:0;
}
.polaroid.developed .square {
animation: flash 1.5s;
background:black;
}
.polaroid.developed .picture {
animation: fade-in 3s;
opacity:1;
}
.polaroid .labelName {
text-align: center;
font-size: 24px;
line-height:26px;
}
.polaroid-gallery {
display:-ms-grid;
display:grid;
-ms-grid-columns: 25% 25% 25% 25%;
grid-template-columns: 23% 23% 23% 23%;
margin-left: 5%
}
/* Adjust CSS Grid for Microsoft Edge */
.polaroid:nth-child(1) {
-ms-grid-row: 1;
-ms-grid-column:1;
}
.polaroid:nth-child(2) {
-ms-grid-row: 1;
-ms-grid-column:2;
}
.polaroid:nth-child(3) {
-ms-grid-row: 1;
-ms-grid-column:3;
}
.polaroid:nth-child(4) {
-ms-grid-row: 1;
-ms-grid-column:4;
}
.polaroid:nth-child(5) {
-ms-grid-row: 2;
-ms-grid-column:1;
}
#keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes flash {
2% {
background:black;
opacity: 0.5;
}
5% {
background:white;
opacity:1;
}
50% {
background:white;
opacity:.5
}
}
#footer{
background-color: #000000;
width: 100%;
padding-top: 2vh;
color: white;
padding-left: 1%;
}
#footer-paragraph{
position: relative;
top: 60%;
}
#import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
a, a:hover {
text-decoration: none;
}
.socialbtns, .socialbtns ul, .socialbtns li {
margin: 0;
padding: 5px;
}
.socialbtns li {
list-style: none outside none;
display: inline-block;
}
.socialbtns .fa {
width: 40px;
height: 28px;
color: #000;
background-color: #FFF;
border: 1px solid #000;
padding-top: 12px;
border-radius: 22px;
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
-o-border-radius: 22px;
}
.socialbtns .fa:hover {
color: #FFF;
background-color: #000;
border: 1px solid #000;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght#200&display=swap" rel="stylesheet">
<link rel="stylesheet" href ="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<h1 id="title"> SHIVANI AHUJA</h1>
<span></span>
<body>
<div class ="container">
<div id="main">
<nav>
<div id= "first-name"> SHIVANI AHUJA </div>
<ul>
<li> ABOUT ME </li>
<li> EXPERIENCE</li>
<li> BLOG POSTS</li>
<li> PHOTOGRAPHY</li>
<li> CONTACT </li>
</ul>
</nav>
</div>
<section id="about-me">
<h1 class="navs" class="header"> ABOUT ME</h1>
<img src="assets/imgs/paris-2017-home.jpeg" id="pic">
<div id="p2div">
<p id="p2"> Hey! My name is Shivani and I am an undergraduate student at UC Berkeley studying Computer Science. I'm super passionate about Artificial Intelligence and Natural Language Processing. Haha, I sound like a nerd right now, but I really love what I do! I've spent tons of hours curating images and watching HTML and CSS tutorials on Youtube to finally create this masterpiece that lies in front of you. The process of creating this website was fun, yet undeniably frustrating. After creating my first website from scratch, I plan to create many more and teach others how to recreate this process!</p>
</div>
</section>
<section id="experience">
<h1 class="navs"> HERE'S WHAT I'VE DONE SO FAR</h1>
<div class= "experience-squares" id="experience-square">
<img src="assets/imgs/coming.png" class="pic-and-text" id="pic01">
<p id="berkeley-name"> Creator and iOS Developer, Summer 2020</p>
<p id="berkeley-major"> IBS Application </p>
<p id="berkeley-location"> Hayward, CA</p>
<p id="berkeley-description"> Currently,</p>
</div>
</div>
</section>
<section id="blog">
<div id=full-blog>
<h1 class="navs" class="header">BLOG</h1>
<p class="blog-description" id= "blog-description01"> I write about women in tech, hiking, and some of my personal experiences.</p>
<p class="blog-description" id= "blog-description02"> Here are three of my recent posts:</p>
<div id="pictures">
<img src="assets/imgs/paris-2017-home.jpeg" id="pic001" class="blog-pics">
<img src="assets/imgs/paris-2017-home.jpeg" id="pic002" class="blog-pics">
<img src="assets/imgs/paris-2017-home.jpeg" id="pic003" class="blog-pics">
</div>
</div>
</section>
<section id="photography">
<h1 class="navs" class="header">PHOTOGRAPHY</h1>
<p id="photography-paragraph"> Creating memorabilia is an art. An art that has allowed me to capture the emotions, smiles, and happiness of every individual depcited in this gallery.</p>
<div class="polaroid-gallery">
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/sunflower.JPG')"></div>
</div>
<div class="labelName">SunFlowers</div>
<div class="labelText">Berkeley, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/pic-with-mom.png')"></div>
</div>
<div class="labelName">Mommy's Girl</div>
<div class="labelText">Ludhiana, PB</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/sailboat.jpg')"></div>
</div>
<div class="labelName">Sailboat</div>
<div class="labelText">Santa Cruz, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/glasses-aesthetic.JPG')"></div>
</div>
<div class="labelName">Foolin' Around</div>
<div class="labelText">Berkeley, CA</div>
</div>
</div>
<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
<div class="polaroid-gallery">
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/flowers.jpg')"></div>
</div>
<div class="labelName">Orchid Bush</div>
<div class="labelText">Hayward, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/graduation.jpg')"></div>
</div>
<div class="labelName"> Besties 4 Life!</div>
<div class="labelText">Hayward, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/background.jpg')"></div>
</div>
<div class="labelName">Pink Sky</div>
<div class="labelText">Lake Tahoe, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/cousins.PNG')"></div>
</div>
<div class="labelName">Three Idiots</div>
<div class="labelText">Ludhiana, PB</div>
</div>
<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
</section>
<div id="wrap">
<section id="contact">
<h1 class="navs" class="contact-header">CONTACT</h1>
<p id="contact-paragraph">If you have any inquiries or questions, please feel free to contact me on these social media
sites. I look forward to hearing from you! </p>
<br/>
<div align="center" class="socialbtns">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</section>
<section id="footer">
<p id="footer-paragraph"> Copyright #2020 Shivani Ahuja. All Rights Reserved.
</section>
</div>
</body>
</html>

I found one inconsistency were you wrapped up your div tag...
This often leads to buggy layouts just for not closing tags properly.
<div id="wrap">
<section id="contact">
<!-- your HTML code -->
<div align="center" class="socialbtns">
<!-- your HTML code -->
</div>
</div><!-- REMOVE THIS! did you want to finish div#wrap here ? -->
</section>
<section id="footer">
<p id="footer-paragraph"> Copyright #2020 Shivani Ahuja. All Rights Reserved.
</section>
</div><!-- or did you want to finish div#wrap here ? -->

To make the whole site responsive put a <meta> tag like the one below before and after the <body> tags.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Next, set out your HTML like this:
<div id="wrap">
<section id="contact">
<!-- Code here -->
<div align="center" class="socialbtns">
<!-- Your Code Here -->
</div>
</section>
<section id="footer">
<p id="footer-paragraph"> Copyright #2020 Shivani Ahuja. All Rights Reserved.
</section>
</div>
And of course use the <meta> tags I mentioned

Add position relative to .polaroid-gallery
.polaroid-gallery {
display: -ms-grid;
display: grid;
-ms-grid-columns: 25% 25% 25% 25%;
grid-template-columns: 40% 40% 40% 36%;
margin-left: 5%;
position: absolute;
}
nav {
width: 100%;
/* height: 10vh; */ i remove this for the menu dont resize to much
background-color: #FFFFFF;
line-height: 80px;
z-index: 1;
position: fixed;
}
section#contact {
margin-bottom: 2vh;
font-size: 2.5vmin;
border: 3px solid red; /* to test */
background: black; /* to test */
}
i recommend you check the structure of your html, and relative sizes to responsive design

css positioning i am having a problem with positioning

i am new to web development, I have a small problem with positioning i placed a element with content in it all of the word are grumble up instead of be in one line . can anyone help me with a solution. positioning has been a big problem for me so far so if you guys know any sources where i can learn more about css positioning
#import url('https://fonts.googleapis.com/css?family=Yantramanav:100');
#import url('https://fonts.googleapis.com/css?family=Montserrat:400');
#import url('https://fonts.googleapis.com/css?family=Poiret+One');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.content h1 {
font-family: "Yantramana";
font-size: 600%;
font-weight: 100;
color: #E1EFE9;
line-height: 70%;
}
.btn{
font-family: "montserrat";
font-size: 135%;
font-weight: 400;
color: orange;
text-transform: uppercase;
text-decoration: none;
border: solid #ffffff;
padding: 10px 20px;
border-radius: 9px;
transition: all 0.7s;
}
.btn:hover {
color: #CBDFD6;
border: solid #CBDFD6;
}
.about-us{
height:100%;
width: 100%;
margin: auto;
display: table;
background-color: #ffffff;
background-size: cover;
position: relative;
}
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: absolute;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
.ab-p{
position: absolute;
top: 10%;
left: 50%;
font-weight: lighter;
transform: translateX(-50%);
font-family: "montserrat";
}
.color {
color:orange;
}
/*--- Media Queries --*/
#media screen and (max-width: 900px) {
}
#media screen and (max-width: 768px) {
}
#media screen and (max-width: 480px) {
}
<!DOCTYPE html>
<html>
<head>
<title>Full Screen Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="css/animate.css" rel="stylesheet"/>
<link href="css/waypoints.css" rel="stylesheet"/>
<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="js/waypoints.js" type="text/javascript"></script>
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">
<h1>Find <span class="color">Your</span> Taste!</h1>
</section>
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<a class="btn" href="#">Get Started</a>
</div>
</div>
</section>
<section class="about-us">
<div class="ab-inner">
<div class="ab-content">
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<h2 class="center">Our Mission</h2>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">
<p class="ab-p">Our mission is to provide the best food ingedients.</p>
</div>
</div>
</section>
</body>
</html>

"Relative" "position" relates positions, so this can avoid mess.
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: relative;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}

I assume you would like the "Our Mission" section to be centered and readable.
.ab-p {
font-weight: lighter;
font-family: "montserrat";
text-align: center;
}
h2 {
text-align: center;
}
Recommendation: don't use position:absolute unless you absolutely needed it, because this rule removes the element from the automatic positioning of the browser - meaning you are in complete control of where to position it.

Site Overlay not working "Uncaught ReferenceError: closeNav is not defined"

I'm trying to code a site just to learn but i can't get something to work on my site togheter with all the other elments but if i code that part alone it works. I'm talking about a bottom navigation bar or "Filter". I want it to slide down if i press on "x" but it doesn't and in the browser console i get this message "Uncaught ReferenceError: closeNav is not defined" and "Uncaught ReferenceError: openNav is not defined"
Here's the code (it's pretty messy):
function openNav() {
document.getElementById("myFilterTab").style.height = "100px";
}
function closeNav() {
document.getElementById("myFilterTab").style.height = "0%";
}
body {
margin:0;
background-color: white;
color: #a5a5af;
font: 12px/1.4em Arial,sans-serif;
}
#header {
position: relative;
background-color: #77c9d4;
color: #FFF;
height: 11.3%;
}
#header input{
position:absolute;
top: 20px;
padding: 5px 9px;
height: 30px;
margin-left: 700px;
width: 600px;
border: 1px solid #a4c3ca;
background: #FFFFFF;
border-radius: 6px 0px 0px 6px;
}
.SearchBar{
color:black;
}
.SearchBar:focus{
outline:0;
color:black;
}
.SearchButton{
position:absolute;
padding:6px 15px;
left:1300px;
bottom:64px;
border: 1px solid #57BC90;
background-color:#57BC90;
color:#fafafa;
border-radius: 0px 6px 6px 0px;
}
.SearchButton:active{
outline:0;
}
.SearchButton:hover{
background-color:#015249;
border-color: #015249;
}
#logo {
font-size: 30px;
line-height: 40px;
padding: 15px;
color:white;
}
ul {
position:relative;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #57BC90;
}
li {
border-right:1px solid #57BC90;
float:left;
}
#NavBar{
width:455.76px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.Login{
float:right;
text-decoration: none;
}
li a:hover{
color:white;
text-decoration:none;
}
li a:hover:not(.active) {
background-color: #015249;
}
.active {
background-color: #015249;
}
br.clearLeft {
clear: left;
}
* {
margin: 0;
}
.glyphicon-log-in{
right: 4px !important;
}
.openBox{
position:absolute;
width: 50px;
background-color: #57BC90;
top: -24px;
left:926px;
cursor:pointer;
}
.glyphicon-chevron-right{
transform: rotate(-90deg);
font-size:20px;
color:white;
right: -13px;
top: 3px;
}
.glyphicon-remove{
position:absolute;
left: 1865px;
top: 13px;
font-size:20px;
color:white;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
.footer{
background-color:#77c9d4;
}
.ShowBox{
padding:1px;
border: 1px solid gray;
height:108px;
width: 192px;
}
.FilterTab{
transition: 0.5s;
position: fixed;
height: 100px;
width: 100%;
padding: 1px;
background-color: #57BC90;
bottom: 0px;
border-radius: 20px 20px 0px 0px;
}
#media screen and (max-height: 450px) {
.FilterTab {padding-top: 15px;}
.FilterTab a {font-size: 18px;}
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
<!DOCTYPE html>
<html>
<head>
<title>PC Master</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" type="text/css" href="ScrollBar.css">
<link rel="stylesheet" type="text/javascript" href="ScrollBar.js">
</head>
<body>
<div id="header">
<div id="logo">PC Master</div>
<form method="get">
<input class="SearchBar" type="text" name="search" placeholder="Cauta.." required>
<button type="submit" Value="submit" class="SearchButton"><span class="glyphicon glyphicon-search"></span></button>
</form>
<ul>
<li>Home</li>
<li>Componente</li>
<li>Periferice</li>
<li>Contact</li>
<li class="Login"><span class="glyphicon glyphicon-log-in" ></span>Login</li>
</ul>
<br class="clearLeft" />
</div>
<div class="FilterTab" id="myFilterTab">
</span>
<div class="openBox"><span class="glyphicon glyphicon-chevron-right" onclick='openNav()'></span></div>
</div>
<div class='wrapper'>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class='push'></div>
</div>
<div class='footer' id="logo">PC Master</div>
</body>
</html>
The site is only for full hd monitor so in smaller monitors it won't look ok.

JavaScript is not a stylesheet
<link rel="stylesheet" type="text/javascript" href="ScrollBar.js">
use a script tag like all of the other includes in the page
<script src="ScrollBar.js"></script>

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>

We Keep Coding

JavaScript is the programming language of the Web.

Center image in the middle of list with 50% overhang - javascript

You could done this that way : #logo { width: 100%; text-align: center; position: relative; } #logo img { width: 300px; height: auto; margin-left: -150px; position: absolute; left: 50%; } Everything is explained here

Related

class text-content set into class slider but it is pushed down?

Resizing Screen: Messes up sections on website

css positioning i am having a problem with positioning

Site Overlay not working "Uncaught ReferenceError: closeNav is not defined"

Cannot get images or text centred

Categories

Resources