Make landing page responsive

pull/42/head
PROTechThor 2021-04-01 17:57:32 +01:00
parent 577dc7fee9
commit cac65f4d94
5 changed files with 121 additions and 8 deletions

View File

@ -6,11 +6,11 @@
<div class="row collapse-at-2">
<section class="6u">
<!-- Icons -->
<h3>Join us!</h3>
<h3 class="join">Join us!</h3>
<ul class="icons">
<li><a href="https://twitter.com/{{ site.twitterUsername }}" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="https://github.com/{{ site.githubUsername }}" class="icon fa-github"><span class="label">GitHub</span></a></li>
<li><a href="https://gitter.im/{{ site.githubUsername }}" class="icon fa-gitter"><span class="label">Gitter</span></a></li>
<li><a href="https://gitter.im/{{ site.githubUsername }}" class="icon fa-gitter"><img class="gitterbutton" src="/assets/images/gitter-logo.svg" alt="Small Gitter logo"/></a></li>
</ul>
</section>
</div>
@ -26,7 +26,7 @@
<!-- Copyright -->
<div class="copyright">
<ul class="menu">
<li>&copy; MISP project. Software released under approved open source licenses and content released as CC BY-SA 3.0.</li><li><img src="{{ site.baseurl }}/assets/images/en_cef.png" width="50%" height="50%"/></li><li><a href="https://www.misp-standard.org/"><img src="https://www.misp-standard.org/assets/images/misp-standard.png" /></a></li>
<li>&copy; MISP project. Software released under approved open source licenses and content released as CC BY-SA 3.0.</li><li><img class="sponsor-img" src="{{ site.baseurl }}/assets/images/en_cef.png"/></li><li><a href="https://www.misp-standard.org/"><img src="https://www.misp-standard.org/assets/images/misp-standard.png" /></a></li>
</ul>
</div>

View File

@ -9,6 +9,7 @@
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta name="keywords" content="MISP, CTI, malware, threat, cyber, intelligence, information exchange, sharing, open source, MISP threat sharing, Malware Information Sharing Platform, Threat Intelligence Platform, TIP, information sharing, threatintel" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ site.baseurl }}/assets/images/ico/favicon-144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="{{ site.baseurl }}/assets/images/ico/favicon-114.png">

View File

@ -1965,10 +1965,10 @@
}
/* Image */
p img {
width: 100%;
}
.image {
border: 0;
display: inline-block;
@ -2293,6 +2293,18 @@
margin: 0;
}
.feature-overview{
display:flex;
flex-wrap: wrap;
position: relative;
justify-content: center;
}
.feature-box {
position: relative;
width: 400px;
}
/* Header */
#header {
@ -2580,6 +2592,33 @@
font-size: 0.9em;
}
#footer .menu {
margin-left: -10%;
}
#footer .sponsor-img {
width: 50%;
}
#footer .join {
text-align: center !important;
}
#footer .icons, #footer .icons li{
padding-left:0;
padding: 3px;
text-align:center !important;
}
.gitterbutton {
opacity: 0.8;
transition: 0.2s ease;
}
.gitterbutton:hover {
opacity: 1;
}
/* Wide */
@media screen and (max-width: 1680px) {
@ -2662,6 +2701,10 @@
#footer .container {
margin-bottom: 1em;
}
#footer .gitterbutton{
width: 16px;
}
}
@ -3088,6 +3131,10 @@
width: 30%;
}
.feature-box {
width: 300px;
}
/* Banner */
#banner {
@ -3116,5 +3163,8 @@
padding: 2em 20px;
text-align: left;
}
#footer .sponsor-img {
width: 90%;
}
}

View File

@ -0,0 +1,62 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
aria-hidden="true"
focusable="false"
data-prefix="fab"
data-icon="gitter"
class="svg-inline--fa fa-gitter fa-w-12"
role="img"
viewBox="0 0 22.000002 32"
version="1.1"
id="svg4"
sodipodi:docname="gitter-logo.svg"
width="22.000002"
height="32"
inkscape:version="1.0.2 (1.0.2+r75+1)">
<metadata
id="metadata10">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs8" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1533"
inkscape:window-height="845"
id="namedview6"
showgrid="false"
inkscape:zoom="1.8009126"
inkscape:cx="14.123048"
inkscape:cy="39.503108"
inkscape:window-x="67"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:current-layer="svg4" />
<path
fill="currentColor"
d="M 3.1500015,20.156251 H 0 V 0 H 3.1500015 Z M 9.4312503,4.7562492 H 6.2812518 V 32 h 3.1499985 z m 6.2875007,0 H 12.568752 V 32 h 3.149999 z m 6.281251,-0.00625 H 18.85 V 20.187494 h 3.150002 z"
id="path835"
style="fill:#474747;fill-opacity:1;stroke-width:0.0625002" />
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -17,22 +17,22 @@ layout: default
<!-- Highlights -->
<section class="wrapper style1">
<div class="container">
<div class="row double">
<section class="4u">
<div class="row double feature-overview">
<section class="4u feature-box">
<div class="box highlight">
<i class="icon major fa-share-alt"></i>
<h3>The key is Automation</h3>
<p>Isn't it sad to have a lot of data and not use it because it's too much work? Thanks to MISP you can store your IOCs in a structured manner, and thus enjoy the correlation, automated exports for IDS, or SIEM, in STIX or OpenIOC and synchronize to other MISPs. You can now leverage the value of your data without effort and in an automated manner. <br/> Check out MISP <a href="features.html">features</a>.</p>
</div>
</section>
<section class="4u">
<section class="4u feature-box">
<div class="box highlight">
<i class="icon major fa-thumbs-up"></i>
<h3>Simply Threats</h3>
<p>The primary goal of MISP is to be used. This is why simplicity is the driving force behind the project. Storing and especially using information about threats and malware should not be difficult. MISP is there to help you get the maximum out of your data without unmanageable complexity.</p>
</div>
</section>
<section class="4u">
<section class="4u feature-box">
<div class="box highlight">
<i class="icon major fa-users"></i>
<h3>By giving you will receive</h3>