Last active
March 14, 2020 09:16
-
-
Save jawakarD/1ebb21f84e183437cdade1be3c873ec8 to your computer and use it in GitHub Desktop.
Design to html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en" dir="ltr"> | |
<head> | |
<meta charset="utf-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1" /> | |
<title>Design</title> | |
<link | |
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" | |
rel="stylesheet" | |
/> | |
<link rel="stylesheet" href="style.css" /> | |
</head> | |
<body> | |
<div class="main-container"> | |
<nav> | |
<h3 class="primary-font-color logo">Logo image</h3> | |
</nav> | |
<header class="header"> | |
<h3>This is a header 😇</h3> | |
</header> | |
<main class="main"> | |
<section class="top-bar"> | |
<p class="title"> | |
This | |
<span class="primary-font-color title">Title</span> | |
is over here! | |
</p> | |
<div class="horizontal-scroller"> | |
<div class="story"> | |
<img | |
class="story-img" | |
src="https://picsum.photos/100?random=1" | |
alt="placeholder" | |
/> | |
<p class="label">Label</p> | |
</div> | |
<div class="story add-story"> | |
<div class="story-img add-story-container"> | |
<svg class="add-story-icon" viewBox="0 0 448 512"> | |
<path | |
fill="gray" | |
d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z" | |
class="" | |
></path> | |
</svg> | |
</div> | |
<p class="label"> </p> | |
</div> | |
<div class="story"> | |
<img | |
class="story-img" | |
src="https://picsum.photos/100?random=2" | |
alt="placeholder" | |
/> | |
<p class="label">Label</p> | |
</div> | |
<div class="story"> | |
<img | |
class="story-img" | |
src="https://picsum.photos/100?random=3" | |
alt="placeholder" | |
/> | |
<p class="label">Label</p> | |
</div> | |
<div class="story"> | |
<img | |
class="story-img" | |
src="https://picsum.photos/100?random=4" | |
alt="placeholder" | |
/> | |
<p class="label">Label</p> | |
</div> | |
<div class="story"> | |
<img | |
class="story-img" | |
src="https://picsum.photos/100?random=5" | |
alt="placeholder" | |
/> | |
<p class="label">Label</p> | |
</div> | |
</div> | |
<div class="description"> | |
<p>📅 Friday, March 13</p> | |
<div class="sub-texts"> | |
<p class="sub-text">🤓 Sub text 1</p> | |
<p class="sub-text">🐇 Sub text 2</p> | |
</div> | |
</div> | |
</section> | |
<section class="side-bar"> | |
<div class="steps"> | |
<div class="step active"> | |
<span></span> | |
<span>🔒</span> | |
<span>Step 1</span> | |
</div> | |
<div class="step"> | |
<span></span> | |
<span>🏙</span> | |
<span>Step 2</span> | |
</div> | |
<div class="step"> | |
<span></span> | |
<span>🥳</span> | |
<span>Step 3</span> | |
</div> | |
</div> | |
<div class="options"> | |
<strong>Choose one</strong> | |
<div class="input-group"> | |
<label class="label" for="1"> | |
<input type="radio" name="options" id="1" /> | |
Option 1 | |
</label> | |
</div> | |
<div class="input-group"> | |
<label class="label" for="2"> | |
<input type="radio" name="options" id="2" /> | |
Option 2 | |
</label> | |
</div> | |
<div class="input-group"> | |
<label class="label" for="3"> | |
<input type="radio" name="options" id="3" /> | |
Option 3 | |
</label> | |
</div> | |
<div class="input-group"> | |
<label class="label" for="4"> | |
<input type="radio" name="options" id="4" /> | |
Option 4 | |
</label> | |
</div> | |
</div> | |
<button class="" type="submit" name="button"> | |
<p>Next Step</p> | |
<p>No. 300</p> | |
</button> | |
</section> | |
</main> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:root { | |
--primary-color: #2d76f1; | |
--header-font-size: 24px; | |
--sub-header-font-size: 20px; | |
--default-font-size: 16px; | |
--secondary-font-size: 14px; | |
--background: #f2f2f2; | |
--white: #fff; | |
--gray: #8e8e8e; | |
--secondary-font-color: var(--gray); | |
--container-space: 20px; | |
} | |
@media (max-width: 769px) { | |
:root { | |
--default-font-size: 14px; | |
--secondary-font-size: 12px; | |
} | |
} | |
html, | |
body, | |
* { | |
box-sizing: border-box; | |
font-family: Montserrat; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
margin: 0; | |
padding: 0; | |
font-size: var(--default-font-size); | |
} | |
body { | |
background: var(--background); | |
} | |
.main-container { | |
max-width: 1024px; | |
margin: 0 auto; | |
} | |
h3 { | |
font-size: var(--header-font-size); | |
} | |
.primary-font-color { | |
color: var(--primary-color); | |
} | |
.header { | |
margin-top: 50px; | |
margin-left: var(--container-space); | |
} | |
.main { | |
margin: 30px 0; | |
} | |
.title { | |
font-size: var(--default-font-size); | |
font-weight: bold; | |
} | |
nav { | |
margin-left: var(--container-space); | |
margin-top: 30px; | |
} | |
.top-bar { | |
padding: 30px 20px; | |
background: var(--white); | |
} | |
.side-bar { | |
width: 80%; | |
margin: auto; | |
background: white; | |
margin-top: 30px; | |
border-radius: 10px; | |
box-sizing: ; | |
box-shadow: 0px 0px 10px #00000014; | |
} | |
/* horizontal scroller -component -- Start*/ | |
.horizontal-scroller { | |
padding: 30px 0px; | |
display: flex; | |
overflow: hidden; | |
} | |
.horizontal-scroller .story:not(:last-child) { | |
margin-right: 10px; | |
} | |
.story-img { | |
width: 50px; | |
border-radius: 50%; | |
} | |
.add-story { | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
} | |
.add-story-container { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
height: 50px; | |
} | |
.story-img { | |
width: 100%; | |
} | |
.story { | |
width: calc(100% / 6); | |
} | |
.story:not(:last-child) { | |
margin-right: 16px; | |
} | |
.add-story-icon { | |
width: 50%; | |
} | |
.horizontal-scroller .label { | |
text-align: center; | |
color: var(--secondary-font-color); | |
font-size: var(--secondary-font-size); | |
} | |
/* horizontal scroller -component -- End*/ | |
.description .sub-texts { | |
display: flex; | |
margin-top: 10px; | |
} | |
.description .sub-text:first-child { | |
margin-right: 20px; | |
} | |
.description p { | |
font-size: var(--secondary-font-size); | |
} | |
.steps { | |
padding: 50px; | |
} | |
.step { | |
display: flex; | |
align-items: center; | |
} | |
.step:not(:last-child) { | |
margin-bottom: 15px; | |
} | |
.step span:first-child { | |
display: inline-block; | |
width: 12px; | |
height: 12px; | |
background: var(--gray); | |
border-radius: 10px; | |
position: relative; | |
margin-right: 15px; | |
z-index: 2; | |
} | |
.step span:nth-child(2) { | |
margin-right: 5px; | |
} | |
.step:not(:last-child) span:first-child::before { | |
content: ""; | |
display: inline-block; | |
position: absolute; | |
width: 2px; | |
height: 30px; | |
left: 50%; | |
top: 50%; | |
transform: translateX(-50%); | |
background: var(--gray); | |
z-index: 3; | |
} | |
.step.active span:first-child { | |
background: green; | |
} | |
.side-bar > button { | |
width: 100%; | |
border-radius: 10px; | |
box-sizing: none; | |
border: none; | |
background: var(--primary-color); | |
color: white; | |
font-weight: bold; | |
display: flex; | |
height: 60px; | |
border-radius: ; | |
border-top-left-radius: 0; | |
border-top-right-radius: 0; | |
justify-content: ; | |
align-items: center; | |
padding: 20px; | |
} | |
.side-bar > button > p:nth-child(2) { | |
margin-left: auto; | |
} | |
.input-group:not(:last-child) { | |
margin-bottom: 15px; | |
} | |
.input-group { | |
display: flex; | |
align-items: center; | |
} | |
.input-group input[type="radio"], | |
input[type="checkbox"] { | |
margin-right: 5px; | |
} | |
.options > strong { | |
margin-bottom: 20px; | |
display: block; | |
} | |
.options { | |
background-color: #2d76f120; | |
padding: 50px; | |
} | |
/* Mobile and tablet */ | |
@media (min-width: 769px) { | |
:root { | |
--container-space: 0; | |
} | |
.title { | |
font-size: var(--sub-header-font-size); | |
} | |
.header { | |
margin-left: 0px; | |
} | |
.main { | |
display: grid; | |
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); | |
grid-gap: 30px; | |
} | |
.side-bar { | |
width: 100%; | |
margin-top: 0; | |
} | |
.top-bar { | |
align-self: start; | |
border-radius: 10px; | |
padding: 50px; | |
box-shadow: 0px 0px 10px #00000014; | |
} | |
.horizontal-scroller { | |
padding: 30px 0px 40px 0px; | |
} | |
} | |
@media (max-width: 1024px) and (min-width: 769px) { | |
.main-container { | |
margin: 0 20px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment