Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

10-Media #285

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

10-Media #285

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
69fe5d7
added hw10
batteryfree Dec 19, 2020
3620382
Merge branch 'master' into 10-media
batteryfree Dec 19, 2020
e03c98b
Merge branch 'master' into 10-media
batteryfree Dec 20, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added homeworks/roman.vlasov_batteryfree/10-media/img/[email protected]
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added homeworks/roman.vlasov_batteryfree/10-media/img/[email protected]
View file
Open in desktop
Binary file not shown.
Binary file added homeworks/roman.vlasov_batteryfree/10-media/img/[email protected]
View file
Open in desktop
Binary file not shown.
Binary file added homeworks/roman.vlasov_batteryfree/10-media/img/[email protected]
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added homeworks/roman.vlasov_batteryfree/10-media/img/[email protected]
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added homeworks/roman.vlasov_batteryfree/10-media/img/[email protected]
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added homeworks/roman.vlasov_batteryfree/10-media/img/[email protected]
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added homeworks/roman.vlasov_batteryfree/10-media/img/[email protected]
View file
Open in desktop
Binary file not shown.
Binary file added homeworks/roman.vlasov_batteryfree/10-media/img/[email protected]
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added homeworks/roman.vlasov_batteryfree/10-media/img/[email protected]
View file
Open in desktop
Binary file not shown.
Binary file added homeworks/roman.vlasov_batteryfree/10-media/img/[email protected]
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added homeworks/roman.vlasov_batteryfree/10-media/img/[email protected]
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added homeworks/roman.vlasov_batteryfree/10-media/img/bg-demo-1.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added homeworks/roman.vlasov_batteryfree/10-media/img/bg-demo.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added homeworks/roman.vlasov_batteryfree/10-media/img/bg-header-1.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added homeworks/roman.vlasov_batteryfree/10-media/img/bg-header.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
65 changes: 65 additions & 0 deletions homeworks/roman.vlasov_batteryfree/10-media/img/icons.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
229 changes: 229 additions & 0 deletions homeworks/roman.vlasov_batteryfree/10-media/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,229 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/320x.css">
<link rel="stylesheet" href="./styles/678x.css">
<link rel="stylesheet" href="./styles/991x.css">
<link href="https://fonts.googleapis.com/css2?family=Rammetto+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap" rel="stylesheet">
</head>

