From 40aecef67731a7d6e978147dc5709ed2486899f8 Mon Sep 17 00:00:00 2001 From: Ayush Aryan Date: Wed, 27 May 2020 11:18:32 +0530 Subject: [PATCH 1/5] Changed and properly arranged the HTML and CSS file -Ayush --- assets/css/index.css | 338 +++++++++++++++--------------- index.html | 476 ++++++++++++++++++------------------------- 2 files changed, 367 insertions(+), 447 deletions(-) diff --git a/assets/css/index.css b/assets/css/index.css index 6d9e32f..d0e293e 100755 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -1,149 +1,186 @@ @import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@352&display=swap"); - -html, -body { +html,body { height: 100%; width: 100%; - /*background: #1E2249;*/ + background: #ffeafc; font-family: "Josefin Sans", sans-serif; - scroll-behavior: smooth; + overflow-x:hidden; +} +@media(max-width:786px){ + html{ + overflow-x:hidden; + } +} +/*NAVBAR CSS*/ +.navbar-light .navbar-nav .nav-link { + opacity: 1; + font-size: 1.313em; + font-family: 'Kanit', sans-serif; + color: #defff9; } .navbar { background-color: #fff; - padding: 0.8% 0%; + padding: 1% 2%; font-size: 1.2em; + overflow: hidden!important; } -.navbar-brand { - min-height: 55px; - padding: 0 15px 5px; - margin-top: -6px; +.navbar-default,.navbar-nav li a { + color: black; } -.navbar-default, -.navbar-nav li a { - color: #d5d5d5; +.navbar-text{ + padding: 5px; + margin: 0; + text-align: center; + color: red; } -.navbar-default, -.navbar-nav li a:hover, -.navbar-default, -.navbar-nav li a:active { - color: #fff; +#logo{ + height: 55px ; + width: 55px; + padding: 5px; + margin: 0; } -#home { - /*padding-top: 50px;*/ - background: url("../img/back.png") no-repeat center fixed; - display: table; - height: 100%; - position: relative; - width: 100%; - background-size: cover; +@media(max-width:786px){ + #landing-text{ + font-size:18vw!important; + text-align: center; + } } -.landing-text { - display: table-cell; +.heading { text-align: center; - vertical-align: middle; -} - -.landing-text h1 { - font-size: 500%; - font-weight: 700; -} - -.lead { - text-align: justify; } - -.row { - margin-top: 15px; - padding-bottom: 2px; +/*HOME CSS*/ +#home { + background: url("../img/back.png"); + background-repeat: no-repeat; + background-size: cover; + background-position: center center; + background-attachment: fixed; + display:flex; + justify-content:center; + align-items:center; + height: 100%; + width: 100%; + margin-top:55px; + padding: 0; +} +#landing-text{ + color:#eee; + display:flex; + flex-direction:column; + justify-content:center; + align-items:center; + font-size: 10vw; + font-weight: 700; + text-transform: none; + margin-top:0; + text-shadow: 0px 4px 3px rgba(0,0,0,0.4), + 0px 8px 13px rgba(0,0,0,0.1), + 0px 18px 23px rgba(0,0,0,0.1); + } +#links{ + display: flex; + flex-wrap:no; + justify-content:space-between; + width:400px; } - -.section-text { - text-anchor: middle; +#links a{ + flex:1 1 100px; + margin:0 5px; } -.padding { - width: 100%; - padding: 25px 2px 2px; +/*HIGHLIGHTS CSS*/ +#highlight{ + flex-direction:column; } - -.padding img { - width: 100%; +#main-highlight-div{ + display:flex; + flex-wrap:wrap; + justify-content:space-around; } - -#highlight { - padding-top: 20px; - padding-bottom: 10px; +.highlight-child{ + flex:0 1 300px; } - -#prev { - padding-top: 5px; +/*ARCHIVES CSS*/ +#archives{ + display:flex; + flex-direction: column; } - -#flexCount { - display: flex; - flex-wrap: wrap; +#main-archives-div{ + display:flex; + flex-wrap:wrap; + justify-content:space-around; } - -#countdown { - padding-top: 50px; - padding-bottom: 80px; +.archives-child{ + flex:0 1 500px; } - -#flexTimer { - flex: 1; +/*SPEAKERS CSS*/ +#speakers{ + display:flex; + flex-direction: column; } - -.sidebar { - flex: 1; - margin-left: 20px; +#main-speakers-div{ + display:flex; + flex-wrap:wrap; + justify-content:space-around; } - -.main { - flex: 1; +.speakers-child{ + flex-basis: min-content; } - -.contributor { +.speakers-picture { + height: 300px; + width: 520px; display: flex; + flex-direction: row; flex-wrap: wrap; - justify-content: space-around; - align-items: flex-start; + padding: 5px; + background: #bfecf0; +} +.speakers-picture img { + border-radius: 2%; + margin: 4px; + filter: grayscale(30%); + transition: all 0.7s ease; + transform: scale(1); +} +.speakers-picture img:hover { + transform: scale(1.15); + transition: transform 0.3s ease-in-out; + filter: grayscale(0%); + padding-bottom: 15px; +} +/*VOLUNTEERS CSS*/ +#volunteers{ + display:flex; + flex-wrap:wrap; + justify-content:space-around; +} +#top-contributor{ + flex:1 1 300px!important; + display:flex; + flex-direction:column; + justify-content:flex-start; + align-items:center; +} +#top-contributor-child{ + display:flex; + flex-wrap:wrap; +} + +#volunteers .volunteers-child:nth-of-type(2){ + flex:3 1 500px!important; +} +.volImg{ + max-width:100%; } - -#links { - list-style: none; -} - -.fa { - font-size: 25px; - margin-right: 10px; - color: #FD423D; -} -.fa:hover { - color: #d5d5d5; - text-decoration: none; -} - -.fa-ul li a{ - display: inline-block; - margin-top: 8px; - text-align: center; -} - -#flexVolunteer { - flex: 2; -} - .overlay { - position: absolute; - bottom: 0; + position: relative; background: rgb(0, 0, 0); - background: rgba(0, 0, 0, 0.5); /* Black see-through */ color: #f1f1f1; width: 100%; transition: 0.5s ease; @@ -153,68 +190,33 @@ body { padding: 20px; text-align: center; } - -#flexVolunteer:hover .overlay { +#group-volunteers:hover .overlay { opacity: 1; - text-transform: capitalize; -} - -footer { - width: 100%; - background-color: #1e2249; - padding: 5% 5% 10% 5%; - color: white; } - -.love { +/*FOOTER CSS*/ +#footer{ + display:flex; + flex-wrap:wrap; + background:#1e2249; + min-height:300px; + max-height:500px; + color:white; +} +#footer .footer-child{ + flex:1 1 300px; + display:flex; + flex-direction:column; + align-items:center; + justify-content:center; + +} +#footer .footer-child:nth-of-type(2){ + justify-content:space-around; +} +#footer .footer-child a{ + padding: 10px; text-align: center; - font-size: 20px; -} - -.icon { - max-width: 200px; } - -.add { +#footer .footer-child span { text-align: center; - font-size: 15px; -} -/*@media (max-width: 767px) {*/ -@media (max-width: 768px) { - .navbar-brand { - height: 30px; - width: 30px; - } - .navbar-text{ - display: block; - margin:15px 100px; - text-align: center; - } - .landing-text h1 h3 h4 { - font-size: 300%; - } - .icon { - margin-top: -2%; - margin-bottom: -3%; - height: 30%; - width: 30%; - } - #flexCount { - flex-direction: column; - float: left; - } - #flexVolunteer { - padding-top: 10%; - } - .love { - text-align: center; - font-size: 13px; - margin-top: -30px; - } - footer { - width: 100%; - background-color: #1e2249; - padding: 2% 2% 5% 2%; - color: white; - } -} +} \ No newline at end of file diff --git a/index.html b/index.html index 808cd0e..e010703 100755 --- a/index.html +++ b/index.html @@ -1,326 +1,244 @@ - Welcome to Git Commit Show - - - - + + + + + - - - - + + - - - - + +
-
+

