Skip to content

Commit

Permalink
Add corect files to docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@SviatoslavTaranenko
SviatoslavTaranenko committed Dec 24, 2023
1 parent 60293c4 commit 7342d95
Show file tree
Hide file tree
Showing 11 changed files with 767 additions and 120 deletions.
5 changes: 2 additions & 3 deletions docs/SviatoslavTaranenko/Games.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
</header>
<div class="games__filter">
<form class="datalist__games_filter">
<select id="game_properties">
<select disabled id="game_properties">
<option value="Genre">Genre</option>
<option value="Sport">Sport</option>
<option value="Shooter">Shooter</option>
Expand Down Expand Up @@ -63,7 +63,7 @@

<input disabled type="text" id="search" class="search__input" placeholder="Search">

<button id="apply" type="submit">Apply</button>
<button disabled id="apply" type="submit">Apply</button>
</form>
</div>
<section class="Games">
Expand Down Expand Up @@ -157,6 +157,5 @@ <h2 class="Games__cards_top_text_title" data-type="Games__cards_top_text_title"
}
}
</script>
<script src="scripts/Games.js"></script>
</body>
</html>
29 changes: 28 additions & 1 deletion docs/SviatoslavTaranenko/Login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="Styles/Login.css">

<title>Games Project - Login</title>
</head>
<body>
Expand Down Expand Up @@ -38,10 +37,12 @@ <h2>Login page</h2>
<label class="Login__table_email_title">Email</label>
<input id="email-input-id" class="Login__table_email_input" type="email" placeholder="Enter your email address">
</div>
<div class="errors-container" id="errors-email"></div>
<div class="Login__table_password">
<label class="Login__table_password_title">Password</label>
<input id="password-input-id" class="Login__table_password_input" type="password" placeholder="Enter your password">
</div>
<div class="errors-container" id="errors-password"></div>
<div class="Login__table_verif">
<input class="Login__table_verif_input" id="not-a-robot-checkbox-id" type="checkbox">
<label class="Login__table_verif_text" for="not-a-robot-checkbox-id">I’m not a robot</label>
Expand All @@ -53,6 +54,32 @@ <h2>Login page</h2>
</form>
</div>
</section>
<footer class="footer">
<div class="footer__icons">
<div class="footer__icons_row">
<a href="https://www.facebook.com/sviatoslav.taranenko" target="_blank">
<div class="footer__icons_all">
<img src="img/facebook.png" alt="Logo">
</div>
</a>
<a href="https://www.linkedin.com/in/%D1%81%D0%B2%D1%8F%D1%82%D0%BE%D1%81%D0%BB%D0%B0%D0%B2-%D1%82%D0%B0%D1%80%D0%B0%D0%BD%D0%B5%D0%BD%D0%BA%D0%BE-6bb602273/" target="_blank">
<div class="footer__icons_all">
<img src="img/LinkedIn.png" alt="Logo">
</div>
</a>
<a href="https://www.instagram.com/sviat_taranenko" target="_blank">
<div class="footer__icons_all">
<img src="img/Instagram.png" alt="Logo">
</div>
</a>
</div>
</div>
<div class="footer__text">
<p>Made with 💗 on course
<a class="about__text_link" href="https://www.mastersacademy.education/frontend-for-beginners-it" target="_blank">'Frontend for beginners' from Masters Academy in 2023,</a> by Sviatoslav Taranenko
</p>
</div>
</footer>
<script src="scripts/script.js"></script>
</body>
</html>
180 changes: 174 additions & 6 deletions docs/SviatoslavTaranenko/Styles/Games.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,40 @@ body {
margin-left: 61px;
}

@media (max-width: 670px) {

.header__all {
display: flex;
flex-direction: column;
}

.header__img {
padding: 15px 0;
display: block;
margin: 0 auto;
width: 55px;
height: 55px;
justify-content: center;
align-content: center;
}
}

.header__items {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
align-items: center;
}

@media (max-width: 670px) {

.header__items {
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 25px;
}
}

.header__items a {
text-decoration: none;
color: #FFF;
Expand Down Expand Up @@ -101,6 +129,17 @@ body {
text-decoration: underline;
}

@media (max-width: 430px) {

.header__items {
display: flex;
flex-direction: column;
margin: 0 auto;
padding-left: 35px;
padding-bottom: 15px;
}
}

.games__filter {
display: flex;
width: 100%;
Expand All @@ -110,6 +149,20 @@ body {
justify-content: space-around;
}

@media (max-width: 1120px) {

.games__filter {
padding: 10px 0;
display: flex;
flex-wrap: wrap;
width: 100%;
min-height: 60px;
background-color: #221F1F;
align-items: center;
gap: 25px;
}
}

.datalist__games_filter select {
min-width: 114px;
border: none;
Expand All @@ -128,11 +181,13 @@ body {
font-size: 14px;
font-style: normal;
font-weight: 400;
cursor: not-allowed;
}

.radio__filter {
display: flex;
gap: 12px;
max-width: 240px;
}

.radio__games_filter {
Expand All @@ -144,10 +199,11 @@ body {
z-index: -1;
opacity: 0;
gap: 20px;
cursor: not-allowed;
}

.radio__games_filter label {
cursor: pointer;
cursor: not-allowed;
font-family: "Roboto", sans-serif;
font-size: 14px;
font-style: normal;
Expand Down Expand Up @@ -221,13 +277,17 @@ body {
.checkbox__filter {
display: flex;
align-items: center;
gap: 90px
gap: 90px;
max-width: 80px;
padding-right: 100px;
cursor: not-allowed;
}

.checkbox__games_filter {
display: flex;
align-items: center;
gap: 12px;
cursor: not-allowed;
}

.checkbox__games_filter input {
Expand All @@ -238,10 +298,11 @@ body {
width: 20px;
height: 20px;
background-color: #FFF;
cursor: not-allowed;
}

.checkbox__games_filter label {
cursor: pointer;
cursor: not-allowed;
font-family: "Roboto", sans-serif;
font-size: 14px;
font-style: normal;
Expand Down Expand Up @@ -273,6 +334,15 @@ body {
background-position: left 5px center;
background-size: 24px 24px;
background-repeat: no-repeat;
cursor: not-allowed;

@media (max-width: 400px) {
max-width: 250px;
}

@media (max-width: 280px) {
max-width: 180px;
}
}

.search__bar input {
Expand All @@ -285,6 +355,7 @@ body {
font-size: 14px;
font-style: normal;
font-weight: 400;
cursor: not-allowed;
}

.search__bar button {
Expand All @@ -302,6 +373,7 @@ body {
font-style: normal;
font-weight: 400;
color: #FFF;
cursor: not-allowed;
}

.search__bar button:active {
Expand All @@ -316,17 +388,112 @@ body {
line-height: 32px;
}

@media (max-width: 940px) {

.Games .Games__title {
margin: 60px 0 0 85px;
font-family: "Roboto", sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 32px;
}
}

@media (max-width: 670px) {

.Games .Games__title {
display: flex;
align-content: center;
font-family: "Roboto", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 32px;
}
}

@media (max-width: 340px) {

.Games .Games__title {
margin: 40px 0 20px 55px;
display: flex;
align-content: center;
font-family: "Roboto", sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 24px;
}
}

.card__container {
margin-top: 60px;
display: grid;
grid-template-columns: 275px 275px 275px 275px;
column-gap: 25px;
grid-template-rows: 260px;
row-gap: 60px;
row-gap: 100px;
justify-content: center;
min-height: auto;
}

@media (max-width: 1250px) {

.card__container {
margin-top: 60px;
display: grid;
grid-template-columns: 275px 275px 275px;
column-gap: 25px;
grid-template-rows: 260px;
row-gap: 100px;
justify-content: center;
min-height: auto;
}
}

@media (max-width: 970px) {

.card__container {
margin: 60px 60px 0 0;
display: grid;
grid-template-columns: 275px 275px;
column-gap: 25px;
grid-template-rows: 260px;
row-gap: 100px;
align-content: center;
justify-content: center;
min-height: auto;
}
}

@media (max-width: 670px) {

.card__container {
margin: 60px 60px 0 0;
display: grid;
grid-template-columns: 275px;
column-gap: 25px;
grid-template-rows: 260px;
row-gap: 100px;
align-content: center;
justify-content: center;
min-height: auto;
}
}

@media (max-width: 340px) {

.card__container {
margin: 0 60px 0 0;
display: grid;
grid-template-columns: 250px;
column-gap: 25px;
grid-template-rows: 260px;
row-gap: 100px;
align-content: center;
justify-content: center;
min-height: auto;
}
}

.Games__cards {
margin-top: 60px;
display: grid;
Expand All @@ -343,7 +510,7 @@ body {
border-radius: 12px;
padding: 12px 12px 22px;
background-color: #ECECEC;
height: 260px;
height: 280px;
}

.Games__cards_top {
Expand Down Expand Up @@ -437,6 +604,8 @@ body {
display: flex;
margin-top: 10px;
justify-content: center;
align-content: center;
text-align: center;
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 22px;
Expand All @@ -452,4 +621,3 @@ body {
.about__text_link:hover {
color: #EF4934;
}

Loading

0 comments on commit 7342d95

Please sign in to comment.