diff --git a/frontend/css/color.txt b/frontend/css/color.txt new file mode 100644 index 0000000..5f5bd2b --- /dev/null +++ b/frontend/css/color.txt @@ -0,0 +1,10 @@ +grey:#555; (font color) +red:#e74c3c,rgba(231, 76, 60,1.0), +orange:#e67e22,rgba(230, 126, 34,1.0) + +Colors according to logo +orange : ##fdad15 rgb(253, 173, 21) +red : #b10e16, rgb(177, 14, 22) + + + diff --git a/frontend/css/img/binary.jpg b/frontend/css/img/binary.jpg new file mode 100644 index 0000000..e890bf7 Binary files /dev/null and b/frontend/css/img/binary.jpg differ diff --git a/frontend/css/img/robomaze.png b/frontend/css/img/robomaze.png new file mode 100644 index 0000000..6896253 Binary files /dev/null and b/frontend/css/img/robomaze.png differ diff --git a/frontend/css/img/rocket.jpg b/frontend/css/img/rocket.jpg new file mode 100644 index 0000000..90df924 Binary files /dev/null and b/frontend/css/img/rocket.jpg differ diff --git a/frontend/css/main.css b/frontend/css/main.css index a0c2b66..d657772 100644 --- a/frontend/css/main.css +++ b/frontend/css/main.css @@ -92,3 +92,53 @@ body { } /* Events end */ +/************************************ +Base +**************************************/ + +*{ + margin:0; + padding: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +html, +body{ + background-color: #fff; + color:#555; + font-family: 'Muli', sans-serif; + font-size: 16px; + text-rendering: optimizeLegibility; + font-weight: 300; + overflow-x: hidden; +} + +::selection{ + background-color: #b10e16; + color: #fdad15; +} + +/*************************************** +Headings +****************************************/ +#content{ + position: relative; +} + +#content_head{ + position: absolute; + left: 50%; + transform: translateX(-50%); + text-transform: uppercase; + font-size: 200px; + text-align: center; + font-weight: 600; + letter-spacing: 2px; + padding: 0px 120px; + display: inline-block; + margin: 60px auto; + color: #f4f4f4; + outline: 10px solid #f4f4f4; + outline-offset: 20px; +} diff --git a/frontend/css/news.css b/frontend/css/news.css new file mode 100644 index 0000000..1378f84 --- /dev/null +++ b/frontend/css/news.css @@ -0,0 +1,367 @@ +*{ + z-index: 10; +} + +*::before{ + z-index: 0; +} +html,body{ + color:#f4f4f4; + font-size: 62.5%;/*1rem = 10px*/ +} + + +#content_text div:nth-child(1){ + display: none; +} +#content_text div:nth-child(2){ + position: absolute; + margin: 1rem; + font-size: 1.6rem; +} + + + +/* for congratulations*/ +.MsoNormal:nth-child(1){ + position: absolute; + top: 60vh; + left: 50%; + transform: translateX(-50%); + text-transform: uppercase; + font-size: 13rem; + color: #e74c3c; + font-weight: 600; + animation: text-reveal 0.5s forwards; + letter-spacing: 3px; + z-index: 50; + text-shadow:1px 1px 1px #b10e16 ; +} + +.MsoNormal:nth-child(1)::after{ + content: ""; + height: 5px; + background-color: #e74c3c; + width: 20rem; + margin: 0 auto; + position: absolute; + top: 120%; + left: 50%; + animation: enlarge 0.5s forwards; + +} +/* end*/ + +/********************** +Common styles in congratulation +**********************/ + +/*for Text*/ + +.MsoNormal:nth-child(3), +.MsoNormal:nth-child(6), +.MsoNormal:nth-child(8), +.MsoNormal:nth-child(9), +.MsoNormal:nth-child(11), +.MsoNormal:nth-child(13), +.MsoNormal:nth-child(14){ + position: absolute; + text-align: center; +} + +/*Name*/ +.MsoNormal:nth-child(3), +.MsoNormal:nth-child(8), +.MsoNormal:nth-child(11){ + font-size:3rem; + display: inline-block; + width: 50rem; + letter-spacing: 3px; + line-height: 4.05rem; +} + +/*Winner text*/ + +.MsoNormal:nth-child(6), +.MsoNormal:nth-child(9), +.MsoNormal:nth-child(13), +.MsoNormal:nth-child(14){ + text-transform: uppercase; + letter-spacing: 3px; +} + + +.MsoNormal:nth-child(6) span:first-of-type, +.MsoNormal:nth-child(9) span:first-of-type, +.MsoNormal:nth-child(13){ + display: block; + font-size: 9rem; +} +.MsoNormal:nth-child(6) span:not(:first-of-type), +.MsoNormal:nth-child(9) span:not(:first-of-type), +.MsoNormal:nth-child(14){ + font-size: 2.5rem; + letter-spacing: 30px; +} + + +/* Background */ +.MsoNormal:nth-child(10), +.MsoNormal:nth-child(12){ + height: 110vh; +} +.MsoNormal:nth-child(10)::before, +.MsoNormal:nth-child(12)::before{ + content: ""; + background-repeat: no-repeat; + background-attachment: fixed; + position: absolute; + width: 100vw; + height: 110vh; + background-size: cover; +} + +.MsoNormal:nth-child(7), +.MsoNormal:nth-child(15){ + position: absolute; + width: 50%; + z-index: 1; + height: 110vh; +} + + +/********************** +1st congratulation +**********************/ + +/*for Text*/ + +.MsoNormal:nth-child(3), +.MsoNormal:nth-child(6){ + right: 25%; + transform: translateX(50%); +} + +/*Name*/ +.MsoNormal:nth-child(3){ + top:170vh; +} + +/*Winner text*/ + +.MsoNormal:nth-child(6){ + top: 130vh; +} + +/* Background */ +.MsoNormal:nth-child(2){ + height: 220vh; +} +.MsoNormal:nth-child(2)::before{ + content: ""; + background-image: url('img/robomaze.png'); + background-repeat: no-repeat; + background-attachment: fixed; + position: absolute; + top: 0; + left: 0; + width: 100vw; + height: 220vh; + background-size: cover; +} + +.MsoNormal:nth-child(4), +.MsoNormal:nth-child(5){ + position: absolute; + width: 50%; + z-index: 1; + height: 110vh; +} +.MsoNormal:nth-child(4){ + top: 0; + left: 0; + background-color: #b10e16; +} +.MsoNormal:nth-child(5){ + top: 110vh; + right: 0; + background-color: #e67e22; +} + +/********************** +2nd congratulation +**********************/ + +.MsoNormal:nth-child(8), +.MsoNormal:nth-child(9){ + left: 25%; + transform: translateX(-50%); +} + +/*Name*/ +.MsoNormal:nth-child(8){ + top:280vh; +} + +/*Winner text*/ + +.MsoNormal:nth-child(9){ + top: 240vh; +} + + +/* Background */ +.MsoNormal:nth-child(10)::before{ + background-image: url('img/binary.jpg'); + top: 220vh; + left: 0%; +} + +.MsoNormal:nth-child(7){ + background-color:#2c3e50; + top: 220vh; + left: 0; +} + +/********************** +3rd congratulation +**********************/ + +.MsoNormal:nth-child(11), +.MsoNormal:nth-child(13), +.MsoNormal:nth-child(14){ + right: 25%; + transform: translateX(50%); +} + +/*Name*/ +.MsoNormal:nth-child(11){ + top:390vh; +} + +/*Winner text*/ + +.MsoNormal:nth-child(13){ + top: 353vh; +} +.MsoNormal:nth-child(14){ + top: 367vh; + letter-spacing: 15px !important; +} + + +/* Background */ +.MsoNormal:nth-child(12)::before{ + background-image: url('img/rocket.jpg'); + background-position: left; + background-size: 55%; + top: 330vh; + left: 0%; +} + +.MsoNormal:nth-child(15){ + background-color:#130f40; + top: 330vh; + right: 0; +} + +/********************************* +organized by......(section) +*************************************/ + +.MsoNormal:nth-child(16), +.MsoNormal:nth-child(17), +.MsoNormal:nth-child(20){ + position: absolute; + left: 50%; + transform: translateX(-50%); +} + +.MsoNormal:nth-child(18){ + content: ""; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 430vh; + background-color: #e67e22; + width: 114rem; + height: 60vh; + box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); + z-index: 8; +} + + +.MsoNormal:nth-child(19){ + height: 60vh; + width: 100%; +} +.MsoNormal:nth-child(19)::before{ + content: ""; + position: absolute; + width: 100%; + height: 60vh; + background-color: #b10e16; + left: 0; + +} +.MsoNormal:nth-child(16){ + font-size: 5rem; + letter-spacing: 7px; + top: 435vh; +} +.MsoNormal:nth-child(17){ + top: 449vh; + font-size: 1.6rem; +} + +.MsoNormal:nth-child(20){ + top: 456vh; + font-size: 2.5rem; +} +.MsoNormal:nth-child(23), +.MsoNormal:nth-child(24){ + position: absolute; + top: 476vh; + left: 25.6%; + left: 25.6%; + +} +.MsoNormal:nth-child(23){ + top: 476vh; + font-size: 1.6rem; +} +.MsoNormal:nth-child(24){ + font-size: 1.6rem; + top: 480vh; +} +.MsoNormal:nth-child(21){ + display: none; +} +.MsoNormal:nth-child(22){ + display: none; +} + + +/********************* +animations +**********************/ + + +@keyframes text-reveal{ + 0%{ + letter-spacing: -8.4rem; + } + 100%{ + letter-spacing: 3px; + } +} + + +@keyframes enlarge{ + 0%{ + transform:translate(-50%) scaleX(0); + } + 100%{ + transform:translateX(-50%) scaleX(1); + } +} \ No newline at end of file diff --git a/frontend/css/notice.css b/frontend/css/notice.css new file mode 100644 index 0000000..e69de29 diff --git a/frontend/css/queries_news.css b/frontend/css/queries_news.css new file mode 100644 index 0000000..0750e5a --- /dev/null +++ b/frontend/css/queries_news.css @@ -0,0 +1,223 @@ +/*addditionls*/ + +@media only screen and (max-width: 1478px){ + /* for organized by section*/ + .MsoNormal:nth-child(17){ + top: 452vh; + } + .MsoNormal:nth-child(20){ + top: 459vh; + } + /*end*/ +} + +@media only screen and (max-width: 1354px){ + .MsoNormal:nth-child(1){ + font-size: 10rem; + } + .MsoNormal:nth-child(14){ + letter-spacing: 8px !important; + } +} + + +@media only screen and (max-width: 1302px){ + html,body{ + font-size: 50%; /*1rem = 8px*/ + } + + /*for title*/ + #content_head{ + font-size: 150px; + } + /*end*/ + + + +} +@media only screen and (max-width: 968px){ + html,body{ + font-size: 48%; + } + /* for organized by section*/ + .MsoNormal:nth-child(17){ + top: 460vh; + } + .MsoNormal:nth-child(20){ + top: 467vh; + } + .MsoNormal:nth-child(23){ + top: 477vh; + } + .MsoNormal:nth-child(24){ + top: 481vh; + } + /*end*/ +} + +@media only screen and (max-width: 841px){ + html,body{ + font-size: 40%; + } + #content_head{ + font-size: 110px; + padding: 0px 80px; + + } + #content_text div:nth-child(2){ + font-size: 2rem; + } + .MsoNormal:nth-child(23){ + font-size: 2.1rem; + } + .MsoNormal:nth-child(24){ + font-size: 2.1rem; + } + .MsoNormal:nth-child(17){ + font-size: 2.1rem; + } + + .MsoNormal:nth-child(20){ + font-size: 2.7rem; + } +} + +@media only screen and (max-width: 792px){ + html,body{ + font-size: 35%; + } + #content_text div:nth-child(2){ + background-color: rgba(0,0,0,.5); + } + + + .MsoNormal:nth-child(1){ + top: 70vh; + } + /* change layout*/ + .MsoNormal:nth-child(4), + .MsoNormal:nth-child(5){ + width: 100%; + height: 55vh; + } + .MsoNormal:nth-child(4){ + top: 55vh; + left: 0; + } + .MsoNormal:nth-child(5){ + top: 165vh; + right: 0; + } + .MsoNormal:nth-child(7), + .MsoNormal:nth-child(15){ + width: 100%; + height: 55vh; + } + + /*layout end*/ + + /*POSTIONING*/ + /********************** + 1st congratulation + **********************/ + .MsoNormal:nth-child(3), + .MsoNormal:nth-child(6){ + right: 50%; + transform: translateX(50%); + } + /*Name*/ + .MsoNormal:nth-child(3){ + top:200vh; + } + + /*Winner text*/ + + .MsoNormal:nth-child(6){ + top: 170vh; + } + + + /********************** + 2nd congratulation + **********************/ + + .MsoNormal:nth-child(8), + .MsoNormal:nth-child(9){ + left: 50%; + } + + /*Name*/ + .MsoNormal:nth-child(8){ + top:310vh; + } + + /*Winner text*/ + + .MsoNormal:nth-child(9){ + top: 280vh; + } + + + /* Background */ + + .MsoNormal:nth-child(7){ + top: 275vh; + } + /********************** + 3rd congratulation + **********************/ + + .MsoNormal:nth-child(11), + .MsoNormal:nth-child(13), + .MsoNormal:nth-child(14){ + right: 50%; + } + + /*Name*/ + .MsoNormal:nth-child(11){ + top:410vh; + } + + /*Winner text*/ + + .MsoNormal:nth-child(13){ + top: 390vh; + } + .MsoNormal:nth-child(14){ + top: 400vh; + } + + + /* Background */ + .MsoNormal:nth-child(12)::before{ + background-position: auto; + background-size:cover; + } + + .MsoNormal:nth-child(15){ + top: 385vh; + } + + /*POSITIONING END*/ + +} + +@media only screen and (max-width: 627px){ + #content_head{ + font-size: 70px; + padding: 0px 50px; + } + .MsoNormal:nth-child(1){ + font-size: 6rem; + } +} +@media only screen and (max-width: 400px){ + #content_head{ + font-size: 45px; + padding: 0px 20px; + } + .MsoNormal:nth-child(1){ + font-size: 3.8rem; + } + +} \ No newline at end of file diff --git a/frontend/news_notice/news_raw.html b/frontend/news_notice/news_raw.html index ebccb98..e2ee4d0 100644 --- a/frontend/news_notice/news_raw.html +++ b/frontend/news_notice/news_raw.html @@ -1,186 +1,184 @@ - - -
-
-
-
-
-
- news -
-
-
- -
-
- Congratulations! Trinitians -
-
- Thursday, 29 Aug 2019 -
-
-

