-
-
Save Skibson/ec1fcc85033400905f9ac466c63f721d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
} | |
.clearfix::after { | |
content: ""; | |
display: block; | |
clear: both; | |
} | |
header { | |
position: relative; | |
background-color: #29a6dc; | |
height: 100vh; | |
overflow: hidden; | |
max-width: 1920px; | |
margin: 0 auto; | |
} | |
header > * { | |
position: absolute; | |
} | |
header img { | |
height: 50%; | |
bottom: 0; | |
right: 0; | |
} | |
header div.welcome { | |
z-index: 1; | |
top: 7%; | |
left: 5%; | |
right: 5%; | |
font-family: 'Saira Condensed', | |
sans-serif; | |
color: white; | |
font-size: 40px; | |
font-weight: bold; | |
text-align: center; | |
text-transform: uppercase; | |
} | |
header h1 { | |
margin-top: 15px; | |
font-size: 20px; | |
} | |
header h2 { | |
font-size: 20px; | |
font-weight: normal; | |
} | |
header button { | |
font-family: 'Saira', sans-serif; | |
font-weight: 300; | |
line-height: 32px; | |
padding: 0 20px; | |
text-transform: uppercase; | |
color: white; | |
background-color: transparent; | |
font-size: 12px; | |
border: 2px solid white; | |
} | |
@media (orientation: portrait) and (min-width: 360px) { | |
header h1 { | |
font-size: 24px; | |
} | |
header h2 { | |
font-size: 24px; | |
} | |
header button { | |
margin-top: 24px; | |
line-height: 40px; | |
font-size: 16px; | |
} | |
} | |
@media (orientation: portrait) and (min-width: 410px) { | |
header h1 { | |
font-size: 26px; | |
} | |
header h2 { | |
font-size: 26px; | |
} | |
header button { | |
margin-top: 40px; | |
line-height: 50px; | |
font-size: 20px; | |
} | |
header img { | |
right: -20%; | |
} | |
} | |
@media (orientation: portrait) and (min-width: 768px) { | |
header p { | |
font-size: 80px; | |
} | |
header h1 { | |
font-size: 32px; | |
} | |
header h2 { | |
font-size: 32px; | |
} | |
header button { | |
margin-top: 60px; | |
line-height: 60px; | |
font-size: 24px; | |
} | |
header img { | |
right: -20%; | |
} | |
} | |
@media (orientation: landscape) { | |
header img { | |
height: 80%; | |
bottom: 0; | |
right: -5%; | |
} | |
header div.welcome { | |
top: 15%; | |
left: 7%; | |
right: 48%; | |
} | |
header button { | |
margin-top: 40px; | |
} | |
} | |
@media (orientation: landscape) and (min-width: 640px) { | |
header h1 { | |
font-size: 24px; | |
} | |
header h2 { | |
font-size: 24px; | |
} | |
header button { | |
font-size: 16px; | |
line-height: 40px; | |
} | |
} | |
@media (orientation: landscape) and (min-width: 1024px) { | |
header div.welcome { | |
left: 3%; | |
} | |
header p { | |
font-size: 56px; | |
} | |
header h1 { | |
margin-top: 40px; | |
font-size: 34px; | |
} | |
header h2 { | |
font-size: 34px; | |
} | |
header button { | |
margin-top: 80px; | |
font-size: 28px; | |
line-height: 70px; | |
} | |
header img { | |
right: -22%; | |
height: 85%; | |
} | |
} | |
@media (orientation: landscape) and (min-width: 1280px) { | |
header div.welcome { | |
text-align: left; | |
left: 6%; | |
} | |
header p { | |
font-size: 100px; | |
} | |
header h1 { | |
margin-top: 40px; | |
font-size: 50px; | |
} | |
header h2 { | |
font-size: 50px; | |
} | |
header button { | |
margin-top: 100px; | |
font-size: 30px; | |
line-height: 80px; | |
padding: 0 40px; | |
border-width: 2px; | |
} | |
header img { | |
right: -18%; | |
height: 80%; | |
} | |
} | |
@media (orientation: landscape) and (min-width: 1600px) { | |
header div.welcome { | |
left: 8%; | |
} | |
header p { | |
font-size: 120px; | |
} | |
header h1 { | |
margin-top: 40px; | |
font-size: 60px; | |
} | |
header h2 { | |
font-size: 60px; | |
} | |
header button { | |
line-height: 90px; | |
} | |
header img { | |
right: -8%; | |
height: 90%; | |
} | |
} | |
@media (min-width: 1024px) { | |
header button { | |
cursor: pointer; | |
transition: .3s; | |
} | |
header button:hover { | |
background-color: #fff; | |
color: #111; | |
} | |
} | |
section { | |
min-height: 30vh; | |
} | |
/* Sekcja 1 nasze cechy*/ | |
.features { | |
max-width: 1600px; | |
margin: 50px auto 0; | |
padding: 5%; | |
text-align: center; | |
} | |
.features h1 { | |
font-family: 'Saira Condensed', | |
sans-serif; | |
font-size: 26px; | |
text-transform: uppercase; | |
margin-bottom: 15px; | |
} | |
.features h2 { | |
font-family: 'Saira Condensed', | |
sans-serif; | |
font-size: 22px; | |
text-transform: uppercase; | |
} | |
.features p { | |
font-family: 'Saira', | |
sans-serif; | |
font-size: 12px; | |
font-weight: 300; | |
margin: 20px 0; | |
} | |
.features img { | |
width: 100%; | |
margin: 5px 0; | |
max-width: 375px; | |
} | |
@media (min-width:360px) { | |
.features h1 { | |
font-size: 28px; | |
} | |
.features h2 { | |
font-size: 24px; | |
} | |
.features p { | |
font-size: 14px; | |
} | |
} | |
@media (min-width:768px) { | |
.features h1 { | |
font-size: 36px; | |
} | |
.features h2 { | |
font-size: 28px; | |
} | |
.features p { | |
font-size: 18px; | |
} | |
} | |
@media (min-width:1024px) { | |
.features { | |
margin-top: 50px; | |
padding: 5% 2%; | |
text-align: center; | |
} | |
.feature { | |
float: left; | |
width: 33%; | |
padding: 20px; | |
} | |
.features h1 { | |
font-size: 36px; | |
} | |
.features h2 { | |
font-size: 22px; | |
} | |
.features p { | |
font-size: 16px; | |
line-height: 120%; | |
padding: 0 10px; | |
} | |
} | |
@media (min-width:1600px) { | |
.feature { | |
padding: 20px 50px; | |
} | |
.features h1 { | |
font-size: 60px; | |
} | |
.features h2 { | |
font-size: 32px; | |
} | |
.features p { | |
font-size: 21px; | |
line-height: 140%; | |
padding: 0 10px; | |
} | |
} | |
.portfolio { | |
background-color: black; | |
padding: 10px 0 30px; | |
} | |
.portfolio h1 { | |
font-size: 28px; | |
font-family: 'Saira Condensed', | |
sans-serif; | |
text-transform: uppercase; | |
color: white; | |
text-align: center; | |
padding: 10px 20px; | |
margin-bottom: 15px; | |
} | |
.portfolio .web img { | |
width: 100%; | |
} | |
.portfolio .about { | |
color: white; | |
font-weight: normal; | |
padding: 10px 20px 20px 0; | |
text-align: left; | |
} | |
.portfolio .about h2 { | |
font-size: 18px; | |
border-bottom: 2px solid white; | |
margin-bottom: 12px; | |
padding-bottom: 6px; | |
text-indent: 20px; | |
} | |
.portfolio .about p { | |
font-size: 12px; | |
padding-left: 20px; | |
} | |
.portfolio .project { | |
max-width: 1400px; | |
margin: 0 auto 20px; | |
} | |
.portfolio .project:nth-of-type(odd) { | |
background-color: #ff4f2c; | |
} | |
.portfolio .project:nth-of-type(even) { | |
background-color: #29a6dc; | |
} | |
@media (min-width:768px) { | |
.portfolio h1 { | |
font-size: 40px; | |
} | |
.portfolio .about h2 { | |
font-size: 28px; | |
text-indent: 40px; | |
} | |
.portfolio .about p { | |
font-size: 18px; | |
padding-left: 40px; | |
} | |
.portfolio .project { | |
margin-bottom: 40px; | |
} | |
} | |
@media (orientation: landscape){ | |
.web, | |
.about{ | |
width: 50%; | |
float: left; | |
} | |
img { | |
display: block; | |
} | |
.portfolio .project:nth-of-type(even) | |
.web{ | |
float:right; | |
} | |
} | |
/* SLOGAN */ | |
.slogan{ | |
background-image: url(../images/motto.jpg); | |
text-align: center; | |
background-size: cover; | |
background-position: center; | |
color:white; | |
font-family: 'Saira',sans-serif; | |
height: 70vh; | |
} | |
.slogan h1{ | |
padding: 10px 10px; | |
font-size: 15px; | |
text-transform: uppercase; | |
} | |
.slogan h2{ | |
width: 75%; | |
font-size: 13px; | |
margin-left: auto; | |
margin-right: auto; | |
margin-bottom: 8px; | |
} | |
.slogan p{ | |
padding: 5px; | |
font-size: 19px; | |
} | |
.bg{ | |
background-color: rgba(0, 62, 112, 0.5); | |
padding: 43px 10px; | |
height: 70vh; | |
} | |
@media (orientation:landscape){ | |
.slogan h1{ | |
font-size: 18px; | |
} | |
.slogan h2{ | |
font-size: 16px; | |
} | |
.slogan p{ | |
font-size: 16px; | |
} | |
} | |
/* HOBBY */ | |
.hobby{ | |
height: 40vh; | |
} | |
.hobby h1{ | |
font-size: 21px; | |
font-family: 'Saira',sans-serif; | |
color: black; | |
text-align: center; | |
padding: 14px; | |
text-transform: uppercase; | |
} | |
.hobby .item{ | |
height: 30vh; | |
background-position: center; | |
background-repeat: no-repeat; | |
} | |
.hobby .item:nth-of-type(1){ | |
background-image: url(../images/hobby1.jpg); | |
} | |
.hobby .item:nth-of-type(2){ | |
background-image: url(../images/hobby2.jpg); | |
} | |
.hobby .item:nth-of-type(3){ | |
background-image: url(../images/hobby3.jpg); | |
} | |
.hobby .item:nth-of-type(4){ | |
background-image: url(../images/hobby4.jpg); | |
} | |
.hobby .item p{ | |
font-family: 'Saira',sans-serif; | |
font-size: 18px; | |
color: white; | |
font-family: 'Saira',sans-serif; | |
background-color: rgba(0, 0, 0, 0.5); | |
line-height: 30vh; | |
text-align: center; | |
} | |
@media (min-width:1024px){ | |
.hobby h1{ | |
font-size: 45px; | |
padding: 40px; | |
} | |
.hobby .item{ | |
float:left; | |
width: 50%; | |
height: 48vh; | |
} | |
.hobby .item p{ | |
line-height: 48vh; | |
font-size: 30px; | |
text-transform: uppercase; | |
opacity: 0; | |
transition: 1s; | |
} | |
.hobby .item:hover p{ | |
opacity: 1; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="pl"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Adam Kowalski - Web Developer</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<link href="https://fonts.googleapis.com/css?family=Saira+Condensed:400,700|Saira:300,400&subset=latin-ext" rel="stylesheet"> | |
<link rel="stylesheet" href="css/style.css"> | |
</head> | |
<body> | |
<header> | |
<div class="welcome"> | |
<p>witaj!</p> | |
<h1>jestem Adam Kowalski</h1> | |
<h2>web developer - freelancer</h2> | |
<button>Zobacz moje portfolio</button> | |
</div> | |
<img src="images/photo1.png" alt="Zdjęcie Adam Kowalski"> | |
</header> | |
<section class="features clearfix"> | |
<h1>Tworzę bardzo dobre strony internetowe</h1> | |
<div class="feature"> | |
<img src="images/services1.png" alt="loga html js i css"> | |
<h2>Nowoczesne i zgodne z aktualnymi standardami</h2> | |
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum earum maiores dolores fugit, soluta? Sed repudiandae, fugit provident suscipit cum architecto asperiores, sequi obcaecati, alias sunt ea. Soluta, rerum, perspiciatis.</p> | |
</div> | |
<div class="feature"> | |
<img src="images/services2.png" alt="loga html js i css"> | |
<h2>Zoptymalizowanie pod kątem wyszukiwarek internetowych</h2> | |
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum earum maiores dolores fugit, soluta? Sed repudiandae, fugit provident suscipit cum architecto asperiores, sequi obcaecati, alias sunt ea. Soluta, rerum, perspiciatis.</p> | |
</div> | |
<div class="feature"> | |
<img src="images/services3.png" alt="loga html js i css"> | |
<h2>Świetnie wyglądające na urzedziach mobilnych</h2> | |
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum earum maiores dolores fugit, soluta? Sed repudiandae, fugit provident suscipit cum architecto asperiores, sequi obcaecati, alias sunt ea. Soluta, rerum, perspiciatis.</p> | |
</div> | |
</section> | |
<section class="portfolio"> | |
<h1>Projekty, z których jestem dumny</h1> | |
<div class="project clearfix"> | |
<div class="web"> | |
<img src="images/portfolio1.jpg" alt="portfolio przykład 1"> | |
</div> | |
<div class="about"> | |
<h2>Nazwa projektu</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed doloremque quidem illo doloribus ipsa, facere, quae eligendi debitis. A debitis totam amet aperiam enim. Qui velit corrupti consequatur nihil est.</p> | |
</div> | |
</div> | |
<div class="project clearfix"> | |
<div class="web"> | |
<img src="images/portfolio2.jpg" alt="portfolio przykład 2"> | |
</div> | |
<div class="about"> | |
<h2>Nazwa projektu</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed doloremque quidem illo doloribus ipsa, facere, quae eligendi debitis. A debitis totam amet aperiam enim. Qui velit corrupti consequatur nihil est.</p> | |
</div> | |
</div> | |
<div class="project clearfix"> | |
<div class="web"> | |
<img src="images/portfolio3.jpg" alt="portfolio przykład 3"> | |
</div> | |
<div class="about"> | |
<h2>Nazwa projektu</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed doloremque quidem illo doloribus ipsa, facere, quae eligendi debitis. A debitis totam amet aperiam enim. Qui velit corrupti consequatur nihil est.</p> | |
</div> | |
</div> | |
<div class="project clearfix"> | |
<div class="web"> | |
<img src="images/portfolio4.jpg" alt="portfolio przykład 4"> | |
</div> | |
<div class="about"> | |
<h2>Nazwa projektu</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed doloremque quidem illo doloribus ipsa, facere, quae eligendi debitis. A debitis totam amet aperiam enim. Qui velit corrupti consequatur nihil est.</p> | |
</div> | |
</div> | |
</section> | |
<section class="slogan"> | |
<div class="bg"> | |
<h1>Moje życiowe motto</h1> | |
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga id architecto harum sint at alias. </p> | |
<p class="author">Jan Nowak</p> | |
</div> | |
</section> | |
<section class="hobby clearfix"> | |
<h1>W wolnym czasie uwielbiam</h1> | |
<div class="item"> | |
<p>Chodzić po górach</p> | |
</div> | |
<div class="item"> | |
<p>Patrzeć wysoko</p> | |
</div> | |
<div class="item"> | |
<p>Zmieniać świat</p> | |
</div> | |
<div class="item"> | |
<p>Jeść owoce i warzywa</p> | |
</div> | |
</section> | |
<section> | |
<h1></h1> | |
</section> | |
<section class="kontakt"> | |
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed doloremque quidem illo doloribus ipsa, facere, quae eligendi debitis. A debitis totam amet aperiam enim. Qui velit corrupti consequatur nihil est.</h1> | |
</section> | |
<footer></footer> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment