Skip to content

Commit

Permalink
Merge pull request #205 from MastersAcademy/3-forms_dmytro-shevchenko1
Browse files Browse the repository at this point in the history
3-forms Dmytro Shevchenko. Added Login Page and filter.
  • Loading branch information
anna-vrana-moc authored Oct 30, 2023
2 parents dfad82a + 9d0c12d commit a1eea93
Show file tree
Hide file tree
Showing 11 changed files with 305 additions and 55 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,60 @@
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>Cards</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="styles/style.css">
<link rel="stylesheet" type="text/css" href="styles/header.css">
<link rel="stylesheet" type="text/css" href="styles/cards.css">
</head>

<body>
<header>
<body class="game-page">
<header class="header">
<img src="images/logo.svg" alt="Logo">
<div class="nav">
<ul class="nav-items">
<li>
<a class="cards-link" href="cards.html" title="Cards">Games</a>
<a class="cards-link" href="cards.html">Games</a>
</li>
<li>
<a class="about-link" href="index.html" title="About">About</a>
<a class="about-link" href="index.html">About</a>
</li>
<li>
<a class="login-link" href="login.html">Login</a>
</li>
</ul>
</div>
</header>
<main>
<section class="filter">
<form class="filter-form">
<div class="filter-select">
<label for="Name"></label>
<select id="Name" name="select" class="select-name">
<option value="Genre" disabled selected>Genre</option>
<option value="Race>">Race</option>
<option value="Action">Action</option>
<option value="OpenWorld">Open World</option>
</select>
</div>
<div class="filter-radio">
<input type="radio" id="Platform" name="Radio">
<label for="Platform">Platform</label>
<input type="radio" id="Online" name="Radio">
<label for="Online">Online Games</label>
</div>
<div class="filter-boxes">
<input type="checkbox" id="New" name="New" value="New" class="filter-checkbox">
<label for="New">New</label>
<input type="checkbox" id="Old" name="Old" value="Old" class="filter-checkbox">
<label for="Old">Old</label>
</div>
<div class="filter-search">
<input type="text" id="Search" name="Search" placeholder="Search" class="search-input">
<label for="Search"></label>
<input type="submit" value="Apply" class="search-button">
</div>
</form>
</section>

<h1 class="cards-h1">
Study project "Games"
</h1>
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,24 @@
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>GamesProject</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="styles/style.css">
<link rel="stylesheet" type="text/css" href="styles/header.css">
<link rel="stylesheet" type="text/css" href="styles/about.css">
</head>

<body>
<header>
<body class="about-page">
<header class="header">
<img src="images/logo.svg" alt="Logo">
<div class="nav">
<ul class="nav-items">
<li>
<a href="cards.html">Games</a>
<a class="cards-link" href="cards.html">Games</a>
</li>
<li>
<a href="index.html">About</a>
<a class="about-link" href="index.html">About</a>
</li>
<li>
<a class="login-link" href="login.html">Login</a>
</li>
</ul>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!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>Login Page</title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
<link rel="stylesheet" type="text/css" href="styles/header.css">
<link rel="stylesheet" type="text/css" href="styles/login.css">
</head>
<body class="login-page">
<header class="header">
<img src="images/logo.svg" alt="Logo">
<div class="nav">
<ul class="nav-items">
<li>
<a class="cards-link" href="cards.html">Games</a>
</li>
<li>
<a class="about-link" href="index.html">About</a>
</li>
<li>
<a class="login-link" href="login.html">Login</a>
</li>
</ul>
</div>
</header>
<main class="login-main">
<h1 class="login-h1">
Login Page
</h1>
<form class="login-form" action="success-page.html">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Enter your email address" required>
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter your password" required>
<div class="checkbox-group">
<input type="checkbox" id="check" name="robot" class="login-checkbox" required>
<label for="check">I'm not a robot</label>
</div>
<input type="submit" value="Login" class="submit-button">
</form>
</main>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
.intro {
color: #221F1F;
font-size: 22px;
font-weight: 400;
line-height: 32px;
display: flex;
justify-content: space-between;
gap: 70px;
padding-left: 53px;
padding-right: 53px;
margin-top: 60px;
}

