mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-19 13:01:12 +02:00
Code Issues Releases Wiki Activity

website: layout makeover

Browse Source
This commit is contained in:
Kushagra Gour
2018-02-03 13:44:22 +05:30
parent 445078cbb2
commit 976d6118b9
2 changed files with 54 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
index.html
View File

@@ -60,7 +60,7 @@
} }
} }
img { img {
max-width: 90vw; max-width: 90%;
} }
a { a {
color: #1A5A7A; color: #1A5A7A;
@@ -68,6 +68,9 @@
text-decoration: none; text-decoration: none;
} }
.flex { display: flex; } .flex { display: flex; }
.header {
margin-top: 2em;
}
.btn { .btn {
background: rgba(0,0,0,0.2); background: rgba(0,0,0,0.2);
padding: 10px 20px; padding: 10px 20px;
@@ -83,9 +86,10 @@
.download-btn { .download-btn {
color: white; color: white;
background-color: #4d7bd6; background-color: #4d7bd6;
border: 2px solid #4569b1;
line-height: 2.5rem; line-height: 2.5rem;
margin: 0 1rem; margin: 1rem 0;
width: 240px; width: 85%;
} }
.web-app-btn { .web-app-btn {
position: relative; position: relative;
@@ -100,7 +104,7 @@
color: white; color: white;
border-radius: 4px; border-radius: 4px;
transform: rotate(-9deg); transform: rotate(-9deg);
right: -50px; right: 5px;
top: -10px; top: -10px;
transition: 0.25s ease; transition: 0.25s ease;
box-shadow: 0 2px 2px rgba(0,0,0,0.2); box-shadow: 0 2px 2px rgba(0,0,0,0.2);
@@ -109,7 +113,7 @@
content: '🎊'; content: '🎊';
font-size: 5.2rem; font-size: 5.2rem;
position: absolute; position: absolute;
right: -22px; right: 10px;
top: -5px; top: -5px;
transition: 0.25s ease 0.1s; transition: 0.25s ease 0.1s;
} }
@@ -167,7 +171,7 @@
} }
.people-say { .people-say {
margin: 4em 0 4em; margin: 4em 0 4em;
width: 100vw; /* width: 100vw; */
overflow-x: hidden; overflow-x: hidden;
} }
.people-say-top { .people-say-top {
@@ -216,6 +220,25 @@
font-weight: normal; font-weight: normal;
} }
@media (min-width: 751px) { @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 { .social-bar {
position: fixed; position: fixed;
top: 30px; top: 30px;
@@ -228,7 +251,7 @@
} }
.feature-box { .feature-box {
min-width: 400px; min-width: 400px;
width: 80vw; /* width: 80vw; */
margin: 0 auto; margin: 0 auto;
} }
.feature { .feature {
@@ -258,7 +281,6 @@
.people-say-top, .people-say-top,
.people-say-bottom { .people-say-bottom {
display: flex; display: flex;
/* max-width: 100vw; */
overflow: scroll; overflow: scroll;
} }
.say { .say {
@@ -292,15 +314,22 @@
</script> </script>
</head> </head>
<body> <body>
<h1><img class="logo" width="128" height="128" src="icon-128.png" alt="Web Maker logo">Web Maker</h1> <header class="header">
<h2 style="margin-bottom:0.4em;">A blazing fast & offline web playground in your browser</h2> <svg class="logo" width="160" height="84">
<div style="margin-top: 30px;" id="cta"> <use xlink:href="#logo"></use>
<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> </svg>
<a aria-label="Open web app" class="btn download-btn web-app-btn" href="/app/"><span>Web App (beta)</span></a> <h1>
</div> 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 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;"> <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> </div>
<script> <script>
if (top !== self) { 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> <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"> <script type="text/javascript">
if (location.host.indexOf('localhost') === -1) { if (location.host.indexOf('localhost') === -1) {

BIN
ss1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 162 KiB