Skip to content

Commit

Permalink
refactor: finish 'Welcome' page layout with tachyons.
Browse files Browse the repository at this point in the history
  • Loading branch information
@nunofmn
nunofmn committed Dec 22, 2017
1 parent 1b7ba69 commit 3c462d5
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 43 deletions.
21 changes: 21 additions & 0 deletions add-on/src/landing-pages/style.css
View file
Original file line number Diff line number Diff line change
@@ -1 +1,22 @@
@import url('node_modules/tachyons/css/tachyons.css');

#header {
background: linear-gradient(to top, #041727 0%, #043b55 100%);
}

.logo {
height: 80px;
width: 80px;
}

.dweb-links {
list-style-type: none;
}

.app-list {
list-style-type: none;
}

.app-item img {
height: 80px;
}
98 changes: 55 additions & 43 deletions add-on/src/landing-pages/welcome.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,55 +5,67 @@
<title>IPFS Companion Welcome</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />

<link rel="stylesheet" href="https://unpkg.com/tachyons@4.9.0/css/tachyons.min.css"/>
<link rel="stylesheet" href="style.css"/>
</head>

<body>
<div id="header">
<img class="logo" src="./images/ipfs-logo-on.svg" alt="IPFS Logo">
<h1>Welcome to the Distributed Web!</h1>
</div>
<div id="content">
<div class="main-info">
<h2>Thank you for installing IPFS Companion!</h2>
<p>You are now able to use distributed webs applications and websites built with IPFS.</p>
</div>
<div id="learn-section" class="section">
<div class="section-title">
<h2>Learn more</h2>
<div id="header" class="mw-100 flex justify-center items-center pl5 pt5 pr5 avenir">
<div class="w-70 flex flex-column items-start white">
<div class="flex">
<img class="logo" src="./images/ipfs-logo-on.svg" alt="IPFS Logo">
<h2 class="f2 pl3 fw2 light-gray">Welcome to the Distributed Web!</h2>
</div>
<div class="section-content">
<p>Learn why we need a distributed web to make the web faster, safer and more open.</p>
<ul>
<li><a href="https://www.youtube.com/watch?v=2RCwZDRwk48">The next Internet Revolution | Juan Benet | TEDxSanFrancisco</a></li>
<li><a href="https://motherboard.vice.com/en_us/article/78xgaq/the-interplanetary-file-system-wants-to-create-a-permanent-web">The InterPlanetary File System Wants to Create a Permanent Web | Motherboard</a></li>
</div>
</div>
<div id="app-section" class="section">
<div class="section-title">
<h2>Applications</h2>
</div>
<div class="section-content">
<p>Try some of the applications built with IPFS.</p>
<ul>
<li class="app-item">
<img src="./images/peerpad-logo.svg" alt="Peerpad Logo">
</li>
<li class="app-item">
<img src="./images/peerpad-logo.svg" alt="Peerpad Logo">
</li>
<li class="app-item">
<img src="./images/peerpad-logo.svg" alt="Peerpad Logo">
</li>
<li class="app-item">
<img src="./images/peerpad-logo.svg" alt="Peerpad Logo">
</li>
</ul>
</div>

<div class="pa4">
<p class="f2 fw5 lh-copy ma0 light-gray">
Thank you for installing IPFS Companion!
</p>
<p class="f3 fw2 lh-copy light-gray">
You are now able to use distributed webs applications and websites built with IPFS.
</p>
</div>
</div>
</div>
<script src="../ipfs-companion-common.js"></script>
<script src="landing-pages.js"></script>
</body>
</div>

<div id="content" class="mw-100 flex justify-center items-center pl5 pt3 pr5 helvetica">
<div class="w-70 flex flex-column items-start pl4">
<div id="learn-section">
<h3 class="f3 fw6">Learn more</h3>
<p class="near-black">Learn why we need a distributed web to make the web faster, safer and more open.</p>
<ul class="dweb-links">
<li class="pa1">
<a class="dark-blue" href="https://www.youtube.com/watch?v=2RCwZDRwk48">The next Internet Revolution | Juan Benet | TEDxSanFrancisco</a>
</li>
<li class="pa1">
<a class="dark-blue" href="https://motherboard.vice.com/en_us/article/78xgaq/the-interplanetary-file-system-wants-to-create-a-permanent-web">The InterPlanetary File System Wants to Create a Permanent Web | Motherboard</a>
</li>
</ul>
</div>
<div id="app-section">
<h3 class="f3 fw6">Applications</h3>
<p class="near-black">Try some of the applications built with IPFS.</p>
<ul class="app-list w-60 flex flex-wrap">
<li class="app-item pa3">
<img src="./images/peerpad-logo.svg" alt="Peerpad Logo">
</li>
<li class="app-item pa3">
<img src="./images/peerpad-logo.svg" alt="Peerpad Logo">
</li>
<li class="app-item pa3">
<img src="./images/peerpad-logo.svg" alt="Peerpad Logo">
</li>
<li class="app-item pa3">
<img src="./images/peerpad-logo.svg" alt="Peerpad Logo">
</li>
</ul>
</div>
</div>
</div>
<script src="../ipfs-companion-common.js"></script>
<script src="landing-pages.js"></script>
</body>

</html>

0 comments on commit 3c462d5

Please sign in to comment.