I am writing html and css code and I have a problem. I am trying make photos look like this:
Welcome to the forums, @hiborija.
From the image, sll I can say is that you’re not setting the size correctly, which you presumably already know. To see what’s wrong, we need to see the relevant HTML and CSS.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<title>Omnifood</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="resources/img/logo-white.png" alt="Omnifood logo" class="logo">
<ul class="main-nav">
<li><a href="#">Food delivery</a></li>
<li><a href="#">How it works</a></li>
<li><a href="#">Our cities</a></li>
<li><a href="#">Sign up</a></li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
<a class="btn btn-full" href="#">I’m hungry </a>
<a class="btn btn-ghost" href="#"> Show me more </a>
</div>
</header>
<section class="section features">
<div class="row">
<h2>Get food fast — not fast food</h2>
<p class="long-copy">
Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
</p>
</div>
<div class="row">
<div class="col span-1-of-4 box">
<i class="ion-ios-infinite-outline icon-big"></i>
<h3>Up to 365 days/year</h3>
<p>Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-stopwatch-outline icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-nutrition-outline icon-big "></i>
<h3>100% organic</h3>
<p>All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-cart-outline icon-big"></i>
<h3>Order anything</h3>
<p>We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
<section class="section-meals">
<ul class="meals-showcase">
<li>
<figure class="meal-photo">
<img src="resources/img/1.jpg" alt="Korean bibimbap with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/2.jpg" alt="Simple italian pizza with cherry tomatoes ">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/3.jpg" alt="Chicken breast steak with vegetables">
</figure >
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/4.jpg" alt="Autumn pumpkin soup">
</figure>
</li>
</ul>
<ul class="meals-showcase">
<li>
<figure class="meal-photo" >
<img src="resources/img/5.jpg" alt="Paleo beef steak with vegetables">
</figure>
<li>
<figure class="meal-photo">
<img src="resources/img/6.jpg" alt="Healthy baguette with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/7.jpg" alt="Burger with cheddar and bacon">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/8.jpg" alt="Granola with cherries and strawberries">
</figure>
</li>
</ul>
</section>
</body>
</html>
And CSS is:
/*
Orange color #e67e22
*/
/* ------------------------------------------- */
/* BASIC SETUP */
/* ------------------------------------------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #fff;
color: #5f5f5f;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
/* ------------------------------------------- */
/* REUSABLE COMPONENTS */
/* ------------------------------------------- */
.row {
max-width: 1140px;
margin: 0 auto;
}
.section {
padding: 80px 0;
}
.box {
padding: 1%;
}
/*---------HEADINGS-------------------------*/
h1, h2, h3 {
font-weight: 300;
text-transform: uppercase;
}
h1{
margin top: 0;
margin-bottom: 20px;
color: #fff;
font-size: 220%;
word-spacing: 4px;
letter-spacing: 1px;
}
h2{
font-size: 180%;
word-spacing: 2px;
text-align: center;
margin-bottom: 30px;
letter-spacing: 1px;
}
h3{
font-size: 110%;
margin-bottom: 15px;
}
h2:after{
display: block;
height:2px;
background-color: #e67e22;
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 30px;
}
/*---------PARAGRAPHS----------------------*/
.long-copy {
line-height: 145%;
width: 70%;
margin-left: 15%;
}
.box p{
font-size: 90%;
line-height: 145%;
}
/*---------ICONS----------------------*/
.icon-big {
font-size: 350%;
display: block;
color: #e67e22;
margin-bottom: 10px;
}
/*---------BUTTONS-------------------------*/
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0,2s;
}
.btn-full:link,
.btn-full:visited {
background-color: #e67e22;
border: 1px solid #e67e22;
color: #fff;
margin: 15px;
}
.btn-ghost:link,
.btn-ghost:visited {
border: 1px solid #e67e22;
color: #e67e22;
}
.btn:hover,
.btn:active {
background-color: #cf6d17;
}
.btn-full:hover,
.btn-full:active {
border: 1px solid #e67e22;
}
.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #e67e22;
color: #fff;
}
/* ------------------------------------------- */
/* HEADER */
/* ------------------------------------------- */
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logo {
margin-top: 20px;
height: 100px;
width: auto;
float: left;
}
.main-nav {
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li {
display: inline-block;
margin: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
padding: 8px 0;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
}
.main-nav li a:hover,
.main-nav li a:active {
border-bottom: 2px solid #e67e22;
}
/* ------------------------------------------- */
/* MEALS */
/* ------------------------------------------- */
.meals-showcase {
list-style: none;
width: 100%;
}
.meals-showcase li {
display: block;
float: left;
width: 25%;
}
.meal-photo {
width: 100%;
margin: 0;
}
.meal-photo img {
width 100%;
height: auto;
}
Can you give us the full URL to the resources and vendors directories? We can’t access the images nor the stylesheets without it.
Thank you for reply but I found out what was the problem. I was writing code in css and css did not show it in html properly but when I erased it and type the same code again it worked. Its some bug or whatever 
1 Like
Thank you for letting us know what the problem was. Glad you were able to find it so quickly
No problem, if some new problem comes I will post it 
It may be that the css was cached and needed to refresh to show your changes.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.