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

The 5 #333

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

The 5 #333

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b010e7f
The 5
olehmaksymych Aug 28, 2022
22a3245
The changes in the code are applied.
olehmaksymych Aug 28, 2022
3f0394e
I cHANGED THE CODE SUCCESSFULLY
olehmaksymych Aug 31, 2022
cbc643b
The one more time
olehmaksymych Aug 31, 2022
4922db7
The last one change for sure.
olehmaksymych Aug 31, 2022
0db5275
Merge branch 'kottans:main' into html_popup
olehmaksymych Sep 2, 2022
4c18db9
the last зміни
olehmaksymych Sep 2, 2022
5d16a2d
Rename the folder correctly
olehmaksymych Sep 2, 2022
c15838f
Merge branch 'main' of github.com:olehmaksymych/frontend-2022-homewor…
olehmaksymych Sep 2, 2022
4d05eba
cMerge branch 'html_popup' of github.com:olehmaksymych/frontend-2022-…
olehmaksymych 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
126 changes: 126 additions & 0 deletions submissions/olehmaksymych/html_popup/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Popup</title>
<link rel="stylesheet" href="styl.css" />
<link rel="stylesheet" href="styll.css" />
</head>
<body>
<header class="header">

<div class="header_checkbox">
Copy link
Contributor

Choose a reason for hiding this comment

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

nav should start here and wrap menu icon too, also it is a list element li

<div class="header_item">
<input type="checkbox" id="popup_box" class="icon_for_thecheckbox" />
<label for="popup_box" class="popup_label">
<img src="icons/popup-icons/popup-button.png" alt="popup-icon" id="popup_icon"/>
Copy link
Contributor

Choose a reason for hiding this comment

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

For icons it's better set an empty alt attribute, read more here

</label>
<div class="menu_container" id="popup_container">
<ul class="menu_container_items">
<li class="container_item">
<a href="#" class="hover_item">
<img src="icons/popup-icons/mail.png" class="image_item" alt="Mail"/>
<h3 class="text_item">Mail</h3></a>
</li>
<li class="container_item">
<a href="#" class="hover_item">
<img src="icons/popup-icons/classroom.png" class="image_item" alt="Classroom"/>
<h3 class="text_item">Classroom</h3></a>
</li>
<li class="container_item">
<a href="#" class="hover_item">
<img src="icons/popup-icons/mars.png" class="image_item" alt="Mars"/>
<h3 class="text_item">Mars</h3></a>
</li>
<li class="container_item">
<a href="#" class="hover_item">
<img src="icons/popup-icons/videos.png" class="image_item" alt="Videos"/>
<h3 class="text_item">Videos</h3></a>
</li>
<li class="container_item">
<a href="#" class="hover_item" class="hover_item">
<img src="icons/popup-icons/files.png" class="image_item" alt="Files"/>
<h3 class="text_item">Files</h3></a>
</li>
<li class="container_item">
<a href="#" class="hover_item">
<img src="icons/popup-icons/news.png" class="image_item" alt="News"/>
<h3 class="text_item">News</h3></a>
</li>
<li class="container_item">
<a href="#" class="hover_item">
<img src="icons/popup-icons/settings.png" class="image_item" alt="Settings"/>
<h3 class="text_item">Settings</h3></a>
</li>
<li class="container_item">
<a href="#" class="hover_item">
<img src="icons/popup-icons/contacts.png" class="image_item" alt="Contacts"/>
<h3 class="text_item">Contact</h3></a>
</li>
<li class="container_item">
<a href="#" class="hover_item">
<img src="icons/popup-icons/blogs.png" class="image_item" alt="Blogs"/>
<h3 class="text_item">Blogs</h3></a>
</li>
<!-- THE MORE ITEM -->

<input type="checkbox" id="popup_box_more" class="icon_for_thecheckbox_more"/>
<label for="popup_box_more" class="popup_label_moreBtn">
<img src="icons/popup-icons/more.png" alt="popup-icon2" id="popup_icon2"/>
</label>
<div class="menu_container_more" id="popup_container_more">
<ul class="menu_container_items_more">
<li class="container_item">
<a href="#" class="hover_item">
<img src="icons/popup-icons/documents.png" class="image_item" alt="Documents"/>
<h3 class="text_item">Documents</h3></a>
</li>
<li class="container_item">
<a href="#" class="hover_item" class="hover_item">
<img src="icons/popup-icons/chat.png" class="image_item" alt="Chat"/>
<h3 class="text_item">Chat</h3></a>
</li>
<li class="container_item">
<a href="#" class="hover_item">
<img src="icons/popup-icons/promo.png" class="image_item" alt="Promo"/>
<h3 class="text_item">Promo</h3></a>
</li>
<li class="container_item">
<a href="#" class="hover_item">
<img src="icons/popup-icons/maps.png" class="image_item" alt="Maps"/>
<h3 class="text_item">Maps</h3></a>
</li>
<li class="container_item">
<a href="#" class="hover_item">
<img src="icons/popup-icons/tanslation.png" class="image_item" alt="Translation"/>
<h3 class="text_item">Translate</h3></a>
</li>
<li class="container_item">
<a href="#" class="hover_item">
<img src="icons/popup-icons/calendar.png" class="image_item" alt="Calendar"/>
<h3 class="text_item">Calendar</h3></a>
</li>
</ul>
</div>
</ul>
</div>
</div>
</div>
<nav class="header_menu">
<a class="navbar" href="#"> Home </a>
<a class="navbar" href="#">Bgood</a>
<a class="navbar" href="#">RobinGood</a>
</nav>
Comment on lines +111 to +115
Copy link
Contributor

