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

added files html-css-popup #216

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

added files html-css-popup #216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e500353
added files html-css-popup
oleksii-anoshkin Jan 19, 2023
92f7165
Виправлення помилок.
oleksii-anoshkin Jan 19, 2023
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
2 changes: 2 additions & 0 deletions submissions/OleksiiAnoshkin/html-css-popup/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
Також готовий макет можна перезглянути за:
[Hooli-style Popup](https://html-css-popup.netlify.app "HTML CSS Popup Practise")
238 changes: 238 additions & 0 deletions submissions/OleksiiAnoshkin/html-css-popup/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,238 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta -->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- about author -->
<meta name="Author" content="Oleksii Anoshkin" />
<meta name="Copyright" content="Oleksii Anoshkin" />
<meta name="Address" content="Ukraine, Kharkiv" />
<!-- styles -->
<link rel="stylesheet" href="./reset.css" />
<link rel="stylesheet" href="./styles.css" />
<!-- images -->
<link rel="shortcut icon" type="image/x-icon" href="./images/favicon.png" />
<!-- title -->
<title>HTML CSS Popup Practise</title>
</head>
<body class="wrapper">
<header class="header">
<section class="header__container">
<h1 class="header__container-title">Icon fonts for any project</h1>
</section>
<nav class="header__nav">
<ul class="header__nav-items">
<li class="header__nav-item">
<input
class="visually-hidden"
type="checkbox"
id="checkF"
onclick="" />
<label class="btn" for="checkF">Media icons</label>
<div class="popup">
<ul class="popup__items">
<li class="popup__item">
<a
class="popup__item-link bg-facebook"
href="https://www.flaticon.com/free-icon-font/facebook_6422199"
target="_blank"
rel="noopener noreferrer nofollow"
>Facebook</a
>
</li>
<li class="popup__item">
<a
class="popup__item-link bg-whatsapp"
href="https://www.flaticon.com/free-icon-font/whatsapp_6422213"
target="_blank"
rel="noopener noreferrer nofollow"
>Whatsapp</a
>
</li>
<li class="popup__item">
<a
class="popup__item-link bg-twitter"
href="https://www.flaticon.com/free-icon-font/twitter_6422210"
target="_blank"
rel="noopener noreferrer nofollow"
>Twitter</a
>
</li>
<li class="popup__item">
<a
class="popup__item-link bg-linkedin"
href="https://www.flaticon.com/free-icon-font/linkedin_6422202"
target="_blank"
rel="noopener noreferrer nofollow"
>Linkedin</a
>
</li>
<li class="popup__item">
<a
class="popup__item-link bg-tik-tok"
href="https://www.flaticon.com/free-icon-font/tik-tok_6422207"
target="_blank"
rel="noopener noreferrer nofollow"
>Tik-tok</a
>
</li>
<li class="popup__item">
<a
class="popup__item-link bg-telegram"
href="https://www.flaticon.com/free-icon-font/telegram_6422206"
target="_blank"
rel="noopener noreferrer nofollow"
>Telegram</a
>
</li>
<li class="popup__item">
<a
class="popup__item-link bg-vk"
href="https://www.flaticon.com/free-icon-font/vk_6422212"
target="_blank"
rel="noopener noreferrer nofollow"
>Vk</a
>
</li>
<li class="popup__item">
<a
class="popup__item-link bg-goodreads"
href="https://www.flaticon.com/free-icon-font/goodreads_6424086"
target="_blank"
rel="noopener noreferrer nofollow"
>Goodreads</a
>
</li>
<li class="popup__item">
<a
class="popup__item-link bg-instagram"
href="https://www.flaticon.com/free-icon-font/instagram_6422200"
target="_blank"
rel="noopener noreferrer nofollow"
>Instagram</a
>
</li>
</ul>
<input class="visually-hidden more" type="checkbox" id="more" />
<label class="btn-more" for="more">more</label>
<ul class="popup__items more">
<li class="popup__item">
<a
class="popup__item-link bg-hand"
href="https://www.flaticon.com/free-icon-font/hand_3916589"
target="_blank"
rel="noopener noreferrer nofollow"
>Hand</a
>
</li>
<li class="popup__item">
<a
class="popup__item-link bg-hastag"
href="https://www.flaticon.com/free-icon-font/hastag_5068677"
target="_blank"
rel="noopener noreferrer nofollow"
>Hastag</a
>
</li>
<li class="popup__item">
<a
class="popup__item-link bg-heart"
href="https://www.flaticon.com/free-icon-font/heart_3916767"
target="_blank"
rel="noopener noreferrer nofollow"
>Heart</a
>
</li>
<li class="popup__item">
<a
class="popup__item-link bg-user-add"
href="https://www.flaticon.com/free-icon-font/user-add_3917582"
target="_blank"
rel="noopener noreferrer nofollow"
>User add</a
>
</li>
<li class="popup__item">
<a
class="popup__item-link bg-xing"
href="https://www.flaticon.com/free-icon-font/xing_6422214"
target="_blank"
rel="noopener noreferrer nofollow"
>Xing</a
>
</li>
<li class="popup__item">
<a
class="popup__item-link bg-snapchat"
href="https://www.flaticon.com/free-icon-font/snapchat_6422205"
target="_blank"
rel="noopener noreferrer nofollow"
>Snapchat</a
>
</li>
</ul>
</div>
</li>
<li class="header__nav-item">
<a
class="other"
href="https://www.flaticon.com/icon-fonts-most-downloaded"
target="_blank"
rel="noopener noreferrer nofollow"
>Other icons</a
>
</li>
</ul>
</nav>
</header>
<main class="main">
<p class="main__text">
Discover the most downloaded icon fonts. Thousands of free icon fonts
for your projects in PNG, SVG, iOS, Android format.
</p>
</main>
<footer class="footer">
<p class="footer__text">&#169; Oleksii Anoshkin 2023</p>
<a
class="footer__text kottans"
href="https://kottans.org/"
target="_blank"
rel="noopener noreferrer nofollow"
>=^.^=</a
>
<nav class="footer__nav">
<ul class="footer__links">
<li>
<a
class="footer__link github"
href="https://github.com/oleksii-anoshkin"
target="_blank"
rel="noopener noreferrer nofollow"
>GitHub</a
>
</li>
<li>
<a
class="footer__link facebook"
href="https://www.facebook.com/aleksey.kh.ua"
target="_blank"
rel="noopener noreferrer nofollow"
>Facebook</a
>
</li>
<li>
<a
class="footer__link linkedin"
href="https://www.linkedin.com/in/oleksii-anoshkin-850540210"
target="_blank"
rel="noopener noreferrer nofollow"
>LinkedIn</a
>
</li>
</ul>
</nav>
</footer>
</body>
</html>
120 changes: 120 additions & 0 deletions submissions/OleksiiAnoshkin/html-css-popup/reset.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
/* ------------------------------------------------------------ */
/* reset css */

* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

:focus,
:active {
outline: none;
}

html,
body {
height: 100%;
width: 100%;
font-size: 100%;
line-height: 1;
font-size: 14px;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}

input,
button,
textarea {
font-family: inherit;
}

input::-ms-clear {
display: none;
}

button {
border: none;
outline: none;
cursor: pointer;
}

button::-moz-focus-inner {
padding: 0;
border: 0;
}

ol,
ul,
li {
list-style: none;
}

img {
vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: 400;
}

a,
a:visited,
a:hover,
a:focus,
a:active {
text-decoration: none;
outline: none;
}

blockquote,
q {
quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

/* ------------------------------------------------------------ */
Loading