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

Moja druga strona. Flexbox. RWD.

VPS Starter Arubacloud
0 głosów
269 wizyt
pytanie zadane 13 listopada 2018 w Nasze projekty przez Sandy Boy Początkujący (430 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 (930 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 (430 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,600 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
2 odpowiedzi 250 wizyt
pytanie zadane 20 kwietnia 2020 w HTML i CSS przez Hipolit Roszkowski Obywatel (1,480 p.)
0 głosów
3 odpowiedzi 612 wizyt
pytanie zadane 4 lutego 2019 w HTML i CSS przez GaryNJ Nowicjusz (240 p.)
0 głosów
1 odpowiedź 282 wizyt

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...