I followed a YouTube video called "The 2020 HTML & CSS Crash Course - From Mockup to Product", everything is fine and works as it should, except in one thing (which I will explain), however the problem doesn't seem to happen on the teachers website, even though the code is exactly the same.
So, the problem is that in one of the media queries (650px), the .companies selector takes on display: flex, but it completely ignores the justify-content property and it breaks out of the container and off the screen, and this happens on my laptop, desktop, and I tried on my girlfriends macbook: same thing in all. It doesn't seem to happen in his, it works as it should as far as I can see. Anyway, I'll put the code below and also here's the link to the teachers codepen: https://codepen.io/designcourse/pen/bGdQGgQ
Which I should mention, still has the problem on my computers, it's only on his videos where it doesn't happen (that I can see).
Thanks in advance, this is driving me mad.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<title>Document</title>
</head>
<body>
<div class="hero-wrapper">
<div class="wrapper">
<header>
WebDeveloper
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="hero-content">
<h1>I help millions of people learn stuff</h1>
<p class="subtitle">Teaching UI / UX & Frontend Development</p>
</div>
</div>
</div>
<div class="light-purple-wrapper">
<div class="wrapper">
<ul class="stats">
<li>
<strong>26.5M</strong>
<span>Youtube Views</span>
</li>
<li>
<strong>535K</strong>
<span>YouTube Subs</span>
</li>
<li>
<strong>86</strong>
<span>Courses</span>
</li>
<li>
<strong>750</strong>
<span>Video Tutorials</span>
</li>
<li>
<strong>58</strong>
<span>Countries</span>
</li>
</ul>
</div>
<div class="extended-wrapper carousel-container">
<img src="images/arrow_copy_copy.svg" id="left-arrow" class="arrows" alt="">
<ul class="carousel">
<li>
<blockquote>"Gary is a life saver. I don't have the time or money for a college education. My goal is to
become a freelance web developer, and thanks to Gary, I'm really close."</blockquote>
<cite>John Doe</cite>
</li>
<li>
<blockquote>"Gary is a life saver. I don't have the time or money for a college education. My goal is to
become a freelance web developer, and thanks to Gary, I'm really close."</blockquote>
<cite>John Doe</cite>
</li>
</ul>
<img src="images/arrow_copy_copy.svg" id="right-arrow" class="arrows right" alt="">
</div>
</div>
<div class="wrapper move-up v-padding">
<h2>Companies I've worked with.</h2>
<ul class="companies">
<li><img src="images/skillshare.svg" alt="skillshare" class="skillshare"></li>
<li><img src="images/ps.svg" alt="plural sight" class="ps"></li>
<li><img src="images/skillshare.svg" alt="skillshare" class="skillshare"></li>
<li><img src="images/ps.svg" alt="plural sight" class="ps"></li>
</ul>
</div>
</body>
</html>
////// SCSS ///////
#import url('https://fonts.googleapis.com/css?family=Montserrat:300,800&display=swap');
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #2B192F;
color: #fff;
font-family: 'Montserrat';
}
a {
color: #fff;
text-decoration: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.hero-wrapper {
background: url('../images/bg_copy.jpg');
background-size: cover;
}
.wrapper {
padding: 1.5em;
max-width: 1200px;
margin: 0 auto;
}
header {
display: flex;
justify-content: space-between;
.logo {
font-weight: bold;
}
ul {
display: flex;
li a {
padding: 0 .6em;
}
}
}
.hero-content {
margin: 4em 0 2em;
.subtitle {
margin-bottom: 0;
}
}
.light-purple-wrapper {
background: #351F3A;
}
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
justify-content: space-around;
margin-top: 2em;
li {
margin-bottom: 1.5em;
}
strong {
font-size: 1.4em;
}
span {
display: block;
text-transform: uppercase;
font-size: .7em;
}
}
.arrows {
display: none;;
}
.extended-wrapper {
padding: 0 1.5em 2em;
max-width: 1230px;
margin: 0 auto;
}
ul.carousel {
margin-bottom: 1em;
li {
background: #422847;
padding: 1em;
margin-bottom: 1em;
}
}
blockquote {
margin: 0;
font-size: .8em;
line-height: 1.8em;
margin-bottom: 1em;
}
cite {
color:#E379FF;
font-weight: bold;
font-size: .8em;
font-style: normal;
position: relative;
padding-left: 25px;
}
cite::before {
content: " ";
position: absolute;
left: 0;
top: 6px;
height: 1px;
width: 20px;
border-bottom: 1px solid #fff;
}
h2 {
text-align: center;
position: relative;
}
h2::before {
content: "";
position: absolute;
height: 5px;
width: 30px;
background: #B728DC;
top: -.3em;
}
.companies {
text-align: center;
opacity: .4;
li {
margin: 2em 0;
}
.skillshare {
width: 100px;
}
.ps {
width: 200px;
}
}
#media (min-width: 500px) {
.companies {
display: grid;
grid-template-columns: repeat(2, auto);
}
}
#media (min-width: 650px) {
body {
font-size: 18px;
}
.wrapper {
padding: 1.5em 4em;
}
.carousel-container {
display: flex;
}
.arrows {
display: block;
width: 40px;
cursor: pointer;
margin: .5em;
}
.right {
transform: rotateZ(180deg);
}
ul.carousel {
display: flex;
margin-bottom: 0;
li {
margin-right: 1em;
margin-bottom: 0;
padding: 2em;
&:last-child {
margin-right: 0;
}
}
}
.companies {
display: flex;
justify-content: space-between;
}
}
#media (min-width: 853px) {
body {
font-size: 20px;
}
.stats {
display: flex;
justify-content: space-between;
margin: 0;
}
.companies {
grid-template-columns: repeat(4, auto);
}
h1 {
font-size: 2.5em;
}
.subtitle {
font-size: 1.2em;
}
h2 {
text-align: left;
font-size: 2em;
}
.v-padding {
padding: 4em;
}
.light-purple-wrapper {
padding-bottom: 4em;
}
.move-up {
margin-top: -7em;
}
}
#media (min-width: 1200px) {
.stats li {
border-right: 1px solid rgb(124, 89, 148);
padding-right: 5%;
&:last-child {
border: none;
}
}
}
Related
I have a webpage where the css for the small and medium size work and display fine. my problem is with the large, everything is formatted correctly except that the page picture won't display. How do I fix this? Attached is the page layout and the full css. The error should be under the #media(min-width: 1024px)
header {
background-color: #002171;
color: #FFFFFF;
background-position: right;
background-repeat: no-repeat;
}
header a:link {
color: #FFFFFF;
text-decoration-line: none;
}
header a:visited {
color: #FFFFFF;
text-decoration-line: none;
}
header a:hover {
color: #90C7E3;
}
h1 {
margin-top: 0;
margin-bottom: 0;
text-align: center;
font-family: Georgia, serif;
letter-spacing: 0.25em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
* {
box-sizing: border-box;
}
nav {
font-weight: bold;
font-size: 120%;
padding: 0;
text-align: center;
}
nav li {
border-bottom: none;
}
nav a {
text-decoration: none;
}
section {
padding-left: 2em;
padding-right: 2em;
}
h2 {
color: #1976D2;
font-family: Georgia, serif;
text-shadow: 1px 1px 1px #CCCCCC;
}
h3 {
color: #000033;
font-family: Georgia, serif;
}
#media(min-width: 600px) {
nav ul {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
justify-content: space-around;
}
.content main {
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr;
}
h2 {
grid-row: 1 / 2;
grid-column: 1 / 5;
}
section {
grid-row: 2 / 3;
grid-column: auto;
}
#special {
grid-row: auto;
grid-column: 1 / 5;
}
footer {
grid-row: auto;
grid-column: 1 / 5;
}
}
#media(min-width: 1024px) {
nav ul {
flex-direction: column;
padding-top: 1em;
}
nav {
text-align: left;
padding-left: 1em;
padding-right: 1em;
grid-row: 2/3;
grid-column: 1/2;
}
main {
grid-row: 2/3;
grid-column: 2/3;
}
footer {
grid-row: 3/4;
grid-column: 2/4;
}
header {
grid-row: 1/2;
grid-column: 1/4;
}
#wrapper {
margin: auto;
width: 80%;
border: #00008B;
box-shadow: 1px 1px 1px;
display: grid;
grid-row: 3/3;
grid-column: 2/2;
}
}
}
main ul {
list-style-image: url('marker.gif');
font-family: Georgia, serif;
}
nav ul {
list-style: none;
margin: 0;
padding-left: 0;
font-size: 1.2em;
}
nav a:link {
color: #5C7FA3;
}
nav a:visited {
color: #344873;
}
nav a:hover {
color: #A52A2A;
}
body {
font-family: Helvetica;
background-color: #EAEAEA;
color: #666666;
}
main {
background-color: #FFFFFF;
padding-top: 1px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 30px;
overflow: auto;
display: block;
}
dt {
color: #002171;
}
#wrapper {
background-color: #90C7E3;
background-image: linear-gradient(#FFFFFF, #90C7E3);
}
#homehero {
background-image: url('coast2.jpg');
height: 300px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#yurthero {
background-image: url('yurt.jpg');
height: 300px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#trailhero {
background-image: url('trail.jpg');
height: 300px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.resort {
font-weight: bold;
color: #1976D2;
}
footer {
background-color: #FFFFFF;
font-family: Georgia, serif;
font-size: 75%;
font-style: italic;
text-align: center;
padding: 2em;
}
#contact {
font-size: 90%;
}
<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Yurts</li>
<li>Activities</li>
<li>Reservations</li>
</ul>
</nav>
<div id="homehero">
</div>
<main>
<h2>Enjoy Nature in Luxury</h2>
<p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast with panoramic views of the Pacific Ocean. Your stay at Pacific Trails Resort includes a sumptuously appointed private yurt and a cooked-to-order
breakfast each morning.</p>
<ul>
<li>Unwind in the heated outdoor pool and whirlpool</li>
<li>Explore the coast on your own or join our guided tours</li>
<li>Relax in our lodge while enjoying complimentary appetizers and beverages</li>
<li>Savor nightly fine dining with an ocean view</li>
</ul>
<div id="contact">
<span class="resort">Pacific Trails Resort</span><br> 12010 Pacific Trails Road <br> Zephyr, CA 95555<br>
<br> 888-555-5555
<br>
</div>
</main>
<footer>
Copyright © 2020 Pacific Trails Resort<br>
freed.nm#rhodesstate.edu
</footer>
</div>
From what I understand your image does not appear when the screen size is greater than 1024px. I made some changes to the code and got it to work as you wish, I think ...
I hope that's what you want
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pacific Trails Resort</title>
<!-- <link rel="stylesheet" href="pacific.css"> -->
<meta charset="utf-8">
<style>
header {
background-color: #002171;
color: #FFFFFF;
background-position: right;
background-repeat: no-repeat;
}
header a:link {
color: #FFFFFF;
text-decoration-line: none;
}
header a:visited {
color: #FFFFFF;
text-decoration-line: none;
}
header a:hover {
color: #90C7E3;
}
h1 {
margin-top: 0;
margin-bottom: 0;
text-align: center;
font-family: Georgia, serif;
letter-spacing: 0.25em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
* {
box-sizing: border-box;
}
nav {
font-weight: bold;
font-size: 120%;
padding: 0;
text-align: center;
}
nav li {
border-bottom: none;
}
nav a {
text-decoration: none;
}
section {
padding-left: 2em;
padding-right: 2em;
}
h2 {
color: #1976D2;
font-family: Georgia, serif;
text-shadow: 1px 1px 1px #CCCCCC;
}
h3 {
color: #000033;
font-family: Georgia, serif;
}
#media(min-width: 600px) {
nav ul {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
justify-content: space-around;
}
.content main {
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr;
}
h2 {
grid-row: 1 / 2;
grid-column: 1 / 5;
}
section {
grid-row: 2 / 3;
grid-column: auto;
}
#special {
grid-row: auto;
grid-column: 1 / 5;
}
footer {
grid-row: auto;
grid-column: 1 / 5;
}
}
#media(min-width: 1024px) {
nav ul {
flex-direction: column;
padding-top: 1em;
}
nav {
text-align: left;
padding-left: 1em;
padding-right: 1em;
grid-row: 2/3;
grid-column: 1/2;
}
main {
grid-row: 2/3;
grid-column: 2/3;
}
footer {
grid-row: 3/4;
grid-column: 2/4;
}
header {
grid-row: 1/2;
grid-column: 1/4;
}
#wrapper {
margin: auto;
width: 80%;
border: #00008B;
box-shadow: 1px 1px 1px;
display: grid;
grid-row: 3/3;
grid-column: 2/2;
}
}
}
main ul {
list-style-image: url('marker.gif');
font-family: Georgia, serif;
}
nav ul {
list-style: none;
margin: 0;
padding-left: 0;
font-size: 1.2em;
}
nav a:link {
color: #5C7FA3;
}
nav a:visited {
color: #344873;
}
nav a:hover {
color: #A52A2A;
}
body {
font-family: Helvetica;
background-color: #EAEAEA;
color: #666666;
}
main {
background-color: #90C7E3;
padding-top: 1px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 30px;
overflow: auto;
display: block;
}
dt {
color: #002171;
}
#wrapper {
background-color: #90C7E3;
background-image: linear-gradient(#FFFFFF, #90C7E3);
}
#homehero {
height: 300px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#yurthero {
background-image: url('yurt.jpg');
height: 300px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#trailhero {
background-image: url('trail.jpg');
height: 300px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.resort {
font-weight: bold;
color: #1976D2;
}
footer {
background-color: #EAEAEA;
font-family: Georgia, serif;
width: 100%;
font-size: 75%;
font-style: italic;
text-align: center;
padding: 22px;
}
#contact {
font-size: 90%;
}
.details {
padding: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Yurts</li>
<li>Activities</li>
<li>Reservations</li>
</ul>
</nav>
<div id="homehero">
<img src="coast2.jpg" alt="Coast2 Image">
</div>
<hr>
<div class="wrap">
<main>
<h2>Enjoy Nature in Luxury</h2>
<p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the
California
North Coast with panoramic views of the Pacific Ocean. Your stay at Pacific Trails Resort includes a
sumptuously appointed private yurt and a cooked-to-order breakfast each morning.</p>
<ul>
<li>Unwind in the heated outdoor pool and whirlpool</li>
<li>Explore the coast on your own or join our guided tours</li>
<li>Relax in our lodge while enjoying complimentary appetizers and beverages</li>
<li>Savor nightly fine dining with an ocean view</li>
</ul>
<div id="contact">
<span class="resort">Pacific Trails Resort</span><br>
12010 Pacific Trails Road <br>
Zephyr, CA 95555<br>
<br>
888-555-5555<br>
</div>
</main>
</div>
<!-- <footer>
Copyright © 2020 Pacific Trails Resort<br>
freed.nm#rhodesstate.edu
</footer> -->
<div class="details">
<h2>Details</h2>
<ul>
<li>Dedicated</li>
<li>Fast</li>
<li>Secure</li>
</ul>
<br><br>
<h2>Social Networks</h2>
<ul>
<li>Facebook</li>
<li>Instagram</li>
<li>Twitter</li>
</ul>
<br><br>
<h2>Details</h2>
<ul>
<li>Dedicated</li>
<li>Fast</li>
<li>Secure</li>
</ul>
<br><br>
<h2>Social Networks</h2>
<ul>
<li>Facebook</li>
<li>Instagram</li>
<li>Twitter</li>
</ul>
<br><br>
</div>
</div>
<br><br>
<footer>
Copyright © 2020 Pacific Trails Resort<br>
freed.nm#rhodesstate.edu
</footer>
</body>
</html>
Please leave any comments if any problems arise, I would like to help
I try to better understand how CSS works. I have the following code:
#import url('https://fonts.googleapis.com/css2?family=Raleway:wght#300;400;700;900&display=swap" rel="stylesheet');
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Raleway', sans-serif;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
.container {
width: 95%;
max-width: 70em;
margin: 0 auto;
}
/* typography
================== */
h1 {
font-weight: 300;
font-size: 1.7rem;
margin-top: 0;
}
p {
margin-top: 0;
line-height: 1.5;
}
p:last-of-type {
margin-bottom: 0;
}
.title {
font-size: 2.5em;
margin-top: 1em;
margin-bottom: 1.5em;
font-weight: 900;
}
.title span {
font-weight: 300;
display: block;
font-size: .9em;
}
#media(min-width:60rem) {
p {
font-size: 1.2rem;
line-height: 1.6;
}
.title {
font-size: 3.7em;
margin-bottom: 1em;
margin-top: 0;
font-weight: 900;
}
}
/* buttons */
.button {
display: inline-block;
font-size: 1.15em;
text-decoration: none;
text-transform: uppercase;
border-width: 2px;
border-style: solid;
padding: .5em 1.75em;
color: #00ff6c;
border-color: #00ff6c;
}
#media (min-width: 60rem) {
.button {
font-size: 1.5rem;
}
.button-small {
font-size: .7rem;
font-weight: 700;
}
.button-accent {
color: #00ff6c;
border-color: #00ff6c;
}
.button-accent:hover,
.button-accent:focus {
background: #00ff6c;
color: #232323;
}
}
/* header
================== */
header {
position: absolute;
margin-top: 1em;
left: 0;
right: 0;
margin: 1em;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin: 1em;
}
nav a {
font-weight: 900;
text-decoration: none;
padding: .5em;
text-transform: uppercase;
color: #FFF;
font-size: .8rem;
}
nav a: hover,
nav a: focus {
color: #DDD;
}
#media(min-width:60rem) {
.logo {
float: left;
}
nav {
float: right;
}
}
/* home-hero
================== */
.home-hero {
background-image: url(https://i.postimg.cc/XY54RwQY/hero-bg.jpg);
background-size: cover;
background-position: center;
padding: 10em 0;
color: #FFF;
}
#media (min-width: 60rem) {
.home-hero {
height: 100vh;
padding-top: 35vh;
}
}
/* hero-home
======================== */
.home-about-textbox {
background-color: #232323;
padding: 4em;
margin: 0 -2.5vw;
outline: 2px solid #00ff6c;
outline-offset: -2.5em;
color: #FFF;
position: relative;
}
.home-about-textbox h1 {
color: #00ff6c;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: .75em;
background: #232323;
padding: 0 .145em;
white-space: nowrap;
}
.container {
width: 95%;
max-width: 70em;
margin: 0 auto;
background-color: mediumvioletred;
color: magenta;
}
#media (min-width: 25rem) {
h1 {
font-size: 2 rem;
}
.home-about-textbox h1 {
top: .6em;
padding: 0 .325em;
}
}
#media (min-width: 60rem) {
h1 {
font-size: 2.5rem;
}
.home-about {
background-image: url();
background-repeat: no-repeat;
padding-bottom: 10em;
}
.home-about-textbox {
width: 50%;
padding: 7em;
outline-offset: -3.75em;
margin-left: -2.5%;
top: -5em;
text-align: left;
box-shadow: 0 0 4em 0 rgba(0, 0, 0, .3);
}
.home-about-textbox h1 {
top: .75em;
left: 6rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: .75em;
background: #232323;
padding: 0 .145em;
}
}
.container {
width: 95%;
max-width: 70em;
margin: 0 auto;
background-color: coral;
font-weight: 100;
color: blue;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Creative Inc.</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<header>
<img src="https://i.postimg.cc/NFtwcdYg/logo.png" alt="Creative inc. logo" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="home-hero">
<div class="container">
<h1 class="title">Making things looks great
<span>for companies who make great stuff</span>
</h1>
See Our Work
</div>
</section>
<div class="container">
<section class="home-about">
<div class="home-about-textbox">
<h1>Who we are</h1>
<p>Sit by the fire drink water out of the faucet hide head under banket so no one can see cat is love, cat is life.Knock dish off table eating always hungry so favor packaging over toy.</p>
<p>
<srong>Rub face on owner.</srong>Peer out window, chatter at birds, lure then to mouth. Chase ball of string eat a plant, kill a hand, i am the best have secret plans.
</p>
</div>
</section>
</div>
</body>
</html>
Here, the home-about-textbox is defined in three different ways with the class attribute :
`<div class="container">
<section class="home-about"> for pc media
<div class="home-about-textbox">`for mobile media
But the container also selects the "home-hero" section: <section class="home-hero"> <div class="container">.
I tried to figure out what is the role of the container. When I select the .container in the css style sheet just the "home-about-textbox" becomes blue on the browser so I tried to change color of the container to see if this class truly selects both of the sections( "home-hero" & "home-about-textbox") how it seems to be.
I selected the container again at the end of the code to make sure that nothing else overrides it (the last media declaration is closed) and I styled with crazy colors but nothing change. I even tried !important rule and the style is the same. My question is:
What exactly this container class selects in the code and why I can't style it?
container is a class that is given to a div tag to define your web page size, and all of the other elements should be inside of it so they will have all styles given to their parent ( container)
you use the !important wrong, you should use it this way:
background-color: red !important;
I'm having trouble with my styling. This is my code:
<html>
<head>
<style>
#import url('https://fonts.googleapis.com/css?family=Roboto');
html,
body {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
#header {
height: 100px;
background-color: lightgrey;
text-align: center;
}
#menu {
height: 30px;
background-color: #B81F00;
}
#menu a {
text-decoration: none;
color: white;
text-align: center;
width: 15vw;
line-height: 0;
display: inline-block;
/*border: black solid 1px;*/
height: 30px;
padding-left: 10px;
padding-right: 10px;
}
#menu a:hover {
background-color: white;
color: #7B1700;
}
#media only screen and (min-device-width: 320px) and (max-device-width: 600px) {
#menu a {
background-color: #B81F00;
float: center;
display: block;
width: 100%;
margin-top: 20px;
font-size: 20px;
line-height: 20px;
margin: 0;
padding: 0;
}
#menu {
position: relative;
padding-top: 0;
margin-top: 0;
height: auto;
}
}
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="menu">
<a href="#">
<p>Section1</p>
</a>
<a href="#">
<p>Section2</p>
</a>
<a href="#">
<p>Section3</p>
</a>
<a href="#">
<p>Section4</p>
</a>
</div>
</body>
</html>
Now, when I open it in mobile viewpoint, I get this:
As you can see, there is a little whitespace between those two elements, but I can't figure out what caused this.
The P elements have a margin, you should remove it. Use padding instead.
#menu a p {
padding: 1em;
margin: 0;
}
If you want to center the content of the P perfectly try to use flex-box.
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;
}