Choose a reason for hiding this comment

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

this should be a list ul>li>a

</header>
<main>
<h1 class="the_message">The Robin from Loxely is coming for you!))</h1>
<div id="myDIV">
<div>Hello Kottans!!</div>
</div>
</main>
<footer style="background-color: purple">olehmaksymych</footer>
</body>
</html>

182 changes: 182 additions & 0 deletions submissions/olehmaksymych/html_popup/styl.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@

:root {
--green: #27ae60;
--black: #192a56;
--light-color: #666;
--picture-size: 30px;
--border-radious: 3px;
}

* {
margin: 0; padding: 0;
box-sizing:border-box;
text-decoration: none;
outline: none;
border:none;
transition: all .2s linear;
}



.header_menu a.navbar.active,
.header_menu a.navbar:hover{
Comment on lines +21 to +22
Copy link
Contributor

Choose a reason for hiding this comment

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

Please, avoid styling by tags link, use classnames instead

color: rgb(255, 255, 255);
border-radius: var(--border-radious);
background: var(--green);
}

.navbar{
color:aqua;
margin-left: 5px ;
}

.image_item{
height: var(--picture-size);
width: var(--picture-size);
border-radius: var(--border-radious);
}

#popup_icon2{
width: var(--picture-size);
height: var(--picture-size);
margin-top: 1px;
margin-left: 40px;
margin-right: 35px;
border: 2px solid var(--black);
border-radius: 3px;
cursor: pointer;
}

body {
width:100%;
background-color: rgb(57, 58, 61);
}

header{
position: fixed;
top:0; left:0; right:0;
background: rgb(12, 11, 87);
padding: 1rem 7%;
display: flex;
align-items: center;
justify-content:flex-end;
z-index:1;
box-shadow: 0.5rem 1.5rem rgba(0,0,0,.1);
}

.header_item {
/* the style for the header list items */
Copy link
Contributor

Choose a reason for hiding this comment

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

Please, remove all unnecessary comments in this file

position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0.3rem 1.1rem;
}

.container_item {
width: 80px;
height:65px;
padding-top: 5px;
padding-bottom: 5px;
}

.hover_item{
color: #fff;
text-align: center;
font-size: 60%;
text-decoration: none;
outline: none;
}


li {
list-style: none; /*it will hide a toggle for the list item*/
}

.menu_container_items, /*the initial style for the popup containers (more and main) */
.menu_container_items_more {
display: none;
}


.icon_for_thecheckbox{
-webkit-appearance: none;
/* position: absolute;
overflow: hidden;
clip: rect(0 0 0 0); */
}


.icon_for_thecheckbox_more {
/* -webkit-appearance: none; */
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
}


/*The style of the popup btn itself*/
#popup_icon {
display: inline-block;
margin: 5px;
padding: 3px 3px;
border: 2px solid var(--black);
border-radius: 3px;
cursor: pointer;
}


/* Show hidden content when the checkbox is checked */
#popup_box:checked ~ * .menu_container_items {
position: absolute;
top: 50px;
left: -35px;
width: 350%;
height: 500%;
display: flex;
flex-flow: wrap;
justify-content: center;
gap: 5px;
background-color: darkgreen;
border: 2px solid var(--black);
border-radius: var(--border-radious);
align-items: center;
text-align: center;
overflow: scroll;
/* scrollbar-width: none; */
margin-bottom: 15px;
}

/* Style the button when the checkbox is checked */
#popup_box:checked ~ * #popup_icon {
background-color: orangered;
border: 2px solid aqua;
}

#popup_box_more:checked ~ * #popup_icon2{
display: none;
}

#popup_box_more:checked ~ * .menu_container_items_more {
position: relative;
display: flex;
flex-flow: wrap;
justify-content: center;
gap: 5px;
align-items: baseline;
justify-content: center;
text-align: center;
margin-bottom: 15px;
}




li.container_item:focus-within {
/* margin: 9px 5px; */
outline: 1.5px solid rgb(105, 97, 100);
border-radius: 3px;
background-color: rgb(54, 14, 197);
padding: 5px;
text-align: center;
}
45 changes: 45 additions & 0 deletions submissions/olehmaksymych/html_popup/styll.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
#myDIV {
olehmaksymych marked this conversation as resolved.
Show resolved Hide resolved
margin-top: 155px;
background-color: rgb(46, 103, 117);
width: 100%;
height: 500px;
}

#myDIV div {
width: 80px;
height: 80px;
background: rgb(34, 173, 6);
position: relative;
animation: mymove 7s infinite;
border: 2px solid #192a56;
border-radius: 3px;
}

@keyframes mymove {
from {
left: 0px;
}
to {
left: 60%;
}
}
@keyframes myothermove {
from {
top: 0px;
}
to {
top: 100px;
}
}
@keyframes mylastmove {
from {
background-color: rgb(0, 247, 255);
}
to {
background-color: rgb(231, 15, 33);
}
}

.the_message{
margin-top: 90px;
}