diff --git a/cs.css b/cs.css new file mode 100644 index 0000000..8b1a597 --- /dev/null +++ b/cs.css @@ -0,0 +1,721 @@ +/* ****************************** + * Ah shit, here we go again. * + ****************************** */ + +/*This document is for the FOSC website. +You probably already know that, otherwise you can visit him here "https://fosc.space/"*/ + +/*First, I'm sorry if there's any mistake, I'm not an expert yet.*/ +/*Second, this document is free, so you can see it, use it and modify it as you wish.*/ +/*Finally, the document is divided into parts for better reading.*/ +/*That's all, thank you.*/ + + +/*NECESSARY FONTS*/ +/**********************************************************************************/ + +@font-face { + font-family: nixiefont; + src: url(fonts/NixieOne.ttf); +} + +@font-face { + font-family: AmericanCfont; + src: url(fonts/AmericanC.ttf); +} + +@font-face { + font-family: typermfont; + src: url(fonts/typewcond.otf); +} + +@font-face { + font-family: avenirfont; + src: url(fonts/AvenirCondensed.ttf); +} + +/*GLOBAL ATTRIBUTES*/ +/**********************************************************************************/ + +*{ + padding: 0; + margin: 0; + text-decoration: none; + list-style: none; + box-sizing: border-box; +} + +body, html { + height: 100%; + font-family: "Roboto", Sans-Serif; +} + +body { + background-image: url(img/coreboot2.jpg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + background-color: black; + background-attachment: fixed; +} + +img { + background-image: none; +} + +/*TOP NAVBAR*/ +/**********************************************************************************/ + +nav { + overflow: hidden; + height: 100px; + width: 100%; + position: fixed; + top: 0; + background-color: #000; +} + +label img { + margin: 5px 0px; +} + +label.logo { + color: white; + font-size: 35px; + line-height: 100px; + padding: 0 50px; + font-weight: bold; +} + +nav ul { + float: right; + margin-right: 50px; +} + +nav ul li { + display: inline-block; + line-height: 100px; + margin: 0 5px; +} + +nav ul li a { + color: white; + font-size: 18px; + padding: 7px 13px; + text-transform: uppercase; +} + +nav ul li a i { + margin-right: 10px; +} + +nav ul li a.active, nav ul li a:hover { + border-bottom: 3px solid purple; +} + +.checkbtn { + font-size: 30px; + color: white; + float: right; + line-height: 80px; + margin-right: 40px; + cursor: pointer; + display: none; +} + +#check { + display: none; +} + +/*1 SECTION, WELCOME TO FOSC*/ +/**********************************************************************************/ + +.hero h1 { + text-align: center; + color: white; + font-family: nixiefont; + font-size: 100px; + margin-top: 20%; + +} + +.color { + background: linear-gradient(to top right, purple, blue); + color: white; +} + +.hero h3 { + text-align: center; + color: beige; + font-family: nixiefont; + font-size: 22px; + text-transform: uppercase; + margin-top: 3%; + padding-bottom: 10px; +} + +.hero hr { + height: 3px; + background-color: orange; + width: 500px; + margin-left: auto; + margin-right: auto; + border: none; + margin-top: 10px; +} + +/*2 SECTION, WHAT IS FOSC?*/ +/**********************************************************************************/ + +.fosc { + text-align: center; + background: #111; + width: 100%; + padding: 50px 0px 30px 0px; + height: auto; + margin-top: 20%; +} + +.fosc h1 { + font-size: 120px; + font-family: AmericanCfont; + text-transform: uppercase; + color: white; + margin-left: auto; + margin-right: auto; +} + +.fosc hr { + width: 300px; + height: 3px; + background: aqua; + border: none; + margin-left: auto; + margin-right: auto; + margin-bottom: 20px; +} + +.fosc h3 { + font-family: typermfont; + text-transform: uppercase; + font-size: 28px; + color: beige; +} + +/*3 SECTION, GALLERY FOSC*/ +/**********************************************************************************/ + +.gallery { + display: flex; + flex-wrap: wrap; + padding: 10px 50px 50px 50px; + background: #111; + margin-bottom: 0px; +} + +.column-gallery { + flex: 20%; + max-width: 25%; + padding: 0px 4px; +} + +.column-gallery img { + margin-top: 10px; + vertical-align: middle; + width: 100%; + border: 1px solid white; +} + +.mgallery { + background-color: #111; + text-align: center; + padding-bottom: 50px; +} + +.mgallery h3 { + color: white; + font-family: avenirfont; + font-size: 32px; + padding: 50px 0px; + margin: 0px 100px; +} + +/*4 SECTION, SERVICES*/ +/**********************************************************************************/ + +#services { + padding: 50px 0px; + background-color: #222; +} +.services { + background-color: #222; + padding: 60px 0px 100px 0px; + margin-bottom: 0px; +} + +.services h1 { + text-align: center; + font-size: 80px; + font-family: nixiefont; + text-transform: uppercase; + color: white; + margin-bottom: 60px; +} + +.services p { + margin: 0px 300px; + font-size: 16px; + text-align: justify; + text-transform: uppercase; + color: #888; +} + +.tabla { + display: flex; + padding: 0px; + background-color: #222; + color: white; +} + +.tabla2 { + padding-bottom: 50px; +} + +.column { + color: white; + text-align: center; + background-color: #222; + flex: 30%; + margin: 10px 60px; + +} + +.column h4 { + letter-spacing: 2px; + margin-top: 15px; + font-family: Roboto; + text-transform: uppercase; +} + +.column img { + width: 30%; + margin-top: 10%; +} + +.column img:hover { + filter: grayscale(100%); +} + +/*5 SECTION, MEMBERS*/ +/**********************************************************************************/ + +.members { + background-image: url(img/flp-dark.jpg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + background-attachment: fixed; +} + +.shape { + display: flex; +} + +.cmembers { + flex: 50%; + margin: 100px 50px 50px 50px; + color: white; + font-family: Roboto; + text-transform: uppercase; +} + +.cmembers h4 { + padding-bottom: 0px; + margin-bottom: 10px; + font-size: 24px; +} + +.cmembers hr { + width: 500px; + height: 3px; + background: orange; + margin-left: 0px; + margin-bottom: 30px; + border: none; +} + +.cmembers p { + text-align: justify; +} + +.cmembers span { + background-color: green; +} + +.fa-twitter { + color: #2196f3; + margin-left: 10px; +} + +#mapButton { + background-color: yellow; + color: black; + padding: 10px; + margin: 20px 0px; + text-transform: uppercase; + border: none; + cursor: pointer; +} + +#mapButton:hover { + background-color: purple; + color: white; + transition: 0.5s; +} + +#map { + height: 300px; + width: 700px; +} + +/*FINALLY, FOOTER*/ +/**********************************************************************************/ + +footer { + background-color: #000; + +} + +.foot-logo { + text-align: center; + padding: 30px; +} + +.foot-logo img { + width: 8%; +} + +.foot-logo a { + display: block; + color: white; + margin-top: 20px; + width: 200px; + margin-left: auto; + margin-right: auto; + border-bottom: 2px solid white; + +} + +.foot-logo p { + color: #444; + margin-top: 10px; +} + +.foot-logo p a { + display: inline-block; + border: none; + width: auto; +} + +/*FIX RESPONSIVE WEB DESIGN*/ +/**********************************************************************************/ + +@media only screen and (max-width: 1024px) { + + .checkbtn { + display: block; + margin-top: 10px; + } + + nav { + background-color: #111; + transition: all .5s; + } + + label.logo { + font-size: 30px; + padding-left: 10px; + } + + ul { + position: fixed; + width: 100%; + height: 100%; + background: #222; + margin-top: 20px; + top: 80px; + left: -100%; + text-align: center; + transition: all .5s; + } + + nav ul li { + display: block; + margin: 50px 0; + line-height: 30px; + font-size: 16px; + } + + nav ul li a { + font-size: 20px; + } + + nav ul li a:hover, nav ul li a.active { + background: none; + color: white; + } + + #check:checked ~ ul { + left: 0; + } + + .hero h1 { + font-size: 70px; + } + + .fosc h1 { + font-size: 90px; + } + + .fosc h3 { + font-size: 24px; + margin: 0px 25px; + } + + .services h1 { + font-size: 70px; + } + + .services p { + margin: 25px; + } + + .column img { + width: 50%; + } + + .shape { + flex-direction: column; + padding: 50px 0px; + } + + .cmembers { + margin: 0px; + padding: 0px 25px; + } + + .cmembers2 { + padding-top: 50px; + } + + .cmembers h4 { + font-size: 20px; + } + + .cmembers hr { + width: 200px; + } + +} + +/*RESPOSIVE WEB DESIGN FOR PHONES*/ +/**********************************************************************************/ + +@media only screen and (max-width: 768px) { + + .checkbtn { + display: block; + margin-top: 10px; + } + + nav { + background-color: #111; + transition: all .5s; + } + + label.logo { + font-size: 30px; + padding-left: 10px; + } + + ul { + position: fixed; + width: 100%; + height: 100%; + background: #222; + margin-top: 20px; + top: 80px; + left: -100%; + text-align: center; + transition: all .5s; + } + + nav ul li { + display: block; + margin: 50px 0; + line-height: 30px; + font-size: 16px; + } + + nav ul li a { + font-size: 20px; + } + + nav ul li a:hover, nav ul li a.active { + background: none; + color: white; + } + + #check:checked ~ ul { + left: 0; + } + + .hero { + padding: 30% 0px; + } + + .hero h1 { + font-size: 50px; + text-align: center; + letter-spacing: 3px; + } + + .hero h3 { + font-size: 22px; + margin-top: 30px; + margin-left: 25px; + margin-right: 25px; + } + + .hero hr { + width: 100px; + margin-top: 0px; + } + + .fosc { + padding-bottom: 10px; + } + + .fosc h1 { + font-size: 60px; + } + + .fosc hr { + width: 150px; + } + + .fosc h3 { + font-size: 22px; + margin: 0px 25px; + } + + .bgallery { + background-color: #111; + } + + .gallery { + padding: 10px; + margin-left: 10px; + margin-right: 10px; + } + + .column-gallery { + padding: 0px 2px; + } + + .column-gallery img { + margin-top: 2px; + } + + .mgallery { + background-color: #111; + text-align: center; + padding-bottom: 50px; + } + + .services { + padding: 50px 0px 50px 0px; + } + + .mgallery h3 { + font-size: 22px; + padding: 30px 0px 0px 0px; + margin: 0px 25px; + } + + .services h1 { + font-size: 40px; + margin-bottom: 30px; + } + + .services p { + text-align: justify; + margin: 0px 25px; + } + + .column { + padding: 0px; + margin: 0px; + } + + .column img { + width: 35%; + margin: 0px; + padding-top: 30px; + } + + .column h4 { + font-size: 18px; + + } + + .tabla2 { + padding-bottom: 50px; + } + + .shape { + flex-direction: column; + padding: 50px 0px; + } + + .cmembers { + margin: 0px; + padding: 0px 25px; + + } + + .cmembers2 { + padding-top: 50px; + } + + .cmembers h4 { + font-size: 20px; + + } + + .cmembers hr { + width: 200px; + } + + #map { + width: 300px; + margin-top: 10px; + } + + .foot-logo img { + width: 25%; + } + + .foot-logo p { + margin-top: 20px; + } + + .foot-logo p a { + margin: 0px; + } + +} + + + + diff --git a/fonts/AmericanC.ttf b/fonts/AmericanC.ttf new file mode 100644 index 0000000..bc53cb7 Binary files /dev/null and b/fonts/AmericanC.ttf differ diff --git a/fonts/AvenirCondensed.ttf b/fonts/AvenirCondensed.ttf new file mode 100644 index 0000000..763366c Binary files /dev/null and b/fonts/AvenirCondensed.ttf differ diff --git a/fonts/NixieOne.ttf b/fonts/NixieOne.ttf new file mode 100644 index 0000000..cab3136 Binary files /dev/null and b/fonts/NixieOne.ttf differ diff --git a/fonts/typewcond.otf b/fonts/typewcond.otf new file mode 100644 index 0000000..b7b6f55 Binary files /dev/null and b/fonts/typewcond.otf differ diff --git a/icons/analytics.png b/icons/analytics.png new file mode 100644 index 0000000..2fb6780 Binary files /dev/null and b/icons/analytics.png differ diff --git a/icons/book.png b/icons/book.png new file mode 100644 index 0000000..a55ded2 Binary files /dev/null and b/icons/book.png differ diff --git a/icons/cloud-computing.png b/icons/cloud-computing.png new file mode 100644 index 0000000..a38ccaf Binary files /dev/null and b/icons/cloud-computing.png differ diff --git a/icons/files.png b/icons/files.png new file mode 100644 index 0000000..d54e2c6 Binary files /dev/null and b/icons/files.png differ diff --git a/icons/gitea.png b/icons/gitea.png new file mode 100644 index 0000000..682ceaf Binary files /dev/null and b/icons/gitea.png differ diff --git a/icons/rss2.png b/icons/rss2.png new file mode 100644 index 0000000..a23965c Binary files /dev/null and b/icons/rss2.png differ diff --git a/img/Logo-invert-192.png b/img/Logo-invert-192.png new file mode 100644 index 0000000..e8f4a8c Binary files /dev/null and b/img/Logo-invert-192.png differ diff --git a/img/Logo-invert-300.png b/img/Logo-invert-300.png new file mode 100644 index 0000000..f155afc Binary files /dev/null and b/img/Logo-invert-300.png differ diff --git a/img/Logo-invert-92.png b/img/Logo-invert-92.png new file mode 100644 index 0000000..275412c Binary files /dev/null and b/img/Logo-invert-92.png differ diff --git a/img/Logo-invert.png b/img/Logo-invert.png new file mode 100644 index 0000000..200364f Binary files /dev/null and b/img/Logo-invert.png differ diff --git a/img/app.JPG b/img/app.JPG new file mode 100644 index 0000000..465e118 Binary files /dev/null and b/img/app.JPG differ diff --git a/img/atresmedia.jpg b/img/atresmedia.jpg new file mode 100644 index 0000000..31c826e Binary files /dev/null and b/img/atresmedia.jpg differ diff --git a/img/bitup.jpg b/img/bitup.jpg new file mode 100644 index 0000000..78a2099 Binary files /dev/null and b/img/bitup.jpg differ diff --git a/img/coreboot2.jpg b/img/coreboot2.jpg new file mode 100644 index 0000000..f311dd9 Binary files /dev/null and b/img/coreboot2.jpg differ diff --git a/img/flp-dark.jpg b/img/flp-dark.jpg new file mode 100644 index 0000000..9fafc74 Binary files /dev/null and b/img/flp-dark.jpg differ diff --git a/img/flp1.jpg b/img/flp1.jpg new file mode 100644 index 0000000..81ff80d Binary files /dev/null and b/img/flp1.jpg differ diff --git a/img/fosc2.jpg b/img/fosc2.jpg new file mode 100644 index 0000000..05dea1b Binary files /dev/null and b/img/fosc2.jpg differ diff --git a/img/hacking.jpg b/img/hacking.jpg new file mode 100644 index 0000000..2f3fd72 Binary files /dev/null and b/img/hacking.jpg differ diff --git a/img/junction2018-1.jpg b/img/junction2018-1.jpg new file mode 100644 index 0000000..8e458f0 Binary files /dev/null and b/img/junction2018-1.jpg differ diff --git a/img/junction2018.jpg b/img/junction2018.jpg new file mode 100644 index 0000000..3589141 Binary files /dev/null and b/img/junction2018.jpg differ diff --git a/img/junction2019-1.jpg b/img/junction2019-1.jpg new file mode 100644 index 0000000..5743edc Binary files /dev/null and b/img/junction2019-1.jpg differ diff --git a/img/junction2019.jpg b/img/junction2019.jpg new file mode 100644 index 0000000..b9953fb Binary files /dev/null and b/img/junction2019.jpg differ diff --git a/img/kids.JPG b/img/kids.JPG new file mode 100644 index 0000000..fb3c6e2 Binary files /dev/null and b/img/kids.JPG differ diff --git a/img/kids1.JPG b/img/kids1.JPG new file mode 100644 index 0000000..0da1159 Binary files /dev/null and b/img/kids1.JPG differ diff --git a/img/nn.jpg b/img/nn.jpg new file mode 100644 index 0000000..defebe7 Binary files /dev/null and b/img/nn.jpg differ diff --git a/img/nn1.jpg b/img/nn1.jpg new file mode 100644 index 0000000..3305a5e Binary files /dev/null and b/img/nn1.jpg differ diff --git a/img/pepemod.jpg b/img/pepemod.jpg new file mode 100644 index 0000000..e8b3a4e Binary files /dev/null and b/img/pepemod.jpg differ diff --git a/img/pepemod1.jpg b/img/pepemod1.jpg new file mode 100644 index 0000000..a1d276e Binary files /dev/null and b/img/pepemod1.jpg differ diff --git a/img/printer3d.JPG b/img/printer3d.JPG new file mode 100644 index 0000000..2a3dad8 Binary files /dev/null and b/img/printer3d.JPG differ diff --git a/img/santi.jpg b/img/santi.jpg new file mode 100644 index 0000000..67b4565 Binary files /dev/null and b/img/santi.jpg differ diff --git a/img/sec.jpg b/img/sec.jpg new file mode 100644 index 0000000..ab533bc Binary files /dev/null and b/img/sec.jpg differ diff --git a/img/soldadura.jpg b/img/soldadura.jpg new file mode 100644 index 0000000..0c78617 Binary files /dev/null and b/img/soldadura.jpg differ diff --git a/img/soldadura1.jpg b/img/soldadura1.jpg new file mode 100644 index 0000000..ce5f59d Binary files /dev/null and b/img/soldadura1.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..e705181 --- /dev/null +++ b/index.html @@ -0,0 +1,193 @@ + + + + + + + + + + + + + + + + + + + + + + + + FOSC - Free Open Source Club + + + +
+ +
+ + +
+

Welcome to FOSC

+

Hackerspace located at Polytechnic University of Cartagena

+
+
+ +
+

What is FOSC?

+
+

We are a student association focused on expanding free software and hacker culture

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

Development of free software projects, realization of courses of various technologies, maintenance of a server to provide services both inside and outside the association, dissemination of talks, job offers and any other information of interest to the partners.

+
+ +
+
+

OUR SERVICES

+

Formal members are stored in our member database and have access to the multitude of services we provide. Check out our list of services below. Additionally, the tools and materials in the space are available for you to hack and mess with.

+
+ +
+
+ + Cloud + +

Cloud

+
+ +
+ + Wiki + +

Wiki

+
+ +
+ + RSS + +

RSS

+
+
+ +
+
+ + NetData + +

NetData

+
+ +
+ + Analytics + +

Analytics

+
+ +
+ + Gitea + +

Stolen Code

+
+
+
+ +
+
+
+

How do I become a member?

+
+

You become a member by either coming to our physical hackerspace often, or patronizing it.

+ If the lights are on, you are free to come and hack inside.

+ Even if you are not a member you are welcome to come in anytime.

+ Becoming a member is less of a legal process and more of a trust process, there is no way to become a member without being accepted by others in the group.

+ If you've been coming a lot to the space, it's likely that you will be asked to become a formal member.

+
+ +
+

We're looking for new members, students are specially welcome

+
+ + + +
+ +
+ +
+ +
+
+
+
+ + + + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..bcdc72a --- /dev/null +++ b/js/main.js @@ -0,0 +1,54 @@ +function loadMap() { + var site = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1580.5054989176758!2d-0.9796837724532329!3d37.60190018337746!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd6341863c83cf8f%3A0xe24278be476b56b8!2sFOSC!5e0!3m2!1ses!2ses!4v1544058887076"; + document.getElementById('map').src = site; +} + +document.addEventListener("DOMContentLoaded", function() { + var lazyloadImages; + + if ("IntersectionObserver" in window) { + lazyloadImages = document.querySelectorAll(".lazy"); + var imageObserver = new IntersectionObserver(function(entries, observer) { + entries.forEach(function(entry) { + if (entry.isIntersecting) { + var image = entry.target; + image.src = image.dataset.src; + image.classList.remove("lazy"); + imageObserver.unobserve(image); + } + }); + }); + + lazyloadImages.forEach(function(image) { + imageObserver.observe(image); + }); + } else { + var lazyloadThrottleTimeout; + lazyloadImages = document.querySelectorAll(".lazy"); + + function lazyload () { + if(lazyloadThrottleTimeout) { + clearTimeout(lazyloadThrottleTimeout); + } + + lazyloadThrottleTimeout = setTimeout(function() { + var scrollTop = window.pageYOffset; + lazyloadImages.forEach(function(img) { + if(img.offsetTop < (window.innerHeight + scrollTop)) { + img.src = img.dataset.src; + img.classList.remove('lazy'); + } + }); + if(lazyloadImages.length == 0) { + document.removeEventListener("scroll", lazyload); + window.removeEventListener("resize", lazyload); + window.removeEventListener("orientationChange", lazyload); + } + }, 20); + } + + document.addEventListener("scroll", lazyload); + window.addEventListener("resize", lazyload); + window.addEventListener("orientationChange", lazyload); + } +}) \ No newline at end of file