I've coded an animation for my navbar, which shows the log in form when hovered, but when I remove the mouse from it, it just disappears, I would like it to smoothly go away the same way it came, what do I have to add to the code?
HTML
<!DOCTYPE html>
<html>
<head>
<title>¡Servicios en un Chasquido! | Chasquido Servicios</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script defer src="js/fontawesome-all.js"></script>
</head>
<body>
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul class="menu">
<li class="home">INICIO</li>
<li class="with-arrow">CONTACTO</li>
<li class="with-arrow">REGISTRATE</li>
<li class="with-arrow">INGRESAR
<div class="login-box">
<h2>Datos</h2>
<form>
<p>CORREO</p>
<input type="text" name="" placeholder="Escribir e-mail">
<p>CONTRASEÑA</p>
<input type="password" name="" placeholder="Escribir Contraseña">
<input type="submit" name="" value="Listo">
¿Contraseña olvidada?
</form>
</div>
</li>
</ul>
</nav>
</header>
</div>
<div id="carousel1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="1"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
<li data-target="#carousel1" data-slide-to="3"></li>
<li data-target="#carousel1" data-slide-to="4"></li>
<li data-target="#carousel1" data-slide-to="5"></li>
<li data-target="#carousel1" data-slide-to="6"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/portada1.png" width="1900px">
</div>
<div class="item">
<img src="images/portada2.png" width="1900px">
</div>
<div class="item">
<img src="images/portada3.png" width="1900px">
</div>
<div class="item">
<img src="images/portada4.png" width="1900px">
</div>
<div class="item">
<img src="images/portada5.png" width="1900px">
</div>
<div class="item">
<img src="images/portada6.png" width="1900px">
</div>
<div class="item">
<img src="images/portada7.png" width="1900px">
</div>
</div>
<a href="#carousel1" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true">
</span>
</a>
<a href="#carousel1" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true">
</span>
</a>
</div>
</div>
</div>
</body>
</html>
CSS:
.main-wrapper{
margin: 0 auto;
width: 95%;
min-width: 900px;
}
body{
margin: 0;
background: #222;
font-family: sans-serif;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background: #151515 ;
}
.logo{
float: left;
padding: 10px 0;
}
nav{
float: right;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
position: relative;
z-index:1000;
}
nav li{
display: inline-block;
margin-left: 50px;
padding: 40px;
position: relative;
}
nav a{
color: lightgrey;
}
nav a:hover {
color: white;
text-decoration: none;
}
body{
margin: 0;
padding: 0;
background: white;
}
.menu {
display: flex;
list-style: none;
background-color: #151515;
margin-left: 50px;
}
.menu li.with-arrow {
padding: 35px 50px;
cursor: pointer;
padding-bottom: 20px;
position: relative;
margin: 5px;
color: lightgray;
font-family: sans-serif;
margin-left: 50px;
}
.menu li.with-arrow:after {
font-family: FontAwesome;
font-size: 20px;
content: '\f107';
display: inline-block;
color: yellow;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
transition: transform 0.3s ease;
}
.menu li.with-arrow:hover {
background-color: rgba(0, 0, 0, 0.25);
}
.menu li.with-arrow:hover:after {
transform: translate(-50%, 5px);
}
.menu li {
padding: 35px 15px;
padding-bottom: 20px;
position: relative;
margin: 5px;
color: lightgray;
font-family: sans-serif;
cursor: pointer;
}
.menu li:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: white;
overflow: hidden;
z-index: -1;
transform: scaleX(0);
transform-origin: right;
transition: .15s;
}
.menu li:hover:before{
transform: scaleX(1);
transform-origin: left;
}
.menu li.home:after{
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 3px;
background: white;
overflow: hidden;
z-index: -1;
transform: scaleX(0);
transform-origin: left;
transition: .15s;
}
.menu li.home:hover:after{
transform: scaleX(1);
transform-origin: right;
}
.menu li:hover {
background-color: rgba(0, 0, 0, .25);
color: white;
}
.login-box{
width: 350px;
height: 420px;
padding: 80px 40px;
box-sizing: border-box;
background: rgba(0, 0, 0, .8);
position: absolute;
right: 0px;
top: 100%;
opacity: 0;
visibility: hidden;
cursor: auto;
}
.menu li:hover .login-box{
animation: load .3s forwards;
display: block;
visibility: visible;
}
#keyframes load{
0%{
transform: translateX(25px) scale(1.6);
}
100%{
opacity: 1;
transform: translateX(0px);
}
}
h2 {
margin: 0;
padding: 0px;
color: #efed40;
text-align: center;
}
.login-box p
{
margin: 0;
padding: 0;
color: white;
}
.login-box input
{
width: 100%;
margin-bottom: 20px;
}
.login-box input[type="text"],
.login-box input[type="password"]
{
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: white;
font-size: 16px;
}
::placeholder
{
color: rgba(255, 255, 255, .3);
font-family: sans-serif;
font-weight: bold;
}
.login-box input[type="submit"]
{
border: none;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
background: #ff267e;
cursor: pointer;
border-radius: 20px;
}
.login-box input[type="submit"]:hover
{
background: #efed40;
color: #262626;
}
.login-box a
{
color: #fff;
font-size: 14px;
text-decoration: none;
}
.login-box a:hover
{
color: yellow;
}
This is my entire code if you would like to see it, if it looks unprofessional or something like that, please know that I'm new to all this and it'll take me some time, I'm still in the dark here, anyway, thanks!
You can't leave the </ul> outside of the tag you put the <ul> in. Your code is:
<nav>
<ul class="menu">
<li class="home">INICIO</li>
<li class="with-arrow">CONTACTO</li>
<li class="with-arrow">REGISTRATE</li>
<li class="with-arrow">INGRESAR
<div class="login-box">
<h2>Datos</h2>
<form>
<p>CORREO</p>
<input type="text" name="" placeholder="Escribir e-mail">
<p>CONTRASEÑA</p>
<input type="password" name="" placeholder="Escribir Contraseña">
<input type="submit" name="" value="Listo">
¿Contraseña olvidada?
</form>
</div>
</li>
</nav>
That's not valid, and it simply doesn't make any sense. It's like doing <nav><ul></nav></ul>
It should be:
<nav>
<ul class="menu">
<li class="home">INICIO</li>
<li class="with-arrow">CONTACTO</li>
<li class="with-arrow">REGISTRATE</li>
<li class="with-arrow">INGRESAR
<div class="login-box">
<h2>Datos</h2>
<form>
<p>CORREO</p>
<input type="text" name="" placeholder="Escribir e-mail">
<p>CONTRASEÑA</p>
<input type="password" name="" placeholder="Escribir Contraseña">
<input type="submit" name="" value="Listo">
¿Contraseña olvidada?
</form>
</div>
</li>
</ul>
</nav>
For this simple animation you dont need the keyframes. This animation can easily create with transition. If you want to have the animation with keyframes you need to work with javascript and so you can handle the classes from li when entering and leaving the element with the mouse. You can then give various animations to the different classes
.menu li .login-box {
transform: translateX(25px) scale(1.6);
opacity: 0;
transition: .3s all linear;
}
.menu li:hover .login-box {
display: block;
visibility: visible;
opacity: 1;
transform: translateX(0px);
}
And here is the result with your Codesample:
.main-wrapper {
margin: 0 auto;
width: 95%;
min-width: 900px;
}
body {
margin: 0;
background: #222;
font-family: sans-serif;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
z-index: 1000;
}
nav li {
display: inline-block;
margin-left: 50px;
padding: 40px;
position: relative;
}
nav a {
color: lightgrey;
}
nav a:hover {
color: white;
text-decoration: none;
}
body {
margin: 0;
padding: 0;
background: white;
}
.menu {
display: flex;
list-style: none;
background-color: #151515;
margin-left: 50px;
}
.menu li.with-arrow {
padding: 35px 50px;
cursor: pointer;
padding-bottom: 20px;
position: relative;
margin: 5px;
color: lightgray;
font-family: sans-serif;
margin-left: 50px;
}
.menu li.with-arrow:after {
font-family: FontAwesome;
font-size: 20px;
content: '\f107';
display: inline-block;
color: yellow;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
transition: transform 0.3s ease;
}
.menu li.with-arrow:hover {
background-color: rgba(0, 0, 0, 0.25);
}
.menu li.with-arrow:hover:after {
transform: translate(-50%, 5px);
}
.menu li {
padding: 35px 15px;
padding-bottom: 20px;
position: relative;
margin: 5px;
color: lightgray;
font-family: sans-serif;
cursor: pointer;
}
.menu li:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: white;
overflow: hidden;
z-index: -1;
transform: scaleX(0);
transform-origin: right;
transition: .15s;
}
.menu li:hover:before {
transform: scaleX(1);
transform-origin: left;
}
.menu li.home:after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 3px;
background: white;
overflow: hidden;
z-index: -1;
transform: scaleX(0);
transform-origin: left;
transition: .15s;
}
.menu li.home:hover:after {
transform: scaleX(1);
transform-origin: right;
}
.menu li:hover {
background-color: rgba(0, 0, 0, .25);
color: white;
}
.login-box {
width: 350px;
height: 420px;
padding: 80px 40px;
box-sizing: border-box;
background: rgba(0, 0, 0, .8);
position: absolute;
right: 0px;
top: 100%;
opacity: 0;
visibility: hidden;
cursor: auto;
}
.menu li .login-box {
transform: translateX(25px) scale(1.6);
opacity: 0;
transition: .3s all linear;
}
.menu li:hover .login-box {
display: block;
visibility: visible;
opacity: 1;
transform: translateX(0px);
}
h2 {
margin: 0;
padding: 0px;
color: #efed40;
text-align: center;
}
.login-box p {
margin: 0;
padding: 0;
color: white;
}
.login-box input {
width: 100%;
margin-bottom: 20px;
}
.login-box input[type="text"],
.login-box input[type="password"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: white;
font-size: 16px;
}
::placeholder {
color: rgba(255, 255, 255, .3);
font-family: sans-serif;
font-weight: bold;
}
.login-box input[type="submit"] {
border: none;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
background: #ff267e;
cursor: pointer;
border-radius: 20px;
}
.login-box input[type="submit"]:hover {
background: #efed40;
color: #262626;
}
.login-box a {
color: #fff;
font-size: 14px;
text-decoration: none;
}
.login-box a:hover {
color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>¡Servicios en un Chasquido! | Chasquido Servicios</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script defer src="js/fontawesome-all.js"></script>
</head>
<body>
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul class="menu">
<li class="home">INICIO</li>
<li class="with-arrow">CONTACTO</li>
<li class="with-arrow">REGISTRATE</li>
<li class="with-arrow">INGRESAR
<div class="login-box">
<h2>Datos</h2>
<form>
<p>CORREO</p>
<input type="text" name="" placeholder="Escribir e-mail">
<p>CONTRASEÑA</p>
<input type="password" name="" placeholder="Escribir Contraseña">
<input type="submit" name="" value="Listo">
¿Contraseña olvidada?
</form>
</div>
</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
The js Result: jsfidde
Related
I am a beginner and I am learning HTML and CSS. I am trying to make a webpage but the menu of the webpage is not working fully.
There is another menu in the main menu like the nested menu (I actually don't know what it is called). The first menu is working perfectly but the nested menu is not working. I want, if I click on the Menu option, which is indicated in the image, the second menu appears over the first menu.
The red mark on the image is the link to the second menu.
My menu will be like Starbucks menu which appears when the width is 768px.
My Codes:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
html, body {
overflow-x: hidden;
height: 100%;
}
.header {
background-color: #fff;
width: 100%;
height: 83px;
position: fixed;
z-index: 10;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.header {
display: flex;
align-items: center;
}
.header .logo {
padding-left: 2rem;
}
.header .logo img {
width: 50px;
}
.toogle-menu {
width: 25px;
height: 25px;
position: absolute;
top: 25px;
right: 2rem;
z-index: 20;
cursor: pointer;
}
.spinner {
background-color: #000;
height: 3px;
margin: 5px 0;
transition: all 0.3s ease;
}
#menu:checked ~ .toogle-menu > .spinner.middle {
opacity: 0;
}
#menu:checked ~ .toogle-menu > .spinner.top {
transform: rotate(135deg);
margin-top: 15px;
}
#menu:checked ~ .toogle-menu > .spinner.bottom {
transform: rotate(-135deg);
margin-top: -16px;
}
#menu:checked ~ .sidebarMenu, .nested-menu a #nested:checked ~ .menu-2 {
transform: translateX(0);
}
.sidebarMenu, .menu-2 {
height: 100%;
width: 80vw;
margin-top: 83px;
position: fixed;
top: 0;
right: 0;
background-color: #fff;
border-left: 1px solid rgb(235, 227, 227);
transform: translateX(80vw);
transition: all 0.3s ease;
}
.sidebarMenu ul, .menu-2 ul {
padding: 1rem 2rem 3rem 2rem;
}
.sidebarMenu ul li, .menu-2 ul li {
margin-bottom: 2rem;
}
.sidebarMenu ul li a, .menu-2 ul li a {
color: #000;
font-size: 24px;
}
.nested-menu a label {
display: flex;
justify-content: space-between;
font-size: 24px;
cursor: pointer;
}
.nested-menu a input {
visibility: hidden;
}
.btn-list {
margin-top: 2rem;
}
.btn {
padding: 7px 16px !important;
border: 1px solid #000 !important;
font-size: 16px !important;
border-radius: 30px !important;
color: #1E3932 !important;
font-weight: 500 !important;
}
.btn-black {
background-color: #000 !important;
color: #fff !important;
margin-left: 1rem;
}
<!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>Hamburger Menu</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="mobile-menu">
<div class="header">
<div class="logo">
<img src="./starbucks-logo.png" alt="">
</div>
</div>
<input type="checkbox" id="menu">
<label for="menu" class="toogle-menu">
<div class="spinner top"></div>
<div class="spinner middle"></div>
<div class="spinner bottom"></div>
</label>
<div class="sidebarMenu">
<ul>
<li class="nested-menu">
<a href="#">
<input type="checkbox" id="nested">
<label for="nested">Menu <i class="fas fa-chevron-right"></i></label>
</a>
</li>
<li>Rewards</li>
<li>Gift Cards</li>
<hr>
<li class="btn-list">
Sign in
Join now
</li>
<li class="location"><i class="fas fa-map-marker-alt"></i> Find a store</li>
</ul>
</div>
<div class="menu-2">
<ul>
<li>All Orders</li>
<li>Featured</li>
<li>Previous Orders</li>
<li>Favorite Products</li>
</ul>
</div>
</div>
</body>
</html>
Why it is not working?
How can I fix the issue and what is the solution?
Place .menu-2 with the next item after <input type="checkbox" id="nested" />.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
html,
body {
overflow-x: hidden;
height: 100%;
}
.header {
background-color: #fff;
width: 100%;
height: 83px;
position: fixed;
z-index: 10;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.header {
display: flex;
align-items: center;
}
.header .logo {
padding-left: 2rem;
}
.header .logo img {
width: 50px;
}
.toogle-menu {
width: 25px;
height: 25px;
position: absolute;
top: 25px;
right: 2rem;
z-index: 20;
cursor: pointer;
}
.spinner {
background-color: #000;
height: 3px;
margin: 5px 0;
transition: all 0.3s ease;
}
#menu:checked ~ .toogle-menu > .spinner.middle {
opacity: 0;
}
#menu:checked ~ .toogle-menu > .spinner.top {
transform: rotate(135deg);
margin-top: 15px;
}
#menu:checked ~ .toogle-menu > .spinner.bottom {
transform: rotate(-135deg);
margin-top: -16px;
}
#nested {
display: none;
}
#menu:checked ~ .sidebarMenu,
.nested-menu #nested:checked ~ .menu-2 {
transform: translateX(0);
}
.sidebarMenu,
.menu-2 {
height: 100%;
width: 80vw;
margin-top: 83px;
position: fixed;
top: 0;
right: 0;
background-color: #fff;
border-left: 1px solid rgb(235, 227, 227);
transform: translateX(80vw);
transition: all 0.3s ease;
}
.sidebarMenu ul,
.menu-2 ul {
padding: 1rem 2rem 3rem 2rem;
}
.sidebarMenu ul li,
.menu-2 ul li {
margin-bottom: 2rem;
}
.sidebarMenu ul li > *,
.menu-2 ul li a {
color: #000;
font-size: 24px;
cursor: pointer;
}
.nested-menu a label {
display: flex;
justify-content: space-between;
font-size: 24px;
cursor: pointer;
}
.nested-menu a input {
visibility: hidden;
}
.btn-list {
margin-top: 2rem;
}
.btn {
padding: 7px 16px !important;
border: 1px solid #000 !important;
font-size: 16px !important;
border-radius: 30px !important;
color: #1e3932 !important;
font-weight: 500 !important;
}
.btn-black {
background-color: #000 !important;
color: #fff !important;
margin-left: 1rem;
}
<!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>Hamburger Menu</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous" />
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="mobile-menu">
<div class="header">
<div class="logo">
<img src="./starbucks-logo.png" alt="" />
</div>
</div>
<input type="checkbox" id="menu" />
<label for="menu" class="toogle-menu">
<div class="spinner top"></div>
<div class="spinner middle"></div>
<div class="spinner bottom"></div>
</label>
<div class="sidebarMenu">
<ul>
<li class="nested-menu">
<input type="checkbox" id="nested" />
<label for="nested">Menu <i class="fas fa-chevron-right"></i></label>
<div class="menu-2">
<ul>
<li>All Orders</li>
<li>Featured</li>
<li>Previous Orders</li>
<li>Favorite Products</li>
</ul>
</div>
</li>
<li>Rewards</li>
<li>Gift Cards</li>
<hr />
<li class="btn-list">
Sign in
Join now
</li>
<li class="location">
<i class="fas fa-map-marker-alt"></i> Find a store
</li>
</ul>
</div>
</div>
</body>
</html>
Q1
Firstly, how can I move down and without affecting the content within section 1 so the icons will be inline with the navigation bar text "Liam Docherty's Digital Portfolio" using bootstrap?
Here is a picture of how my site currently looks so you can see the current issue at hand.
JSFiddle
<style>
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: right;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center
}
.dropdown .dropdown-menu {
background-color: #4D5061;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: #FFFFFF;
border-radius: 9px;
transition: all .2s;
}
.navbar.navbar-default ul li a:hover {
color: white;
background-color: rgba(20, 50, 40, 0.5)
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.nav-title {
font-size: 14pt;
margin: 0;
top: 35px;
left: 50px;
width: 100%;
position: absolute;
text-align: center;
color: white;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
.hero {
background: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg") center center no-repeat;;
background-attachment: fixed;
position: relative;
background-size: cover;
width: 100%;
max-width: 100%;
width: 100vw;
height: 100%;
}
section {
position: relative;
padding:10vh 0 0;
min-height:100vh;
}
.section1 {
height: 100vh;
text-align: center;
color: white;
}
.section2 {
background-color: #FFFFFF;
text-align: center;
color: white;
min-height:90vh;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.fa-angle-up {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.icon-style {
position: relative;
top:20px;
}
.footer {
height: 3vh;
background-color: #4D5061;
padding: 0;
right: 0;
bottom: 0;
left: 0;
}
.footertext {
font-size: 14pt;
color: white;
font-family: 'Roboto', sans-serif;
text-align: center;
}
.profile.box {
bottom: 0;
height: 50%;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 50%;
}
.shape {
border-radius: 25px;
display: inline-block;
background: #4D5061;
content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
color: white;
height: 250px;
margin: auto;
padding: 3px;
width: 250px;
}
.shape2 {
background: linear-gradient(35deg, #4D5061, #4D5061);
border-radius: 85px;
color: white;
height: 40px;
margin: 1% auto;
opacity: 0.9;
display: inline-block;
padding: 0px;
width: 250px;
}
.fa {
padding: 20px;
font-size: 20px;
text-align: center;
text-decoration: none;
margin: 7px 6px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.7;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
#feedback-page{
text-align:center;
}
#form-main{
width:100%;
float:left;
padding-top:0px;
}
#form-div {
background-color:rgba(72,72,72,0.4);
padding-left:35px;
padding-right:35px;
padding-top:35px;
padding-bottom:50px;
width: 850px;
height: 500px;
float: left;
left: 50%;
position: absolute;
margin-top:30px;
margin-left: -260px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.feedback-input {
color:#3c3c3c;
font-family: Helvetica, Arial, sans-serif;
font-weight:500;
font-size: 18px;
border-radius: 0;
line-height: 22px;
background-color: #fbfbfb;
padding: 13px 13px 13px 54px;
margin-bottom: 10px;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
}
.feedback-input:focus {
background: #fff;
box-shadow: 0;
border: 3px solid #3498db;
color: #3498db;
outline: none;
padding: 13px 13px 13px 54px;
}
.focused{
color:#30aed6;
border:#30aed6 solid 3px;
}
#name {
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#name:focus {
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 8px 5px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email {
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email:focus {
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#comment {
background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
textarea {
width: 100%;
height: 150px;
line-height: 150%;
resize:vertical;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
background-color:white;
}
#button-blue {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
float:left;
width: 100%;
border: #fbfbfb solid 4px;
cursor:pointer;
background-color: #3498db;
color:white;
font-size:24px;
padding-top:22px;
padding-bottom:22px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-top:-4px;
font-weight:700;
}
#button-blue:hover {
background-color: rgba(0,0,0,0);
color: #0493bd;
}
.submit:hover {
color: #3498db;
}
.ease {
width: 0px;
height: 74px;
background-color: #fbfbfb;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
.submit:hover .ease {
width:100%;
background-color:white;
}
#media only screen and (max-width: 580px) {
#form-div {
left: 3%;
margin-right: 3%;
width: 88%;
margin-left: 0;
padding-left: 3%;
padding-right: 3%;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1 class="nav-title">Liam Docherty's Digital Portfolio</h1>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<section id="section1" class="section1">
<div class="hero">
<div class="profile box">
<div class="shape"></div>
<div class="shape2">
<p>kjjjjjjjjjkjjjkkjkj</p>
</div>
</div>
</div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section id="contact-me" class="contact_section section2">
<h2 class="contact-text">Contact Me Now!</h2>
<div id="form-main">
<div id="form-div">
<form class="form" id="form1">
<p class="name">
<input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
</p>
<p class="email">
<input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
</p>
<p class="text">
<textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
</p>
<div class="submit">
<input type="submit" value="SEND" id="button-blue"/>
<div class="ease"></div>
</div>
</form>
</div>
<i class="fa fa-angle-up" style="font-size:100px;"></i>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<footer>
<div class="footer">
<h2 class="footertext">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h2>
</div>
</footer>
</body>
</html>
The fiddle is not displaying properly so its tough to say, but try the following CSS to the .fa elements:
position: relative;
top: 10px;
adjust top to whatever works
You can try and add this to your css. You can adjust margin-top according to your needs, this should work since you got simple links.
.navbar-header a.fa-twitter, .navbar-header a.fa-linkedin {
display:inline-block;
margin-top:5px;
}
Try this:
HTML
CSS
.icon-style {
position: relative;
top:20px;
}
Q1
How can I remove the white line under the navigation bar on section 1/2? I have tried changing the html layout incase I a line gap was the issue which caused this to occur. However, I have had no luck trying to resolve this problem.
Q2
How can I remove the white above the footer on section2?
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: right;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center
}
.dropdown .dropdown-menu {
background-color: #4D5061;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: #FFFFFF;
border-radius: 9px;
transition: all .2s;
}
.navbar.navbar-default ul li a:hover {
color: white;
background-color: rgba(20, 50, 40, 0.5)
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
.hero {
background: url("https://static.pexels.com/photos/7064/man-notes-macbook-computer.jpg") center center no-repeat;
;
background-attachment: fixed;
position: relative;
background-size: cover;
width: 100%;
max-width: 100%;
width: 100vw;
height: 100%;
}
section {
position: relative;
padding: 10vh 0 0;
min-height: 100vh;
}
.section1 {
height: 100vh;
text-align: center;
color: white;
}
.section2 {
background-color: dimgrey;
text-align: center;
color: white;
min-height: 90vh;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.fa-angle-up {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.footer {
height: 3vh;
background-color: #4D5061;
padding: 0;
right: 0;
bottom: 0;
left: 0;
}
.nav-title {
font-size: 14pt;
margin: 0;
top: 35px;
left: 8px;
width: 100%;
position: absolute;
text-align: center;
color: white;
font-family: 'Roboto', sans-serif;
}
.s1-welcome {
font-family: 'Roboto', sans-serif;
color: white;
font-size: 45pt;
font-size: 2.5em;
text-align: center;
margin: 0;
}
.footertext {
font-size: 14pt;
color: white;
font-family: 'Roboto', sans-serif;
text-align: center;
}
.contact-text {
font-size: 35pt;
font-weight: bold;
color: white;
font-family: 'Roboto', sans-serif;
text-align: center;
}
p {
font-size: 20pt;
color: white;
font-family: 'Roboto', sans-serif;
text-align: center;
}
.profile.box {
bottom: 0;
height: 50%;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 50%;
}
.shape {
border-radius: 25px;
display: inline-block;
background: #4D5061;
content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
color: white;
height: 250px;
margin: auto;
padding: 3px;
width: 250px;
}
.fa {
padding: 20px;
font-size: 20px;
text-align: center;
text-decoration: none;
margin: 7px 6px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.7;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.icon-style {
position: relative;
top: 10px;
}
.arrow1 {
color: white;
position: relative;
}
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
#feedback-page {
text-align: center;
}
#form-main {
width: 100%;
float: left;
padding-top: 0px;
}
#form-div {
background-color: rgba(72, 72, 72, 0.4);
padding-left: 35px;
padding-right: 35px;
padding-top: 35px;
padding-bottom: 50px;
width: 850px;
height: 500px;
float: left;
left: 50%;
position: absolute;
margin-top: 30px;
margin-left: -260px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.feedback-input {
color: #3c3c3c;
font-family: Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 18px;
border-radius: 0;
line-height: 22px;
background-color: #fbfbfb;
padding: 13px 13px 13px 54px;
margin-bottom: 10px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid rgba(0, 0, 0, 0);
}
.feedback-input:focus {
background: #fff;
box-shadow: 0;
border: 3px solid #3498db;
color: #3498db;
outline: none;
padding: 13px 13px 13px 54px;
}
.focused {
color: #30aed6;
border: #30aed6 solid 3px;
}
#name {
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#name:focus {
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 8px 5px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email {
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email:focus {
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#comment {
background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
textarea {
width: 100%;
height: 150px;
line-height: 150%;
resize: vertical;
}
input:hover,
textarea:hover,
input:focus,
textarea:focus {
background-color: white;
}
#button-blue {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
float: left;
width: 100%;
border: #fbfbfb solid 4px;
cursor: pointer;
background-color: #3498db;
color: white;
font-size: 24px;
padding-top: 22px;
padding-bottom: 22px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-top: -4px;
font-weight: 700;
}
#button-blue:hover {
background-color: rgba(0, 0, 0, 0);
color: #0493bd;
}
.submit:hover {
color: #3498db;
}
.ease {
width: 0px;
height: 74px;
background-color: #fbfbfb;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
.submit:hover .ease {
width: 100%;
background-color: white;
}
#media only screen and (max-width: 580px) {
#form-div {
left: 3%;
margin-right: 3%;
width: 88%;
margin-left: 0;
padding-left: 3%;
padding-right: 3%;
}
}
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1 class="nav-title">Liam Docherty's Digital Portfolio</h1>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<section id="section1" class="section1">
<div class="hero">
<div class="profile box">
<div class="shape"></div>
</div>
</div>
<h2 class="s1-welcome">WELCOME TO MY PORTFOLIO</h2>
<div class="arrow1">
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</div>
</section>
<section id="contact-me" class="contact_section section2">
<h2 class="contact-text">Get in touch</h2>
<p>Wanna get in touch or talk to me about a project?</p>
<p>Fill the form below or send an email to liam_docherty#outlook.com</p>
<div id="form-main">
<div id="form-div">
<form class="form" id="form1">
<p class="name">
<input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
</p>
<p class="email">
<input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
</p>
<p class="text">
<textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
</p>
<div class="submit">
<input type="submit" value="SEND" id="button-blue" />
<div class="ease"></div>
</div>
</form>
</div>
<div class="arrow2">
<i class="fa fa-angle-up" style="font-size:100px;"></i>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<footer>
<div class="footer">
<h2 class="footertext">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h2>
</div>
</footer>
</body>
</html>
These are your problem:
<h2 class="contact-text">Get in touch</h2>
<p>Wanna get in touch or talk to me about a project?</p>
<p>Fill the form below or send an email to liam_docherty#outlook.com</p>
Remove those and then bam it works. You are also missing a closing div in that section.
Although not a complete answer, I would recommend looking at these three lines and the CSS related. Also, you are using bootstrap so you should look at any styles that bootstrap might be applying.
if you remove space in section remove h2 margin you have space use padding is batter. please check i thing it's batter .
<body>
<style>
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: auto;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: right;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center
}
.dropdown .dropdown-menu {
background-color: #4D5061;
}
.navbar.navbar-default ul li ul {
display: none;
left: 0;
position: absolute;
top: 60px;
min-width: 240px;
z-index: 200;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: #FFFFFF;
border-radius: 9px;
transition: all .2s;
}
.navbar.navbar-default ul li a:hover {
color: white;
background-color: rgba(20, 50, 40, 0.5)
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
.hero {
background: url("https://static.pexels.com/photos/7064/man-notes-macbook-computer.jpg") center center no-repeat;
;
background-attachment: fixed;
position: relative;
background-size: cover;
width: 100%;
max-width: 100%;
width: 100vw;
height: 100%;
}
.nav.navbar-nav {
margin: 10px 0 0;
}
section {
position: relative;
padding: 0vh 0 0;
min-height: 100vh;
}
.section1 {
height: 100vh;
text-align: center;
color: white;
}
.navbar.navbar-default ul li { position:relative;}
.navbar.navbar-default ul li:hover ul { display:block;}
.section2 {
background-color: dimgrey;
text-align: center;
color: white;
min-height: 90vh;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.fa-angle-up {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.footer {
height: 3vh;
background-color: #4D5061;
padding: 0;
right: 0;
bottom: 0;
left: 0;
}
.nav-title {
font-size: 14pt;
margin: 0;
top: 35px;
left: 8px;
width: 100%;
position: absolute;
text-align: center;
color: white;
font-family: 'Roboto', sans-serif;
}
.s1-welcome {
font-family: 'Roboto', sans-serif;
color: white;
font-size: 45pt;
font-size: 2.5em;
text-align: center;
margin: 0;
}
.footertext {
color: white;
font-family: "Roboto",sans-serif;
font-size: 14pt;
margin: 0;
padding: 20px 0;
text-align: center;
}
.contact-text {
color: white;
font-family: "Roboto",sans-serif;
font-size: 35pt;
font-weight: bold;
margin: 0;
padding: 30px 0 20px;
text-align: center;
}
p {
font-size: 20pt;
color: white;
font-family: 'Roboto', sans-serif;
text-align: center;
}
.profile.box {
bottom: 0;
height: 50%;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 50%;
}
.shape {
border-radius: 25px;
display: inline-block;
background: #4D5061;
content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
color: white;
height: 250px;
margin: auto;
padding: 3px;
width: 250px;
}
.fa {
padding: 20px;
font-size: 20px;
text-align: center;
text-decoration: none;
margin: 7px 6px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.7;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.icon-style {
position: relative;
top: 10px;
}
.arrow1 {
color: white;
position: relative;
}
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
#feedback-page {
text-align: center;
}
#form-main {
width: 100%;
float: left;
padding-top: 0px;
}
#form-div {
background-color: rgba(72, 72, 72, 0.4);
padding-left: 35px;
padding-right: 35px;
padding-top: 35px;
padding-bottom: 50px;
width: 850px;
height: 500px;
float: left;
left: 50%;
position: absolute;
margin-top: 30px;
margin-left: -260px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.feedback-input {
color: #3c3c3c;
font-family: Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 18px;
border-radius: 0;
line-height: 22px;
background-color: #fbfbfb;
padding: 13px 13px 13px 54px;
margin-bottom: 10px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid rgba(0, 0, 0, 0);
}
.feedback-input:focus {
background: #fff;
box-shadow: 0;
border: 3px solid #3498db;
color: #3498db;
outline: none;
padding: 13px 13px 13px 54px;
}
.focused {
color: #30aed6;
border: #30aed6 solid 3px;
}
#name {
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#name:focus {
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 8px 5px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email {
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email:focus {
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#comment {
background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
textarea {
width: 100%;
height: 150px;
line-height: 150%;
resize: vertical;
}
input:hover,
textarea:hover,
input:focus,
textarea:focus {
background-color: white;
}
#button-blue {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
float: left;
width: 100%;
border: #fbfbfb solid 4px;
cursor: pointer;
background-color: #3498db;
color: white;
font-size: 24px;
padding-top: 22px;
padding-bottom: 22px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-top: -4px;
font-weight: 700;
}
#button-blue:hover {
background-color: rgba(0, 0, 0, 0);
color: #0493bd;
}
.submit:hover {
color: #3498db;
}
.ease {
width: 0px;
height: 74px;
background-color: #fbfbfb;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
.submit:hover .ease {
width: 100%;
background-color: white;
}
#media only screen and (max-width: 580px) {
#form-div {
left: 3%;
margin-right: 3%;
width: 88%;
margin-left: 0;
padding-left: 3%;
padding-right: 3%;
}
}
</style>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1 class="nav-title">Liam Docherty's Digital Portfolio</h1>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<section id="section1" class="section1">
<div class="hero">
<div class="profile box">
<div class="shape"></div>
</div>
</div>
<h2 class="s1-welcome">WELCOME TO MY PORTFOLIO</h2>
<div class="arrow1">
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</div>
</section>
<section id="contact-me" class="contact_section section2">
<h2 class="contact-text">Get in touch</h2>
<p>Wanna get in touch or talk to me about a project?</p>
<p>Fill the form below or send an email to liam_docherty#outlook.com</p>
<div id="form-main">
<div id="form-div">
<form class="form" id="form1">
<p class="name">
<input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
</p>
<p class="email">
<input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
</p>
<p class="text">
<textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
</p>
<div class="submit">
<input type="submit" value="SEND" id="button-blue" />
<div class="ease"></div>
</div>
</form>
</div>
<div class="arrow2">
<i class="fa fa-angle-up" style="font-size:100px;"></i>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<footer>
<div class="footer">
<h2 class="footertext">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h2>
</div>
</footer>
</body>
For the section 1:
#section1{padding-top:0;}
For your second question
first: remove this from the #form-div:
float: left;
position: absolute;
margin-top:30px;
margin-left:-260px;
Add this to #form-div:
margin-left: auto;
margin-right:auto;
remove this from #form-main:
float:left;
move your <footer> in the section(id=contact-me) before the </section> and after the </div>
HELLOOOO amazing stackoverflow community <3
I am having trouble setting out listings (as cards), next to the menu bar. This is the layout i would like. Any help is greatly appreciated !!! <3 The listings also change daily and have multiple pages
body {
font-family:Quicksand;
font-weight:700;
}
.menu_bar{
text-align: left;
padding-left: 20px;
width: 10%;
}
ul.form {
position:relative;
background:#fff;
width:250px;
margin:auto;
padding:0;
list-style: none;
overflow:hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}
.form li a {
width:225px;
padding-left:20px;
height:50px;
line-height:50px;
display:block;
overflow:hidden;
position:relative;
text-decoration:none;
text-transform:uppercase;
font-size:14px;
color:#686868;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.form li a:hover {
background:#efefef;
}
.form li a.profile {
border-left:5px solid #008747;
}
.form li a.messages {
border-left:5px solid #fecf54;
}
.form li a.settings {
border-left:5px solid #cf2130;
}
.form li a.logout {
border-left:5px solid #dde2d5;
}
.form li:first-child a:hover, .form li:first-child a {
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.form li:last-child a:hover, .form li:last-child a {
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.form li a:hover i {
color:#ea4f35;
}
.form i {
margin-right:15px;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.form em {
font-size: 10px;
background: #ea4f35;
padding: 3px 5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-style: normal;
color: #fff;
margin-top: 17px;
margin-right: 15px;
line-height: 10px;
height: 10px;
float:right;
}
.form li.selected a {
background:#efefef;
}
h1 {
color:red;
margin:0 auto;
margin-top:60px;
margin-bottom:40px;
font-size:30px;
width:300px;
text-align:center;
}
p {
text-align:center;
position:absolute;
width:100%;
bottom:0;
font-size:12px;
font-family:Arial, Helvetica;
color:#fff;
text-transform:uppercase;
}
p a {
color:#fff;
text-decoration:none;
}
.row-center {
text-align: center;
}
.main_row {
max-width: 4900px;
margin: 50px auto 0;
}
.third_row {
max-width: 4900px;
margin: 50px auto 0;
}
.card {
padding: 0 1.7rem;
width: 100%;
}
.card2 {
float: left;
padding: 0 1.7rem;
width: 50%;
}
.card .menu-content {
margin: 0;
padding: 0;
list-style-type: none;
}
.card .menu-content::before,
.card .menu-content::after {
content: '';
display: table;
}
.card .menu-content::after {
clear: both;
}
.card .menu-content li {
display: inline-block;
}
.card .menu-content a {
color: #fff;
}
.card .menu-content span {
position: absolute;
left: 50%;
top: 0;
font-size: 10px;
font-weight: 700;
font-family: 'Open Sans';
transform: translate(-50%, 0);
}
.card .wrapper {
background-color: #fff;
min-height: 540px;
position: relative;
overflow: hidden;
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2);
}
.card .wrapper:hover .data {
transform: translateY(0);
}
.card .data {
position: absolute;
bottom: 0;
width: 100%;
transform: translateY(calc(70px + 1em));
transition: transform 0.3s;
}
.card .data .content {
padding: 1em;
position: relative;
z-index: 1;
}
.card .author {
font-size: 12px;
}
.card .title {
margin-top: 10px;
}
.card .text {
height: 70px;
margin: 0;
}
.card input[type='checkbox'] {
display: none;
}
.card input[type='checkbox']:checked + .menu-content {
transform: translateY(-60px);
}
.example-2 .wrapper {
background: url(https://theluxurytravelexpert.files.wordpress.com/2014/01/scenery.jpg) center/cover no-repeat;
}
.example-2 .wrapper:hover .menu-content span {
transform: translate(-50%, -10px);
opacity: 1;
}
.example-2 .header {
color: #fff;
padding: 1em;
}
.example-2 .header::before,
.example-2 .header::after {
content: '';
display: table;
}
.example-2 .header::after {
clear: both;
}
.example-2 .header .date {
float: left;
font-size: 12px;
}
.example-2 .menu-content {
float: right;
}
.example-2 .menu-content li {
margin: 0 5px;
position: relative;
}
.example-2 .menu-content span {
transition: all 0.3s;
opacity: 0;
}
.example-2 .data {
color: #fff;
transform: translateY(calc(70px + 4em));
}
.example-2 .title a {
color: #fff;
}
.example-2 .button {
display: block;
width: 100px;
margin: 2em auto 1em;
text-align: center;
font-size: 12px;
color: #fff;
line-height: 1;
position: relative;
font-weight: 700;
}
.example-2 .button::after {
content: '\2192';
opacity: 0;
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
transition: all 0.3s;
}
.example-2 .button:hover::after {
transform: translate(5px,-50%);
opacity: 1;
}
.card_sub_article {
display: inline-block;
height: 10%;
width: 40%;
}
.card_main .menu-content {
margin: 0;
padding: 0;
list-style-type: none;
}
.card_main .menu-content::before,
.card .menu-content::after {
content: '';
display: table;
}
.card_main .menu-content::after {
clear: both;
}
.card_main .menu-content li {
display: inline-block;
}
.card_main .menu-content a {
color: #fff;
}
.card_main .menu-content span {
position: absolute;
left: 50%;
top: 0;
font-size: 10px;
font-weight: 700;
font-family: 'Open Sans';
transform: translate(-50%, 0);
}
.card_main .wrapper {
background-color: #fff;
min-height: 540px;
position: relative;
overflow: hidden;
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2);
}
.card_main .wrapper:hover .data {
transform: translateY(0);
}
.card_main .data {
position: absolute;
bottom: 0;
width: 100%;
transform: translateY(calc(70px + 1em));
transition: transform 0.3s;
}
.card_main .data .content {
padding: 1em;
position: relative;
z-index: 1;
}
.card_main .author {
font-size: 12px;
}
.card_main .title {
margin-top: 10px;
}
.card_main .text {
height: 70px;
margin: 0;
}
.card_main input[type='checkbox'] {
display: none;
}
.card_main input[type='checkbox']:checked + .menu-content {
transform: translateY(-60px);
}
<!DOCTYPE html>
<html>
<head>
<title>Vertical Menu</title>
<link href='http://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js" /></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet" />
<!--[if IE 7]>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome-ie7.min.css" rel="stylesheet" />
<![endif]-->
</head>
<body>
<div class="menu_bar">
<h1> Menu</h1>
<ul class="form">
<li><a class="profile" href="#"><i class="icon-user"></i>My Profile</a></li>
<li class="selected"><a class="messages" href="#"><i class="icon-envelope-alt"></i>Messages <em>5</em></a></li>
<li><a class="stats" href="#"><i class="icon-cog"></i>Statistics</a></li>
<li><a class="settings" href="#"><i class="icon-cog"></i>Settings</a></li>
<li><a class="logout" href="#"><i class="icon-signout"></i>Logout</a></li>
</ul>
<h1>Listings:</h1>
<div class="card_sub_article">
<div class="example-2 card_main">
<div class="wrapper">
<div class="header">
<div class="date">
<span class="day">12</span>
<span class="month">Aug</span>
<span class="year">2016</span>
</div>
<ul class="menu-content">
<li>
</li>
<li><span>18</span></li>
<li><span>3</span></li>
</ul>
</div>
<div class="data">
<div class="content">
<span class="author">REVIEW</span>
<h1 class="title">TITLE</h1>
<p class="text">Description</p>
Read more
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
When dealing with layouts like this, the best solution is to use a frontend framework, such as Bootstrap. You can start using it right away by adding this in your head:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Afterwards, you can use the grid layout, which is very useful if you also want to make your website responsive. You should read the documentation to familiarize yourself with the whole capabilities of Bootstrap, but your HTML should ideally look something like this with it:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<div class="menu_bar">
<h1> Menu</h1>
<ul class="form">
<li><a class="profile" href="#"><i class="icon-user"></i>My Profile</a></li>
<li class="selected"><a class="messages" href="#"><i class="icon-envelope-alt"></i>Messages <em>5</em></a></li>
<li><a class="stats" href="#"><i class="icon-cog"></i>Statistics</a></li>
<li><a class="settings" href="#"><i class="icon-cog"></i>Settings</a></li>
<li><a class="logout" href="#"><i class="icon-signout"></i>Logout</a></li>
</ul>
</div>
</div>
<div class="col-md-10">
<div class="listings">
<h1>Listings:</h1>
<div class="row">
<div class="col-md-3">
<div class="card_sub_article">
<div class="example-2 card_main">
<div class="wrapper">
<div class="header">
<div class="date">
<span class="day">12</span>
<span class="month">Aug</span>
<span class="year">2016</span>
</div>
<ul class="menu-content">
<li>
</li>
<li><span>18</span></li>
<li><span>3</span></li>
</ul>
</div>
<div class="data">
<div class="content">
<span class="author">REVIEW</span>
<h1 class="title">TITLE</h1>
<p class="text">Description</p>
Read more
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
It will look wonky at first but remove the css styles for .card_sub_article and it should look fine.
Also a minor error in your HTML syntax: you closed script tag twice, which is fine most of the time, but not good practice.
Hope this helps you get started :)
Code I made is not working properly it's working in DW but not in Chrome . In Chrome I have to resize the screen then it change but when I open it in responsive mode it shows zoomed out version.
Here's the code
<!DOCTYPE><html>
<head>
<meta content="width=device-width,initial-scale=1.0">
<title>Shivam | Home</title>
<style type="text/css">
body {
margin: 0;
font-family: cursive;
font-size: 20px;
width: 100%;
height: 5000px;
}
/*menu*/
.nav {
position: fixed;
width: 100%;
max-height: 180px;
z-index: 999;
margin: 0;
padding-left:0;
background: #eee;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.nav li {
float: right;
list-style-type: none;
position: relative;
font-size: 1em;
color: #111;
display: block;
line-height: 3em;
overflow: hidden;
}
.nav li a {
color: #111;
display: block;
padding: 0 26px;
text-decoration: none;
transition: 0.25s all ease;
overflow: hidden;
}
.actv{
background: #08f;
color: #fff;
box-shadow: 0 0 5px rgba(0, 136, 255, 0.5);
transition: 1s ease;
}
.navback{
background: #eee;
position: fixed;
width: 100%;
z-index: 998;
height: 60px;
border-bottom: #08f solid 2px;
}
.logo{
background: #08f;
cursor: default;
}
.sm{
width: 0;
height: 0;
border-left: 30px solid #08f;
border-bottom: 30px solid transparent;
border-top: 30px solid transparent;
padding: 0 0 0 15;
}
/*side bar*/
#btn{
color: #111;
cursor: pointer;
transition:1s;
padding-left:50px;
float:right;
font-size: 25px;
line-height: 60px;
}
.overlay {
height: 100%;
width: 0%;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
background: #08f;
overflow: hidden;
transition: 0.5s;
box-shadow: 2px 0 10px rgba(0,0,0,0.5);
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #eee;
display: block;
transition: 0.3s;
}
.overlay-content a:after {
content: '';
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 1000px;
height: 1000px;
margin-left: -500px;
margin-top: -500px;
background: #eee;
border-radius: 100%;
opacity: 1;
transform: scale(0);
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
.overlay-content a:not(:active):after {
animation: ripple 1s ease-out infinite;
}
.overlay-content a:after {
visibility: hidden;
}
.overlay-content a:focus:after {
visibility: visible;
}
.act{
background: #eee;
}
#media only screen and (max-width: 945px){
.nav{
background: #08f;
}
.nav #a{
display: none;
}
#logo{
margin-left: 10%;
}
#logo a{
padding-right: 0;
}
}
#media only screen and (min-width: 945px){
#btn{
display: none;
}
}
</style>
<script type="text/javascript">
function openNav() {
document.getElementById("myNav").style.width = "65%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</head>
<body>
<!Submenu>
<ul class="nav">
<li class="logo" style="padding:0;float: left;" title="Open Menu" id="btn" onclick="openNav()"><a><font color="#eee">☰</font></a></li>
<li style="float: left;" id="logo" class="logo"><a title="Shivam"><font color="#eee" size="40px">Shivam</font></a><li id="a" style="float: left;" class="sm"></li></li>
<li id="a"><a> </a></li><li id="a"><a> </a></li><li id="a"><a> </a></li>
<li id="a"><a title="Contact With Shivam" href="contact.html">Contact</a></li>
<li id="a"><a title="About Shivam" href="about.html">About Me</a></li>
<li id="a"><a title=" Shivam's Works" href="works.html">My Works</a></li>
<li id="a"><a title="Homepage"class="actv">Home</a></li>
</ul>
<div id="myNav" class="overlay">
<a title="Close Menu" href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a title="Home" class="act"><font color="#08f">Home</font></a><hr>
<a title="Works" href="works.html">Works</a><hr>
<a title="About" href="about.html">About</a><hr>
<a title="Contact" href="contact.html">Contact</a>
</div>
</div>
</body>
u forgot the name in the view port link past this in your header
<meta name="viewport" content="width=device-width,initial-scale=1.0">