Skip to content

Commit

Permalink
add
Browse files Browse the repository at this point in the history
  • Loading branch information
@dydunec-serhii
dydunec-serhii committed Apr 27, 2024
1 parent eb29b94 commit 3bc9c43
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 45 deletions.
89 changes: 47 additions & 42 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
</head>

<body>
<header>
<header class="container">
<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>
Expand All @@ -38,50 +38,55 @@
<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>
<div class="container">
<h2 class="main-information main-text">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>
</div>
</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>
<div class="container">
<section >
<form class=" text-footer">
<h2 class="services-titlea">Contact us</h2>
<p class="section-information">Proin iaculis purus consequat sem cure.</p>
<label for="user-name"></label>
<input type="text" id="user-name" name="user-name" placeholder="сергій">
<br>
<label for="gmail"></label>
<input type="text" id="gmail" name="gmail" placeholder="[email protected]">
<br>
<label for="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>
</div>

</footer>

</body>
Expand Down
25 changes: 22 additions & 3 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@

.services-item {
list-style: none;
margin-bottom:117px;
}

.main-information {
Expand All @@ -41,6 +42,7 @@
font-style: normal;
color: var(--main-color);
text-decoration: none;
margin: bottom 117px;
}

.services-title {
Expand All @@ -50,7 +52,9 @@
font-style: normal;
color: var(--header-color)
}

.main-text{
margin-bottom: 79px;
}
.main-description {
font-family: "Roboto Slab", serif;
font-weight: 400;
Expand All @@ -65,12 +69,18 @@
font-style: normal;
color: var(--subtitel-color);
}

.main-information{
margin-bottom:10px;
}
.text-footer{
margin-bottom: 28px;
}
.section-information {
font-family: "droid-serif", serif;
font-weight: 400;
font-style: normal;
color: var(--subtitel-color);
margin-bottom: 74px;
}

::placeholder {
Expand All @@ -82,10 +92,19 @@
}
.services-titlea{
color: var(--footer-color);
margin-top: 92px;
margin: bottom 20px;
}
.servisec-color{
color:var(--footer-color);
margin-top: 27px;
margin-bottom: 115px;
}
.footer-color{
background-color: #222222;
}
}
.container{
width: 933px;
margin: 0 auto;
outline: 1px solid blue;
}

0 comments on commit 3bc9c43

Please sign in to comment.