diff --git a/css/styles1.css b/css/styles1.css index d39b6bb..d28c98a 100644 --- a/css/styles1.css +++ b/css/styles1.css @@ -26,11 +26,11 @@ a:hover{ } h1{ - font-family: 'Righteous', cursive; - font-size: 4rem; - font-weight: bold; - margin:20% 0 1rem 3rem; - line-height: 1.5; + font-family: 'Righteous', cursive; + font-size: 3rem; + font-weight: bold; + margin:20% 0 1rem 3rem; + line-height: 1.5; } h2{ font-family: 'Righteous', cursive; @@ -54,8 +54,69 @@ h5{ padding: 5%; } +/* Banner */ +.banner { + min-height: 400px; + margin: 0; + overflow: hidden; +} + +.banner__header { + margin: 0; +} + +@media (max-width: 480px) { + .banner { + min-height: auto; + } + .banner__header { + text-align: center; + } +} + +/* About */ +.about { + display: grid; + grid-template-columns: 1fr 1fr; + max-width: 1400px; + margin: 0 auto; + align-items: center; + padding: 25px 15px; +} + +.about__wrapper { + padding: 0 15px; +} + +.about__title { + color: #5e90e0; + font-size: 35px; + font-weight: bold; + font-family: 'Baloo Da 2', cursive; + display: inline-block; + margin: 0 10px; +} + +.about__title-wrapper { + display: flex; + align-items: center; +} -/*about*/ +.about__description { + color: #000; +} + +.about__img { + height: 320px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 15px; +} + +.about__img img { + height: 100%; +} h2.abt{ text-align:center; @@ -65,8 +126,6 @@ h2.abt{ } - - .a1{ font-family: Georgia, serif; word-spacing: 1px; @@ -78,29 +137,29 @@ h2.abt{ font-size: 20px; } + .a3{ -word-spacing: 1px; + word-spacing: 1px; font-family:Georgia, serif ; line-height: 2rem; text-align: justify; padding: 1% 12.5% 0 15%; - margin:auto; - - + margin: auto; color: black; font-size: 20px; - } + .a2{ -font-family: Georgia, serif; -word-spacing: 1px; -line-height: 2rem; -text-align: justify; -margin: auto; -padding: 1% 12.5% 0 15%; -color: black; + font-family: Georgia, serif; + word-spacing: 1px; + line-height: 2rem; + text-align: justify; + margin: auto; + padding: 1% 12.5% 0 15%; + color: black; font-size: 20px; } + .a4{ text-align: center; margin-top: 2%; @@ -113,59 +172,51 @@ color: black; font-weight: 1500; } - #para3 { +#para3 { font-size: 35px; font-weight: 1400; } +.cabt { + width: 35%; + height: 2px; + background-color: grey; + position: relative; + margin: auto; +} - .cabt{ - width: 35%; - height: 2px; - background-color: grey; - position: relative; - margin: auto; - +#circle { + display: inline-block; + vertical-align: middle; + width: 20px; + height: 20px; + background-color: white; + border: solid 2px grey; + border-radius: 90%; + position: absolute; + top: -9px; + left: calc(50% - 5px); +} +@media (max-width: 480px) { + .about { + grid-template-columns: 1fr; } - #circle { - display: inline-block; - vertical-align: middle; - width: 20px; - height: 20px; - background-color: white; - border: solid 2px grey; - border-radius: 90%; - position: absolute; - top: -9px; - left: calc(50% - 5px); - + .about__hackathon { + order: 2; } + .img__hackathon { + order: 1; + } +} - - - - - - - - - - - - - - - -/* header */ +/* Header */ .navbar { - font-family: 'Comfortaa', cursive; + font-family: 'Comfortaa', cursive; margin-bottom: 0; background-color: #0a0a07 ; border: 0; font-size: 15px ; - /*font-weight: bold;*/ - /*letter-spacing:3px;*/ opacity: 0.9; } .navbar-brand{ @@ -245,6 +296,7 @@ color: black; + /* title */ .quotes{ @@ -309,21 +361,20 @@ color: black; } .image{ + width: 100%; height: 100%; position: absolute; } -.roww{ +.roww { padding-bottom: 12%; flex-wrap: wrap; display: flex; margin-right: 124px; -margin-left: -22px; + margin-left: -22px; } -/* motivation */ - - +/* Motivation */ #info{ background-color:#FFF; text-align: center; @@ -332,20 +383,19 @@ margin-left: -22px; z-index:1; } - @media (max-width:995px) { - #title{ - text-align: center; - } +@media (max-width:995px) { + #title{ + text-align: center; + } .image{ width:100%; position: static; transform: rotate(0); padding:10% 10% 10% 10%; - - - } } +} + .p{ color: black; letter-spacing: 2px; @@ -466,7 +516,14 @@ textarea { /* footer */ - +#bottom { + position: relative; +} +.footer-wave { + position: absolute; + bottom: 0; + overflow: hidden; +} footer { background-color: #2d2d30; color: #f5f5f5; @@ -536,9 +593,14 @@ li > p:hover{ flex-wrap: wrap; } +.flexdisplay .container-fluid { + display: flex; + align-items: center; + padding: 40px 15px; +} + .newsletter{ margin-left: 50%; - } .newsletter h3{ @@ -548,9 +610,9 @@ li > p:hover{ } input{ - border-radius: 30px; - min-width: 260px; - text-align: center; + border-radius: 30px; + min-width: 260px; + text-align: center; } .send{ @@ -571,10 +633,7 @@ input{ } .footer-end{ - /*margin-left: 40%;*/ padding-left: 50%; - /*padding-right: 50%;*/ - } .scrollup{ @@ -590,6 +649,13 @@ input{ color: white; margin-top: 15px; } + +@media (max-width: 480px) { + .flexdisplay .container-fluid { + padding: 30px 0; + } +} + /*content*/ p{ @@ -643,7 +709,6 @@ p{ background-color: yellow !important; } - #scroll{ display: none; position: fixed; @@ -672,7 +737,7 @@ p{ } -@media (max-width:570px){ +@media (max-width:570px) { #bottom{ padding-top: 2rem; } @@ -687,4 +752,11 @@ p{ .footer-p{ margin-bottom: 0.5rem; } + + +@media (max-width: 480px) { + .footer-wave { + display: none; + } + } \ No newline at end of file diff --git a/index.html b/index.html index da74094..6bbcdae 100644 --- a/index.html +++ b/index.html @@ -14,10 +14,9 @@ - Open-Source Events & Hackathon's + Open-Source Events & Hackathons - @@ -27,6 +26,7 @@ + @@ -115,8 +115,11 @@

+
+ os-image
+
@@ -137,28 +140,57 @@

-
-
-
-
-
-
-

Hackathon

 -

A hackathon (also known as a hack day, hackfest or codefest; a - portmanteau of hacking marathon) is a design sprint-like event; often, in which computer programmers and - others involved in software development, including graphic designers, interface designers, project managers, - domain experts, and others collaborate intensively on software projects.

-

The goal of a hackathon is to create functioning software or hardware by the end of the event. - Hackathons tend to have a specific focus, which can include the programming language used, the operating - system, an application, an API, or the subject and the demographic group of the programmers

+
+

+ “When you don't create things, you become defined by your tastes rather than ability. + Your tastes only narrow & exclude people. so create.” +

+
+ +
+
+
+
+
+
+ +

Open Source

+
+

+ The term open source refers to something people can modify and share because its design is + publicly accessible.
+ The term originated in the context of software development to designate a specific approach to + creating computer programs. Today, however, "open source" designates a broader set of values—what we + call "the open source way." Open source projects, products, or initiatives embrace and celebrate + principles of open exchange, collaborative participation, rapid prototyping, transparency, meritocracy, and + community-oriented development. +

+
-
+
-
- +
+
+
+
+ +

Hackathon

+
+

+ A hackathon (also known as a hack day, hackfest or codefest; a + portmanteau of hacking marathon) is a design sprint-like event; often, in which computer programmers and + others involved in software development, including graphic designers, interface designers, project managers, + domain experts, and others collaborate intensively on software projects. + The goal of a hackathon is to create functioning software or hardware by the end of the event. + Hackathons tend to have a specific focus, which can include the programming language used, the operating + system, an application, an API, or the subject and the demographic group of the programmers +

+
+
+
@@ -622,39 +654,34 @@
December
-








- - - - - - - - - - - - - - - - - - - - - - - -