I am making a website for trains and i want to add three images but when adding them everytime i want to scale them down everything just breaks the images overlap the text, they go everywhere etc.
i just started coding html and css and have little knowledge and also flexboxes are still a new and confusing thing to me. I know its a mess srry about that 🙂 Someone please help
/*fonts*/
@font-face {
font-family: jost;
src: url(../fonts/Jost-Regular.ttf);
}
* {
box-sizing: border-box;
}
body {
background-color: #ffd7c4;
color: #424242;
margin: 0;
font-family: jost;
height: 100vh;
}
.sections-container {
margin-left: 3%;
margin-top: 3%;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.main-section{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main-section #motto {
text-align: center;
}
.main-section #about-website {
text-align:justify;
font-size: large;
width: 400px;
margin-top: 0px;
}
.image-container{
display: flex;
flex-direction:row;
flex-wrap: wrap;
justify-content: center;
width: 200px;
}<!DOCTYPE html>
<html lang="bg">
<head>
<!--meta data-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--tab view-->
<title>Железопътна страст</title>
<link rel="icon" href="assets/images/logo.png">
<!--css files-->
<link rel="stylesheet" href="assets/css/index.css">
<link rel="stylesheet" href="components/topbar/topbar.css">
<!--google fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&display=swap" rel="stylesheet">
</head>
<body>
<!--the top bar-->
<div class="top-bar">
<div class="branding">
<a href="index.html"><img id="logo" src="assets/images/logo.png" alt="Лого на влак"></a>
<h2 id="title">Железопътна страст</h2>
</div>
<div class="nav-bar">
<a class="nav-button" href="index.html">Начало</a>
<a class="nav-button" href="#trains">Влакове</a>
<a class="nav-button" href="#contacts">Контакти</a>
<a class="nav-button" href="#aboutme">Повече за мен</a>
</div>
</div>
<div class="sections-container">
<!--main section container-->
<div class="main-section">
<img src="assets/images/home-page.png" alt="снимка на влак">
<h2 id="motto">Пътувай по релсите на страстта!</h2>
<p id="about-website">
Добре дошли на нашия сайт, посветен на магията на влаковете!
Тук ще намерите всичко, което може да ви вдъхнови да се
потопите в света на железниците. Пътувайте и открийте
несравнимото вълнение от всяко пътуване!
</p>
</div>
<div class="image-container">
<div class="images"><img src="assets/images/N700A.jpg" alt="train named N700S"></div>
<div class="images"><img src="assets/images/CR400AF.jpg" alt="train named CR400AF"></div>
<div class="images"><img src="assets/images/TGV-M.jpg" alt="train named TGV M"></div>
</div>
</div>
</body>
</html>
You need to sign in to view this answers
Leave feedback about this