diff --git a/website_hea/index.html b/website_hea/index.html new file mode 100644 index 0000000..8e902c7 --- /dev/null +++ b/website_hea/index.html @@ -0,0 +1,148 @@ + + + + + + + + CODEPEC + + +
+ + + + +
+ +
+

Nedir?

+

Codepec, bu sene ilkini gerçekleştireceğimiz bir algoritma yarışmasıdır.

+ +

Nerede?

+

Codepec, bu sene ---'da gerçekleştirilecektir.

+ +

Ne zaman?

+

Codepec, bu sene --/--/---- tarihinde gerçekleştirilecektir.

+
+ +
+

Yarışma Programı

+

Buraya programı girin.

+
+ +
+

Destekçilerimiz

+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+

SSS

+
+ + Soru 1 + +
+ Cevap 1 +
+
+
+ + Soru 2 + +
+ Cevap 2 +
+
+
+ + Soru 3 + +
+ Cevap 3 +
+
+
+ +
+

Kayıt Formu

+

Kayıt formu, etkinlik tarihi yaklaştığında konulacaktır.

+
+ + + + + + + + + + + +
+ diff --git a/website_hea/particle-cfg.json b/website_hea/particle-cfg.json new file mode 100644 index 0000000..1110876 --- /dev/null +++ b/website_hea/particle-cfg.json @@ -0,0 +1,104 @@ +{ + "particles": { + "number": { + "value": 40, + "density": { + "enable": false + } + }, + "color": { + "value": "#e6e6e6" + }, + "shape": { + "type": "polygon", + "stroke": { + "width": 3, + "color": "#1f4068" + }, + "polygon": { + "nb_sides": 6 + } + }, + "opacity": { + "value": 0.7, + "random": false, + "anim": { + "enable": false, + "speed": 1, + "opacity_min": 0.1, + "sync": false + } + }, + "size": { + "value": 15, + "random": true, + "anim": { + "enable": false, + "speed": 80, + "size_min": 0.1, + "sync": false + } + }, + "line_linked": { + "enable": true, + "distance": 250, + "color": "#7c7c7c", + "opacity": 0.5, + "width": 2 + }, + "move": { + "enable": true, + "speed": 8, + "direction": "none", + "random": false, + "straight": false, + "out_mode": "out", + "bounce": false, + "attract": { + "enable": false, + "rotateX": 600, + "rotateY": 1200 + } + } + }, + "interactivity": { + "detect_on": "canvas", + "events": { + "onhover": { + "enable": false, + "mode": "repulse" + }, + "onclick": { + "enable": false, + "mode": "push" + }, + "resize": true + }, + "modes": { + "grab": { + "distance": 800, + "line_linked": { + "opacity": 0.8 + } + }, + "bubble": { + "distance": 800, + "size": 80, + "duration": 2, + "opacity": 0.8, + "speed": 3 + }, + "repulse": { + "distance": 150, + "duration": 0.6 + }, + "push": { + "particles_nb": 1 + }, + "remove": { + "particles_nb": 1 + } + } + }, + "retina_detect": true + } \ No newline at end of file diff --git a/website_hea/style.css b/website_hea/style.css new file mode 100644 index 0000000..99cfbdc --- /dev/null +++ b/website_hea/style.css @@ -0,0 +1,322 @@ +/* Import "Roboto" */ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap'); + +:root { + --primary-color: #1f4068; + --header-color: white; + --text-color: black; + --bg-color: white; + font-family: "Roboto"; +} +div { + background-color: var(--header-color); + padding-top: 5px; + padding-bottom: 25px; + text-align: center; +} +#particles { + padding: 0; +} +#particles canvas { + position: fixed; + display: block; + top: 0; + left: 0; + z-index: -1 !important; +} +html { + scroll-behavior: smooth; +} +li { + list-style: none; +} +a { + text-decoration: none; + color: var(--text-color); +} +ion-icon { + padding-right: 8px; + font-size: 16px; + color: var(--text-color); +} +#about { + padding-top: 60px; +} + +/* Navbar */ + +/* header */ + +header { + background-color: var(--header-color); + box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1); + position: fixed; + width: 100%; + transform: translateY(-8px); + z-index: 3; + } + + header ul { + margin: 0; + padding: 0; + list-style: none; + overflow: hidden; + } + + header li a { + display: block; + padding: 20px 20px; + border-right: 1px solid #f4f4f4; + text-decoration: none; + } + + header li a:hover, + header .menu-btn:hover { + background-color: #f4f4f4; + } + + header .logo { + display: block; + float: left; + font-size: 2em; + padding: 10px 20px; + text-decoration: none; + } + + /* menu */ + + header .menu { + clear: both; + max-height: 0; + transition: max-height .2s ease-out; + } + + /* menu icon */ + + header .menu-icon { + cursor: pointer; + display: inline-block; + float: right; + padding: 28px 30px; + position: relative; + user-select: none; + } + + header .menu-icon .navicon { + background: #333; + display: block; + height: 2px; + position: relative; + transition: background .2s ease-out; + width: 18px; + } + + header .menu-icon .navicon:before, + header .menu-icon .navicon:after { + background: #333; + content: ''; + display: block; + height: 100%; + position: absolute; + transition: all .2s ease-out; + width: 100%; + } + + header .menu-icon .navicon:before { + top: 5px; + } + + header .menu-icon .navicon:after { + top: -5px; + } + + /* menu btn */ + + header .menu-btn { + display: none; + } + + header .menu-btn:checked ~ .menu { + max-height: 240px; + } + + header .menu-btn:checked ~ .menu-icon .navicon { + background: transparent; + } + + header .menu-btn:checked ~ .menu-icon .navicon:before { + transform: rotate(-45deg); + } + + header .menu-btn:checked ~ .menu-icon .navicon:after { + transform: rotate(45deg); + } + + header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, + header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { + top: 0; + } + + @media (hover: hover) { + body { + border: rgba(0,0,0,.2) 2px solid; + border-top: none; + } + body, header { + width: 768px; + margin: 0 auto; + } + header { + border-top: rgba(0,0,0,.2) 2px solid; + transform: translateY(0px); + } + header li { + float: left; + } + header li a { + padding: 20px 30px; + } + header .menu { + clear: none; + float: right; + max-height: none; + } + header .menu-icon { + display: none; + } + } +#program { + border: var(--bg-color) 5px double; +} +#program, #program h2, #program p, #program ion-icon { + background-color: var(--primary-color); + color: var(--bg-color); +} + +/* Carousel */ +@keyframes scroll { +0% { + transform: translateX(0); +} +100% { + transform: translateX(calc(-250px * 7)); +} +} +.slider { + padding: 0px; + background: white; + height: 100px; + margin: auto; + overflow: hidden; + position: relative; + width: 100%; +} +.slider::before, .slider::after { + content: ""; + height: 100px; + position: absolute; + width: 200px; +} +.slider::after { + right: 0; + top: 0; + transform: rotateZ(180deg); +} +.slider::before { + left: 0; + top: 0; +} +.slider .slide-track { + animation: scroll 40s linear infinite; + display: flex; + width: calc(250px * 14); +} +.slider .slide { + height: 100px; + width: 250px; +} + +/* Accordion */ +details { + width: 90%; + max-width: 600px; + margin: auto auto; +} +details div { + border-left: 2px solid #000; + border-right: 2px solid #000; + border-bottom: 2px solid #000; + padding: 1.5em; + text-align: left; +} +details div > * + * { + margin-top: 1.5em; +} +details + details { + margin-top: .5rem; +} +summary { + list-style: none; + text-align: left; +} +summary::-webkit-details-marker { + display: none; +} +summary { + border: 2px solid #000; + padding: .75em 1em; + cursor: pointer; + position: relative; + padding-left: calc(1.75rem + .75rem + .75rem); +} +summary:before { + position: absolute; + top: 50%; + transform: translateY(-50%); + left: .75rem; + content: "↓"; + width: 1.75rem; + height: 1.75rem; + background-color: #000; + color: #FFF; + display: inline-flex; + justify-content: center; + align-items: center; + flex-shrink: 0; +} +details[open] summary { + background-color: #eee; +} +details[open] summary:before { + content: "↑"; +} +summary:hover { + background-color: #eee; +} + +footer { + border: var(--bg-color) 5px double; + background-color: var(--primary-color); + color: var(--text-color); +} +footer p { + margin-bottom: 20px; + text-align: center; + font-weight: 500; + background-color: var(--primary-color); + color: var(--bg-color); +} +footer ul { + list-style: none; + display: grid; + justify-content: center; + grid-template-columns: repeat(7, 35px); +} +#socials, #socials li, #socials ion-icon, #socials a { + background-color: var(--primary-color); + color: var(--bg-color); +} +#socials ion-icon:hover { + transition: opacity .15s; + opacity: .7; +} \ No newline at end of file