I should to make copy of this site, so, can anybody advice me, how can I make the same header?
Attached 2 screenshots and HTML/CSS for better understanding
This is what I want to do. Outlined 3 blocks which have this header, it's 3 different images
This my example of site. Header isn't 3 different blocks and just one image
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
overflow: auto !important;
}
body {
height: 100%;
margin:0px;
overflow: auto !important;
}
wrapper{
display: flex;
flex-direction: column;
height: 100%;
}
header { /*Шапка*/
background-image: url(images/header.PNG);
background-repeat: no-repeat;
background-position: top, left;
position: sticky;
vertical-align: top;
width:100%;
height:80px;
}
.News {
color: #6a70b3;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 13.3333px;
line-height: 17px;
font-weight: 700;
text-align: left;
}
section { /*Контент*/
font-family: Arial;
color: #000000;
font-size: 12.8px;
line-height: 16px;
font-weight: 400;
vertical-align: middle;
text-align: justify;
width:600px;
height:300px;
position:absolute;
left:300px;
top:100px;
padding-bottom: 90px;
flex: 1 0 auto;
}
section a:visited {
color:#003399;
}
section a:hover {
color: black;
}
aside { /*Sidebar*/
padding: 50px 10px;
margin: 0px auto;
position: relative;
float:left;
list-style-type: none;
width:190px;
background-image: url(images/side.PNG);
background-repeat:repeat-y;
background-size: 75%;
position: absolute;
height: 75%;
}
aside li {
font-family: Verdana, "Sans-Serif", Helvetica, Arial;
font-size: 11px;
margin-bottom: 10px;
font-weight: 700;
text-align: left;
line-height: 15px;
}
/* Стиль верхней панели навигации */
.topnav {
width:100%;
margin:0 auto;
margin-left: 20%;
overflow: hidden;
background-color: red;
text-align:center;
}
/* Стиль ссылок навигации */
.topnav a {
margin:0 auto;
display:inline;
margin-left:3px;
line-height: 15px;
font-size: 11px;
font-weight: 700;
float:left;
font-family: Verdana,"Sans-serif",Helvetica,Arial;
display: block;
color: #f2f2f2;
text-align: center;
padding: 5px 10px;
text-decoration: none;
}
/* Изменение цвета при наведении */
.topnav a:hover {
color: orange;
}
ul {
list-style-type: none; /* Убираем маркеры */
text-decoration: none; /* Убираем подчёркивание */
margin-left: 0; /* Отступ слева в браузере IE и Opera */
padding-left: 0; /* Отступ слева в браузере Firefox, Safari, Chrome */
}
ul a{
list-style-type: none;
text-decoration: none;
color: darkblue;
}
ul a:hover{
list-style-type: none;
text-decoration: none;
color:orange;
}
#mainText {
text-align: center;
}
.border {
color:black;
}
table, th, td {
border: 1px solid black;
}
footer { /*Подвал*/
text-align: center;
margin-right:0;
position: fixed;
left: 0;
bottom: 0;
width: 50%;
height: 70px;
color: white;
text-align: center;
min-height: 50px;
}
footer a{
font-family: Arial;
font-size: 10.6667px;
line-height: 14px;
font-weight: 400;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
color: white;
text-align: center;
text-decoration: none;
color:#06C;
height: 40px;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Новости - Анонсы</title>
</head>
<body>
<header>
</header>
<nav>
<div class="topnav"> <!--Верхнее меню -->
Новости
О Суде
Решения КС РФ
Заседания КС РФ
Контакты
</div>
</nav>
<div class="wrapper">
</div>
<section> <!-- Основной текст -->
<br>
<br>
<h3 class="News">Новости - Анонсы</h3>
<br>
<br>
<p>10 ноября 2017 года Конституционный Суд РФ провозгласит Постановление по делу о проверке конституционности Федерального закона «О внесении изменений в отдельные законодательные акты РФ в части совершенствования законодательства о публичных мероприятиях»</p>
<br>
<p>( подробнее...)</p>
<br>
<p>7 ноября 2017 года Конституционный Суд РФ провозгласил Постановление по делу о проверке конституционности ряда положений Закона Республики Крым «Об особенностях регулирования имущественных и земельных отношений на территории Республики Крым»</p>
<br>
<p>( подробнее...)</p>
<br>
Посмотреть все новости
<br>
</section>
<aside> <!-- Меню слева -->
<ul>
<li>Новости</li>
<li>О Суде</li>
<li>Решения КС РФ</li>
<li>Заседания КС РФ</li>
<li>Контакты</li>
</ul>
<br>
<img src="images/gerb.gif" alt="Герб РФ">
</aside>
<br>
<br>
<footer>
<hr style="border:1px; height:1px; border-color:black;background-color:black">
©Конституционный Суд Российской Федерации, 2008-2017
</footer>
</body>
</html>
You create an image with a curve that looks like the curve on the image (red & greyish blue) and then you put it in a layer above the other div's.
Does that solve your problem?
Related
Consider the following fiddle,
https://jsfiddle.net/r5ttk64r/2/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" href="../css/tabs.css">
</head>
<body>
<div id="page-left">
<h1>Hello World 1</h1>
</div>
<div id="page-right">
<h1>Hello World 2</h1>
<div id="tabsdiv">
<div id="description" class="tab active"><span>DESCRIPTION</span></div>
<div id="specification" class="tab"><span>SPECIFICATION</span></div>
<div id="prodfamily" class="tab"><span>PRODUCT FAMILY</span></div>
<div id="reviews" class="tab"><span>REVIEWS & ARTICLES</span></div>
<div id="showrooms" class="tab"><span>SHOWROOMS</span></div>
</div>
<div id="tabcontentsdiv">
<section id="specificationcontent" class="tabcontent active">
<div id="content-left" class="specscolumn" style="height:auto; display:block; background:blue;">
<div style="display:block;" class="innerspecscolumn-left">
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
</div>
<div class="innerspecscolumn-right">
<p class="specvalue">LED</p>
</div>
</div>
<div id="content-right" class="specscolumn">
<div class="innerspecscolumn-left">
<p class="specname">CERTIFICATION</p>
</div>
<div class="innerspecscolumn-right">
<p class="specvalue">ETL</p>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100vh;
}
body {
font: 14px/1 'Open Sans', sans-serif;
color: black;
/*background: #eee;*/
}
h1 {
padding: 50px 0;
font-weight: 400;
text-align: center;
}
#page-left {
width: 35%;
float: left;
padding:40px;
}
#page-right {
width: 65%;
float: left;
padding:40px;
}
section {
display: none;
padding: 45px 10px 20px 10px;
border: 1px solid lightgray;
margin-top: -30px;
/*overflow: hidden;*/
}
#tabsdiv {
background: lightgray;
margin-right:10px;
margin-left: 10px;
height: 66px;
}
.tab {
width: 20%;
float:left;
text-align: center;
background:lightgray;
border-width: 1px 1px 1px 0;
border-color: grey;
border-style: solid;
line-height: 66px;
}
.tab:first-of-type {
border-left: 1px solid grey;
}
.tab:hover {
cursor: pointer;
}
.tab.active {
/*color: #555;*/
/*border: 1px solid #ddd;*/
/*border-top: 2px solid orange;*/
/*border-bottom: 1px solid #fff;*/
background:#99df5e;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label {
display: inline-block;
margin: 0;
padding: 25px 25px;
font-weight: 600;
text-align: center;
/*color: #bbb;*/
/*border: 1px solid transparent;*/
background: lightgray;
width:19.9%;
}
.tabcontent.active
{
display: block;
}
.specscolumn {
width: 50%;
float:left;
}
#content-left {
padding-right: 10px;
}
#content-right {
padding-left: 10px;
}
.innerspecscolumn-left {
width: 50%;
float:left;
}
.innerspecscolumn-right {
width: 50%;
float:right;
text-align: right;
}
.specname {
font-weight: bold;
}
#media screen and (max-width: 650px) {
label {
font-size: 0;
}
label:before {
margin: 0;
font-size: 18px;
}
}
#media screen and (max-width: 400px) {
label {
padding: 15px;
}
}
I've been trying to make the border expand along with the height of the blue box.
Making the divs display: block did not work.
Making the section as Overflow: hidden does make the border extend BUT pulls the border down. I need that margin-top:-30px in place so the border looks like it's coming out of the tabs and not starting right under it.
Any ideas?
I don't know if i get it right. A possible solution is to use the clearfix technique. If you want some element to "hold" the inner elements that "float" inside, use this snippet:
.clearfix::after {
display: block;
content: "";
clear: both;
}
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100vh;
}
body {
font: 14px/1 'Open Sans', sans-serif;
color: black;
/*background: #eee;*/
}
.clearfix::after {
display: block;
content: "";
clear: both;
}
h1 {
padding: 50px 0;
font-weight: 400;
text-align: center;
}
#page-left {
width: 35%;
float: left;
padding:40px;
}
#page-right {
width: 65%;
float: left;
padding:40px;
}
section {
display: none;
padding: 45px 10px 20px 10px;
border: 1px solid lightgray;
margin-top: -30px;
/*overflow: hidden;*/
}
#tabsdiv {
background: lightgray;
margin-right:10px;
margin-left: 10px;
height: 66px;
}
.tab {
width: 20%;
float:left;
text-align: center;
background:lightgray;
border-width: 1px 1px 1px 0;
border-color: grey;
border-style: solid;
line-height: 66px;
}
.tab:first-of-type {
border-left: 1px solid grey;
}
.tab:hover {
cursor: pointer;
}
.tab.active {
/*color: #555;*/
/*border: 1px solid #ddd;*/
/*border-top: 2px solid orange;*/
/*border-bottom: 1px solid #fff;*/
background:#99df5e;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label {
display: inline-block;
margin: 0;
padding: 25px 25px;
font-weight: 600;
text-align: center;
/*color: #bbb;*/
/*border: 1px solid transparent;*/
background: lightgray;
width:19.9%;
}
.tabcontent.active
{
display: block;
}
.specscolumn {
width: 50%;
float:left;
}
#content-left {
padding-right: 10px;
}
#content-right {
padding-left: 10px;
}
.innerspecscolumn-left {
width: 50%;
float:left;
}
.innerspecscolumn-right {
width: 50%;
float:right;
text-align: right;
}
.specname {
font-weight: bold;
}
#media screen and (max-width: 650px) {
label {
font-size: 0;
}
label:before {
margin: 0;
font-size: 18px;
}
}
#media screen and (max-width: 400px) {
label {
padding: 15px;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<div id="page-left">
<h1>Hello World 1</h1>
</div>
<div id="page-right">
<h1>Hello World 2</h1>
<div id="tabsdiv">
<div id="description" class="tab active"><span>DESCRIPTION</span></div>
<div id="specification" class="tab"><span>SPECIFICATION</span></div>
<div id="prodfamily" class="tab"><span>PRODUCT FAMILY</span></div>
<div id="reviews" class="tab"><span>REVIEWS & ARTICLES</span></div>
<div id="showrooms" class="tab"><span>SHOWROOMS</span></div>
</div>
<div id="tabcontentsdiv">
<section id="specificationcontent" class="tabcontent active clearfix">
<div id="content-left" class="specscolumn" style="height:auto; display:block; background:blue;">
<div style="display:block;" class="innerspecscolumn-left">
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
</div>
<div class="innerspecscolumn-right">
<p class="specvalue">LED</p>
</div>
</div>
<div id="content-right" class="specscolumn">
<div class="innerspecscolumn-left">
<p class="specname">CERTIFICATION</p>
</div>
<div class="innerspecscolumn-right">
<p class="specvalue">ETL</p>
</div>
</div>
</section>
</div>
</div>
So in your case, just add the class clearfix to specificationcontent.
When you resize the browser, the site elements are superimposed on each other.
I've tried to use margin: auto and position:fixed but it doesn't work
Please, advice me, that i must to change or add to fix this problem
P.S. If you can - write in which exactly code I must add/change that i need
This is my site
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
overflow: auto !important;
}
body {
height: 100%;
margin:0px;
overflow: auto !important;
}
wrapper{
display: flex;
flex-direction: column;
height: 100%;
}
.HeaderCenter {
background-repeat: no-repeat;
background-position: top, left;
position: fixed;
vertical-align: top;
width:100%;
height:80px;
z-index: 1;
}
.HeaderLeft {
position: fixed;
background-repeat: no-repeat;
width:12.5%;
height:20.4%;
margin: 5px -4px;
z-index: 0;
}
.HeaderInt {
background-repeat: no-repeat;
position: fixed;
left: 12%;
width:7%;
height:93px;
z-index: 0;
}
.News {
color: #6a70b3;
font-family: verdana, arial, helvetica, "sans-serif";
font-size: 13.3333px;
line-height: 17px;
font-weight: 700;
text-align: left;
margin-right: 50%;
top: 150px;
}
section { /*Контент*/
font-family: Arial;
color: #000000;
font-size: 12.8px;
vertical-align: middle;
text-align: left;
width:900px;
height:300px;
position:fixed;
left:260px;
top:110px;
padding-bottom: 90px;
flex: 1 0 auto;
}
section a:visited {
color:#003399;
}
section a:hover {
color: black;
}
aside { /*Sidebar*/
padding: 50px 10px;
margin: 0% auto;
position: fixed;
float:left;
list-style-type: none;
width:190px;
background-image: url(images/side.PNG);
background-repeat:repeat-y;
background-size: 75%;
height: 69%;
}
aside li {
font-family: Verdana, Arial , "sans-serif", helvetica;
font-size: 11px;
margin-bottom: 10px;
width: 140px;
font-weight: 700;
text-align: left;
line-height: 15px;
}
/* Стиль верхней панели навигации */
.topnav {
margin:6% auto;
margin-left: 20%;
overflow: hidden;
background-color: red;
text-align:center;
}
/* Стиль ссылок навигации */
.topnav a {
margin:0 auto;
display:inline;
margin-left:3px;
line-height: 15px;
font-size: 11px;
font-weight: 700;
float:left;
font-family: verdana, "sans-serif", helvetica, arial;
display: block;
color: #f2f2f2;
text-align: center;
padding: 5px 10px;
text-decoration: none;
}
/* Изменение цвета при наведении */
.topnav a:hover {
color: orange;
}
ul {
list-style-type: none; /* Убираем маркеры */
text-decoration: none; /* Убираем подчёркивание */
margin-left: 0; /* Отступ слева в браузере IE и Opera */
padding-left: 0; /* Отступ слева в браузере Firefox, Safari, Chrome */
}
ul a{
list-style-type: none;
text-decoration: none;
color: darkblue;
}
ul a:hover{
list-style-type: none;
text-decoration: none;
color:orange;
}
#mainText {
text-align: center;
}
.border {
color:black;
}
table, th, td {
border: 1px solid black;
}
footer { /*Подвал*/
text-align: center;
margin-right:0;
left: 0;
bottom: 0;
width: 100%;
height: 0px;
color: white;
text-align: center;
min-height: 50px;
float: none;
position: absolute;
}
footer a{
font-family: Arial;
font-size: 10.6667px;
line-height: 14px;
font-weight: 400;
position: absolute;
left: 5%;
bottom: 2px;
width: 100%;
color: white;
text-align: center;
text-decoration: none;
color:#06C;
height: 40px;
float: none;
}
.footerline {
position: absolute;
bottom: 1px;
left: 0px;
float: none;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Новости - Анонсы</title>
</head>
<body>
<div id="wrapper">
</div>
<header>
<img src="images/header.PNG" class="HeaderCenter" alt="Header">
<img src="images/header1.png" class="HeaderLeft" alt="Header">
<img src="images/header2.png" class="HeaderInt" alt="Header">
</header>
<nav>
<div class="topnav"> <!--Верхнее меню -->
Новости
О Суде
Решения КС РФ
Заседания КС РФ
Контакты
</div>
</nav>
<section> <!-- Основной текст -->
<h3 class="News">Новости - Анонсы</h3>
<br>
<br>
<p>10 ноября 2017 года Конституционный Суд РФ провозгласит Постановление по делу о проверке конституционности Федерального закона «О внесении изменений в отдельные законодательные акты РФ в части совершенствования законодательства о публичных мероприятиях»</p>
<br>
<p>( подробнее...)</p>
<br>
<p>7 ноября 2017 года Конституционный Суд РФ провозгласил Постановление по делу о проверке конституционности ряда положений Закона Республики Крым «Об особенностях регулирования имущественных и земельных отношений на территории Республики Крым»</p>
<br>
<p>( подробнее...)</p>
<br>
Посмотреть все новости
<br>
</section>
<aside> <!-- Меню слева -->
<ul>
<li>Новости</li>
<li>О Суде</li>
<li>Решения КС РФ</li>
<li>Заседания КС РФ</li>
<li>Контакты</li>
</ul>
<br>
<img src="images/gerb.gif" alt="Герб РФ" align=center>
</aside>
<br>
<br>
<footer>
<hr style="border:1px; height:1px; width: 70%; margin-left: 270px; background-color:black">
<img src="images/footer.PNG" class=footerline alt="Footer">
©Конституционный Суд Российской Федерации, 2008-2017
</footer>
</body>
</html>
Add those two meta tags in your head tag
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
I am a beginner, and I am having trouble recreating my mockup in CSS. One issue is the second section of my homepage (benefits). I wanted a two column checkerboard layout alternating white and cardboard backgrounds. I'm not sure if the answer is to change the media queries or include more subclasses. I'm generally lost on this. Here is my mockup. Thank you in advance.
Did I mention that you have to speak to me as if I am 5 years old?
html,
body {
overflow-x: hidden;
}
body {
font-family: "Montserrat", Helvetica, Arial, sans-serif;
font-weight: 100;
color: #1F1309;
}
/* HEADER */
header {
color: #FFFFFF;
}
header .logo {
float: left;
}
header nav {
padding: 1em 0;
}
header nav ul {
display: inline;
text-align: right;
float: right;
margin: 0;
}
header nav ul>li {
list-style-type: none;
display: inline-block;
margin: 0 15px;
}
header nav ul>li.btn-outline {
padding: 10px 15px;
border: 2px solid #FFFFFF;
border-radius: 4px;
}
header nav ul>li.btn-outline:hover {
background: #FFFFFF;
}
header nav ul>li>a {
color: #FFFFFF;
text-decoration: none;
}
header nav ul>li.btn-outline:hover>a {
color: #845F5A;
}
header .headline {
text-align: center;
display: block;
text-align: center;
padding-bottom: 95px;
}
header .headline h1 {
font-size: 48px;
font-weight: normal;
margin: 95px 0 0;
}
header .headline p {
font-size: 22px;
line-height: 26px;
font-weight: 100;
margin: 10px 0 40px;
}
header,
footer,
section {
overflow: auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Crimson Text", Helvetica, Arial, serif;
color: white;
}
h2 {
font-size: 48px;
font-weight: normal;
margin-bottom: 20px;
line-height: 1.5em;
}
p {
font-size: 16px;
line-height: 19px;
font-weight: 100;
}
/* GRID */
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
.container:before,
.container:after {
content: " ";
display: table;
}
.container:after {
clear: both;
}
.one-half,
.one-third,
.one-fourth {
width: 96%;
float: left;
position: relative;
min-height: 1px;
margin: 0 2% 20px;
}
/*IMAGES*/
.hero {
vertical-align: top;
background-image: url("images/brainstorm.png");
background-size: cover;
position: relative;
}
.overlay {
position: relative;
}
.overlay:before {
position: absolute;
content: " ";
top: 0;
left: 0;
width: 500%;
height: 100%;
display: none;
z-index: 0;
}
.overlay:hover:before {
display: block;
}
.black:before {
background-color: #000000;
opacity: .35;
}
.brown:before {
background-color: #7E6233;
}
.hero * {
position: relative;
/* hack */
}
/* BUTTONS */
.btn {
border-radius: 4px;
color: #FFFFFF;
font-weight: 700;
text-decoration: none;
padding: 10px 30px;
background: #F9461C;
box-shadow: 0 2px 4px 2px rgba(71, 19, 7, 0.90);
;
}
.container-second-hero {
vertical-align: top;
height: 287px;
background-image: url("images/Guy-on-grass.png");
background-size: cover;
position: relative;
}
.benefits {
background-image: url("images/cardboard.png");
background-repeat: repeat;
display: block;
position: relative;
color: #1F1309;
text-align: center;
height: 100%;
}
.benefits ul li {
list-style-type: none;
display: inline-block;
}
.benefits i {
color: #1F1309;
font-size: 144px;
margin: 0;
border: 0;
vertical-align: middle;
display: block;
height: 336px;
width: 100%;
}
.benefits h2 {
color: #1F1309;
font-size: 48px;
font-weight: bold;
}
.benefits p {
font-size: 24px;
line-height: 1.5em;
}
.additional-features {
background-image: url("images/cardboard.png");
background-repeat: repeat;
text-align: center;
display: block;
padding-bottom: 72px;
display: table;
width: 100%;
}
.additional-features h1 {
display: table-cell;
vertical-align: center;
text-align: center;
}
.additional-features h3 {
font-family: "Crimson Text", Helvetica, Arial, sans-serif;
color: #1F1309;
font-size: 36px;
}
.additional-features ul {
color: #1F1309;
font-size: 18px;
line-height: 1.5em;
font-weight: 100;
list-style: none;
}
/* PRICING */
.pricing {
background: #FFFFFF;
padding: 4em 0;
text-align: center;
padding: 4em 0;
}
.pricing h2,
.pricing h3,
.pricing h4,
.pricing p {
color: #1F1309;
line-height: 0.5em;
}
.pricing ul {
margin: 0 auto;
padding: 2em 0;
}
.pricing ul li {
list-style-type: none;
}
.pricing .container p {
line-height: 1.5em;
}
.box {
padding: 0 0 15px;
background: rgba(124, 49, 70, 0.18);
border: 1px solid #979797;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
min-height: 439px;
position: relative;
margin-top: 25px;
width: 100%;
}
.box.middle {
border: 1px solid rgba(31, 19, 8, 0.55);
box-shadow: 0 2px 0 1px rgba(46, 60, 65, 0.52);
background: #FFFFFF;
min-height: 485px;
margin-top: 0px;
width: 110%;
}
.box h3 {
font-family: "Crimson Text", Helvetica, Arial, sans-serif;
font-weight: 600;
font-size: 48px;
}
.box h4 {
font-size: 50px;
font-weight: normal;
margin: 40px 0 10px;
color: #1F1309;
text-transform: uppercase;
}
.box h4 span {
font-size: 32px;
vertical-align: top;
}
.box h4 span.month {
font-family: "Crimson Text", Helvetica, Arial, sans-serif;
font-weight: 100;
color: #1F1309;
font-size: 20px;
vertical-align: middle;
}
.box ul li {
font-size: 18px;
margin-bottom: 20px;
font-weight: 100;
}
.box .btn {
position: absolute;
bottom: 60px;
left: 40px;
right: 40px;
}
.small {
font-size: 12px;
color: #FEFEFE;
line-height: 15px;
font-style: italic;
}
/* TESTIMONIALS */
.testimonials {
padding: 4em 0;
text-align: center;
}
.testimonials h2 {
color: #1F1309;
}
.testimonials ul li {
list-style-type: none;
}
.testimonials blockquote {
color: #FFFFFF;
text-align: left;
font-style: italic;
background: #1F1309;
position: relative;
padding: 30px;
width: auto;
margin: 0;
}
.testimonials blockquote:after {
top: 100%;
left: 13%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: #1F1309;
border-width: 10px;
margin-left: -10px;
}
.testimonials img {
height: 65px;
width: 65px;
border-radius: 50%;
float: left;
display: inline-block;
margin: 20px 10px 0 0;
}
.testimonials p.name {
float: left;
display: inline-block;
text-align: left;
font-size: 13px;
margin-top: 30px;
}
.testimonials .second,
.fourth {
position: relative;
top: 20px;
}
/* FOOTER */
footer {
background-color: #34495E;
background-image: linear-gradient(to top, #3498DB 0%, #3498DB 50%, #34495E 50%, #34495E 100%);
color: #FFFFFF;
height: 150px;
position: relative;
overflow: hidden;
z-index: 0;
}
footer p,
footer nav ul {
font-size: 14px;
font-weight: 100;
text-align: center;
margin: 10px auto 0;
}
footer nav ul li {
list-style-type: none;
display: inline;
}
footer nav ul li a {
color: #FFFFFF;
text-decoration: none;
}
footer .right-footer-block {
background-color: transparent;
}
footer .logo {
padding: 2.35em 0;
margin: 0 auto;
display: block;
}
#media (min-width: 992px) {
footer {
background-color: #3498DB;
background-image: linear-gradient(to left, #3498DB 0%, #3498DB 33.33337%, #34495E 33.33337%, #34495E 100%);
height: 100px;
}
footer p,
footer nav ul {
padding: 2em 0;
text-align: left;
}
footer .right-footer-block {
background-color: #3498DB;
}
footer .logo {
padding: 2em 0 2em 1.5em;
}
}
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
.one-half {
width: 46%;
}
.one-third {
width: 32.64177%;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}
.one-fourth {
width: 21%;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
#media (min-width: 4000px) {
.container {
width: 3800px;
}
html {
font-size: 150% line-height: 150%
}
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="X-UZ-Compatible" content="IE=Edge">
<meta charset="UTF-0">
<title>Save, share, and collaborate | Blockbox</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Crimson+Text:400,400i,600,600i,700,700i|Montserrat:400,700" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/animate.css" </head>
<body>
<!-- Hero -->
<header>
<div class="hero overlay black">
<nav class="container">
<div class="one-half">
<img src="images/site-white-logo.png" alt="Blocbox" />
</div>
<div class="one-half">
<ul>
<li>Sign In</li>
<li class="btn-outline">Sign Up</li>
</ul>
</div>
</nav>
<div class="container headline">
<h1 class="animated fadeIn">Save, share and collaborate.</h1>
<p>blocbox lets you collect and sort information.<br/>Create simple notes, store images, and add links.</p>
Start Your Free Trial!
</div>
</div>
</header>
<main role="main">
<!-- Benefits -->
<section class="benefits">
<ul class="container">
<li class="one-half">
<div class="top">
<h2>Create notes</h2>
<p>Using Markdown, you can create simple text-based documents to save and share. You can collaborate with others to write and edit content.</p>
</div>
<i class="fa fa-file-o"></i>
<div class="bottom">
<h2>Add Links</h2>
<p>Forget bookmarking sites in your browser. With blocbox, you can add links, group them and view them from any computer.</p>
</div>
</li>
<li class="one-half">
<i class="fa fa-picture-o"></i>
<div class="middle">
<h2>Save images</h2>
<p>Are there images you find interesting enough to save? Now you have a way to organize and store those within blocbox.</p>
</div>
<i class="fa fa-link"></i>
</ul>
</section>
<!-- Additional Features -->
<section class="additional-features">
<div class="container-second-hero">
<h1>Access blocbox anywhere.</h1>
</div>
<ul class="container">
<li class="one-third">
<h3>Collaborate</h3>
<ul>
<li>Invite collaborators</li>
<li>Chat in real time</li>
</ul>
</li>
<li class="one-third">
<h3>Organize</h3>
<ul>
<li>Tag items</li>
<li>Search for items</li>
<li>Create boxes</li>
</ul>
</li>
<li class="one-third">
<h3>Do</h3>
<ul>
<i class="fa-calendar-check-o"></i>
<li>Assign due dates</li>
<i class="fa-clock-o"></i>
<li>Set reminders</li>
</ul>
</li>
</ul>
</section>
<!-- Pricing -->
<section class="pricing">
<div class="container">
<h2>How much does blocbox cost?</h2>
<p>We have many options to fit your needs. It's free to try for 30 days*, and you can always change your plan once you signed up. <br/>Here are the different features of each plan:</p>
</div>
<ul class="container">
<li class="one-third">
<div class="box">
<h3>Casual</h3>
<h4>Free</h4>
<ul>
<li>Up to 5 boxes</li>
<li>Up to 10 collaborators</li>
<li><strong>2GB</strong> of storage</li>
</ul>
Start Your Free Trial!
</div>
<li class="one-third">
<div class="box middle">
<h3>Professional</h3>
<h4><span>$</span>5<span class="month">/month</span></h4>
<ul>
<li>Unlimited boxes</li>
<li>Up to 20 collaborators</li>
<li><strong>5GB</strong> of storage</li>
<li>Real-time collaboration</li>
</ul>
Start Your Free Trial!
</div>
</li>
<li class="one-third">
<div class="box">
<h3>Expert</h3>
<h4><span>$</span>10<span class="month">/month</span></h4>
<ul>
<li>Unlimited boxes</li>
<li>Unlimited collaborators</li>
<li><strong>Unlimited</strong> storage</li>
<li>Real-time collaboration</li>
</ul>
Start Your Free Trial!
</div>
</li>
</ul>
</section>
<!-- Testimonials -->
<section class="testimonials">
<div class="container">
<h2>Who uses blocbox?</h2>
<p>blocbox has more than 100,000 satisfied users storing and collaborating<br/> with teams across the world. Here's what a few have to say:</p>
</div>
<ul class="container">
<div class="first">
<li class="one-fourth">
<blockquote>"blocbox has made it easier to find and keep things I love. I can share with other designers on my team and create new categories with awesome stuff. And creating simple text documents couldn't be easier."
</blockquote>
<img src="https://pbs.twimg.com/profile_images/620606106142806016/_80ZF1Qd.jpg" alt="avatar">
<p class="name"><strong>Abinav Thakuri</strong><br/>Freelance Designer, N. Dakota</p>
</div>
</li>
<li class="one-fourth second">
<div class="second">
<blockquote>"blocbox has made it easier to find and keep things I love. I can share with other designers on my team and create new categories with awesome stuff. And creating simple text documents couldn't be easier."
</blockquote>
<img src="https://pbs.twimg.com/profile_images/620606106142806016/_80ZF1Qd.jpg" alt="avatar">
<p class="name"><strong>Abinav Thakuri</strong><br/>Freelance Designer, N. Dakota</p>
</div>
</li>
<li class="one-fourth third">
<blockquote>"blocbox has made it easier to find and keep things I love. I can share with other designers on my team and create new categories with awesome stuff. And creating simple text documents couldn't be easier."
</blockquote>
<img src="https://pbs.twimg.com/profile_images/620606106142806016/_80ZF1Qd.jpg" alt="avatar">
<p class="name"><strong>Abinav Thakuri</strong><br/>Freelance Designer, N. Dakota</p>
</li>
<li class="one-fourth fourth">
<div class="fourth">
<blockquote>"blocbox has made it easier to find and keep things I love. I can share with other designers on my team and create new categories with awesome stuff. And creating simple text documents couldn't be easier."
</blockquote>
<img src="https://pbs.twimg.com/profile_images/620606106142806016/_80ZF1Qd.jpg" alt="avatar">
<p class="name"><strong>Abinav Thakuri</strong><br/>Freelance Designer, N. Dakota</p>
</div>
</li>
</ul>
</section>
<!-- Call to Action -->
<section class="CTA">
<div class="container">
<h2>Ready to give it a try?</h2>
<p>We have many options to fit your needs. It's free to try for 30 days*, and you can always change your plan once you signed up.</p>
Start Your Free Trial!
</div>
<!-- Footer -->
<footer>
<div class="container footer-nav-block">
<div class="left-footer-block one-third">
<p class="copyright-block">© 2015. <strong>Blocbox</strong> - All Rights Reserved.</p>
</div>
<nav class="link-block middle-footer-block one-third">
<ul>
<li>Terms</li> /
<li>Privacy Policy</li> /
<li>Contact Us</li> /
<li>About Us</li> /
<li>Twitter</li>
</ul>
</nav>
<div class="right-footer-block one-third">
<img class="logo" src="images/site-brown-logo.png" alt="Blocbox" />
</div>
</div>
</footer>
</main>
</body>
</html>
</body>
</html>
You could just make it a table, and use CSS to set the background using some nth-child logic.
To center your text you can use flex boxes with a container inside of it, I just made it a div and marked it as display:inline-block; with some CSS.
Since I'm pretty sure your cardboard is an image, all you'd have to do is to replace the background-color:rgb(###,###,###); by a background-image element.
and you should be it.
table.Container{
width:100%;
}
table.Container td{
display:inline-flex;
text-align:center;
align-items:center;
justify-content:center;
vertical-align:middle;
height:2in;
flex-direction:row;
box-sizing:border-box;
width:50%;
}
table.Container td > div{
display:inline-block;
}
table.Container tr:nth-child(odd) > td:nth-child(odd),
table.Container tr:nth-child(even) > td:nth-child(even){
background-color:rgb(219, 148, 50);
}
table.Container tr:nth-child(even) > td:nth-child(odd),
table.Container tr:nth-child(odd) > td:nth-child(even){
background-color:white;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<table class="Container">
<tbody>
<tr>
<td><div>your ontent here</div></td>
<td><div>your ontent here</div></td>
</tr>
<tr>
<td><div>your ontent here</div></td>
<td><div>your ontent here</div></td>
</tr>
<tr>
<td><div>your ontent here</div></td>
<td><div>your ontent here</div></td>
</tr>
</tbody>
</table>
</body>
</html>
Flexbox isn't working in Chrome or Safari but works fine in Firefox. The vertical images are expanding to not fit within their container, but in Firefox they're behaving as I want them to. Here is the code, any idea? Thanks.
body{ max-width: 1970px;
margin: 0 auto;
padding: 0 2%;
box-sizing: border-box;
padding-top: 100px;
}
a {
text-decoration: none;
font-family: 'Karla', sans-serif;
font-size: 1em;
letter-spacing: -0.03em;
}
img {
max-width: 100%;
}
/***********************************
HEADING
************************************/
header {
float: left;
position:fixed;
top:0;
width: 100%;
z-index: 99;
background-color: white;
}
h1 {
font-family: 'Giorgio Sans Web', sans-serif;
margin: 0 auto;
font-size:4.5em;
font-weight: 700;
font-style: normal;
font-stretch: normal;
}
h2 {
font-family: 'Giorgio Sans Web', sans-serif;
margin: 0 auto;
font-size:4em;
font-weight: 700;
font-style: normal;
font-stretch: normal;
line-height: 3em;
}
h3 {
font-family: 'Karla', sans-serif;
font-weight: 400;
font-size:1.3em;
margin: 0 0 1em 0;
}
h4 {
font-family: 'Giorgio Sans Web', sans-serif;
margin: 0 auto;
font-size:2.5em;
font-weight: 700;
letter-spacing:0.0625em;
font-style: normal;
font-stretch: normal;
}
h5 {
font-family: 'Karla', sans-serif;
font-weight: 700;
font-size: 0.75em;
line-height: 1.2em;
}
p {
font-family: 'Karla', sans-serif;
line-height: 1.5em;
font-size: 1.2em;
letter-spacing: -0.03em;
}
/***********************************
NAVIGATION
************************************/
nav {
/*text-align: center;
margin: 0 2%;
box-sizing: border-box;*/
background-color: white;
}
#nav-parent {
height:;
display:flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
padding: 10px 3%;
margin: 0 auto;
}
.nav-icon {
flex-basis:auto;
}
#logo {
flex-basis:auto;
box-sizing: border-box;
padding-left: 20px;
}
.contact-button {
flex-basis:auto;
}
nav li a {
padding:0;
}
/***********************************
SIDE NAV
************************************/
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 100;
top: 0;
left: 0;
background-color: #F3F3F3;
overflow-x: hidden;
transition: 0.5s;
padding-top: 20px;
}
#sidenav-content {
margin-left: 13px;
}
.sidenav a {
text-decoration: none;
color: #000;
display: block;
transition: 0.3s;
}
.sidenav a h4 {
overflow: hidden;
white-space: nowrap;
padding: 16px 8px 0px 6px;
color: #000;
display: block;
transition: 0.1s;
}
.sidenav p {
padding: 0px 8px 8px 26px;
font-size: 16px;
color: #000;
display: block;
transition: 0.3s;
width: 250px;
}
.slide-nav-link {
margin-top: 10px;
padding: 8px 8px 8px 26px;
line-height: 2.2em;
}
.slide-nav-social {
width: 150px;
height:50px;
margin-top: 20px;
margin-left: 26px;
}
.slide-nav-social a {
width:20px;
padding: 0 15px 0 0;
display: inline-block;
}
.sidenav a:hover, .offcanvas a:focus{
color: #6B00FF;
}
.sidenav .closebtn {
padding: 15px 8px 8px 26px;
font-size: 30px;
margin-left: 0px;
}
.closebtn a:hover {
color: #000;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
/***********************************
FOOTER
************************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
}
.social-icon {
width:20px;
height: 20px;
margin: 0 5px;
}
/***********************************
PAGE: PORTFOLIO
************************************/
.gallery{
margin: 0 auto;
list-style: none;
padding-left: 0;
}
.gallery figure {
overflow: hidden;
float: left;
width: 48%;
margin: 1%;
z-index: 97;
position: relative;
float: left;
}
.gallery figcaption {
background: rgba(255,255,255,0.97);
display : flex;
align-items : center;
text-align: center;
color: white;
float: left;
position: absolute;
left: 0;
opacity: 0;
right: 0;
top: 0;
height:100%;
z-index: 98;
-webkit-transition: all 300ms;
-moz-transition: all 300ms;
transition: all 300ms;
-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
transition-delay: 100ms;
}
.gallery figcaption h3 {
width:100%;
text-align: center;
color:#000;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.gallery li:hover figcaption {
opacity: 1;
}
/***********************************
PAGE: Project
************************************/
.project-gallery{
margin: 0 auto;
padding: 0 1.5%;
list-style: none;
}
.project-gallery img{
max-width: 100%;
margin: 1.5% 0;
}
.project-gallery hr {
margin: 40px 0;
border: none;
height: 3px;
background-color: #000;
}
.project-title {
max-width: 100%;
text-align: center;
padding-top: 40px;
}
.description-text {
display:inline;
}
.left-column-text {
width:30%;
margin-left: 5%;
margin-top: 8px;
display:inline-block;
vertical-align: top;
}
.left-column-text p {
margin: 10px 0 25px 0;
}
.left-column-text h5 {
margin-bottom: -5px;
}
.right-column-text {
width:50%;
margin: 0 5% 0 8%;
display:inline-block;
vertical-align: top;
}
.vertical-imgs {
display: -webkit-flex; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-flex; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display:flex;
justify-content: space-between;
margin: 1% 0;
}
.vertical-img-left {
box-sizing: border-box;
padding-right: 3%;
}
.vertical-img-right {
box-sizing: border-box;
}
.prev-next-buttons {
margin-right: -3.7%;
}
.prev-next-buttons a {
display: inline-block;
margin: 0;
box-sizing: border-box;
padding: 20px 5%;
}
.prev-button {
width:48%;
}
.next-button {
text-align: right;
width:48%;
}
/***********************************
PAGE: About
************************************/
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
/***********************************
PAGE: CONTACT
************************************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.mail a {
background-image: url('../img/mail.png')
}
.contact-info li.twitter a {
background-image: url('../img/twitter.png')
}
.contact-info li.phone a {
background-image: url('../img/phone.png')
}
/***********************************
COLORS
************************************/
/* site body */
body {
background-color: #fff;
color:#000;
}
/*green header
header {
background: #6ab47b;
border-color: #599a68;
}*/
/*nav background on mobile
nav {
background: #599a68;
}*/
/*logo text */
h1 {
color: #000;
}
/*link color*/
a {
color:#000
}
/*nav link colors*/
nav a, nav a:visited {
color: #000;
}
/* selected nav link colors*/
nav a.selected, nav a:hover {
color: #5513FE
}
/* selected prev next link colors*/
a h1.selected, a h1:hover {
color: #5513FE
}
a h4.selected, a h4:hover {
color: #5513FE
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cari Sekendur - MHG Modern Classic</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="fonts/1606-HQIULX.css">
<link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="css/main1.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<nav>
<ul id="nav-parent">
<li class="nav-icon">
<span style="cursor:pointer" onclick="openNav()"
</span>
<img src="img/nav-icon.svg" class="nav-icon">
</li>
<li id="nav-icon">
<a href="index.html" id="logo">
<h1>CARI</h1>
</a>
</li>
<li class="nav-icon">
Contact
</li>
</ul>
</nav>
</header>
<div id="mySidenav" class="sidenav">
<div id="sidenav-content">
<img src="img/nav-icon-open.svg" class="nav-icon">
<div class= "slide-nav-link">
Work
About
Contact
</div>
<div class= "slide-nav-text">
<a href="index.html" id="logo">
<h4>CARI SEKENDUR</h4>
</a>
<p>Creating visual experiences that make the complex clear and the average exceptional.</p>
</div>
<div class= "slide-nav-social">
<img src="img/WNWlogo.svg">
<img src="img/linkedin-black.svg">
<img src="img/pinterest-black.svg">
</div>
</div>
</div>
<!--Click on the element below to open the side navigation menu.-->
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "350px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<div class="wrapper">
<section class="project-gallery">
<div class="horiztonal-img">
<img src="img/mhg-zine/CARI_MHG_ZINE_1.gif" alt="">
</div>
<div class="project-title">
<h2>MORGANS HOTEL GROUP - MODERN CLASSIC ZINE</h2>
</div>
<hr>
<div class="description-text">
<div class="left-column-text">
<h5>STUDIO</h5>
<p>LMNOP Creative</p>
<h5>CREATIVE DIRECTION</h5>
<p>Leigh Nelson</p>
<h5>DESIGN</h5>
<p>Cari Sekendur, Leigh Nelson, Heidi Chisholm</p>
</div>
<div class="right-column-text">
<p> Morgans Hotel Group launched the global phenomenon of boutique hotels 20 years ago, and to celebrate their rich history they put together a campaign called The Modern Classic. Each of Morgans' properties has a design aesthetic that is unlike anything you've seen before, awe-inspiring and always over-the-top. So, to capture the essence of Morgans' brand, we concepted, designed, and printed a zine for them to distribute to hotel guests. This project was a print designer's dream, complete with gold-holographic foil, gold staples, fluorescent Pantone inks, collage, illustration, a tear-out poster, and even a little pack of temporary tattoos.
</p>
</div>
<hr>
</div>
<div class="horiztonal-img">
<img src="img/mhg-zine/CARI_MHG_ZINE_2.jpg" alt="">
</div>
<div class="vertical-imgs">
<img src="img/mhg-zine/CARI_MHG_ZINE_8.jpg" alt="" class="vertical-img-left">
<img src="img/mhg-zine/CARI_MHG_ZINE_5.jpg" alt="" class="vertical-img-right">
</div>
<div class="horiztonal-img">
<img src="img/mhg-zine/CARI_MHG_ZINE_7.jpg" alt="">
</div>
<div class="prev-next-buttons">
<a href="#" class="prev-button">
<h2>PREVIOUS</h2>
</a>
<a href="#" class="next-button">
<h2>NEXT</h2>
</a>
</div>
<hr class="bottom-hr" style="margin-top: 0px;">
</section>
<footer>
<p></p>
</footer>
</div>
</body>
</html>
use :
#nav-parent {
display:flex;
display: -webkit-flex;
-webkit-flex-flow: initial;
flex-flow: initial;
justify-content: space-between;
align-items: center;
padding: 10px 3%;
margin: 0 auto;
}
Why does my header and navigation go below my hero image?
Whenever I increase the size of my text on my image the nav and heading goes down further. If i get rid of the size for the text it goes back to where i want it.
Here is my html and css.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Amanda Farrington</title>
<link rel="stylesheet" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="hero">
<div id="heroImage">
<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
</div>
<div id="overlay">
<h2>Amanda Farrington</h2>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
height: 100%;
background: white;
}
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 97%;
margin:0;
padding-left: 3em;
float: left;
background: white;
height: 10%;
}
#leftHeader
{
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 40%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
#hero{
width: 100%;
height: 30em;
}
#heroImage
{
top: 12%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 30em;
top: 90%;
margin-left: 30%;
z-index: 2;
position: relative;
}
h2{
width: 9em;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 60px;
float: center;
color: white;
opacity: 1.0;
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}
It's because of position: absolute; of your #heroImage div (if I understand, what do you want)