Skip to content

Dev #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Dev #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
bcd8c69
added html
Jun 18, 2022
c70d61b
Delete .DS_Store
sofiaramil Jun 19, 2022
0641c2c
Delete .DS_Store
sofiaramil Jun 19, 2022
2c1f4ac
Delete .DS_Store
sofiaramil Jun 19, 2022
a9b5bc9
Add files via upload
sofiaramil Jun 19, 2022
945f515
Delete base.css
sofiaramil Jun 19, 2022
bd9ff57
Update base.css
sofiaramil Jun 19, 2022
c2249c2
Update style.css
sofiaramil Jun 19, 2022
c7abbc6
Update index.js
sofiaramil Jun 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added img/hero-6-cover.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
76 changes: 76 additions & 0 deletions task-01/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
* {
box-sizing: border-box;
}

:root {
--text-font-weight: 700;
--text-whait-color:#FFFFFF;
--color-backgrount-blue: #23A6F0;
--text-weight-normal: 400;
--text-color-dark: #252B42;
--text-color-lite: #737373;
--primary-font-size: 14px;
--font-sixi-h2: 24px;
--primary-color: #23A6F0;
--light-color: #fff;
--text-color-h3: #252B42;
--text-color-description: #737373;
--font-weigth-text: 400;
--font-weigth-text-bold: 700;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
}

ul, li {
list-style: none;
}

body {
font-family: 'Montserrat';
font-weight: 400;
font-style: normal;
}
a {
text-decoration: none;
color: inherit;
transition: 0.5s;
}

.a-hov:hover {
text-decoration: underline;
color: var(--color-backgrount-blue);
}

button {
color: var(--text-whait-color);
outline: none;
border: none;
}

button:hover {
transition: 0.5s;
outline: var(--color-backgrount-blue) solid 1.5px;
color: var(--color-backgrount-blue);
background-color: whitesmoke;
color: var(--color-backgrount-blue);
}

