Skip to content

Created HTML CSS Popup #368

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

Closed
SinchUK wants to merge 3 commits into from
Closed

Created HTML CSS Popup #368

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
d8b2356
Created HTML CSS Popup
SinchUK Aug 31, 2022
9e718fd
Fixed mistake element and added scrollbar in popup
SinchUK Sep 2, 2022
106e0fd
Fixed media size popup and refactor css rules
SinchUK Sep 2, 2022
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
204 changes: 204 additions & 0 deletions submissions/sinchUK/HTML-CSS-Popup/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles.css">
<title>Popup</title>
</head>
<body>
<header class="menu">
<nav>
<ul class="menu-items">
<li class="menu-item">
<a href="#">
Mail
</a>
</li>
<li class="menu-item">
<a href="#">
Images
</a>
</li>
<li class="menu-item">
<div class="menu-item__inner">
<input class="menu-item__input" type="checkbox"/>
<img class="menu-item-img" src="./icons/popup-button.png" alt="submenu-icon"/>

@A-Ostrovnyy A-Ostrovnyy Sep 15, 2022

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add cursor: pointer to all interactive elements.

@SinchUK SinchUK Oct 20, 2022

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2022-10-20 134916
I delete the inner text in "alt" attribute from icons. Thank you for good article.

<div class="tooltip">
<div class="tooltip-items">

@A-Ostrovnyy A-Ostrovnyy Sep 15, 2022

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you have a nested navigation use a nested list of links:

    <nav>
        <ul>
            <li><a href="#">Link-1</a></li>
            <li><a href="#">Link-2</a></li>
            <li><a href="#">Link-3</a></li>
            <li><ul>
                <li><a href="#"></a>Link-1</li>
                <li><a href="#"></a>Link-2</li>
                <li><a href="#"></a>Link-3</li>
                <li><a href="#"></a>Link-4</li>
            </ul></li>
            <li><a href="#">Link-5</a></li>
        </ul>
    </nav>

@SinchUK SinchUK Oct 20, 2022

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I changed code and used unordered list tag.
Screenshot 2022-10-20 133703

<div class="tooltip-item">
<a href="#">
<div class="tooltip-item-icon">
<img src="./icons/calendar.png" width="45" height="45" alt="Calendar"/>

@A-Ostrovnyy A-Ostrovnyy Sep 15, 2022

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔥

@SinchUK SinchUK Oct 20, 2022

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks

</div>
<span>Calendar</span>
</a>
</div>
<div class="tooltip-item">
<a href="#">
<div class="tooltip-item-icon">
<img src="./icons/mail.png" width="45" height="45" alt="Mail"/>

@A-Ostrovnyy A-Ostrovnyy Sep 15, 2022

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Read this article about handling image aspect ratio.
The highlighted element should be a circle.
image

@SinchUK SinchUK Oct 20, 2022

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Resolved with "object-fit: contain".

</div>
<span>Mail</span>
</a>
</div>
<div class="tooltip-item">
<a href="#">
<div class="tooltip-item-icon">
<img src="./icons/news.png" width="45" height="45" alt="News"/>
</div>
<span>News</span>
</a>
</div>
<div class="tooltip-item">
<a href="#">
<div class="tooltip-item-icon">
<img src="./icons/maps.png" width="45" height="45" alt="Map"/>
</div>
<span>Map</span>
</a>
</div>
<div class="tooltip-item">
<a href="#">
<div class="tooltip-item-icon">
<img src="./icons/files.png" width="45" height="45" alt="Files"/>
Comment thread
SinchUK marked this conversation as resolved.
</div>
<span>Files</span>
</a>
</div>
<div class="tooltip-item">
<a href="#">
<div class="tooltip-item-icon">
<img src="./icons/contacts.png" width="45" height="45" alt="Contacts"/>
</div>
<span>Contacts</span>
</a>
</div>
<div class="tooltip-item">
<a href="#">
<div class="tooltip-item-icon">
<img src="./icons/tanslation.png" width="45" height="45" alt="Translate"/>
</div>
<span>Translate</span>
</a>
</div>
<div class="tooltip-item">
<a href="#">
<div class="tooltip-item-icon">
<img src="./icons/videos.png" width="45" height="45" alt="Videos"/>
</div>
<span>Videos</span>
</a>
</div>
<div class="tooltip-item">
<a href="#">
<div class="tooltip-item-icon">
<img src="./icons/search.png" width="45" height="45" alt="Search"/>
</div>
<span>Search</span>
</a>
</div>
<div class="tooltip-item">
<a href="#">
<div class="tooltip-item-icon">
<img src="./icons/photos.png" width="45" height="45" alt="Photo"/>
</div>
<span>Photo</span>
</a>
</div>
<div class="tooltip-item">
<a href="#">
<div class="tooltip-item-icon">
<img src="./icons/apps.png" width="45" height="45" alt="Apps"/>
</div>
<span>Apps</span>
</a>
</div>
<div class="tooltip-item">
<a href="#">
<div class="tooltip-item-icon">
<img src="./icons/documents.png" width="45" height="45" alt="Document"/>
</div>
<span>Document</span>
</a>
</div>
</div>

<input class="tooltip-more__input" id="more-input" type="checkbox"/>
<label class="tooltip-more-btn" for="more-input">More</label>
<div class="tooltip-more-box">
<diV class="tooltip-more">
<div class="tooltip-item">
<a href="#">
<div class="tooltip-item-icon">
<img src="./icons/chat.png" width="45" height="45" alt="Chat"/>
</div>
<span>Chat</span>
</a>
</div>
<div class="tooltip-item">
<a href="#">
<div class="tooltip-item-icon">
<img src="./icons/classroom.png" width="45" height="45" alt="Classroom"/>
</div>
<span>Classroom</span>
</a>
</div>
<div class="tooltip-item">
<a href="#">
<div class="tooltip-item-icon">
<img src="./icons/collection.png" width="45" height="45" alt="Collection"/>
</div>
<span>Collection</span>
</a>
</div>
<div class="tooltip-item">
<a href="#">
<div class="tooltip-item-icon">
<img src="./icons/mars.png" width="45" height="45" alt="Mars"/>
</div>
<span>Mars</span>
</a>
</div>
<div class="tooltip-item">
<a href="#">
<div class="tooltip-item-icon">
<img src="./icons/blogs.png" width="45" height="45" alt="Blogs"/>
</div>
<span>Blogs</span>
</a>
</div>
<div class="tooltip-item">
<a href="#">
<div class="tooltip-item-icon">
<img src="./icons/promo.png" width="45" height="45" alt="Promos"/>
</div>
<span>Promos</span>
</a>
</div>
</diV>
</div>
<input class="tooltip-more__input hidden" id="even-more-input" type="checkbox"/>
<label class="tooltip-more-btn hidden more-btn" for="even-more-input">Even more from Kottans</label>

@A-Ostrovnyy A-Ostrovnyy Sep 15, 2022

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Logically it's a link)

@SinchUK SinchUK Oct 20, 2022

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes).
Screenshot 2022-10-20 141135

</div>
</div>
</li>
<li class="menu-item">
<a href="#">
<img class="menu-item-img" src="./icons/bell.png" alt="notification-icon"/>
</a>
</li>
<li class="menu-item">
<a href="#">
<img class="menu-item-img" src="./icons/sinchUK.png" alt="avatar-icon"/>
</a>
</li>
</ul>
</nav>
</header>
</body>
</html>
Loading