Skip to content

Commit

Permalink
New version
Browse files Browse the repository at this point in the history
  • Loading branch information
@Semka094
Semka094 committed Aug 29, 2022
1 parent d95d105 commit 98d6344
Show file tree
Hide file tree
Showing 2 changed files with 172 additions and 118 deletions.
176 changes: 104 additions & 72 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Expand All @@ -13,125 +14,156 @@
<body>

<div class="menuContainer">
<nav class="navWrapper">
<div class="navItem">
<ul class="navWrapper">
<li class="navItem">
<a class="navLink" href="#">Mail</a>
</div>
<div class="navItem">
</li>
<li class="navItem">
<a class="navLink" href="#">Images</a>
</div>
<div class="navItem icon">
</li>
<li class="navItem icon">
<input class="popupBtnCheckbox" type="checkbox" id="popupBtn">
<label class="popupBtnLabel" for="popupBtn">
<img class="navLink" src="./images/popup-button.png" alt="dotted button">
<img class="navImg" src="./images/popup-button.png" alt="dotted button">
</label>

<div class="appsPopup">
<div class="popupContainer">
<div class="popupWrapper">
<div class="itemList">
<ul class="itemList">
<li>
<a href="#" class="columnItem">
<div class="imgItem"><img src="./images/calendar.png" alt="Calendar"></div>
<div class="itemTitle">Calendar</div>
<img class="popupItemImg" src="./images/calendar.png" alt="Icon of calendar">
<span class="itemTitle">Calendar</span>
</a>
</li>
<li>
<a href="#" class="columnItem">
<div><img src="./images/mail.png" alt="Mail"></div>
<div class="itemTitle">Mail</div>
<img class="popupItemImg" src="./images/mail.png" alt="Icon of letter">
<span class="itemTitle">Mail</span>
</a>
</li>
<li>
<a href="#" class="columnItem">
<div><img src="./images/news.png" alt="News"></div>
<div class="itemTitle">News</div>
<img class="popupItemImg" src="./images/news.png" alt="Icon of news">
<span class="itemTitle">News</span>
</a>
</li>
<li>
<a href="#" class="columnItem">
<div><img src="./images/maps.png" alt="Maps"></div>
<div class="itemTitle">Map</div>
<img class="popupItemImg" src="./images/maps.png" alt="Icon of map">
<span class="itemTitle">Map</span>
</a>
</li>
<li>
<a href="#" class="columnItem">
<div><img src="./images/files.png" alt="Files"></div>
<div class="itemTitle">Files</div>
<img class="popupItemImg" src="./images/files.png" alt="Icon of yellow file">
<span class="itemTitle">Files</span>
</a>
</li>
<li>
<a href="#" class="columnItem">
<div><img src="./images/contacts.png" alt="Contacts"></div>
<div class="itemTitle">Contacts</div>
<img class="popupItemImg" src="./images/contacts.png" alt="Icon of green contact">
<span class="itemTitle">Contacts</span>
</a>
</li>
<li>
<a href="#" class="columnItem">
<div><img src="./images/tanslation.png" alt="Translation"></div>
<div class="itemTitle">Translation</div>
<img class="popupItemImg" src="./images/tanslation.png" alt="Icon of translation">
<span class="itemTitle">Translation</span>
</a>
</li>
<li>
<a href="#" class="columnItem">
<div><img src="./images/videos.png" alt="Videos"></div>
<div class="itemTitle">Videos</div>
<img class="popupItemImg" src="./images/videos.png" alt="Icon of white play button on red background">
<span class="itemTitle">Videos</span>
</a>
</li>
<li>
<a href="#" class="columnItem">
<div><img src="./images/search.png"alt="Search"></div>
<div class="itemTitle">Search</div>
<img class="popupItemImg" src="./images/search.png" alt="Icon of search input">
<span class="itemTitle">Search</span>
</a>
</div>
</li>
</ul>