Git Commit Show

World's Largest Online Developer Conference

#RemoteWork #EqualOpportunity #FutureOfWork

Event happens in:

- Support Us - Volunteer - CFP +
- - -
-
-
-
-

Highlights Git Commit Show 2019

-
- - -
-
-

- Daniel Stenberg - Author of cURL. -

-

+ + +

+

Highlights Of Git Commit Show 2019

 +
+
+ +

Daniel Stenberg - Author of cURL.

+

Daniel has been open sourced cURL in 1998. Now, cURL is installed on almost every computer device(4b+) on the earth today. Here's his advice on how things have changed in open source and how to go about with new open source project.

-
-
-
-
- -
-
-
-

Sandeep Giri - Founder of CloudxLab.com

-

Sandeep Giri talks about features, labels & instances as key blocks for ML.

-
-
- -
-
-

3D Mouse

-

A young developer showcased howa mobile device can be caliberated to be used as a 3D Mouse.

-
-
- + +
+
+ +

Sandeep Giri - Founder of CloudxLab.com

+

+ Sandeep Giri talks about features, labels & instances as key blocks for ML. +

+ +
+
+ +

3D Mouse

+

+ A young developer showcased howa mobile device can be caliberated to be used as a 3D Mouse. +

+
-
-
- - -
-
-
-
-

