mirror of
https://github.com/chinchang/web-maker.git
synced 2025-07-19 13:01:12 +02:00
website: layout makeover
This commit is contained in:
Kushagra Gour
62
index.html
62
index.html
@@ -60,7 +60,7 @@
|
||||
}
|
||||
}
|
||||
img {
|
||||
max-width: 90vw;
|
||||
max-width: 90%;
|
||||
}
|
||||
a {
|
||||
color: #1A5A7A;
|
||||
@@ -68,6 +68,9 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
.flex { display: flex; }
|
||||
.header {
|
||||
margin-top: 2em;
|
||||
}
|
||||
.btn {
|
||||
background: rgba(0,0,0,0.2);
|
||||
padding: 10px 20px;
|
||||
@@ -83,9 +86,10 @@
|
||||
.download-btn {
|
||||
color: white;
|
||||
background-color: #4d7bd6;
|
||||
border: 2px solid #4569b1;
|
||||
line-height: 2.5rem;
|
||||
margin: 0 1rem;
|
||||
width: 240px;
|
||||
margin: 1rem 0;
|
||||
width: 85%;
|
||||
}
|
||||
.web-app-btn {
|
||||
position: relative;
|
||||
@@ -100,7 +104,7 @@
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
transform: rotate(-9deg);
|
||||
right: -50px;
|
||||
right: 5px;
|
||||
top: -10px;
|
||||
transition: 0.25s ease;
|
||||
box-shadow: 0 2px 2px rgba(0,0,0,0.2);
|
||||
@@ -109,7 +113,7 @@
|
||||
content: '🎊';
|
||||
font-size: 5.2rem;
|
||||
position: absolute;
|
||||
right: -22px;
|
||||
right: 10px;
|
||||
top: -5px;
|
||||
transition: 0.25s ease 0.1s;
|
||||
}
|
||||
@@ -167,7 +171,7 @@
|
||||
}
|
||||
.people-say {
|
||||
margin: 4em 0 4em;
|
||||
width: 100vw;
|
||||
/* width: 100vw; */
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.people-say-top {
|
||||
@@ -216,6 +220,25 @@
|
||||
font-weight: normal;
|
||||
}
|
||||
@media (min-width: 751px) {
|
||||
.header {
|
||||
position: fixed;
|
||||
width: 460px;
|
||||
left: 0;
|
||||
}
|
||||
body {
|
||||
padding-left: 460px;
|
||||
}
|
||||
.download-btn {
|
||||
/* margin: 1rem 0; */
|
||||
/* margin: 0 1rem; */
|
||||
width: 300px;
|
||||
}
|
||||
.web-app-btn:after {
|
||||
right: -50px;
|
||||
}
|
||||
.web-app-btn:before {
|
||||
right: -22px;
|
||||
}
|
||||
.social-bar {
|
||||
position: fixed;
|
||||
top: 30px;
|
||||
@@ -228,7 +251,7 @@
|
||||
}
|
||||
.feature-box {
|
||||
min-width: 400px;
|
||||
width: 80vw;
|
||||
/* width: 80vw; */
|
||||
margin: 0 auto;
|
||||
}
|
||||
.feature {
|
||||
@@ -258,7 +281,6 @@
|
||||
.people-say-top,
|
||||
.people-say-bottom {
|
||||
display: flex;
|
||||
/* max-width: 100vw; */
|
||||
overflow: scroll;
|
||||
}
|
||||
.say {
|
||||
@@ -292,15 +314,22 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1><img class="logo" width="128" height="128" src="icon-128.png" alt="Web Maker logo">Web Maker</h1>
|
||||
<header class="header">
|
||||
<svg class="logo" width="160" height="84">
|
||||
<use xlink:href="#logo"></use>
|
||||
</svg>
|
||||
<h1>
|
||||
Web Maker
|
||||
</h1>
|
||||
<h2 style="margin-bottom:0.4em;">A blazing fast & offline web playground in your browser</h2>
|
||||
<div style="margin-top: 30px;" id="cta">
|
||||
<a aria-label="Install chrome extension" class="btn download-btn" href="javascript:void(0)" onclick="addToChrome()"><img src="chrome-logo.png" height="40" alt=""><span>Add to Chrome</span></a>
|
||||
<a aria-label="Install chrome extension" class="btn download-btn" href="javascript:void(0)" onclick="addToChrome()"><img src="chrome-logo.png" height="40" alt=""><span>Add Chrome extension</span></a>
|
||||
<a aria-label="Open web app" class="btn download-btn web-app-btn" href="/app/"><span>Web App (beta)</span></a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div style="margin-top:30px;">
|
||||
<img class="screenshot" src="ss1.png?v2.9.0" height="" alt="Web Maker working screen">
|
||||
<img class="screenshot" src="ss1.png?v3.0.0beta" height="" alt="Web Maker working screen">
|
||||
</div>
|
||||
<script>
|
||||
if (top !== self) {
|
||||
@@ -466,7 +495,16 @@
|
||||
|
||||
<div style="margin:2em 0 1em">Follow <a style="color:#1da1f2" href="https://twitter.com/intent/follow?screen_name=webmakerApp" target="_blank">@webmakerApp</a> for updates</div>
|
||||
|
||||
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="display:none">
|
||||
<symbol id="logo" viewBox="-145 -2 372 175">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-145.000000, -1.000000)">
|
||||
<polygon id="Path-1" fill="#FF4600" points="31 0 232 0 132 173.310547"></polygon>
|
||||
<polygon id="Path-1" fill="#FF6C00" points="0 0 201 0 101 173.310547"></polygon>
|
||||
<polygon id="Path-1" fill="#FF6C00" transform="translate(271.500000, 86.500000) scale(1, -1) translate(-271.500000, -86.500000) " points="171 0 372 0 272 173.310547"></polygon>
|
||||
<polygon id="Path-1" fill="#FF4600" transform="translate(241.500000, 86.500000) scale(1, -1) translate(-241.500000, -86.500000) " points="141 0 342 0 242 173.310547"></polygon>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
<script type="text/javascript">
|
||||
if (location.host.indexOf('localhost') === -1) {
|
||||
|
||||
|
||||
Reference in New Issue
Block a user