Skip to content

Commit

Permalink
Merge pull request #17 from moevm/kharitonov_product
Browse files Browse the repository at this point in the history 
Page: Component
  • Loading branch information
@necitboss
necitboss authored Dec 4, 2024
2 parents 8c32ca6 + 138d665 commit 415a185
Show file tree
Hide file tree
Showing 9 changed files with 418 additions and 18 deletions.
142 changes: 142 additions & 0 deletions main/_front/dist/component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
<!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">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>

</head>
<body>
<header class="header">
<div class="container">
<div class="header__inner">
<div class="header__logo">
<img src="./img/logo.svg" alt="logo">
<h2 class="header__title">Пора Cобрать ПК</h2>
</div>
<div class="header__nav">
<a href="/" class="header__link active">Комплектующие</a>
<a href="#!" class="header__link">Конфигуратор</a>
<a href="#!" class="header__link">Готовые сборки</a>
<a href="#!" class="header__link">
<svg viewBox="0 0 40 40" width="40.000000" height="40.000000">
<g clip-path="url(#clip2_11)">
<path id="path"
d="M31.86 23.95L13.33 23.95L13.33 22.7L31.86 22.7C32.38 22.7 32.83 22.31 32.89 21.79L34.14 11.79C34.18 11.49 34.09 11.2 33.89 10.97C33.69 10.75 33.41 10.62 33.11 10.62L8.88 10.62L8.88 9.37L33.11 9.37C33.76 9.37 34.39 9.65 34.83 10.14C35.26 10.64 35.46 11.29 35.38 11.95L34.13 21.95C33.99 23.09 33.01 23.95 31.86 23.95Z"
fill-opacity="1.000000" fill-rule="nonzero"/>
<path id="path"
d="M31.66 28.95L15.44 28.95C14.41 28.95 13.5 28.26 13.23 27.26L8.06 8.06C7.94 7.6 7.52 7.29 7.05 7.29L3.33 7.29C2.98 7.29 2.7 7.01 2.7 6.66C2.7 6.32 2.98 6.04 3.33 6.04L7.05 6.04C8.08 6.04 9 6.73 9.26 7.73L14.43 26.93C14.56 27.39 14.97 27.7 15.44 27.7L31.66 27.7C32.01 27.7 32.29 27.98 32.29 28.33C32.29 28.67 32.01 28.95 31.66 28.95Z"
fill-opacity="1.000000" fill-rule="nonzero"/>
<path id="path"
d="M16.66 35.62C15.4 35.62 14.37 34.59 14.37 33.33C14.37 32.07 15.4 31.04 16.66 31.04C17.93 31.04 18.95 32.07 18.95 33.33C18.95 34.59 17.93 35.62 16.66 35.62ZM16.66 32.29C16.09 32.29 15.62 32.75 15.62 33.33C15.62 33.9 16.09 34.37 16.66 34.37C17.24 34.37 17.7 33.9 17.7 33.33C17.7 32.75 17.24 32.29 16.66 32.29Z"
fill-opacity="1.000000" fill-rule="nonzero"/>
<path id="path"
d="M29.16 35.62C27.9 35.62 26.87 34.59 26.87 33.33C26.87 32.07 27.9 31.04 29.16 31.04C30.43 31.04 31.45 32.07 31.45 33.33C31.45 34.59 30.43 35.62 29.16 35.62ZM29.16 32.29C28.59 32.29 28.12 32.75 28.12 33.33C28.12 33.9 28.59 34.37 29.16 34.37C29.74 34.37 30.2 33.9 30.2 33.33C30.2 32.75 29.74 32.29 29.16 32.29Z"
fill-opacity="1.000000" fill-rule="nonzero"/>
</g>
</svg>
</a>
<a href="login" class="header__link">
<svg viewBox="0 0 40 40" width="40.000000" height="40.000000">
<g clip-path="url(#clip2_8)">
<path id="path"
d="M20 18.95C15.97 18.95 12.7 15.68 12.7 11.66C12.7 7.64 15.97 4.37 20 4.37C24.02 4.37 27.29 7.64 27.29 11.66C27.29 15.68 24.02 18.95 20 18.95ZM20 5.62C16.66 5.62 13.95 8.33 13.95 11.66C13.95 14.99 16.66 17.7 20 17.7C23.33 17.7 26.04 14.99 26.04 11.66C26.04 8.33 23.33 5.62 20 5.62Z"
fill-opacity="1.000000" fill-rule="nonzero"/>
<path id="path"
d="M31.66 35.62L8.33 35.62C7.98 35.62 7.7 35.34 7.7 35C7.7 31.71 8.98 28.63 11.3 26.3C13.63 23.98 16.71 22.7 20 22.7C23.28 22.7 26.37 23.98 28.69 26.3C31.01 28.63 32.29 31.71 32.29 35C32.29 35.34 32.01 35.62 31.66 35.62ZM8.97 34.37L31.02 34.37C30.69 28.57 25.87 23.95 20 23.95C14.12 23.95 9.3 28.57 8.97 34.37Z"
fill-opacity="1.000000" fill-rule="nonzero"/>
</g>
</svg>
</a>
</div>
</div>
</div>
</header>
<section class="title">
<div class="container">
<h1 class="title__text">AMD Ryzen 5 2600</h1>
</div>
</section>
<section class="info">
<div class="container">
<div class="info__inner">
<div class="info__img">
<img src="https://via.placeholder.com/200x200" alt="">
</div>
<div class="info__block">
<div class="subtitle info__title">Характеристики:</div>
<div class="info__properties">
<div class="property">
<div class="property__text">
<div class="property__name">Сокет (разьем на мат плате)</div>
<div class="property__value">AM4</div>
</div>
</div>
<div class="property">
<div class="property__text">
<div class="property__name">Количество ядер / потоков</div>
<div class="property__value">6 ядер / 12 потоков</div>
</div>
</div>
<div class="property">
<div class="property__text">
<div class="property__name">Базовая / макс частота</div>
<div class="property__value">3.4GHz / 3.9GHz</div>
</div>
</div>
<div class="property">
<div class="property__text">
<div class="property__name">Разблокирован множитель</div>
<div class="property__value">Да</div>
</div>
</div>
<div class="property">
<div class="property__text">
<div class="property__name">TDP</div>
<div class="property__value">65W</div>
</div>
</div>
<div class="property">
<div class="property__text">
<div class="property__name">Наличие встроенной графики</div>
<div class="property__value">Нет</div>
</div>
</div>
<div class="property">
<div class="property__text">
<div class="property__name">Стандарт памяти</div>
<div class="property__value">DDR4</div>
</div>
</div>
<div class="property">
<div class="property__text">
<div class="property__name">Лучшая технология разгона</div>
<div class="property__value">Нет</div>
</div>
</div>
<div class="property">
<div class="property__text">
<div class="property__name">Техпроцесс</div>
<div class="property__value">12 нм</div>
</div>
</div>
<div class="property">
<div class="property__text">
<div class="property__name">Поколение (архитектура), год</div>
<div class="property__value">2000 (Zen+), 2018 год</div>
</div>
</div>
</div>
<div class="info__down">
<div class="info__price">8 500 ₽</div>
<button class="info__btn btn btn-big">Купить</button>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
80 changes: 63 additions & 17 deletions main/_front/dist/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ body {
border: 1px solid #712CF9;
padding: 12px;
text-align: center;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.btn-big {
Expand Down Expand Up @@ -393,9 +394,11 @@ body {
text-align: left;
background-color: #EDEDED;
border-radius: 10px;
width: 320px;
}
.property-with-delete {
display: flex;
width: auto;
}

.property__text {
Expand Down Expand Up @@ -475,6 +478,23 @@ body {
text-align: center;
}

.subtitle {
font-size: 24px;
line-height: 28px;
text-align: center;
font-weight: 700;
}

.title {
margin: 15px 0 20px;
}

.title__text {
font-size: 30px;
font-weight: 700;
line-height: 47px;
}

.add-center {
width: 468px;
padding: 20px;
Expand Down Expand Up @@ -666,6 +686,49 @@ body {
font-weight: 500;
}

.info__inner {
display: flex;
justify-content: space-between;
column-gap: 70px;
}

.info__img {
margin-top: 63px;
}
.info__img img {
width: 400px;
height: 400px;
}

.info__block {
flex: 1;
}

.info__title {
text-align: left;
font-weight: 400;
margin-bottom: 30px;
}

.info__properties {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
margin-bottom: 20px;
}

.info__down {
display: flex;
justify-content: space-between;
align-items: center;
}

.info__price {
font-size: 28px;
font-weight: 500;
}

.section {
margin-top: 30px;
}
Expand All @@ -688,21 +751,4 @@ body {
display: flex;
justify-content: space-between;
width: 100%;
}

.subtitle {
font-size: 24px;
line-height: 28px;
text-align: center;
font-weight: 700;
}

.title {
margin: 15px 0 20px;
}

.title__text {
font-size: 30px;
font-weight: 700;
line-height: 47px;
}
Loading

0 comments on commit 415a185

Please sign in to comment.