Archives

- + +
+

Archives

 +
+
+ +

Masterclass by Gaurav, PM at Google AI

+

+ AI for everyday things - present and future of AI in our daily life

-

+ +

+
+ +

Masterclass by Daniel, author of cURL

+

Learn how cURL rose from nothing to a huge success directly from it's author, Daniel. Daniel has been programming & contributing to open source since 1985.

-
- --> +
-
- -
-
-
-

Masterclass by Gaurav, PM at Google AI

-

AI for everyday things - present and future of AI in our daily life

-
-
- -
-
-

- Masterclass by Daniel, author of cURL -

-

- Learn how cURL rose from nothing to a huge success directly from it's author, Daniel. Daniel has been - programming & contributing to open source since 1985. -

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

Previous Speakers

-
- +
+ + +
+

Previous Speakers

 +
+
+
+
-
-

- 📱 If you use Android/Linux/iPad/Windows/macOS/Tesla, cURL is + +

Daniel Stenberg

+

+ If you use Android/Linux/iPad/Windows/macOS/Tesla, cURL is installed on it already. In fact, it's installed on almost every computer device(4b+) on the earth today. Learn how it rose from nothing to this huge success, directly from this open source - project's author, Daniel. + project's author, Daniel

-

- 🎬 This talk was recorded during Masterclass session at Git +

+ This talk was recorded during Masterclass session at Git Commit Show 2019.

+ +
+
+
+
-
-
-
- -
-
-
-

Sandeep Giri

-

Sandeep Giri is the Founder of CloudxLab

-
-
- -
-
-

Cofounder and Ex-CTO InMobi

-

Mohit Saxena is the Cofounder and Ex-CTO of InMobi

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

Top Contributor

-

-

- This week's top contributor is Parth Krishna aka thenerdsuperuser. + +

Sandeep Giri

+

+ Sandeep Giri is the Founder of CloudxLab

- - -
-
- - Top Contributor -
- - - -
-
- - -
- Check out the volunteers! -
Check this out and Join Us!
+ +
+
+
+
+ +

Mohit Saxena

+

+ Cofounder and Ex-CTO InMobi +

+

+ Mohit Saxena is the Cofounder and Ex-CTO of + InMobi

+

+
+
+ + +
+
+

Top Contributor

 + +

+ This week's top contributor is Parth Krishna aka thenerdsuperuser. +

+ +
+ + Top Contributor + +
+

Parth Krishna