- - - Congratulations! - - -

-

- -   - -

-

- - - - Siddhartha Gautam, Anupam Koirala, Sajen Maharjan, Aavash Basnet & Ujjwal Shrestha - - - -

-

- -   - -

-

- -   - -

-

- - - Winner - - - - RoboMaze - - -

-

- -   - -

-

- - - - Aabishkar Thapa Kshetri, Manash Adhikari, Ankit Shrestha & Bibek Shah - - - -

-

- - - Second - - - - Hackathon - - -

-

- -   - -

-

- - - - Anupam Koirala, Aman Paudel & Aayushma Upreti - - - -

-

- -   - -

-

- - - First - - -

-

- - - Science & Techno Quiz - - -

-

- -   - -

-

- - - BNKS TECHNOFEST 2019 - - -

-

- - - (August 23-25) - - -

-

- -   - -

-

- -   - -

-

- - - Organized by Budhnilkantha School. - - -

-

- -   - -

-

- -   - -

-

- - - ECA DEPARTMENT - - -

-

- - Monday, August 26, 2019 - -

+ + + + + + + + + + +
+
+
+
+
+
+ news +
+
+
+ +
+
+ Congratulations! Trinitians +
+
+ Thursday, 29 Aug 2019 +
+
+

+ + + Congratulations! + + +

+

+ +   + +

+

+ + + Siddhartha Gautam, Anupam Koirala, Sajen Maharjan, Aavash Basnet & Ujjwal Shrestha + + +

+

+ +   + +

+

+ +   + +

+

+ + Winner - + + + RoboMaze + +

+

+ +   + +

+

+ + + Aabishkar Thapa Kshetri, Manash Adhikari, Ankit Shrestha & Bibek Shah + + +

+

+ + Second - + + + Hackathon + +

+

+ +   + +

+

+ + + Anupam Koirala, Aman Paudel & Aayushma Upreti + + +

+

+ +   + +

+

+ + + First + + +

+

+ + + Science & Techno Quiz + + +

+

+ +   + +

+

+ + + BNKS TECHNOFEST 2019 + + +

+

+ + + (August 23-25) + + +

+

+ +   + +

+

+ +   + +

+

+ + + Organized by Budhnilkantha School. + + +

+

+ +   + +

+

+ +   + +

+

+ + + ECA DEPARTMENT + + +

+

+ + Monday, August 26, 2019 + +

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