<body>
<header class="header">
<div class="container header__wrap">
<a class="logo" href="#">
<span class="logo__circle">DW</span>
<span class="logo__text">Dreammaker</span>
</a>
<label class="header__menu" for="header__mobile__menu">Menu</label>
<input class="header__checkbox" id="header__mobile__menu" type="checkbox">
<nav class="nav">
<a class="nav__link" href="#">Home</a>
<a class="nav__link" href="#">About us</a>
<a class="nav__link" href="#">Service</a>
<a class="nav__link" href="#">Setting</a>
<a class="nav__link" href="#">Contact us</a>
</nav>
<div class="header__description">
<h1 class="header__headline">Your awesome Dream maker consultant</h1>
<p class="header__text">
The occupational traffic permit is one of the most important things in the company
when carrying out freight transport. In fact, it is a prerequisite for
doing business traffic at all.
</p>
<button class="header__btn" type="button" title="click me">Get started</button>
</div>
</div>
</header>
<main>
<section class="container services">
<h2 class="services__headline">We provide great Service</h2>
<p class="services__description">
The occupational traffic permit is one of the most important things in the company
when carrying out freight transport. In fact, it is a
prerequisite for doing business traffic at all.
</p>
<a class="tile-services" href="#">
<svg width="50" height="50" class="tile-services__icon">
<use xlink:href="./img/icons.svg#design"></use>
</svg>
<h3 class="tile-services__headline">Web design</h3>
<p class="tile-services__text">Here you can find all your primary health your good health and education
</p>
</a>
<a class="tile-services" href="#">
<svg width="50" height="50" class="tile-services__icon">
<use xlink:href="./img/icons.svg#health"></use>
</svg>
<h3 class="tile-services__headline">Health and study</h3>
<p class="tile-services__text">Here you can find all your primary health your good health and education
</p>
</a>
<a class="tile-services" href="#">
<svg width="50" height="50" class="tile-services__icon">
<use xlink:href="./img/icons.svg#pack"></use>
</svg>
<h3 class="tile-services__headline">Packaging</h3>
<p class="tile-services__text">Here you can find all your primary health your good health and education
</p>
</a>
<a class="tile-services" href="#">
<svg width="50" height="50" class="tile-services__icon">
<use xlink:href="./img/icons.svg#content"></use>
</svg>
<h3 class="tile-services__headline">Content writing</h3>
<p class="tile-services__text">Here you can find all your primary health your good health and education
</p>
</a>
</section>
<section class="demo">
<div class="container">
<h2 class="demo__headline">First see how to expand or our demo </p>
</div>
</section>
<section class="container best-feature">
<h2 class="best-feature__headline">Best Feature in the world</h2>
<p class="best-feature__text">
Here you get the best featured in the world and you can do the best thing
when carrying out freight transport. In fact, it is a
</p>
<div class="best-feature-tail">
<div class="best-feature-tail__description">
<picture>
<source size="(max-width: 1080px) 100vw"
srcset="./img/[email protected] 678w,
./img/[email protected] 1024w"
type="image/webp">
<img class="best-feature-tail__img"
sizes="(max-width: 1080px) 100vw, 1080px"
srcset="./img/[email protected] 320w,
./img/[email protected] 678w,
./img/[email protected] 992w,
./img/[email protected] 1080w"
src="./img/[email protected]" alt="">
</picture>
<h3 class="best-feature-tail__headline">Customer</h3>
<p class="best-feature-tail__text">The occupational traffic permit is one
things in the company How do you
a commercial traffic permit for freight
transport to your business? </p>
</div>
<div class="best-feature-tail__btn-wrap">
<button class="best-feature-tail__btn" type="button" title="click me">Refer anyone</button>
</div>
</div>
<div class="best-feature-tail">
<div class="best-feature-tail__description">
<picture>
<source size="(max-width: 1080px) 100vw"
srcset="./img/[email protected] 678w,
./img/[email protected] 1024w"
type="image/webp">
<img class="best-feature-tail__img"
sizes="(max-width: 1080px) 100vw, 1080px"
srcset="./img/[email protected] 320w,
./img/[email protected] 678w,
./img/[email protected] 992w,
./img/[email protected] 1080w"
src="./img/[email protected]" alt="">
</picture>
<h3 class="best-feature-tail__headline">Provider</h3>
<p class="best-feature-tail__text">The occupational traffic permit is one
things in the company How do you
a commercial traffic permit for freight
transport to your business? </p>
</div>
<div class="best-feature-tail__btn-wrap">
<button class="best-feature-tail__btn" type="button" title="click me">Learn more</button>
</div>
</div>
</section>
<section class="container registration">
<h2 class="registration__headline">Please join with us & get all kind of benifit</h2>
<form class="form">
<label class="form__label">
<span class="form__input-description">Name:</span>
<input class="form__input" type="text" placeholder="Your name">
</label>
<label class="form__label">
<span class="form__input-description">Password:</span>
<input class="form__input" type="password" placeholder="Your password">
</label>
<button class="form__btn" type="submit" title="click me submit">Sign in</button>
<div class="form__text-wrap">
<span class="form__text">Don’t have an account ?</span>
<a class="form__link" href="#">Sign up here</a>
</div>
</form>
</section>
</main>
<footer class="footer">
<div class="container">
<nav>
<ul class="nav__list">
<li class="nav__item">
<a class="nav__link-footer nav__link-footer--bold" href="#">Learn More</a>
<a class="nav__link-footer" href="#">Sell Fast</a>
<a class="nav__link-footer" href="#">Buy Now</a>
<a class="nav__link-footer" href="#">Membership</a>
<a class="nav__link-footer" href="#">Banner Ads</a>
<a class="nav__link-footer" href="#">Promotions</a>
</li>
<li class="nav__item">
<a class="nav__link-footer nav__link-footer--bold" href="#">Help & Support</a>
<a class="nav__link-footer" href="#">FAQ</a>
<a class="nav__link-footer" href="#">Stay Safe</a>
<a class="nav__link-footer" href="#">Contact us</a>
</li>
<li class="nav__item">
<a class="nav__link-footer nav__link-footer--bold" href="#">Social</a>
<a class="nav__link-footer" href="#">Blog</a>
<a class="nav__link-footer" href="#">Facebook</a>
<a class="nav__link-footer" href="#">Twitter</a>
<a class="nav__link-footer" href="#">Youtube</a>
</li>
<li class="nav__item">
<a class="nav__link-footer nav__link-footer--bold" href="#">About us</a>
<a class="nav__link-footer" href="#">About us</a>
<a class="nav__link-footer" href="#">Career</a>
<a class="nav__link-footer" href="#">Terms and Conditions</a>
<a class="nav__link-footer" href="#">Privacy Policy</a>
<a class="nav__link-footer" href="#">Sitemap</a>
</li>
</ul>
</nav>
<div class="footer-wrap">
<div class="footer__wrap-link">
<a class="footer__link" href="#">
<svg width="50" height="50" class="footer__icon">
<use xlink:href="./img/icons.svg#facebook"></use>
</svg>
</a>
<a class="footer__link" href="#">
<svg width="50" height="50" class="footer__icon">
<use xlink:href="./img/icons.svg#twitter"></use>
</svg>
</a>
<a class="footer__link" href="#">
<svg width="50" height="50" class="footer__icon">
<use xlink:href="./img/icons.svg#instagramm"></use>
</svg>
</a>
</div>
<a class="logo-footer" href="#">
<span class="logo-footer__dw">DW</span>
<span class="logo-footer__text">Dreammaker</span>
</a>
<p class="footer__copyright">Copyright @ 2019</p>
</div>
</footer>