+ +
-
- -
+ + + + + + + + + + + + - - + \ No newline at end of file From 98f35d0ffabac9e2d86c01c26dfbb3e1c8b7eeaa Mon Sep 17 00:00:00 2001 From: Ayush Aryan Date: Thu, 28 May 2020 22:59:03 +0530 Subject: [PATCH 2/5] Made changes to navbar and made it responsive --- assets/css/index.css | 112 +++++++++++++++++++++++++++++++---------- assets/js/countdown.js | 19 ++++++- index.html | 24 +++++---- 3 files changed, 116 insertions(+), 39 deletions(-) diff --git a/assets/css/index.css b/assets/css/index.css index d0e293e..1f28165 100755 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -1,60 +1,119 @@ @import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@352&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@500&display=swap'); html,body { height: 100%; width: 100%; background: #ffeafc; font-family: "Josefin Sans", sans-serif; overflow-x:hidden; + position: relative; } @media(max-width:786px){ html{ overflow-x:hidden; } -} +} /*NAVBAR CSS*/ -.navbar-light .navbar-nav .nav-link { +@media all and (min-width:566) and (max-width:990px) { + .navbar-text { + display: inline-block; + padding-top: 1.5rem; + font-size: 2.5em; + text-align: center; + } + #logo { + padding: 0 ; + height: 65px ; + width: 65px ; + } +} + +@media all and (min-width:991px) { + .navbar-text{ + text-align: center ; + } +} +@media all and (min-width:450px) and (max-width:565px) { + .navbar-text { + display: inline-block; + padding-top: 1rem !important; + font-size: 1.3em !important; + text-align: center !important; + } + #logo{ + padding: 5px !important; + height: 50px !important; + width: 50px !important; + } + .fixed-top{ + margin: 0px ; + padding-right: 15px; + text-align: center; + + } +} +@media all and (min-width:100px) and (max-width:449px) { + .navbar-text { + display: inline-block; + padding-top: 1rem !important; + font-size: 1em !important; + text-align: center !important; + } + #logo{ + height: 50px !important; + width: 50px !important; + } + .fixed-top{ + margin: 0px !important; + padding-right: 15px !important; + text-align: center !important; + } +} +.navbar-light{ + background-color:#fdfdfd; +} +.navbar-text { + padding-top: 0.8em; + font-size: 2em; + color: #bb095c; + font-family: 'Kanit', sans-serif; + +} +.fixed-top{ + margin-right: 17px; +} + +.navbar-nav .nav-link { opacity: 1; font-size: 1.313em; - font-family: 'Kanit', sans-serif; + font-family: "Josefin Sans", sans-serif; color: #defff9; } - .navbar { - background-color: #fff; - padding: 1% 2%; - font-size: 1.2em; - overflow: hidden!important; + padding: 0rem 1rem; } -.navbar-default,.navbar-nav li a { - color: black; +#logo { + height: 60px; + width: 60px; + margin: 5px; } -.navbar-text{ - padding: 5px; - margin: 0; +.heading { text-align: center; - color: red; } - -#logo{ - height: 55px ; - width: 55px; - padding: 5px; - margin: 0; +#nav-ul{ + font-size: 0.7em; + font-weight: bold; + padding-top: 0.5em; } - +/*HOME CSS*/ @media(max-width:786px){ #landing-text{ font-size:18vw!important; text-align: center; } } - -.heading { - text-align: center; -} -/*HOME CSS*/ #home { background: url("../img/back.png"); background-repeat: no-repeat; @@ -66,7 +125,6 @@ html,body { align-items:center; height: 100%; width: 100%; - margin-top:55px; padding: 0; } #landing-text{ diff --git a/assets/js/countdown.js b/assets/js/countdown.js index c017d83..2d8d6f6 100644 --- a/assets/js/countdown.js +++ b/assets/js/countdown.js @@ -1,3 +1,20 @@ +// Adding active class to navbar elements +var container = document.getElementById("nav-ul"); +var btns = container.getElementsByClassName("nav-item"); +for (var i = 0; i < btns.length; i++) { + btns[i].addEventListener("click", function() { + var current = document.getElementsByClassName("active"); + + // If there's no active class + if (current.length > 0) { + current[0].className = current[0].className.replace(" active", ""); + } + + // Add the active class to the current/clicked button + this.className += " active"; + }); +} +// -----Countdown function----- // Set the date we're counting down to var countDownDate = new Date("Jun 27, 2020 10:00:00").getTime(); @@ -25,4 +42,4 @@ var x = setInterval(function () { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; } -}, 1000); +}, 1000); \ No newline at end of file diff --git a/index.html b/index.html index e010703..bca5197 100755 --- a/index.html +++ b/index.html @@ -1,29 +1,29 @@ - + Welcome to Git Commit Show - - + + -