Skip to content
Snippets Groups Projects
Commit 7829e7aa authored by Yehor Potebenko's avatar Yehor Potebenko
Browse files

feat: create todo popup markup

parent 2d5d14ce
No related branches found
No related tags found
3 merge requests!5First version,!1Main page markup,!4Main page server todos
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="20" height="20" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_25_80" transform="scale(0.03125)"/>
</pattern>
<image id="image0_25_80" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAA3QAAAN0BcFOiBwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAPYSURBVFiFvZY9TytHFIbfs94vkHcLlJ8QKRJ/wNhQgBTBegu2ipuU6YJu7RK5TH1FmZLGHRR4jSJBgW38A4JkKT8BueD62vsxMyeFvYQLGK8duFOt1jPv88w5I+9Q52fxFxGSOC3Udq8wwncY13soWoZsMsPUFHEimau6LlrXeyh+D7iui5ZkririRBOpXpPEN5J4RzPS8CMlrvdQ1Iw0lMQ7kvhGpHpN273CiFOjKqE6ArytjDjsBHDeG94J4CgjDgV4W0J1ODWqu1cYETM/2iVmHALYBqgb2aZ3eIYv7wE/D+DYURICXAHQMRPLy86blk3avcIosq2qIu5KUhUzjsLzd6jEeQDHjKNQkqoo4m5kW9Wnh117OvnwDF8Sa+RJqG4KVdHicXge3K8scR7cO1o8DlOoioTqJtboRVUfW/B8oUrWZyXjnmZGB4dnPyzVjmmG3QaoDFBXM8feaxmvCmQBSWK3AZQB9GJKvF8vNh7ywE/9oWuxGWZrzTc2MFcgkxinVpuAMgM9iXShxKk/dAswwmzNuhG/Wb03BbJAgh6CUAZwyywO5kmc+kOXSG8D2AKjxxALhRcKZMGSCm2AtwC6LbB8IZFnzsoCGSApUBuMLQB9U/F+Bjj1h26i0SWAEgi3puRc8KUEAOCzP3RtDVMQ0I8U9gHg+btPOeFLC2QSus6XxCgxoT8NmT4LQUvBVxLIJDRdXYJRmqagr4S2NBwA9KXpsyEAgDJ5+vYvdYmxUguEkV4yUCJMW5A966nxsS347A/dsZFcElBioL+emvsA8PzdMhK5K9fwh+5XM2or4pIk7kcz0KeLjYcoNfclcV8Rl76aUbvhD928ubkq0PCHLplRm4AtBm45sQ+On+0yz5yVBBr+0IU1CRkog3FLydrc4IY/dNmctEHYIqCHeM1bJPFmC+rBvSOsUSigyhKyR8nkzV0dX2w8UDI5kJA9AVUW1iisL7hPzK1APRg4WmHt8XNsR4l3fPFjrsPV8P9xI/u/z7GSk4M/zn7K/zmuBwNH6XZIQAVAj0Q0N2DeqAcDh/XpfYKBriYi77WMFwL1YOCkuhViCu8aIn51YV6JRVnfCNSDgRMZ1uwqRl07XR2eN/NR4Kh2VyRlza7l6E5S4f35P+HZ+C0YOGuGnlWiw1rsnTQ3R48CR7W7ooQZgrENQieNZfW94E8lDKvQyhgFJN5Jc3NEv//ydzGG0SJgB6COOfvhPeHZOKrdFROYIcDbDNxYSKvaBHpTgndS8M1HwgHgpLk5MpF4KfhGgncm0JuaBJsC3BpDVD8S/lRiDFEV4JYEm/8CncKGjyOf3akAAAAASUVORK5CYII="/>
</defs>
</svg>
......@@ -44,10 +44,36 @@
class="main__character"
src="../../assets/images/main/content/owl-main.png"
alt="Owl"
width="367"
height="358"
/>
</div>
</div>
</main>
<!-- * TODO POPUP -->
<div class="todo-popup popup">
<div class="todo-popup__body popup__body">
<div class="todo-popup__content popup__content">
<a href="#" class="todo-popup__close popup__close"
><img
src="../../assets/images/main/icons/close.svg"
alt="Close Modal"
width="20"
height="20"
/></a>
<div class="todo-popup__wrapper">
<h2 class="todo-popup__title">Let’s <i>Do</i></h2>
<p class="todo-popup__question">What’s your plan?</p>
<ul class="todo-popup__list">
<li class="todo-popup__item">Add task</li>
</ul>
<button class="todo-popup__button">Add task</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
@import '~normalize.css';
@import '@scss-modules/global';
@import '@scss-modules/global-templates';
@import '@scss-modules/main/palette';
.wrapper {
@extend %wrapper;
......@@ -16,7 +17,7 @@
left: 0;
width: 100%;
padding-top: 35px;
z-index: 999;
z-index: 998;
&__menu {
margin-top: 0;
......@@ -65,3 +66,117 @@
z-index: 3;
}
}
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: $transparent-dark-red;
z-index: 999;
&__body {
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 30px 10px;
}
&__content {
text-align: right;
> * {
&:first-child {
display: inline-block;
}
}
}
}
.todo-popup {
&__content {
width: 42.9%;
padding: 25px 25px 30px 25px;
background-color: $alice-blue;
border-radius: 20px;
}
&__wrapper {
display: flex;
flex-direction: column;
}
&__title {
display: inline-block;
max-width: 32.2%;
margin: 0 auto 17px;
text-align: center;
font-weight: 700;
font-size: 36px;
line-height: 43px;
background: linear-gradient(266.66deg, $heliotrope 1.54%, $matisse 101.33%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
&__question {
margin-top: 0;
margin-bottom: 20px;
text-align: left;
font-family: 'Inder', sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 25px;
color: $scampi;
}
&__list {
margin-top: 0;
padding-left: 0;
list-style-type: none;
margin-bottom: 318px;
display: inline-block;
margin-right: auto;
}
&__item {
font-family: 'Inder', sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 22px;
text-transform: uppercase;
color: $heliotrope1;
cursor: pointer;
&::before {
content: '+';
font-family: 'Inder', sans-serif;
font-weight: 400;
font-size: 28px;
line-height: 35px;
text-transform: uppercase;
background: linear-gradient(85.64deg, $anakiwa 2.83%, $heliotrope1 76.72%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
margin-right: 4px;
}
}
&__button {
margin: 0 auto;
padding: 13px 38px;
background: $heliotrope2;
border-radius: 10px;
border: none;
font-weight: 400;
font-size: 18px;
line-height: 22px;
text-transform: uppercase;
color: $alice-blue;
cursor: pointer;
}
}
@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,300;0,400;1,300;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,300;0,400;1,300;1,700&family=Inder&display=swap');
$transparent-dark-red: #09000080;
$alice-blue: #fafdff;
$scampi: #6964a4;
$heliotrope: #c372ff;
$heliotrope1: #cf82f7;
$heliotrope2: #c78bf8;
$matisse: #195e92;
$anakiwa: #82d6ff;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment