Witam, od jakiego czasu ucze sie html i css. Czy ktos z ogarniaczy moglby zerknac na moje wypociny i podpowiedzec mi co robie zle, co wymaga poprawy, a w czym jestem ok? Chcialbym byc lepszy w tym co robie dlatego potrzebuje kogos kto powie mi co wymaga pracy.
Projekt dal mi za zadanie odtworzyc layout strony:
https://cdn.statically.io/gh/TheOdinProject/curriculum/main/foundations/html_css/project/odin-project.png
+ info o fontach i kolorach :
https://cdn.statically.io/gh/TheOdinProject/curriculum/main/foundations/html_css/project/colors_and_stuff.png
Strona nie miala byc konfigurowana pod urzadzenia mobilne.
Nie otrzymalem konkretnych wartosci paddingow i marginesow.
Poniej moj kod:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PROJECT-LANDING-PAGE</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="logo">Header Logo</div>
<div class="linki">
<ul>
<li><a href="google.com">header link one</a></li>
<li><a href="google.com">header link two</a></li>
<li><a href="google.com">header link three</a></li>
</ul>
</div>
</div>
<div class="a">
<div class="alewa">
<div class="awesome">This wbesite is awesome</div>
<div class="this">This website has some subtext that goes here under the main title. It's a smaller font and the colour is lower contrast</div>
<button class="p1">Sign up</button>
</div>
<div class="aprawa">
<img src="https://images.pexels.com/photos/8971225/pexels-photo-8971225.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" width="460px" height="100%" alt="orange wall">
</div>
</div>
<div class="b">
<div class="bnaglowek">Some random information.</div>
<div class="breszta">
<div class="oir">
<img src="https://images.pexels.com/photos/9597452/pexels-photo-9597452.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="leaf">
<div class="opis">this is subtext under ilustration or image</div>
</div>
<div class="oir">
<img src="https://images.pexels.com/photos/10205573/pexels-photo-10205573.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="kwiatki">
<div class="opis">this is subtext under ilustration or image</div>
</div>
<div class="oir">
<img src="https://images.pexels.com/photos/10023690/pexels-photo-10023690.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="leafs">
<div class="opis">this is subtext under ilustration or image</div>
</div>
<div class="oir">
<img src="https://images.pexels.com/photos/9677208/pexels-photo-9677208.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="chamomile">
<div class="opis">this is subtext under ilustration or image</div>
</div>
</div>
</div>
<div class="c">
<div class="maksyma">Jeśli wytniesz z siebie wszystko po kolei to któregoś dnia osiągniesz wolność absolutną, staniesz się niczym huragan El Nino, absolutnie wolny, absolutnie nieosiągalny, absolutnie nieprzewidywalny. . . - ale przestaniesz być człowiekiem.</div>
<div class="autor">- Zentsu</div>
</div>
<div class="d">
<div class="d0">
<p class="d1">Call to action! It's time!</p>
<p class="d2">Sign up for this product by clicking that button right over there!</p>
</div>
<button class="p2">Sign up</button>
</div>
<div class="footer">
Copyright © Maciej Dabrowski 2021
</div>
</body>
</html>
CSS:
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.header {
display: flex;
background-color: #1f2937;
justify-content: space-between;
padding: 20px 190px 150px 190px;
}
.logo {
font-size: 24px;
color: #F9FAF8;
font-weight: bold;
}
ul {
list-style-type: none;
display: flex;
gap: 18px;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
font-size: 18px;
color: #e5e7eb;
}
.a {
background-color: #1f2937;
display: flex;
padding: 0 190px;
justify-content: center;
gap: 80px;
padding-bottom: 150px;
}
.alewa {
width: 460px;
height: auto;
}
.awesome {
font-size: 48px;
font-weight: bolder;
color: #F9FAF8;
}
.this {
font-size: 18px;
color: #e5e7eb
}
.p1 {
background-color: #3882f6;
color: #e5e7eb;
padding: 10px 30px;
margin-top: 20px;
border-radius: 10px;
border-style: none;
}
.b {
text-align: center;
}
.oir {
max-width: 130px;
}
.oir img {
width: 130px;
height: 130px;
border-style: solid;
border-top-color: #3882f6;
border-bottom-color: #3882f6;
border-left-color: #3882f6;
border-right-color: #3882f6;
border-radius: 10px;
margin-bottom: 6px;
}
.bnaglowek {
margin: 30px 0;
font-size: 36px;
font-weight: bolder;
color: #1f2937;
}
.breszta {
display: flex;
justify-content: center;
gap: 40px;
margin-bottom: 70px;
}
.c {
background-color: #e5e7eb;
display: flex;
flex-direction: column;
padding: 70px 190px;
}
.maksyma {
font-size: 36px;
font-style: italic;
font-weight: lighter;
color: #1f2937;
margin-bottom: 20px;
}
.autor {
display: flex;
color: #1f2937;
justify-content: end;
font-size: larger;
font-weight: bold;
}
.d {
display: flex;
background-color: #3882f6;
margin: 90px 370px;
padding: 20px 50px;
align-content: center;
justify-content: space-between;
}
.d1 {
font-size: 20px;
color: #F9FAF8;
font-weight: bold;
margin: 0px;
}
.d2 {
margin: 2px 0 0 0;
font-size: 14px;
color: #F9FAF8;
}
.p2 {
background-color: #3882f6;
border: 2px solid #F9FAF8;
padding: 5px 30px;
border-radius: 10px;
color: #F9FAF8;
}
.footer {
background-color: #1f2937;
padding: 30px 0;
text-align: center;
color: #F9FAF8;
}
Z gory dziekuje za uwagi i poswiecony czas.
