Impact section @ large sizes

This commit is contained in:
Thomas Smith 2023-01-23 19:18:45 -05:00
parent 6f9c8da0ab
commit 6f5819e78a
4 changed files with 68 additions and 20 deletions

View file

@ -26,7 +26,7 @@
<div class="traffic-light"></div>
</div>
<div class="p-5">
<p class="teal lead">
<p class="teal">
node --eval 'console.log("Hello World!")'<br>command not found: node<br><br>
sh <(curl tea.xyz) --yes installing ~/.tea…<br><br>
@ -54,15 +54,15 @@
}
.terminal{
height: 37.667vw;
height: auto;
width: 58.594vw;
display: block;
margin-left: auto;
margin-right: auto;
margin-top:-0.3vw;
margin-bottom: -8.371vw;
border-radius: 10px;
background-color: #121212;
box-shadow: 0px 0px 18px #000;
border: 1px solid gray;
}
@ -77,20 +77,46 @@
<section class="teal-bg impact-section two-boxes">
<div class="container">
<div class="row one-box-down">
<div class="col-10">
<div>
<h2 class="black" style="z-index:2;">THIS ISNT A PACKAGE MANAGER. TEA IS A UNIFIED PACKAGING INFRASTRUCTURE.</h2>
</div>
</div>
<img src="/Images/xl-grid-one-row.svg" alt="grid-element" class="single-grid-row">
</div>
<div class="row">
<div class="col">
<div class="box">
<div>
<h2 class="black text-center" style="z-index:2;">equitable open-source<br>for&nbsp;<br id="impact-break"><span class="cycle">web3</span></h2>
</div>
</div>
<i class="icon-pattern-random-15 black display-6"></i><br><br>
<h3 class="black">Integrate multiple tools</h3>
<p class="black">Tea can easily integrate different tools and languages. This allows users to throw together scripts that use entirely separate tools and languages and share them with others with just a simple one-liner command.</p>
</div>
<div class="col">
<i class="icon-pattern-random-15 black display-6"></i><br><br>
<h3 class="black">UNIVERSAL<br>BINARY</h3>
<p class="black">tea is a standalone, binary download that can be used on multiple different devices and operating systems. This makes it easy to use Tea on a variety of different devices, without the need to worry about compatibility issues.</p>
</div>
<div class="col">
<i class="icon-pattern-random-15 black display-6"></i><br><br>
<h3 class="black">All-inclusive<br>Packaging</h3>
<p class="black">tea is a unified packaging infrastructure, providing access to the entire open source ecosystem. This means that Tea users can easily find and use a wide variety of software packages.</p>
</div>
</div>
</div>
</section>
<style>
i{
font-weight: 900 !important;
}
.single-grid-row{
margin-top: -1.6vw;
}
.box {
display: flex;
align-items: center;

View file

@ -0,0 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1601" height="81" viewBox="0 0 1601 81">
<g id="Group_1363" data-name="Group 1363" transform="translate(-159.5 -1911.5)">
<rect id="Rectangle_1219" data-name="Rectangle 1219" width="80" height="80" transform="translate(160 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_1220" data-name="Rectangle 1220" width="80" height="80" transform="translate(240 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_1221" data-name="Rectangle 1221" width="80" height="80" transform="translate(320 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_1222" data-name="Rectangle 1222" width="80" height="80" transform="translate(400 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_1223" data-name="Rectangle 1223" width="80" height="80" transform="translate(480 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_1224" data-name="Rectangle 1224" width="80" height="80" transform="translate(560 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_1225" data-name="Rectangle 1225" width="80" height="80" transform="translate(640 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_1226" data-name="Rectangle 1226" width="80" height="80" transform="translate(720 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_1227" data-name="Rectangle 1227" width="80" height="80" transform="translate(800 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_2630" data-name="Rectangle 2630" width="80" height="80" transform="translate(1200 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_1228" data-name="Rectangle 1228" width="80" height="80" transform="translate(880 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_2631" data-name="Rectangle 2631" width="80" height="80" transform="translate(1279.999 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_2672" data-name="Rectangle 2672" width="80" height="80" transform="translate(1600 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_1229" data-name="Rectangle 1229" width="80" height="80" transform="translate(960 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_2638" data-name="Rectangle 2638" width="80" height="80" transform="translate(1360 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_2673" data-name="Rectangle 2673" width="80" height="80" transform="translate(1680 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_1230" data-name="Rectangle 1230" width="80" height="80" transform="translate(1040 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_2646" data-name="Rectangle 2646" width="80" height="80" transform="translate(1440 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_1231" data-name="Rectangle 1231" width="80" height="80" transform="translate(1120 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_2660" data-name="Rectangle 2660" width="80" height="80" transform="translate(1520 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.8 KiB

View file

@ -166,11 +166,7 @@ mark{
}
.impact-section{
background-image: url("/Images/impact-section-grid.svg");
background-attachment: fixed;
background-repeat: repeat;
background-size: contain;
opacity: 1;
}
.package_before{

View file

@ -48,6 +48,7 @@ h5{
p{
font-family: "sono", sans-serif;
color: #ffffff;
font-weight: 500;
}
li{
@ -86,13 +87,14 @@ a:hover{
}
h2{
font-size: 5.5vw;
line-height: 8.4vw;
font-size: 3.5vw;
line-height: 4.1vw;
}
h3{
font-size: 3.8rem;
line-height: 4.8vw;
font-size: 2vw;
line-height: 2.8vw;
text-transform: uppercase;
}
h4{
@ -171,9 +173,9 @@ a:hover{
.impact{
font-size: 5vw !important;
line-height: 9.9vw!important;
margin-top: 4vw !important;
margin-bottom: 1.2vw !important;
line-height: 5.1vw!important;
margin-top: 7vw !important;
margin-bottom: 4.7vw !important;
}
h1{