button:hover > svg {
fill: var(--color-backgrount-blue);
}
191 changes: 191 additions & 0 deletions task-01/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,191 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic" rel="stylesheet" />
<link rel = "stylesheet" href = "./base.css">
<link rel = "stylesheet" href = "./style.css">
<title>COURSES OF EXCELLENT QUALITY</title>
</head>
<body>
<section class="head">
<div class="head__container">
<header class="head__header header">
<a href="./index.html" class="header__logo">BrandName</a>
<nav class="header__nav">
<a href="./index.html" class="header__item a-hov">Home</a>
<a href="./index.html" class="header__item a-hov">Product</a>
<a href="./index.html" class="header__item a-hov">Pricing</a>
<a href="./index.html" class="header__item a-hov">Contact</a>
</nav>
<div class="header__authorization">
<a href="./index.html" class="header__login a-hov">Login</a>
<button class="header__button">
Become a member
<svg class="header__arrow" width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 5C0 4.81059 0.079009 4.62895 0.219646 4.49502C0.360282 4.36109 0.551026 4.28584 0.749916 4.28584H9.43845L6.21831 1.22068C6.07749 1.08658 5.99838 0.904705 5.99838 0.715059C5.99838 0.525414 6.07749 0.343536 6.21831 0.209436C6.35912 0.0753365 6.5501 0 6.74925 0C6.94839 0 7.13937 0.0753365 7.28019 0.209436L11.7797 4.49438C11.8495 4.56072 11.9049 4.63952 11.9427 4.72629C11.9805 4.81305 12 4.90606 12 5C12 5.09394 11.9805 5.18695 11.9427 5.27371C11.9049 5.36048 11.8495 5.43928 11.7797 5.50562L7.28019 9.79056C7.13937 9.92466 6.94839 10 6.74925 10C6.5501 10 6.35912 9.92466 6.21831 9.79056C6.07749 9.65646 5.99838 9.47459 5.99838 9.28494C5.99838 9.0953 6.07749 8.91342 6.21831 8.77932L9.43845 5.71416H0.749916C0.551026 5.71416 0.360282 5.63892 0.219646 5.50499C0.079009 5.37106 0 5.18941 0 5Z"/>
</svg>
</button>
</div>
</header>
<article>
<div class="head__content">
<h1 class="head__title">COURSES OF <br> EXCELLENT <br> QUALITY</h1>
<h3 class="head__description">We know how large objects will act, but things on a <br>
small scale just do not act that way.</h3>
<button class="head__button">Join Us</button>
</div>
</article>
</div>
</section>
<main>
<section class="cards">
<div class="cards__section">
<button class="cards__card">
<div class="card__svg">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.0003 27.3332C6.63653 27.3332 0.666992 21.3636 0.666992 13.9998C0.666992 6.63604 6.63653 0.666504 14.0003 0.666504C21.3641 0.666504 27.3337 6.63604 27.3337 13.9998C27.3256 21.3603 21.3608 27.3251 14.0003 27.3332ZM14.0003 3.33317C8.10929 3.33317 3.33366 8.1088 3.33366 13.9998C3.33366 19.8909 8.10929 24.6665 14.0003 24.6665C19.8914 24.6665 24.667 19.8909 24.667 13.9998C24.6604 8.11154 19.8886 3.33978 14.0003 3.33317ZM20.667 15.3332H12.667V7.33317H15.3337V12.6665H20.667V15.3332Z" />
</svg>
</div>
<div class="card__title">2,769 online courses</div>
<hr class="card__line">
<div class="card__info">The gradual accumulation of
information about atomic and
small-scale behaviour...</div>
</button>
<button class="cards__card">
<div class="card__svg">
<svg width="24" height="32" viewBox="0 0 24 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 31.0265L0 21.6931L2.16 20.0131L11.9867 27.6531L21.8267 20.0011L24 21.6931L12 31.0265ZM12 25.3331L0 15.9998L2.16 14.3198L11.9867 21.9598L21.8267 14.3065L24 15.9998L12 25.3331ZM12 19.6398L2.17333 11.9998L0 10.3065L12 0.973145L24 10.3065L21.8133 11.9998L12 19.6398Z" />
</svg>
</div>
<div class="card__title">Certified Teacher</div>
<hr class="card__line">
<div class="card__info">The gradual accumulation of
information about atomic and
small-scale behaviour...</div>
</button>
<button autofocus class="cards__card">
<div class="card__svg">
<svg width="28" height="22" viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24.667 21.6668H3.33366C1.8609 21.6668 0.666992 20.4729 0.666992 19.0002V3.00016C0.666992 1.5274 1.8609 0.333496 3.33366 0.333496H24.667C26.1398 0.333496 27.3337 1.5274 27.3337 3.00016V19.0002C27.3337 20.4729 26.1398 21.6668 24.667 21.6668ZM3.33366 11.0002V19.0002H24.667V11.0002H3.33366ZM3.33366 3.00016V5.66683H24.667V3.00016H3.33366ZM15.3337 16.3335H6.00033V13.6668H15.3337V16.3335Z"
/>
</svg>
</div>
<div class="card__title">2,769 online courses</div>
<hr class="card__line">
<div class="card__info">The gradual accumulation of
information about atomic and
small-scale behaviour...</div>
</button>
</div>
<div class="cards__login">
<input placeholder="Your Email" class="card__input" type="email">
<button class="cards__button">Subscribe</button>
</div>
</section>
</main>
<footer class="footer">
<nav class="footer_section">
<ul class="footer__list">
<li><h3 class="list__name">Get In Touch</h3></li>
<li class="list__link">
the quick fox jumps over the <br />
lazy dog
</li>
<ul class="list_icons">
<li class="icon-1">
<svg
width="24"
height="23"
viewBox="0 0 24 23"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M23.5 11.5704C23.5 5.1801 18.3515 0 12.0014 0C5.64848 0.00143732 0.5 5.1801 0.5 11.5719C0.5 17.3456 4.7056 22.1319 10.2019 23V14.9151H7.28415V11.5719H10.2048V9.02062C10.2048 6.12155 11.9224 4.52037 14.5484 4.52037C15.8075 4.52037 17.1226 4.74603 17.1226 4.74603V7.59193H15.6724C14.2451 7.59193 13.7995 8.4845 13.7995 9.40008V11.5704H16.9875L16.4787 14.9136H13.7981V22.9986C19.2944 22.1304 23.5 17.3441 23.5 11.5704Z"
fill="#23A6F0"
/>
</svg>
</li>
<li class="icon-2">
<svg
width="23"
height="22"
viewBox="0 0 23 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5 0C8.51488 0 8.1395 0.01375 6.96663 0.066C5.79375 0.121 4.99487 0.30525 4.295 0.5775C3.56088 0.853626 2.89593 1.28676 2.34663 1.84663C1.7871 2.39621 1.35402 3.06108 1.0775 3.795C0.80525 4.4935 0.619625 5.29375 0.566 6.4625C0.51375 7.63812 0.5 8.01213 0.5 11.0014C0.5 13.9879 0.51375 14.3619 0.566 15.5347C0.621 16.7062 0.80525 17.5051 1.0775 18.205C1.35938 18.9282 1.73475 19.5415 2.34663 20.1534C2.95713 20.7652 3.57037 21.142 4.29363 21.4225C4.99487 21.6947 5.79238 21.8804 6.96388 21.934C8.13813 21.9862 8.51213 22 11.5 22C14.4879 22 14.8605 21.9862 16.0347 21.934C17.2049 21.879 18.0065 21.6947 18.7064 21.4225C19.44 21.1462 20.1045 20.7131 20.6534 20.1534C21.2652 19.5415 21.6406 18.9282 21.9225 18.205C22.1934 17.5051 22.379 16.7062 22.434 15.5347C22.4862 14.3619 22.5 13.9879 22.5 11C22.5 8.01213 22.4862 7.63813 22.434 6.46388C22.379 5.29375 22.1934 4.4935 21.9225 3.795C21.646 3.06106 21.2129 2.39618 20.6534 1.84663C20.1042 1.28655 19.4392 0.853387 18.705 0.5775C18.0037 0.30525 17.2035 0.119625 16.0334 0.066C14.8591 0.01375 14.4865 0 11.4973 0H11.5014H11.5ZM10.5141 1.98275H11.5014C14.4384 1.98275 14.7862 1.99238 15.9454 2.046C17.0179 2.09413 17.6009 2.27425 17.9886 2.42412C18.5015 2.6235 18.8686 2.86275 19.2536 3.24775C19.6386 3.63275 19.8765 3.9985 20.0759 4.51275C20.2271 4.89913 20.4059 5.48213 20.454 6.55463C20.5076 7.71375 20.5186 8.06163 20.5186 10.9973C20.5186 13.9329 20.5076 14.2821 20.454 15.4412C20.4059 16.5138 20.2258 17.0954 20.0759 17.4831C19.8995 17.9607 19.618 18.3926 19.2522 18.7467C18.8672 19.1318 18.5015 19.3696 17.9873 19.569C17.6023 19.7203 17.0192 19.899 15.9454 19.9485C14.7862 20.0007 14.4384 20.0131 11.5014 20.0131C8.56437 20.0131 8.21513 20.0007 7.056 19.9485C5.9835 19.899 5.40188 19.7203 5.01412 19.569C4.53631 19.3929 4.10405 19.1119 3.74913 18.7467C3.38303 18.392 3.10112 17.9598 2.92412 17.4818C2.77425 17.0954 2.59413 16.5124 2.546 15.4399C2.49375 14.2807 2.48275 13.9329 2.48275 10.9945C2.48275 8.0575 2.49375 7.711 2.546 6.55187C2.5955 5.47937 2.77425 4.89638 2.9255 4.50863C3.12488 3.99575 3.36413 3.62862 3.74913 3.24362C4.13412 2.85862 4.49987 2.62075 5.01412 2.42138C5.40188 2.27012 5.9835 2.09138 7.056 2.04188C8.07075 1.99513 8.464 1.98137 10.5141 1.98V1.98275ZM17.3726 3.80875C17.1993 3.80875 17.0276 3.84289 16.8675 3.90923C16.7073 3.97557 16.5618 4.0728 16.4392 4.19537C16.3167 4.31794 16.2194 4.46346 16.1531 4.62361C16.0868 4.78376 16.0526 4.9554 16.0526 5.12875C16.0526 5.30209 16.0868 5.47374 16.1531 5.63389C16.2194 5.79404 16.3167 5.93956 16.4392 6.06213C16.5618 6.1847 16.7073 6.28193 16.8675
6.34827C17.0276 6.41461 17.1993 6.44875 17.3726 6.44875C17.7227 6.44875 18.0585 6.30968 18.306 6.06213C18.5536 5.81458 18.6926 5.47884 18.6926 5.12875C18.6926 4.77866 18.5536 4.44292 18.306 4.19537C18.0585 3.94782 17.7227 3.80875 17.3726 3.80875ZM11.5014 5.3515C10.7521 5.33981 10.008 5.47729 9.31234 5.75594C8.61671 6.0346 7.98346 6.44885 7.44946 6.97458C6.91546 7.50032 6.49138 8.12703 6.20191 8.81823C5.91244 9.50944 5.76336 10.2513 5.76336 11.0007C5.76336 11.7501 5.91244 12.4919 6.20191 13.1831C6.49138 13.8743 6.91546 14.5011 7.44946 15.0268C7.98346 15.5525 8.61671 15.9668 9.31234 16.2454C10.008 16.5241 10.7521 16.6616 11.5014 16.6499C12.9844 16.6267 14.3988 16.0214 15.4393 14.9645C16.4799 13.9076 17.0631 12.4839 17.0631 11.0007C17.0631 9.51751 16.4799 8.09382 15.4393 7.03691C14.3988 5.97999 12.9844 5.37464 11.5014 5.3515ZM11.5014 7.33288C12.474 7.33288 13.4067 7.71923 14.0944 8.40695C14.7821 9.09467 15.1685 10.0274 15.1685 11C15.1685 11.9726 14.7821 12.9053 14.0944 13.593C13.4067 14.2808 12.474 14.6671 11.5014 14.6671C10.5288 14.6671 9.59605 14.2808 8.90833 13.593C8.22061 12.9053 7.83425 11.9726 7.83425 11C7.83425 10.0274 8.22061 9.09467 8.90833 8.40695C9.59605 7.71923 10.5288 7.33288 11.5014 7.33288Z"
fill="#23A6F0"
/>
</svg>
</li>
<li class="icon-3">
<svg
width="23"
height="18"
viewBox="0 0 23 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.41075 18C15.713 18 20.2546 11.0731 20.2546 5.07669C20.2546 4.88285 20.2546 4.68625 20.2464 4.49241C21.1306 3.84789 21.8937 3.04993 22.5 2.13592C21.6741 2.50262 20.7988 2.7443 19.9026 2.85312C20.8466 2.28495 21.5536 1.391 21.8923 0.337403C21.0054 0.86647 20.0346 1.23787 19.0226 1.43534C18.3423 0.705724 17.4419 0.222372 16.4611 0.0601592C15.4803 -0.102054 14.4737 0.0659244 13.5973 0.538075C12.7209 1.01023 12.0236 1.7602 11.6134 2.67182C11.2031 3.58345 11.1029 4.60585 11.3281 5.58066C9.53339 5.49005 7.77762 5.02057 6.17468 4.20269C4.57175 3.3848 3.15744 2.23678 2.0235 0.833069C1.44784 1.83421 1.27216 3.01843 1.53214 4.14526C1.79211 5.27209 2.46825 6.25705 3.42325 6.90013C2.70762 6.87565 2.00772 6.68215 1.38 6.33524V6.39754C1.38123 7.44631 1.74205 8.46247 2.40145 9.27429C3.06086 10.0861 3.9784 10.6438 4.999 10.853C4.61161 10.9605 4.21144 11.014 3.80963 11.0122C3.52635 11.0131 3.24365 10.9867 2.96537 10.9333C3.25383 11.8361 3.8155 12.6254 4.57171 13.1908C5.32793 13.7561 6.24081 14.0691 7.1825 14.0859C5.58276 15.3511 3.60668 16.0373 1.5725 16.034C1.21407 16.0355 0.855882 16.0147 0.5 15.9716C2.56458 17.297 4.96228 18.0008 7.41075 18Z"
fill="#23A6F0"
/>
</svg>
</li>
</ul>
</ul>
<ul class="footer__list">
<li><h3 class="list__name">Company info</h3></li>
<li class="list__item">
<a class="list__link" href="#">About Us</a>
</li>
<li class="list__item"><a class="list__link" href="#">Carrier</a></li>
<li class="list__item">
<a class="list__link" href="#">We are hiring</a>
</li>
<li class="list__item"><a class="list__link" href="#">Blog</a></li>
</ul>
<ul class="footer__list">
<li><h3 class="list__name">Features</h3></li>
<li class="list__item">
<a class="list__link" href="#">Business Marketing</a>
</li>
<li class="list__item">
<a class="list__link" href="#">User Analytic</a>
</li>
<li class="list__item">
<a class="list__link" href="#">Live Chat</a>
</li>
<li class="list__item">
<a class="list__link" href="#">Unlimited Support</a>
</li>
</ul>
<ul class="footer__list">
<li><h3 class="list__name">Resources</h3></li>
<li class="list__item">
<a class="list__link" href="#">IOS & Android</a>
</li>
<li class="list__item">
<a class="list__link" href="#">Watch a Demo</a>
</li>
<li class="list__item">
<a class="list__link" href="#">Customers</a>
</li>
<li class="list__item"><a class="list__link" href="#">API</a></li>
</ul>
</nav>
<p class="footer__inscription">
Made With Love By Figmaland All Right Reserved
</p>
</footer>
</body>
</html>
Loading