.about-h1 {
color: #221F1F;
font-size: 48px;
font-weight: 700;
line-height: 32px;
margin-top: 0;
}

.link {
color: #EF4934;
}
Original file line number Diff line number Diff line change
@@ -1,70 +1,58 @@
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

body {
font-family: Roboto, sans-serif;
margin: 0;
.filter {
background-color: #221F1F;
padding: 12px 53px;
font-size: 14px;
font-weight: 400;
color: #FFF;
}

header {
max-width: 100%;
background-color: #EF4934;
margin-bottom: 50px;
.filter-form {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 53px;
}

.nav-items {
.filter-search {
display: flex;
gap: 50px;
list-style: none;
}

.nav-items a {
font-size: 16px;
font-weight: 500;
color: #FFF;
text-decoration: none;
.search-input {
margin-right: 0;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
padding: 12px 100px 12px 45px;
background-image: url("../images/search_logo.svg");
background-repeat: no-repeat;
background-position: 10px 9px;
border: #FFF;
}

/*.nav-items a:visited {
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-thickness: 0.01em;
}*/

.intro {
color: #221F1F;
font-size: 22px;
font-weight: 400;
line-height: 32px;
display: flex;
justify-content: space-between;
gap: 70px;
padding-left: 53px;
padding-right: 53px;
.search-button {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
margin-left: 0;
color: #FFF;
background-color: #EF4934;
border: none;
padding-left: 20px;
padding-right: 20px;
}

.about-h1 {
color: #221F1F;
font-size: 48px;
font-weight: 700;
line-height: 32px;
margin-top: 0;
.select-name {
border-radius: 6px;
padding: 13px;
background-color: #333;
color: #FFF;
}

.cards-h1 {
color: #221F1F;
font-size: 48px;
font-weight: 700;
line-height: 32px;
margin-top: 40px;
margin-left: 53px;
margin-bottom: 50px;
}

.link {
color: #EF4934;
margin-bottom: 40px;
}

.cards {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
.header {
max-width: 100%;
background-color: #EF4934;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 53px;
}

.nav-items {
display: flex;
gap: 50px;
list-style: none;
}

.nav-items a {
font-size: 16px;
font-weight: 500;
color: #FFF;
text-decoration: none;
}

.game-page .nav-items .cards-link {
text-decoration: underline;
text-underline-offset: 7px;
text-decoration-thickness: 1px;
}

.about-page .nav-items .about-link {
text-decoration: underline;
text-underline-offset: 7px;
text-decoration-thickness: 1px;
}

.login-page .nav-items .login-link {
text-decoration: underline;
text-underline-offset: 7px;
text-decoration-thickness: 1px;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
.login-h1 {
font-size: 48px;
font-weight: 700;
margin-top: 80px;
margin-bottom: 60px;
}

.login-main {
display: flex;
flex-direction: column;
align-items: center;
}

.checkbox-group {
display: flex;
justify-content: flex-start;
font-size: 14px;
gap: 12px;
}

label[for="email"],
label[for="password"],
label[for="checkbox"] {
display: flex;
font-size: 22px;
font-weight: 600;
margin-bottom: 22px;
}

input[type="email"],
input[type="password"],
.login-checkbox {
padding: 30px 450px 30px 20px ;
margin-bottom: 40px;
font-size: 14px;
border: .006rem solid #A9A9A9;
border-radius: 6px;
}

input[type="email"]:focus,
input[type="password"]:focus {
border-bottom: 5px solid #EF4934;
}

.submit-button {
display: block;
min-width: 100%;
padding: 27px;
font-size: 22px;
font-weight: 600;
color: #FFF;
background-color: #EF4934;
border: none;
border-radius: 6px;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

body {
font-family: Roboto, sans-serif;
margin: 0;
}
Loading

0 comments on commit a1eea93

Please sign in to comment.