Skip to content

Commit

Permalink
add html and cs
Browse files Browse the repository at this point in the history
  • Loading branch information
@dydunec-serhii
dydunec-serhii committed Mar 31, 2024
1 parent 9dde7d8 commit eb29b94
Show file tree
Hide file tree
Showing 6 changed files with 173 additions and 60 deletions.
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
Binary file added 1jpg.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 2jpg.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 3jpg.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
139 changes: 79 additions & 60 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,67 +4,86 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TRAINS OF UKRAIN</title>
<title>golden</title>
<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=Bilbo+Swash+Caps&display=swap" rel="stylesheet">
<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=Montserrat:ital,wght@0,700;1,700&display=swap"
rel="stylesheet">
<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=Bilbo+Swash+Caps&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.typekit.net/eic2tcr.css">
<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=Montserrat:ital,wght@0,700;1,700&display=swap"
rel="stylesheet">
<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+Slab&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.typekit.net/eic2tcr.css">
<link rel="stylesheet" href="style.css">
</head>

<body>
<table>
<caption>table of trains</caption>
<thead>
<tr>
<th rowspan="2">number of train</th>
<th>Route</th>
<th>travel time</th>
</tr>
</thead>
<tbody>
<tr>
<td>481</td>
<td>Lviv-Kyiv</td>
<td>18:30</td>
<tr>
<tr>
<td>139</td>
<td>Mukolaiv-Strui</td>
<td>15:30</td>
</tr>
<tr>
<td>91</td>
<td>Odesa-Mariupol</td>
<td>19:00</td>
</tr>
<tr>
<td>123</td>
<td>Starui Sambir-Kropuvnuchuy</td>
<td>23:00</td>
</tr>
<tr>
<td>49</td>
<td>Lviv-Kyiv</td>
<td>0:30</td>
</tr>
</tbody>
</table>
<form>
<label for="user-name">Name</label>
<input type="text" id="user-name" name="Name" autofocus placeholder="серхіо">
<br>
<label for="last-name">Last Name</label>
<input type="text" id="last-name" name="Last Name" placeholder="рамос">
<br>
<p>Do you want buy my project ?</p>
<label for="radio">yes</label>
<input type="radio" id="radio" value="yes" name="yes">
<label for="radio">no</label>
<input type="radio" id="radio" value="no" name="yes">
<br>
<label for="user-email">User Email</label>
<input type="email" id="last-name" name="last-name" placeholder="[email protected]">
<br>
<label for="password">password</label>
<input type="password" id="user-email" name="Email" minlength="5" maxlength="10">
<br>
<button>sumbit</button>
</form>
<table>
<header>
<a href="index.html" class="header-name">Golden</a>
<ul class="header-list">
<li class="header-item"><a href="#" class="header-link">HOME</a></li>
<li class="header-item"><a href="#" class="header-link">SERVICES</a></li>
<li class="header-item"><a href="#" class="header-link">PORTFOLIO</a></li>
<li class="header-item"><a href="#" class="header-link">ABOUT</a></li>
<li class="header-item"><a href="#" class="header-link">CONTACT</a></li>
</ul>
</header>
<main>
<h2 class="main-information">Services</h2>
<p class="main-description">Proin iaculis purus consequat sem cure. </p>
<ul class="services-list">
<li class="services-item"><img src="1jpg.png" alt="box" class="services-img">
<h3 class="services-title">E-Commerce</h3>
<p class="services-description">Proin iaculis purus consequat sem cure 
digni ssim. Donec porttitora
entum suscipit 
aenean rhoncus
posuere odio in tincidunt.</p>
</li>
<li class="services-item"><img src="2jpg.png" alt="computer" class="services-img">
<h3 class="services-title">Responsive Web</h3>
<p class="services-description">Proin iaculis purus consequat sem cure 
digni ssim. Donec porttitora
entum suscipit 
aenean
rhoncus
posuere odio in tincidunt.</p>
</li>
<li class="services-item"><img src="3jpg.png" alt="castel" class="services-img">
<h3 class="services-title">Web Security</h3>
<p class="services-description">Proin iaculis purus consequat sem cure 
digni ssim. Donec porttitora
entum suscipit 
aenean
rhoncus
posuere odio in tincidunt.</p>
</li>
</ul>
</main>
<footer class="footer-color">
<section>
<form>
<h2 class="services-titlea">Contact us</h2>
<p class="section-information">Proin iaculis purus consequat sem cure.</p>
<label for="user-name">name</label>
<input type="text" id="user-name" name="user name" placeholder="сергій">
<br>
<label for="gmail">gmail</label>
<input type="text" id="gmail" name="gmail" placeholder="[email protected]">
<br>
<label for="subject">subject</label>
<input type="text" id="subject" name="subject" placeholder="subject">
<br>
<button type="submit" class="services-title servisec-color">SEND MESSAGE</button>
</form>

</section>
</footer>

</body>

</html>
91 changes: 91 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
:root {
--main-color: #FED136;
--header-color: #222222;
--subtitel-color: #777777;
--footer-color: #FFFFFF;
--button-color: #BBBBBB;
}

.header-link {
font-family: "Montserrat";
font-weight: 400;
font-style: normal;
color: var(--main-color);
text-decoration: none;
font-size: 14px;
line-height: 41px;
letter-spacing: 0px;
text-transform: uppercase;

}

.header-item {}

.header-list {
list-style: none;
}

.services-item {
list-style: none;
}

.main-information {
font-weight: 700;
font-style: normal;
color: var(--header-color);
}

.header-name {
font-family: "Bilbo Swash Caps";
font-weight: 400;
font-style: normal;
color: var(--main-color);
text-decoration: none;
}

.services-title {
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
color: var(--header-color)
}

.main-description {
font-family: "Roboto Slab", serif;
font-weight: 400;
font-style: normal
color: var(--subtitel-color)
}

.services-description {
font-family: "Roboto Slab", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
color: var(--subtitel-color);
}

.section-information {
font-family: "droid-serif", serif;
font-weight: 400;
font-style: normal;
color: var(--subtitel-color);
}

::placeholder {
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
color: var(--button-color);
}
.services-titlea{
color: var(--footer-color);
}
.servisec-color{
color:var(--footer-color);
}
.footer-color{
background-color: #222222;
}

0 comments on commit eb29b94

Please sign in to comment.