</body>

</html>
136 changes: 136 additions & 0 deletions homeworks/roman.vlasov_batteryfree/10-media/styles/320x.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
@media (min-width: 320px) {

.header__menu {
font-size: 18px;
}

.nav {
width: 250px;
}

.header__headline {
font-size: 26px;
}

.header__text {
padding-bottom: 18px;
text-align: center;
}

/* services section*/

.services {
display: grid;
grid-template-columns: repeat(2, 1fr);
}

.services__headline {
grid-column: 1 / span 2;
font-size: 22px
}

.services__description {
grid-column: 1 / span 2;
}

.tile-services {
border-bottom: none;
max-width: 250px;
margin: 16px;
justify-self: center;
}

.tile-services__icon {
width: 75px;
height: 75px;
}

.tile-services__headline {
font-size: 18px;
}

.tile-services__text {
text-align: center;
}

/* demo section */

.demo__headline {
font-size: 22px;
}

/* best-feature section */

.best-feature__headline {
font-size: 22px;
}

.best-feature-tail {
height: 380px;
}

.best-feature-tail__description {
height: 325px;
}

.best-feature-tail__img {
max-width: 350px;
max-height: 55%;
}

.best-feature-tail__headline {
font-size: 20px;
}

.best-feature-tail__text {
text-align: center;
font-size: 14px;
}

/* registration section */

.registration__headline {
font-size: 22px;
}

.form__input-description {
font-size: 16px;
}

.form__input {
font-size: 16px;
}

.form__text-wrap {
text-align: center;
}

.form__text {
font-size: 16px;
}

.form__link {
font-size: 16px;
}

/* footer section */

.nav__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: start;
}

.nav__link-footer {
font-size: 20px;
}

.footer-wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
}

.logo-footer {
justify-self: end;
}
}
Loading