<input class="visibilityFlag" type="checkbox" id="loadMore">
<label class="loadMore" for="loadMore">
More
</label>
<input class="visibilityFlag" type="checkbox" id="loadMore">
<label class="loadMore" for="loadMore">
More
</label>

<div class="hiddenItems">
<ul class="itemList hiddenItems">
<li>
<a href="#" class="columnItem">
<div><img src="./images/photos.png" alt="Photo"></div>
<div class="itemTitle">Photo</div>
</a>
<img class="popupItemImg" src="./images/photos.png" alt="Icon of photo">
<span class="itemTitle">Photo</span>
</a>
</li>
<li>
<a href="#" class="columnItem">
<div><img src="./images/apps.png" alt="Apps"></div>
<div class="itemTitle">Apps</div>
<img class="popupItemImg" src="./images/apps.png" alt="Icon of circle">
<span class="itemTitle">Apps</span>
</a>
</li>
<li>
<a href="#" class="columnItem">
<div><img src="./images/documents.png" alt="Documents"></div>
<div class="itemTitle">Documents</div>
<img class="popupItemImg" src="./images/documents.png" alt="Icon of document">
<span class="itemTitle">Documents</span>
</a>
</li>
<li>
<a href="#" class="columnItem">
<div><img src="./images/chat.png" alt="Chat"></div>
<div class="itemTitle">Chat</div>
<img class="popupItemImg" src="./images/chat.png" alt="Icon of double chats">
<span class="itemTitle">Chat</span>
</a>
</li>
<li>
<a href="#" class="columnItem">
<div><img src="./images/classroom.png" alt="Classroom"></div>
<div class="itemTitle">Classroom</div>
<img class="popupItemImg" src="./images/classroom.png" alt="Icon of green board">
<span class="itemTitle">Classroom</span>
</a>
</li>
<li>
<a href="#" class="columnItem">
<img class="popupItemImg" src="./images/collection.png" alt="Icon of white asterisk on blueberry color background">
<span class="itemTitle">Collection</span>
</a>
</li>
<li>
<a href="#" class="columnItem">
<div><img src="./images/collection.png" alt="Collection"></div>
<div class="itemTitle">Collection</div>
</a>
<a href="#" class="columnItem">
<div><img src="./images/mars.png" alt="Mars"></div>
<div class="itemTitle">Mars</div>
</a>
<img class="popupItemImg" src="./images/mars.png" alt="Icon of the cherry color circle">
<span class="itemTitle">Mars</span>
</a>
</li>
<li>
<a href="#" class="columnItem">
<div><img src="./images/blogs.png" alt="Blogs"></div>
<div class="itemTitle">Blogs</div>
<img class="popupItemImg" src="./images/blogs.png" alt="Icon of blog">
<span class="itemTitle">Blogs</span>
</a>
</li>
<li>
<a href="#" class="columnItem">
<div><img src="./images/promo.png" alt="Promos"></div>
<div class="itemTitle">Promos</div>
<img class="popupItemImg" src="./images/promo.png" alt="Icon of yellow rupor on blue background">
<span class="itemTitle">Promos</span>
</a>
</div>
<div class="evenMoreWrapper">
<a class="evenMoreLink" href="https://github.com/kottans">Even more from Kottans</a>
</div>
</li>
</ul>
<div class="evenMoreWrapper">
<a class="evenMoreLink" href="https://github.com/kottans">Even more from Kottans</a>
</div>
</div>
</div>
</div>
<div class="navItem icon">
<a class="navLink" href="#">
<img src="./images/bell.png" alt="bell">
</li>
<li class="navItem icon">
<a href="#">
<img class="navImg" src="./images/bell.png" alt="Grey bell icon">
</a>
</div>
<div class="navItem profile">
</li>
<li class="navItem profile">
<a class="navLink" href="#">
<img src="./images/profileImg_1.png" alt="Profile image">
<img class="profileImg" src="./images/profileImg_1.png" alt="Profile image">
</a>
</div>
</nav>
</li>
</ul>
</div>


</body>

</html>
Loading

0 comments on commit 98d6344

Please sign in to comment.