
amin mbarki
2,110 Pointswhat's wrong with my code ?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Best City Guide</title>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="main-header clearfix">
<h1 class="name"><a href="#">Best City Guide</a></h1>
<ul class="main-nav">
<li><a href="#">ice cream</a></li>
<li><a href="#">donuts</a></li>
<li><a href="#">tea</a></li>
<li><a href="#">coffee</a></li>
</ul>
</header><!--/.main-header-->
<div class="banner">
<img class="logo" src="img/city-logo.svg" alt="City">
<h1 class="headline">The Best City</h1>
<span class="tagline">The best drinks and eats in the best city ever.</span>
</div><!--/.banner-->
<div class="container clearfix">
<div class="secondary col">
<h2>Welcome!</h2>
<p>Everything in this city is worth waiting in line for.</p>
<p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
<p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>
</div><!--/.secondary-->
<div class="primary col">
<h2>Great food</h2>
<img class="feat-img" src="img/treats.svg" alt="Drinks and eats">
<p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan toffee dragée chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
</div><!--/.primary-->
<div class="tertiary col">
<h2>How to get here</h2>
<p><strong>Plane: </strong>Tiramisu caramels gummies chupa chups lollipop muffin. Jujubes chocolate caramels cheesecake brownie lollipop dragée cheesecake.</p>
<p><strong>Train: </strong>Pie apple pie pudding I love wafer toffee liquorice sesame snaps lemon drops. Lollipop gummi bears dessert muffin I love fruitcake toffee pie.</p>
<p><strong>Car: </strong>Jelly cotton candy bonbon jelly-o jelly-o I love. I love sugar plum chocolate cake pie I love pastry liquorice.</p>
</div><!--/.tertiary-->
</div> <!-- end container -->
<footer class="main-footer">
<span>©2015 Residents of The Best City Ever.</span>
</footer>
</body>
</html>
/* =================================
Base Element Styles
==================================== */
* {
box-sizing: border-box;
}
body {
font-family: 'Varela Round', sans-serif;
line-height: 1.6;
color: #3a3a3a;
}
p {
font-size: .95em;
margin-bottom: 1.8em;
}
h2,
h3,
a {
color: #093a58;
}
h1,
h2,
h3 {
margin-top: 0;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
max-height:422px;
}
/* =================================
Base Layout Styles
==================================== */
/* ---- Navigation ---- */
.name {
font-size: 1.25em;
}
.name ,
.banner,
.main-nav,
footer{
text-align: center;
}
.main-nav a {
font-size: .95em;
color: #3acec2;
text-transform: uppercase;
}
.main-nav a:hover {
color: #093a58;
}
/* ---- Layout Containers ---- */
.banner {
color: #fff;
background: #3acec2;
padding:40px 0;
}
.main-footer {
background: #d9e4ea;
padding: 2em 0;
margin-top: 30px;
}
.main-header{
padding:30px 20px 5px ;
}
.container{
margin:50px 10px;
}
/* ---- Page Elements ---- */
.logo {
width: 190px;
}
/* =================================
Media Queries
==================================== */
@media (min-width: 769px) {
.name{
float:left;
}
.main-nav li{
float:right;
margin-left:1.5em;
}
.container{
width:80%;
max-width:1300px;
margin:50px auto;
}
}
.primary{
width:50%;
float:left;
}
.secondary{
width:25%;
float:left;
}
.tertiary{
width:25%;
float:right;
}
.col{
padding:0 20px ;
}
/* ---- Float clearfix ---- */
.clearfix::after {
content: " ";
display: table;
clear: both;
}
}
@media (min-width:769px) and (max-width:1500px){
.tertiary{
float:none;
}
.secondary{
width:50%;
float:left;
}
.primary{
width:50%;
float:right;
}
}
hey guys can someone tell what wrong with my second media query i can't cleat the float of my third column nor resize the columns ?
fixed my css FINALLY !! it was an extra bracket :'( any reviews for my code ?
/* ---- Layout Containers ---- */
.banner {
color: #fff;
background: #3acec2;
padding:40px 0;
}
.main-footer {
background: #d9e4ea;
padding: 2em 0;
margin-top: 30px;
}
.main-header{
padding:30px 50px 5px ;
}
.container{
margin:50px 10px;
}
/* ---- Page Elements ---- */
.logo {
width: 190px;
}
/* =================================
Media Queries
==================================== */
@media (min-width: 769px) {
.name{
float:left;
}
.main-nav li{
float:right;
margin-left:1.5em;
}
.container{
width:80%;
max-width:1300px;
margin:50px auto;
}
.primary{
width:50%;
float:left;
}
.secondary{
width:25%;
float:left;
}
.tertiary{
width:25%;
float:right;
}
.col{
padding:0 20px ;
}
/* ---- Float clearfix ---- */
.clearfix::after {
content: " ";
display: table;
clear: both;
}
}
@media (min-width:769px) and (max-width:1360px){
.tertiary{
width:100%;
clear:both;
float:none;
}
.secondary{
width:50%;
float:left;
}
.primary{
width:50%;
float:right;
}
}
James Akpan
4,528 PointsJames Akpan
4,528 PointsThat looks clean to me. But i feel you could be more specific of what you want to do. I don't get it please. Thanks. BTW nice layout!!