Skip to content

Commit

Permalink
css
Browse files Browse the repository at this point in the history
  • Loading branch information
@Szyszeekk
Szyszeekk committed Feb 22, 2024
1 parent 206c89e commit 5b05f34
Show file tree
Hide file tree
Showing 2 changed files with 193 additions and 97 deletions.
76 changes: 76 additions & 0 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,29 @@ a {
color: inherit;
}

img {
display: block;
}

.container {
width: 1158px;
margin: 0 auto;
padding: 0 15px;
}

.web-head {
border-bottom: 1px solid #e7e9fc;
}

.web-head-div {
display: flex;
}

.web-head-nav {
display: flex;
align-items: center;
}

.logo-blue {
font-family: 'Raleway', sans-serif;
color: #4d5ae5;
Expand All @@ -25,18 +48,25 @@ a {
line-height: 1.17;
letter-spacing: 0.03em;
text-transform: uppercase;
margin-right: 76px;
}

.logo-black {
color: #2e2f42;
}

.web-head-nav-list {
display: flex;
gap: 40px;
}

.navigation {
font-weight: 500;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.02em;
color: #2e2f42;
padding: 24px 0;
}

.navigation:hover,
Expand All @@ -53,6 +83,11 @@ a {
font-style: normal;
}

.address-section-list {
display: flex;
gap: 40px;
}

.mail-and-phone:hover,
.mail-and-phone:focus {
color: #404bbf;
Expand All @@ -69,6 +104,7 @@ a {

.heading {
background-color: #2e2f42;
padding: 188px 0;
}

.order-button {
Expand All @@ -79,19 +115,45 @@ a {
color: #fff;
background-color: #4d5ae5;
font-family: inherit;
display: block;
min-width: 169px;
height: 56px;
border: none;
border-radius: 4px;
cursor: pointer;
margin: auto;
}

.order-button:hover,
.order-button:focus {
background-color: #404bbf;
}

.advantages {
padding: 120px 0;
}

.visually-hidden {
display: none;
height: 0;
weight: 0;
}

.advantages-list {
display: flex;
gap: 24px;
}

.advantages-list-item {
}

.advantages-head {
font-weight: 500;
font-size: 20px;
line-height: 1.2;
letter-spacing: 0.02em;
color: #2e2f42;
max-width: 496px;
}

.advantages-paragraph {
Expand All @@ -104,6 +166,7 @@ a {

.our-team {
background-color: #f4f4fd;
padding: 120px 0;
}

.our-team-head {
Expand All @@ -114,10 +177,22 @@ a {
text-transform: capitalize;
text-align: center;
color: #2e2f42;
margin-bottom: 72px;
}

.our-team-list {
display: flex;
gap: 24px;
}

.our-team-list-point {
background-color: #ffffff;
width: calc((100% - 72px) / 4);
border-radius: 0px 0px 4px 4px;
}

.our-team-list-point-div {
padding: 32px 16px;
}

.our-team-list-point-head {
Expand All @@ -127,6 +202,7 @@ a {
letter-spacing: 0.02em;
text-align: center;
color: #2e2f42;
margin-bottom: 8px;
}

.our-team-list-point-paragraph {
Expand Down
214 changes: 117 additions & 97 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/modern-normalize/modern-normalize.min.css"
/>
<link
href="https://fonts.googleapis.com/css2?family=Raleway:wght@800&family=Roboto:wght@400;500;700;900&display=swap"
rel="stylesheet"
Expand All @@ -15,110 +19,126 @@
</head>

<body>
<header>
<nav>
<a href="./index.html" class="logo-blue">
Web<span class="logo-black">Studio</span></a
>
<ul>
<li><a href="./index.html" class="navigation">Studio</a></li>
<li><a href="" class="navigation">Portfolio</a></li>
<li><a href="" class="navigation">Contacts</a></li>
</ul>
</nav>
<address class="address-section">
<ul>
<li>
<a href="mailto:info@devstudio.com" class="mail-and-phone"
>info@devstudio.com</a
>
</li>
<li>
<a href="tel:+110001111111" class="mail-and-phone"
>+11 (000) 111-11-11</a
>
</li>
</ul>
</address>
<header class="web-head">
<div class="web-head-div container">
<nav class="web-head-nav">
<a href="./index.html" class="logo-blue">
Web<span class="logo-black">Studio</span></a
>
<ul class="web-head-nav-list">
<li><a href="./index.html" class="navigation">Studio</a></li>
<li><a href="" class="navigation">Portfolio</a></li>
<li><a href="" class="navigation">Contacts</a></li>
</ul>
</nav>
<address class="address-section">
<ul class="address-section-list">
<li>
<a href="mailto:info@devstudio.com" class="mail-and-phone"
>info@devstudio.com</a
>
</li>
<li>
<a href="tel:+110001111111" class="mail-and-phone"
>+11 (000) 111-11-11</a
>
</li>
</ul>
</address>
</div>
</header>
<main>
<section class="heading">
<h1 class="heading-head">Effective Solutions for Your Business</h1>
<button type="button" class="order-button">Order Service</button>
<div class="container">
<h1 class="heading-head">Effective Solutions for Your Business</h1>
<button type="button" class="order-button">Order Service</button>
</div>
</section>
<section class="advantages">
<h2 class="hid">Our Advantages</h2>
<ul>
<li>
<h3 class="advantages-head">Strategy</h3>
<p class="advantages-paragraph">
Our goal is to identify the business problem to walk away with the
perfect and creative solution.
</p>
</li>
<li>
<h3 class="advantages-head">Punctuality</h3>
<p class="advantages-paragraph">
Bring the key message to the brand's audience for the best price
within the shortest possible time.
</p>
</li>
<li>
<h3 class="advantages-head">Diligence</h3>
<p class="advantages-paragraph">
Research and confirm brands that present the strongest digital
growth opportunities and minimize risk.
</p>
</li>
<li>
<h3 class="advantages-head">Technologies</h3>
<p class="advantages-paragraph">
Design practice focused on digital experiences. We bring forth a
deep passion for problem-solving.
</p>
</li>
</ul>
<div class="container">
<h2 class="visually-hidden">Our Advantages</h2>
<ul class="advantages-list">
<li class="advantages-list-item">
<h3 class="advantages-head">Strategy</h3>
<p class="advantages-paragraph">
Our goal is to identify the business problem to walk away with
the perfect and creative solution.
</p>
</li>
<li class="advantages-list-item">
<h3 class="advantages-head">Punctuality</h3>
<p class="advantages-paragraph">
Bring the key message to the brand's audience for the best price
within the shortest possible time.
</p>
</li>
<li class="advantages-list-item">
<h3 class="advantages-head">Diligence</h3>
<p class="advantages-paragraph">
Research and confirm brands that present the strongest digital
growth opportunities and minimize risk.
</p>
</li>
<li class="advantages-list-item">
<h3 class="advantages-head">Technologies</h3>
<p class="advantages-paragraph">
Design practice focused on digital experiences. We bring forth a
deep passion for problem-solving.
</p>
</li>
</ul>
</div>
</section>
<section class="our-team">
<h2 class="our-team-head">Our Team</h2>
<ul>
<li class="our-team-list-point">
<img
src="./images/mark-guerrero.jpg"
width="264"
alt="Man with laptop presenting something"
/>
<h3 class="our-team-list-point-head">Mark Guerrero</h3>
<p class="our-team-list-point-paragraph">Product Designer</p>
</li>
<li class="our-team-list-point">
<img
src="./images/tom-ford.jpg"
width="264"
alt="Confident man posing in profile to the camera"
/>
<h3 class="our-team-list-point-head">Tom Ford</h3>
<p class="our-team-list-point-paragraph">Frontend Developer</p>
</li>
<li class="our-team-list-point">
<img
src="./images/camila-garcia.jpg"
width="264"
alt="Young woman wearing pink sweater"
/>
<h3 class="our-team-list-point-head">Camila Garcia</h3>
<p class="our-team-list-point-paragraph">Marketing</p>
</li>
<li class="our-team-list-point">
<img
src="./images/daniel-wilson.jpg"
width="264"
alt="Confident man posing straight to the camera"
/>
<h3 class="our-team-list-point-head">Daniel Wilson</h3>
<p class="our-team-list-point-paragraph">UI Designer</p>
</li>
</ul>
<div class="container">
<h2 class="our-team-head">Our Team</h2>
<ul class="our-team-list">
<li class="our-team-list-point">
<div class="our-team-list-point-div">
<img
src="./images/mark-guerrero.jpg"
width="264"
alt="Man with laptop presenting something"
/>
<h3 class="our-team-list-point-head">Mark Guerrero</h3>
<p class="our-team-list-point-paragraph">Product Designer</p>
</div>
</li>
<li class="our-team-list-point">
<div class="our-team-list-point-div">
<img
src="./images/tom-ford.jpg"
width="264"
alt="Confident man posing in profile to the camera"
/>
<h3 class="our-team-list-point-head">Tom Ford</h3>
<p class="our-team-list-point-paragraph">Frontend Developer</p>
</div>
</li>
<li class="our-team-list-point">
<div class="our-team-list-point-div">
<img
src="./images/camila-garcia.jpg"
width="264"
alt="Young woman wearing pink sweater"
/>
<h3 class="our-team-list-point-head">Camila Garcia</h3>
<p class="our-team-list-point-paragraph">Marketing</p>
</div>
</li>
<li class="our-team-list-point">
<div class="our-team-list-point-div">
<img
src="./images/daniel-wilson.jpg"
width="264"
alt="Confident man posing straight to the camera"
/>
<h3 class="our-team-list-point-head">Daniel Wilson</h3>
<p class="our-team-list-point-paragraph">UI Designer</p>
</div>
</li>
</ul>
</div>
</section>
<section class="our-portfolio">
<h2 class="our-portfolio-head">Our Portfolio</h2>
Expand Down

0 comments on commit 5b05f34

Please sign in to comment.