• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Moja druga strona. Flexbox. RWD.

0 głosów
154 wizyt
pytanie zadane 13 listopada 2018 w Nasze projekty przez Sandy Boy Początkujący (310 p.)

Stronka jeszcze bez formularza. Wszystko z wykorzystaniem flexboxa.

<!DOCTYPE html>
<html lang="pl-PL">
	<head>
		<meta charset="UTF-8">
		<title>Lorem ipsum dolor sit amet,</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="Lorem ipsum dolor sit amet,">
		<meta name="keywords" content="lorem, ipsum, dolor">
		<meta name="author" content="Sandy Boy">
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="wrapper">
		
			<nav class="sec nav">
				<div class="logo"><img src="#" alt="logo"></div>
				<ul class="sec nav1">
					<li><a href="#0" alt="">0</a></li>
					<li><a href="#1" alt="">1</a></li>
					<li><a href="#2" alt="">2</a></li>
					<li><a href="#3" alt="">3</a></li>
					<li><a href="#4" alt="">4</a></li>
					<li><a href="#5" alt="">5</a></li>
				</ul>
			</nav>
			
			<main>
				<header>
					<div class="sec zero" id="0">
						<span><h1>Lorem ipsum dolor sit amet.</h1></span>
						<div><img src="#" alt="img"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra.
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div><img src="#" alt="img"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra.
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div><img src="#" alt="img"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra.
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>

					</div>
				</header>
				
				<section>
					<div class="sec one" id="1">
						<div class="xs"><img src="#" alt="img"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div><h1>Lorem ipsum dolor sit amet,</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
						Sed semper erat vel arcu blandit pharetra. Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
					</div>
				</section>
				
				<section>
					<div class="sec two" id="2">
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div class="xs"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
					</div>
				</section>
				
				<section>
					<div class="sec three" id="3">
						<span><h1>Lorem ipsum dolor sit amet,</h1></span>
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
					</div>
				</section>
				
				<section>
					<div class="sec four" id="4">
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
						<div><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat vel arcu blandit pharetra. 
						Sed diam mi, maximus et commodo et, aliquam vitae nisl. In hac habitasse platea dictumst. </p></div>
					</div>
				</section>
				
				<section>
					<div class="sec five" id="5">
					<!-- Tu trzeba zrobić formularz kontaktowy -->
					</div>
				</section>
				
				<footer>
					<div class="sec six" id="foot">
						<div>
						<h1>Kontakt:</h1>
						<span>Sandy Boy</span>
						<span>telefon: XXX XXX XXX</span>
						<span>e-mail: xxx@xxx.xx</span>
						</div>
						
						<div>
						<h1>Adres:</h1>
						<span>XX-XXX Miasto</span>
						<span>ul. Nazwa ulicy i numer domu</span>
						<span>Polska</span>
						</div>
					</div>
				</footer>
			
			</main>
	
		
		</div>
	</body>
* {
	margin:0;
	padding:0;
	background-color: #ddd;
}

.sec {
	display:flex;
	flex-wrap: wrap;
	justify-content: space-around;
	
}

.sec img {
	max-width: 100%;
}

.sec h1 {
	font-size: 3vw;
}
.sec h2 {
	font-size: 2.5vw;
}
.sec p {
	font-size: 2vw;
}
.sec span {
	font-size: 1.5vw;
}

.nav {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	justify-content: space-between;
	padding: 2vw;
}

.nav, .nav * {
	background-color: #333;
}

.nav1 {
	list-style-type: none;
}

.nav1 li a{
	text-decoration: none;
	color: #ddd;
	padding: 2vw;
}

.nav1 li a:hover{
	background-color: #111;
}

.sec span {
	min-width: 100%;
	text-align: center;
	margin-bottom: 30px;
}

.sec div p {
	text-indent: 20px;
	text-align: justify;
}

.zero, .one, .two, .three, .four, .five {
	padding: 60px 0;
}

.zero *, .zero, .two *, .two, .four *, .four {
	background-color: white;
	
}

.zero div {
	max-width: 20%;
}

.one *, .one {
	background-color: forestgreen;
	
}

.one div {
	max-width: 35%;
}

.one .xs {
	max-width: 20%
}

.two {
	align-items: center;
}

.two div {
	max-width: 30%;
}
.two .xs {
	max-width: 10%;
}

.three *, .three {
	background-color: mediumseagreen;
	
}

.three div {
	max-width: 30%;
	margin-bottom: 15px;
}

.four div {
	max-width: 15%;
}

.five *, .five {
	background-color: lightgreen;
	
}
/* Zrobić ładny formularz kontaktowy */

.six *, .six {
	background-color: #111;
	color: white;
	
}

.six div {
	max-width: 40%;
	text-align: center;
}

.six div *{
	display: block;
	margin: 0;
	padding: 3px 0;
}
/* Na tablety */
@media screen and (max-width: 768px){

.sec h1 {
	font-size: 3.5vw;
}
.sec h2 {
	font-size: 3vw;
}
.sec p {
	font-size: 2.5vw;
}
.sec span {
	font-size: 2vw;
}

.two div {
	max-width: 20%;
}
.two .xs {
	max-width: 30%;
}
.four div {
	max-width: 30%;
}
}
/* Na telefony */
@media screen and (max-width: 480px) {

.sec h1 {
	font-size: 4vw;
}
.sec h2 {
	font-size: 3.5vw;
}
.sec p {
	font-size: 3vw;
}
.sec span {
	font-size: 2.5vw;
}

.zero div {
	max-width: 60%;
	margin: 10px 0;
}

.one div {
	max-width: 75%;
	margin: 10px 0;
}

.one .xs {
	max-width: 50%;
	margin: 10px 0;
}

.two div {
	max-width: 75%;
	margin: 10px 0;
}
.two .xs {
	max-width: 30%;
}

.three div {
	max-width: 45%;
	margin-bottom: 15px;
}

.four div {
	max-width: 30%;
	margin: 10px 0;
}
	
}

 

1 odpowiedź

+1 głos
odpowiedź 13 listopada 2018 przez Stoprocent Użytkownik (660 p.)

Hej, gdy wrzucasz całą stronę może warto pomyśleć o Github, tutaj masz moją stronę z użyciem flexa.

Link

a tutaj poradnik jak to zrobić:

Poradnik

komentarz 13 listopada 2018 przez Sandy Boy Początkujący (310 p.)
A czy na GitHubie ktoś mi powie, co robię dobrze, a co nie tak jak należy?
komentarz 13 listopada 2018 przez kenjiro244 Dyskutant (8,450 p.)
Nie ale wtedy możesz dać na linka do strony przez co będzie łatwiej ocenić stronę pod względem wyglądu czy RWD. No chyba że chcesz aby oceniany był tylko sam kod i jego poprawność.

Podobne pytania

0 głosów
3 odpowiedzi 112 wizyt
pytanie zadane 4 lutego w HTML i CSS przez GaryNJ Nowicjusz (240 p.)
0 głosów
1 odpowiedź 129 wizyt
pytanie zadane 3 lipca w Nasze projekty przez Eryk Michalak Obywatel (1,760 p.)
0 głosów
2 odpowiedzi 109 wizyt
pytanie zadane 4 kwietnia w Nasze projekty przez Majki Obywatel (1,410 p.)
Porady nie od parady
Zadając pytanie postaraj się o odpowiedni tytuł, kategorię oraz tagi.Tagi

66,379 zapytań

113,130 odpowiedzi

239,487 komentarzy

46,636 pasjonatów

Przeglądających: 341
Pasjonatów: 6 Gości: 335

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...