diff --git a/css/abstracts/_mixins.scss b/css/abstracts/_mixins.scss
index d0edce9f2c9b38424a80a161d245960a7e793332..507a012fa934bf2c1bf5b72b1df88e732b15dd92 100644
--- a/css/abstracts/_mixins.scss
+++ b/css/abstracts/_mixins.scss
@@ -1,8 +1,8 @@
@use "./variables" as var;
%section {
- padding-top: 50px;
- padding-bottom: 50px;
+ padding-top: 150px;
+ padding-bottom: 150px;
}
%wrap {
diff --git a/css/components/_hero.scss b/css/components/_hero.scss
index abf443d4147d74f44e982c27b9554cca1b92f9c5..951b2db18762d1d5e32c7b795436a6ee3d642317 100644
--- a/css/components/_hero.scss
+++ b/css/components/_hero.scss
@@ -9,7 +9,6 @@
background-repeat: repeat-x;
background-size: cover;
min-height: calc(100vh - 56.69px);
- color: var.$text-color-primary;
text-transform: uppercase;
text-align: center;
display: flex;
@@ -20,6 +19,10 @@
@extend %wrap;
font-size: var.$font-size-big;
width: 70%;
+
+ h1 {
+ margin-bottom: 0;
+ }
.btn {
font-size: 1rem;
diff --git a/css/components/_index.scss b/css/components/_index.scss
index 6bdfa2c87b4f34e89749aab226069a5fdbf0f73e..f550b8d998de8e2d9fa14e404925efb2046401e4 100644
--- a/css/components/_index.scss
+++ b/css/components/_index.scss
@@ -1,2 +1,3 @@
@forward "./navbar";
-@forward "./hero";
\ No newline at end of file
+@forward "./hero";
+@forward "./news";
\ No newline at end of file
diff --git a/css/components/_news.scss b/css/components/_news.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c194d4c9fc86f863efd1d3109ee5e173eb00c8c4
--- /dev/null
+++ b/css/components/_news.scss
@@ -0,0 +1,83 @@
+@use "../abstracts/variables" as var;
+@use "../abstracts/mixins" as mix;
+
+.news {
+ @extend %section;
+
+ .wrapper {
+ @extend %wrap;
+
+ .text {
+ text-align: center;
+ font-size: var.$font-size-normal;
+
+ h2 {
+ margin-bottom: 1px;
+ }
+ }
+
+ .cards {
+ display: flex;
+
+ .card {
+ border: 1px solid #888;
+ margin-right: 30px;
+
+ &:first-child {
+ p {
+ padding: 25px 0;
+ }
+ }
+
+ &:nth-child(2) {
+ p {
+ padding: 1px 0;
+ }
+ }
+ &:nth-child(3) {
+ p {
+ padding: 38px 0;
+ }
+ }
+
+ &:nth-child(4) {
+ p {
+ padding: 3px 0;
+ }
+ }
+
+ .inner {
+ @extend %wrap;
+ width: 90%;
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+
+ .card-text {
+ @extend %wrap;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ width: 100%;
+ align-items: center;
+ padding: 20px;
+
+ h3 {
+ font-size: 1.4rem;
+ }
+
+ p {
+ font-size: 1.2rem;
+ }
+
+ .btn {
+ width: 60%;
+ margin-top: auto; // Push the button to the bottom
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/css/core/_common-elements.scss b/css/core/_common-elements.scss
index 526858cd4682b1b55d944633e18f2286dc687536..1d75093e576d74c0cf922863a1bb028f261ed53d 100644
--- a/css/core/_common-elements.scss
+++ b/css/core/_common-elements.scss
@@ -1,12 +1,13 @@
@use "../abstracts/variables" as var;
@use "../abstracts/mixins" as mix;
+
.btn {
display: inline-block;
background-color: rgba(255, 255, 255, 0.3);
- color: white;
- padding: 10px 16px;
- border-radius: 3px;
+ color: ghostwhite;
+ padding: 15px 20px;
+ border-radius: 2px;
}
.col-50 {
diff --git a/css/core/_reboot.scss b/css/core/_reboot.scss
index 8a32abe7492393ff64b95a20377a1e1680fa12f3..76b0673e8c859b3a70b3c0d13deff964b714825b 100644
--- a/css/core/_reboot.scss
+++ b/css/core/_reboot.scss
@@ -1,18 +1,34 @@
+@use "../abstracts/variables" as var;
+@use "../abstracts/mixins" as mix;
+
* {
box-sizing: border-box;
}
body {
margin: 0;
- background-image: url("../../images/bg_repeater.jpeg");
+ background-image:linear-gradient(rgba(0, 0, 0, 0.999), rgba(0, 0, 0, 0.522)), url("../../images/bg_repeater.jpeg");
background-size: cover;
font-family: sans-serif;
+ color: var.$text-color-secondary
}
h1,h2,h3,ul,p {
margin-top: 0;
}
+h1,
+h2,
+.btn {
+ text-transform: uppercase;
+}
+
+h1,
+h2,
+h3 {
+ color: var.$text-color-primary;
+}
+
img {
max-width: 100%;
display: inline-block;
diff --git a/css/style.css b/css/style.css
index ae7c751fcb81e6ee497c4457265455299825cfd4..bbaedf6a7df70a6e34fe4bc999824ab5b3aac89f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,18 +1,42 @@
+.news, .hero {
+ padding-top: 150px;
+ padding-bottom: 150px;
+}
+
+.news .wrapper, .news .wrapper .cards .card .inner, .news .wrapper .cards .card .inner .card-text, .hero .text, .navbar .inner {
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+}
+
* {
box-sizing: border-box;
}
body {
margin: 0;
- background-image: url("../../images/bg_repeater.jpeg");
+ background-image: linear-gradient(rgba(0, 0, 0, 0.999), rgba(0, 0, 0, 0.522)), url("../../images/bg_repeater.jpeg");
background-size: cover;
font-family: sans-serif;
+ color: #888;
}
h1, h2, h3, ul, p {
margin-top: 0;
}
+h1,
+h2,
+.btn {
+ text-transform: uppercase;
+}
+
+h1,
+h2,
+h3 {
+ color: ghostwhite;
+}
+
img {
max-width: 100%;
display: inline-block;
@@ -26,23 +50,12 @@ a {
text-decoration: none;
}
-.hero {
- padding-top: 50px;
- padding-bottom: 50px;
-}
-
-.hero .text, .navbar .inner {
- width: 80%;
- margin-left: auto;
- margin-right: auto;
-}
-
.btn {
display: inline-block;
background-color: rgba(255, 255, 255, 0.3);
- color: white;
- padding: 10px 16px;
- border-radius: 3px;
+ color: ghostwhite;
+ padding: 15px 20px;
+ border-radius: 2px;
}
.col-50 {
@@ -92,7 +105,6 @@ a {
background-repeat: repeat-x;
background-size: cover;
min-height: calc(100vh - 56.69px);
- color: ghostwhite;
text-transform: uppercase;
text-align: center;
display: flex;
@@ -103,6 +115,61 @@ a {
font-size: 2rem;
width: 70%;
}
+.hero .text h1 {
+ margin-bottom: 0;
+}
.hero .text .btn {
font-size: 1rem;
+}
+
+.news .wrapper .text {
+ text-align: center;
+ font-size: 1.875rem;
+}
+.news .wrapper .text h2 {
+ margin-bottom: 1px;
+}
+.news .wrapper .cards {
+ display: flex;
+}
+.news .wrapper .cards .card {
+ border: 1px solid #888;
+ margin-right: 30px;
+}
+.news .wrapper .cards .card:first-child p {
+ padding: 25px 0;
+}
+.news .wrapper .cards .card:nth-child(2) p {
+ padding: 1px 0;
+}
+.news .wrapper .cards .card:nth-child(3) p {
+ padding: 38px 0;
+}
+.news .wrapper .cards .card:nth-child(4) p {
+ padding: 3px 0;
+}
+.news .wrapper .cards .card .inner {
+ width: 90%;
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+}
+.news .wrapper .cards .card .inner .card-text {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ width: 100%;
+ align-items: center;
+ padding: 20px;
+}
+.news .wrapper .cards .card .inner .card-text h3 {
+ font-size: 1.4rem;
+}
+.news .wrapper .cards .card .inner .card-text p {
+ font-size: 1.2rem;
+}
+.news .wrapper .cards .card .inner .card-text .btn {
+ width: 60%;
+ margin-top: auto;
}/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/css/style.css.map b/css/style.css.map
index 088eb622e7999b252d164f1fc6c499f0829835d4..61f8036ff27f3728c1868ba01b7dc4ae95dc58a4 100644
--- a/css/style.css.map
+++ b/css/style.css.map
@@ -1 +1 @@
-{"version":3,"sources":["core/_reboot.scss","style.css","abstracts/_mixins.scss","core/_common-elements.scss","components/_navbar.scss","abstracts/_variables.scss","components/_hero.scss"],"names":[],"mappings":"AAAA;EACI,sBAAA;ACCJ;;ADEA;EACI,SAAA;EACA,sDAAA;EACA,sBAAA;EACA,uBAAA;ACCJ;;ADEA;EACI,aAAA;ACCJ;;ADEA;EACI,eAAA;EACA,qBAAA;ACCJ;;ADEA;EACI,gBAAA;ACCJ;;ADEA;EACI,qBAAA;ACCJ;;ACxBA;EACI,iBAAA;EACA,oBAAA;AD2BJ;;ACxBA;EACI,UAAA;EACA,iBAAA;EACA,kBAAA;AD2BJ;;AElCA;EACI,qBAAA;EACA,0CAAA;EACA,YAAA;EACA,kBAAA;EACA,kBAAA;AFqCJ;;AElCA;EACI,eAAA;AFqCJ;;AElCA;EACI,eAAA;AFqCJ;;AGlDA;EACI,uBCJoB;AJyDxB;AGpDI;EAEI,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,aAAA;AHqDR;AGlDQ;EACI,YAAA;EACA,qBAAA;AHoDZ;AGjDQ;EACI,eAAA;EACA,gBAAA;EACA,aAAA;EACA,yBAAA;EACA,gBCRM;AJ2DlB;AGhDgB;EACQ,kBAAA;AHkDxB;AG/CgB;EACI,iBC5BC;AJ6ErB;AG/CoB;EACI,WC9BD;AJ+EvB;AG9CoB;EACI,WClCD;AJkFvB;;AKnFA;EAEI,uGAAA;EAEA,+BAAA;EACA,2BAAA;EACA,sBAAA;EACA,iCAAA;EACA,iBDRiB;ECSjB,yBAAA;EACA,kBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ALoFJ;AKlFI;EAEI,eDRQ;ECSR,UAAA;ALmFR;AKjFQ;EACI,eAAA;ALmFZ","file":"style.css"}
\ No newline at end of file
+{"version":3,"sources":["abstracts/_mixins.scss","style.css","core/_reboot.scss","abstracts/_variables.scss","core/_common-elements.scss","components/_navbar.scss","components/_hero.scss","components/_news.scss"],"names":[],"mappings":"AAEA;EACI,kBAAA;EACA,qBAAA;ACDJ;;ADIA;EACI,UAAA;EACA,iBAAA;EACA,kBAAA;ACDJ;;ACNA;EACI,sBAAA;ADSJ;;ACNA;EACI,SAAA;EACA,mHAAA;EACA,sBAAA;EACA,uBAAA;EACA,WCRmB;AFiBvB;;ACNA;EACI,aAAA;ADSJ;;ACNA;;;EAGI,yBAAA;ADSJ;;ACNA;;;EAGI,iBCzBiB;AFkCrB;;ACNA;EACI,eAAA;EACA,qBAAA;ADSJ;;ACNA;EACI,gBAAA;ADSJ;;ACNA;EACI,qBAAA;ADSJ;;AG9CA;EACI,qBAAA;EACA,0CAAA;EACA,iBAAA;EACA,kBAAA;EACA,kBAAA;AHiDJ;;AG9CA;EACI,eAAA;AHiDJ;;AG9CA;EACI,eAAA;AHiDJ;;AI/DA;EACI,uBFJoB;AFsExB;AIjEI;EAEI,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,aAAA;AJkER;AI/DQ;EACI,YAAA;EACA,qBAAA;AJiEZ;AI9DQ;EACI,eAAA;EACA,gBAAA;EACA,aAAA;EACA,yBAAA;EACA,gBFRM;AFwElB;AI7DgB;EACQ,kBAAA;AJ+DxB;AI5DgB;EACI,iBF5BC;AF0FrB;AI5DoB;EACI,WF9BD;AF4FvB;AI3DoB;EACI,WFlCD;AF+FvB;;AKhGA;EAEI,uGAAA;EAEA,+BAAA;EACA,2BAAA;EACA,sBAAA;EACA,iCAAA;EACA,yBAAA;EACA,kBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ALiGJ;AK/FI;EAEI,eHPQ;EGQR,UAAA;ALgGR;AK9FQ;EACI,gBAAA;ALgGZ;AK7FQ;EACI,eAAA;AL+FZ;;AMjHI;EACE,kBAAA;EACA,mBJEa;AFkHnB;AMlHM;EACE,kBAAA;ANoHR;AMhHI;EACE,aAAA;ANkHN;AMhHM;EACE,sBAAA;EACA,kBAAA;ANkHR;AM/GY;EACI,eAAA;ANiHhB;AM5GY;EACI,cAAA;AN8GhB;AM1GY;EACI,eAAA;AN4GhB;AMvGY;EACI,cAAA;ANyGhB;AMrGQ;EAEE,UAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;ANsGV;AMpGU;EAEE,OAAA;EACA,aAAA;EACA,sBAAA;EACA,8BAAA;EACA,WAAA;EACA,mBAAA;EACA,aAAA;ANqGZ;AMnGY;EACE,iBAAA;ANqGd;AMlGY;EACE,iBAAA;ANoGd;AMjGY;EACE,UAAA;EACA,gBAAA;ANmGd","file":"style.css"}
\ No newline at end of file
diff --git a/index.html b/index.html
index d78ecef09a8bfa24b0088878b41af74cf78ce358..993139cd94435969f9e83f82abd394dc60314af6 100644
--- a/index.html
+++ b/index.html
@@ -26,7 +26,6 @@
</ul>
</div>
</div>
-
<div class="hero">
<div class="text">
<h1>"if your enemy is equal, prepare for him. if greater, elude him. if weaker, crush him." <br> -dark seer-
@@ -34,6 +33,69 @@
<a href="#" class="btn">read more</a>
</div>
</div>
+ <div class="news">
+ <div class="wrapper">
+ <div class="text">
+ <h2>news</h2>
+ <p>25 November 2023</p>
+ </div>
+ <div class="cards">
+ <div class="card col-25">
+ <div class="inner">
+ <img src="https://imgs.search.brave.com/1D6CUhtfw6GC8H4vR7N0HdvNnPp0DAKqlpa7zamNRgg/rs:fit:500:0:0/g:ce/aHR0cHM6Ly9jZG4t/Y2YuZ2lueC50di9y/ZXNwYXduLWNkbi9H/LTNVUzkwMVJDYXlV/UmJRSm5uMVlXVHBZ/Tk9BTGlOTFZwUXVG/Q1BQb3BvL2ZpbGwv/MzYwLzAvbm8vMS9h/SFIwY0hNNkx5OTNk/M2N1WjJsdWVDNTBk/aTkxY0d4dllXUnpN/aTh3TGtOb1lXUmZM/MFJ2ZEdGZk1pOUVV/RU5mTWpBeU15OWti/M1JoWDJSd1kxOHlN/REl6WDNObFlYTnZi/aTVxY0djLndlYnA"
+ alt="img1">
+ <div class="card-text">
+ <h3>DPC Winter 2023 Tour</h3>
+ <p>The first Tour of the next Dota Pro Circuit season kicks off next week.
+ </p>
+ <a href="#" target="_blank" class="btn">Read More</a>
+ </div>
+ </div>
+ </div>
+ <div class="card col-25">
+ <div class="inner">
+ <img src="https://imgs.search.brave.com/eSEkbI9ekB5JRdaAohIYWljcXD2BpFfPzzXGBJh3gdA/rs:fit:500:0:0/g:ce/aHR0cHM6Ly9jZG4t/Y2YuZ2lueC50di9y/ZXNwYXduLWNkbi9x/dlVZal9GVEl1bkx0/UlQ3OVdIalQ2TDhr/d2g4eGFleGNzVUFy/TV8yS19jL2ZpbGwv/MC8wL25vLzEvYUhS/MGNITTZMeTkzZDNj/dVoybHVlQzUwZGk5/MWNHeHZZV1J6TWk5/a2IzUmhYekl2WkhC/akwyaGxZV1JsY2kx/M2FXNTBaWEl1Y0c1/bi53ZWJw"
+ alt="img2">
+ <div class="card-text">
+ <h3>The Dota Pro Circuit 2023-2024 Winter Tour Qualifiers</h3>
+ <p>
+ The year 2023 is winding down, but the next DPC season is just getting started.
+ </p>
+ <a href="#" target="_blank" class="btn">Read More</a>
+ </div>
+ </div>
+ </div>
+ <div class="card col-25">
+ <div class="inner">
+ <img src="https://imgs.search.brave.com/AZ2XuJN95mSRnnn6lETyM98tCxUNx1gKxpKSEhb81YY/rs:fit:500:0:0/g:ce/aHR0cHM6Ly9kb3Rl/c3BvcnRzLmNvbS93/cC1jb250ZW50L3Vw/bG9hZHMvMjAyMS8x/MC8yODE4NTEzMi9t/YXJjaV93YWxscGFw/ZXJfMy5qcGc_dz0x/MjAw"
+ alt="img3">
+ <div class="card-text">
+ <h3>Marchi Marches In</h3>
+ <p>
+ New Hero. New Treasure and 7.30e Gameplay Update.
+ </p>
+ <a href="#" target="_blank" class="btn">Read More</a>
+ </div>
+ </div>
+ </div>
+ <div class="card col-25">
+ <div class="inner">
+ <img src="https://imgs.search.brave.com/2lQ8VfrYX86KDkicbgy3-IrqIcdxedCBMsnU7nCxCdU/rs:fit:500:0:0/g:ce/aHR0cHM6Ly93d3cu/Z2lueC50di9yZXNw/YXduLWNkbi9LQkgy/Szdzd0lMM1h2SFdz/WEl0NW84YXoyU3Zy/eHVZQXVHRlBJaTZJ/S1pJL2ZpbGwvMzYw/LzAvbm8vMS9hSFIw/Y0hNNkx5OTNkM2N1/WjJsdWVDNTBkaTkx/Y0d4dllXUnpNaTlr/YjNSaFh6SXZWRWxm/TVRBdmJXRnlZMmt2/VG1WM0xVaGxjbTh0/VFdGeVkya3RaVzUw/WlhKekxVUnZkR0V0/TWk1cWNHYy53ZWJw"
+ alt="img4">
+ <div class="card-text">
+ <h3>This Fall Marci Joins the Fight</h3>
+ <p>
+ For fans of DOTA: Dragon's Blood, the next hero joining the battle of the Ancients i s
+ already a familiar face.
+ </p>
+ <a href="#" target="_blank" class="btn">Read More</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
</body>