Skip to content

Instantly share code, notes, and snippets.

@Alphajeez96

Alphajeez96/prices.html

Last active September 30, 2020 15:04
Show Gist options
  • Save Alphajeez96/4baa4bf9cb10ff5cb2342cd2abb6c7ed to your computer and use it in GitHub Desktop.
Save Alphajeez96/4baa4bf9cb10ff5cb2342cd2abb6c7ed to your computer and use it in GitHub Desktop.
Download ZIP
Raw
prices.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./index3.css"> -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
.main {
background-color: #EEEEEE;
font-family: 'Roboto', sans-serif;
}
.container {
padding: 20px 40px;
margin: auto;
}
* {
box-sizing: border-box;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
/* padding: 10px; */
background: #FFFFFF;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .07), 0 3px 1px -2px rgba(0, 0, 0, .1), 0 1px 5px 0 rgba(0, 0, 0, .06);
/* Should be removed. Only for demonstration */
}
.left {
width: 30%;
border-top: 3px solid #979797;
border-bottom: 3px solid #979797;
border-left: 3px solid #979797;
margin-top: 20px;
position: relative;
}
.right {
width: 30%;
margin-top: 20px;
/* background-color: #ccc; */
}
.middle {
width: 40%;
border: 3px solid #4caf50;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .07), 0 3px 1px -2px rgba(0, 0, 0, .1), 0 1px 5px 0 rgba(0, 0, 0, .06)!important;
z-index: 10;
position: relative;
}
.inner_div {
/* display: flex; */
text-align: center;
/* flex-direction: column; */
}
.headers {
color: #1A202C;
font-size: 30px;
font-weight: 400;
/* margin-top: 10px; */
}
.pb-25 {
padding-bottom: 25px;
}
.price {
font-size: 36px;
color: #2ba94f;
line-height: 1px;
font-weight: 400;
}
.row:after {
content: "";
display: table;
clear: both;
}
.label_holder {
position: absolute;
right: 112px;
top: -12px;
}
.label {
border-radius: 50px;
color: white;
font-weight: 700;
letter-spacing: 0.05em;
font-size: 14px;
background: #979797;
padding: 5px 20px;
text-transform: uppercase;
}
.popular_holder {
position: absolute;
left: 170px;
top: -12px;
}
.popular {
border-radius: 50px;
color: white;
font-weight: 700;
letter-spacing: 0.05em;
font-size: 14px;
background: #4caf50;
padding: 5px 20px;
text-transform: uppercase;
}
.description_holder {
color: #4e5559;
font-weight: normal;
font-size: 1rem;
}
.pt-2 {
padding-top: 5px;
}
.pt-3 {
padding: 10px 55px;
}
.features_div {
background-color: #F9FAFB;
position: relative;
margin-top: 50px;
/* height: 30vh; */
}
.notify_icon {
position: absolute;
top: -14px;
right: 185px;
}
.notify_icon2 {
position: absolute;
top: -14px;
right: 230px;
}
.fetures_list_div {
display: flex;
padding-top: 20px;
padding: 30px 0px 0px 50px;
}
.reach {
padding: 0px 20px
}
.pt-10 {
padding: 40px 0px;
}
ul {
list-style-image: url('https://res.cloudinary.com/alphajeez/image/upload/v1601380119/check-f51956705b_amrqbs.svg');
text-align: center;
}
.post_btn {
background: #EEEEEE;
border: 1px solid #EEEEEE;
color: #2ea55a;
font-weight: 700;
padding: 12px 80px;
border-radius: 0.1875rem;
border-width: 1px;
font-size: 16px;
margin-bottom: 25px;
text-align: center;
}
.buy_btn {
background: #4caf50;
border: 1px solid #4caf50;
color: #ffffff;
font-weight: 700;
padding: 12px 120px;
font-size: 20px;
border-radius: 0.1875rem;
border-width: 1px;
margin-bottom: 35px;
text-align: center;
}
@media screen and (max-width: 576px) and (min-width: 275px) {
.column {
width: 100%;
}
.popular_holder {
left: 51px;
}
.middle {
margin-top: 30px;
}
.label_holder {
right: 56px;
}
.notify_icon {
right: 120px;
}
.post_btn {
padding: 12px 40px;
font-size: 14px;
}
.notify_icon2 {
right: 116px
}
.buy_btn {
padding: 12px 40px;
}
}
@media screen and (width: 411px) {
.label_holder {
right: 83px;
}
.popular_holder {
left: 80px;
}
.notify_icon {
right: 148px;
}
}
@media screen and (width: 414px) {
.label_holder {
right: 80px;
}
.popular_holder {
left: 80px;
}
.notify_icon {
right: 148px;
}
.notify_icon2 {
right: 146px;
}
}
@media screen and (width: 320px) {
.label_holder {
right: 37px
}
.popular_holder {
left: 35px
}
.notify_icon {
right: 97px
}
.notify_icon2 {
right: 95px;
}
}
@media screen and (width: 768px) {
.column {
width: 100%;
}
.middle {
margin-top: 30px;
}
.label_holder {
right: 260px;
}
.popular_holder {
left: 258px;
}
.notify_icon2 {
right: 305px;
}
}
@media screen and (width: 1024px) {
.column {
width: 100%;
}
.middle {
margin-top: 30px;
}
.label_holder {
right: 395px;
}
.popular_holder {
left: 378px;
}
.notify_icon2 {
display: none;
}
.notify_icon {
display: none;
}
}
/*
@media screen and (max-width: 540px) {
.column {
width: 100%;
}
.middle {
margin-top: 30px;
}
.label_holder {
right: 146px;
}
.popular_holder {
left: 140px;
}
.notify_icon2 {
display: none;
}
.notify_icon {
display: none;
}
} */
@media screen and (max-width: 280px) {
.column {
width: 100%;
}
.middle {
margin-top: 30px;
}
.label_holder {
right: 15px;
}
.popular_holder {
left: 15px;
}
.notify_icon2 {
display: none;
}
.notify_icon {
display: none;
}
.price {
font-size: 30px;
}
.post_btn {
padding: 12px 20px;
}
.buy_btn {
padding: 12px 30px;
}
}
</style>
</head>
<body class="main">
<main class="flex ">
<section class="container">
<div class="row">
<!-- First card here -->
<div class="column left">
<div class="label_holder">
<span class="label">limited offer</span>
</div>
<div class="inner_div">
<h3 class="headers">
Job Listing
</h3>
<h3 class="price">Free</h3>
<!-- short description here -->
<div class="description_holder">
<p class="pt-2">Great for hiring on a budget</p>
<p class="pt-3"> Post a job, find a candidate. It couldn't be simpler.</p>
</div>
<!-- features area here -->
<div class="features_div">
<!-- Notify Icon here -->
<span class="notify_icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 30 30" version="1.1">
<title>Modal</title>
<defs>
<path d="M17,2.83333327 C9.17999997,2.83333327 2.83333327,9.17999997 2.83333327,17 C2.83333327,24.82 9.17999997,31.1666667 17,31.1666667 C24.82,31.1666667 31.1666667,24.82 31.1666667,17 C31.1666667,9.17999997 24.82,2.83333327 17,2.83333327 L17,2.83333327 Z M18.4166667,24.0833333 L15.5833333,24.0833333 L15.5833333,15.5833333 L18.4166667,15.5833333 L18.4166667,24.0833333 L18.4166667,24.0833333 Z M18.4166667,12.75 L15.5833333,12.75 L15.5833333,9.91666664 L18.4166667,9.91666664 L18.4166667,12.75 L18.4166667,12.75 Z" id="path-1"/>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="info" transform="translate(-2.000000, -2.000000)">
<polygon id="Base" points="-7.08333493e-08 -7.08332285e-08 34.0000001 -7.08332285e-08 34.0000001 34.0000001 -7.08333493e-08 34.0000001"/>
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"/>
</mask>
<g id="Icon" fill-rule="nonzero"/>
<rect id="↳-🎨-Color" fill="#4E5559" fill-rule="evenodd" mask="url(#mask-2)" x="0" y="0" width="34" height="34"/>
</g>
</g>
</svg>
</span>
<!-- features here -->
<section class="pt-10">
<div class="fetures_list_div">
<div>
<span><img src="https://res.cloudinary.com/alphajeez/image/upload/v1601380119/check-f51956705b_amrqbs.svg" alt=""></span>
</div>
<span class="reach">Maximum Reach</span>
</div>
<div class="fetures_list_div">
<div>
<span><img src="https://res.cloudinary.com/alphajeez/image/upload/v1601380119/check-f51956705b_amrqbs.svg" alt=""></span>
</div>
<span class="reach">Maximum Reach</span>
</div>
<div class="fetures_list_div">
<div>
<span><img src="https://res.cloudinary.com/alphajeez/image/upload/v1601380119/check-f51956705b_amrqbs.svg" alt=""></span>
</div>
<span class="reach">Maximum Reach</span>
</div>
<div class="fetures_list_div">
<div>
<span><img src="https://res.cloudinary.com/alphajeez/image/upload/v1601380119/check-f51956705b_amrqbs.svg" alt=""></span>
</div>
<span class="reach">Maximum Reach</span>
</div>
</section>
<!-- post button here -->
<div>
<button class="post_btn">POST FOR FREE</button>
</div>
</div>
</div>
</div>
<!-- second card here -->
<div class="column middle" ">
<div class="popular_holder ">
<span class="label popular ">most popular</span>
</div>
<div class="inner_div ">
<h3 class="headers ">
Best Match
</h3>
<h3 class="price ">NGN 52,000</h3>
<!-- <p>Including VAT</p> -->
<!-- short description here -->
<div class="description_holder ">
<p class="pt-2 ">Hire the right fit, faster!</p>
<p class="pt-3 ">Our HR Experts & Technology match you with the best Candidates.</p>
</div>
<!-- features area here -->
<div class="features_div ">
<!-- Notify Icon here -->
<span class="notify_icon2 ">
<svg xmlns="http://www.w3.org/2000/svg " xmlns:xlink="http://www.w3.org/1999/xlink " width="30px " height="30px " viewBox="0 0 30 30 " version="1.1 ">
<title>Modal</title>
<defs>
<path d="M17,2.83333327 C9.17999997,2.83333327 2.83333327,9.17999997 2.83333327,17 C2.83333327,24.82 9.17999997,31.1666667 17,31.1666667 C24.82,31.1666667 31.1666667,24.82 31.1666667,17 C31.1666667,9.17999997
24.82,2.83333327 17,2.83333327 L17,2.83333327 Z M18.4166667,24.0833333 L15.5833333,24.0833333 L15.5833333,15.5833333 L18.4166667,15.5833333 L18.4166667,24.0833333 L18.4166667,24.0833333 Z M18.4166667,12.75 L15.5833333,12.75 L15.5833333,9.91666664
L18.4166667,9.91666664 L18.4166667,12.75 L18.4166667,12.75 Z " id="path-1 "/>
</defs>
<g id="Page-1 " stroke="none " stroke-width="1 " fill="none " fill-rule="evenodd ">
<g id="info " transform="translate(-2.000000, -2.000000) ">
<polygon id="Base " points="-7.08333493e-08 -7.08332285e-08 34.0000001 -7.08332285e-08 34.0000001 34.0000001 -7.08333493e-08 34.0000001 "/>
<mask id="mask-2 " fill="white ">
<use xlink:href="#path-1 "/>
</mask>
<g id="Icon " fill-rule="nonzero "/>
<rect id="↳-🎨-Color " fill="#4E5559 " fill-rule="evenodd " mask="url(#mask-2) " x="0 " y="0 " width="34 " height="34 "/>
</g>
</g>
</svg>
</span>
<!-- features here -->
<section class="pt-10 ">
<div class="fetures_list_div ">
<div>
<span><img src="https://res.cloudinary.com/alphajeez/image/upload/v1601380119/check-f51956705b_amrqbs.svg " alt=" "></span>
</div>
<span class="reach ">Maximum Reach</span>
</div>
<div class="fetures_list_div ">
<div>
<span><img src="https://res.cloudinary.com/alphajeez/image/upload/v1601380119/check-f51956705b_amrqbs.svg " alt=" "></span>
</div>
<span class="reach ">Maximum Reach</span>
</div>
<div class="fetures_list_div ">
<div>
<span><img src="https://res.cloudinary.com/alphajeez/image/upload/v1601380119/check-f51956705b_amrqbs.svg " alt=" "></span>
</div>
<span class="reach ">Maximum Reach</span>
</div>
<div class="fetures_list_div ">
<div>
<span><img src="https://res.cloudinary.com/alphajeez/image/upload/v1601380119/check-f51956705b_amrqbs.svg " alt=" "></span>
</div>
<span class="reach ">Maximum Reach</span>
</div>
</section>
<!-- Buy button here -->
<div class="pb-25 ">
<button class="buy_btn ">BUY NOW</button>
</div>
</div>
</div>
</div>
<!-- Third card here -->
<div class="column right " ">
<div class="inner_div">
<h3 class="headers">
Pro Recruit
</h3>
<h3 class="price">NGN 90,000</h3>
<!-- <p>Including VAT</p> -->
<!-- short description here -->
<div class="description_holder">
<p class="pt-2">Let the Professionals handle it.</p>
<p class="pt-3"> We do the hard work for you and find the perfect candidates.</p>
</div>
<!-- features area here -->
<div class="features_div">
<!-- Notify Icon here -->
<span class="notify_icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 30 30" version="1.1">
<title>Modal</title>
<defs>
<path d="M17,2.83333327 C9.17999997,2.83333327 2.83333327,9.17999997 2.83333327,17 C2.83333327,24.82 9.17999997,31.1666667 17,31.1666667 C24.82,31.1666667 31.1666667,24.82 31.1666667,17 C31.1666667,9.17999997 24.82,2.83333327 17,2.83333327 L17,2.83333327 Z M18.4166667,24.0833333 L15.5833333,24.0833333 L15.5833333,15.5833333 L18.4166667,15.5833333 L18.4166667,24.0833333 L18.4166667,24.0833333 Z M18.4166667,12.75 L15.5833333,12.75 L15.5833333,9.91666664 L18.4166667,9.91666664 L18.4166667,12.75 L18.4166667,12.75 Z" id="path-1"/>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="info" transform="translate(-2.000000, -2.000000)">
<polygon id="Base" points="-7.08333493e-08 -7.08332285e-08 34.0000001 -7.08332285e-08 34.0000001 34.0000001 -7.08333493e-08 34.0000001"/>
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"/>
</mask>
<g id="Icon" fill-rule="nonzero"/>
<rect id="↳-🎨-Color" fill="#4E5559" fill-rule="evenodd" mask="url(#mask-2)" x="0" y="0" width="34" height="34"/>
</g>
</g>
</svg>
</span>
<!-- features here -->
<section class="pt-10">
<div class="fetures_list_div">
<div>
<span><img src="https://res.cloudinary.com/alphajeez/image/upload/v1601380119/check-f51956705b_amrqbs.svg" alt=""></span>
</div>
<span class="reach">Maximum Reach</span>
</div>
<div class="fetures_list_div">
<div>
<span><img src="https://res.cloudinary.com/alphajeez/image/upload/v1601380119/check-f51956705b_amrqbs.svg" alt=""></span>
</div>
<span class="reach">Maximum Reach</span>
</div>
<div class="fetures_list_div">
<div>
<span><img src="https://res.cloudinary.com/alphajeez/image/upload/v1601380119/check-f51956705b_amrqbs.svg" alt=""></span>
</div>
<span class="reach">Maximum Reach</span>
</div>
<div class="fetures_list_div">
<div>
<span><img src="https://res.cloudinary.com/alphajeez/image/upload/v1601380119/check-f51956705b_amrqbs.svg" alt=""></span>
</div>
<span class="reach">Maximum Reach</span>
</div>
</section>
<!-- post button here -->
<div>
<button class="post_btn">BUY NOW</button>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment