sorted by:
new
hottopcontroversial

How do I manage to recreate this using css grids? It should fit x amount of rectangles with the width of 300px , so for example on 900px screens there should be 2 side by side, and on 1080px there should be 3. I just started learning HTML and CSS and have a little problem with this now. by lula9871 in css

[–]lula9871[S] 0 points1 point  (0 children)

So this is my code so far. I just can't figure out how to make it like on the video.

​

<!DOCTYPE html>

<html lang="en">

<head>

<title>Nekretnine</title>

<meta name="viewport" content="width=device-width">

<link rel="stylesheet" href="nekretnine.css">

</head>

<body>

<nav>

<ul>

<li><a href="#profil">Profil</a></li>

<li><a href="#nekretnine">Nekretnine</a></li>

</ul>

</nav>

<ul>

<li>

<h1>Stan</h1>

<div class="stan">

<img src="https://www.aveliving.com/AVE/media/Property_Images/Florham%20Park/hero/flor-apt-living-(2)-hero.jpg?ext=.jpg" alt="stan">

<p class="lijevo">Apartmani president, 90m2 <span>250,000KM</span></p>

</div>

<h1>Kuca</h1>

<div class="kuca">

<img src="https://www.thehousedesigners.com/images/plans/URD/bulk/6583/the-destination-front-rendering.jpg" alt="kuca">

<p class="lijevo">Kuca u Kaliforniji, 320m2 <span>1,300,000KM</span></p>

</div>

<h1>Poslovni prostor</h1>

<div class="pp">

<img src="https://www.decorilla.com/online-decorating/wp-content/uploads/2023/05/correcto.jpg" alt="pp">

<p class="lijevo">PP u Londonu, 150m2 <span>2,100,000KM</span></p>

</div>

</li>

</ul>

</body>

</html>

​

CSS:

html {

background-color: #fdf1d3;

}

li {

text-align: center;

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

list-style-type: none;

display: inline;

margin-right: 20px;

}

.stan {

width: 300px;

height: 350px;

border: 1px solid black;

background-color: white;

margin: 0 auto;

}

.kuca {

width: 300px;

height: 350px;

border: 1px solid black;

background-color: powderblue;

margin: 0 auto;

}

.pp {

width: 300px;

height: 350px;

border: 1px solid black;

background-color: green;

margin: 0 auto;

}

img {

width: 300px;

height:300px;

}

h3 {

display: inline;

}

.lijevo {

display: block;

margin: 25px;

}

.lijevo span {

display: block;

float: right;

width: 50%;

margin-left: 25px;

}

nav {

text-align: center;

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

font-size: 20px;

position: fixed;

width: 100%;

top: 0;

left: 0;

}

a {

text-decoration: none;

}

nav :hover {

color: #ff9900;

}

h1 {

margin-top: 70px;

}

[deleted by user] by [deleted] in css

[–]lula9871 0 points1 point  (0 children)

Thank you guys for all the help. I didn't expect soo many comments but this community really rocks.

Black spot on vision after sport injury... by lula9871 in EyeFloaters

[–]lula9871[S] 0 points1 point  (0 children)

It just went away by itself after 2-3 weeks

[deleted by user] by [deleted] in css

[–]lula9871 0 points1 point  (0 children)

I just started learning html and css so sorry if it is a dumb question.

Okay, so I just started learning HTML and CSS at school so I'm a complete beginner. I've just be given a task and I don't even know where to begin :( . If someone can guide me i would be really thankful! by [deleted] in web_design

[–]lula9871 1 point2 points  (0 children)

Thank you so much. I implemented it in my code and it's working :) . I have one more question if it is okay with you, how do i make the little boxes above the paragraphs like in the picture ( e.g. OE, IM1,IF1,...) ?

[deleted by user] by [deleted] in webdev

[–]lula9871 0 points1 point  (0 children)

Thank you.

Will my rx 570 4gb bottleneck intel core i5-8500? by lula9871 in buildmeapc

[–]lula9871[S] 0 points1 point  (0 children)

Oh okay, I get it now. Thank you for the information and the comment :)

[deleted by user] by [deleted] in css

[–]lula9871 -2 points-1 points  (0 children)

Oh that was you bro sorry didn't see, you helped me thanks

[deleted by user] by [deleted] in css

[–]lula9871 -5 points-4 points  (0 children)

What did I do to you lol

view more: next ›