Untitled
unknown
plain_text
2 years ago
20 kB
6
Indexable
/// HTML ///
********
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./SCSS/index.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Document</title>
<script src=”https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js”
integrity=”sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo”
crossorigin=”anonymous”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js”
integrity=”sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/”
crossorigin=”anonymous”></script>
</head>
<body>
<div class="w-100">
<div class="w-100 d-flex justify-content-center"><img src="./image/message.png" class="msg-img mt-5 mb-2"
alt="MESSAGE"></div>
<ul class="nav container-fluid bg-highlight d-flex justify-content-center">
<li class="nav-item">
<a class="nav-cont nav-link active text-dark fs-5" aria-current="page" href="#">Nav1</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark fs-5" href="#">Nav2</a>
</li>
<li class="nav-item dropdown" style="display: flex; align-items: center; position: relative;">
<a class="nav-link text-dark fs-5" href="#">Nav3</a><span style="color: rgb(173, 165, 165); position: absolute; left: 85%; bottom: 30%;"><img style="width: 14px;" src="./image/dropD.png" alt="dropD"></span>
</li>
<li class="nav-item" style="display: flex; align-items: center; position: relative;">
<a class="nav-link text-dark fs-5" href="#" tabindex="-1">Nav4</a><span style="color: rgb(173, 165, 165); position: absolute; left: 85%; bottom: 30%;"><img style="width: 14px;" src="./image/dropD.png" alt="dropD"></span>
</li>
<li class="nav-item">
<a class="nav-link text-dark fs-5" href="#" tabindex="-1">Nav5</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark fs-5" href="#" tabindex="-1">Nav6</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark fs-5" href="#" tabindex="-1">Nav7</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark fs-5" href="#" tabindex="-1">Nav8</a>
</li>
</ul>
<hr>
<div class="mb-5 bg-light w-100 d-flex justify-content-end">
<div class="first-container">
<h2 class="first-heading mt-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<p class="first-para mt-3 fs-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed commodo
est.Pellentesque eu placerat mauris. Etiam ut maximus ante. Suspendisse varius dolor nec bibendum dignissim.
Proin in diam a justo sollicitudin mattis eu sagittis nunc. In hac habitasse platea dictumst.</p>
<button class="mt-5 first-button text-white bg-primary">Check Pricing</button>
</div>
<img class="second-img" src="./image/first.png" alt="first">
</div>
<div class="mt-5 w-100 d-flex flex-column align-items-center">
<h3 class="second-heading">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</h3>
<div class="d-flex justify-content-center">
<div class="cards">
<h5 class="title">Lorem ipsum dolor sit .</h5>
<p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed commodo est.Pellentesque eu placerat mauris. Etiam ut maximus ante. Suspendisse varius dolor nec bibendum dignissim. Proin in diam a justo sollicitudin mattis eu sagittisnunc. In hac habitasse.</p>
</div>
<div class="cards">
<h5 class="title">Lorem ipsum dolor sit .</h5>
<p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed commodo est.Pellentesque eu placerat mauris. Etiam ut maximus ante. Suspendisse varius dolor nec bibendum dignissim. Proin in diam a justo sollicitudin mattis eu sagittisnunc. In hac habitasse.</p>
</div>
<div class="cards">
<h5 class="title">Lorem ipsum dolor sit .</h5>
<p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed commodo est.Pellentesque eu placerat mauris. Etiam ut maximus ante. Suspendisse varius dolor nec bibendum dignissim. Proin in diam a justo sollicitudin mattis eu sagittisnunc. In hac habitasse.</p>
</div>
</div>
</div>
<div class="d-flex flex-column align-items-center">
<h3 class="third-heading">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</h3>
<div class="w-100 h-600px d-flex justify-content-center">
<div class="cards-2">
<img class="third-1" src="./IMAGE/thirdrow-1.png" alt="">
<h5 class="title">Lorem ipsum dolor sit .</h5>
<p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed commodo est. Pellentesque eu placerat mauris. Etiam ut maximus ante. Suspendisse varius dolor nec bibendum dignissim. Proin in diam a justo sollicitudin mattis eu sagittis nunc. In hac habitasse platea dictumst.</p>
</div>
<div class="cards-2">
<img class="third-2" src="./IMAGE/thirdrow-2.png" alt="">
<h5 class="title">Lorem ipsum dolor sit .</h5>
<p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed commodo est. Pellentesque eu placerat mauris. Etiam ut maximus ante. Suspendisse varius dolor nec bibendum dignissim. Proin in diam a justo sollicitudin mattis eu sagittis nunc. In hac habitasse platea dictumst.</p>
</div>
<div class="cards-2">
<img class="third-3" src="./IMAGE/thirdrow-3.png" alt="">
<h5 class="title">Lorem ipsum dolor sit .</h5>
<p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed commodo est. Pellentesque eu placerat mauris. Etiam ut maximus ante. Suspendisse varius dolor nec bibendum dignissim. Proin in diam a justo sollicitudin mattis eu sagittis nunc. In hac habitasse platea dictumst.</p>
</div>
</div>
</div>
<h3 class="fourth-heading">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</h3>
<div class="cont-1-main-container">
<div class="cont-container">
<img src="./IMAGE/handDollar.png" alt="handDoller">
<h4 class="cont-container-heading">Lorem ipsum dolor sit .</h4>
</div>
<p class="cont-container-para">adipiscing elit. Ut sed commodo est.Pellentesque eu placerat mauris. ut maximus ante. Suspendisse varius dolor nec bibendum dignissim</p>
<button class="cont-container-button bg-primary text-white">Check Pricing</button>
</div>
<div class="cont-2-main-container">
<div class="cont-container">
<img src="./IMAGE/arrow.png" alt="arrow">
<h4 class="cont-container-heading">Lorem ipsum dolor sit .</h4>
</div>
<p class="cont-container-para">adipiscing elit. Ut sed commodo est.Pellentesque eu placerat mauris. ut maximus ante. Suspendisse</p>
<button class="cont-container-button bg-primary text-white">Check Pricing</button>
</div>
<div class="cont-3-main-container">
<div class="cont-container">
<img src="./IMAGE/zoom.png" alt="arrow">
<h4 class="cont-container-heading">Lorem ipsum dolor sit .</h4>
</div>
<p class="cont-container-para">adipiscing elit. Ut sed commodo est.Pellentesque eu placerat mauris. ut maximus ante. Suspendisse varius dolor nec bibendum dignissim</p>
<button class="cont-container-button bg-primary text-white">Check Pricing</button>
</div>
<div class="cont-4-main-container">
<div class="cont-container">
<img src="./IMAGE/moneyBack.png" alt="arrow">
<h4 class="cont-container-heading">Lorem ipsum dolor sit .</h4>
</div>
<p class="cont-container-para">adipiscing elit. Ut sed commodo est.Pellentesque eu placerat mauris. ut maximus ante. Suspendisse</p>
<button class="cont-container-button bg-primary text-white">Check Pricing</button>
</div>
<h3 class="fifth-heading">Lorem ipsum dolor sit .</h3>
<div class="main-box w-75 mx-auto px-4 py-4 position-relative" style="height: 300px;box-shadow: 0px 16px 48px #00000029;background: #F8FAFC 0% 0% no-repeat padding-box;border-radius: 25px;">
<div class="main-1-box d-flex align-items-center">
<img class="main-1-box-img" src="./image/star.png" alt="star">
<h4 class="main-1-box-heading ms-2" style="font-size: 25px;">Lorem ipsum dolor sit .</h4>
</div>
<div class="d-flex my-5 position-absolute justify-content-center gap-3" style="bottom: -115px; width: 90%; left: 60px;">
<div class="card" style="width: 250px;box-shadow: 0px 16px 48px #00000029;height: fit-content; border-radius: 25px;border: none;">
<div class="card-body">
<div class="d-flex justify-content-between">
<div class="d-flex">
<div style="width: 30px;">
<img src="./image/a1.png" alt="avatar" class="rounded" style="width: 100%;"/>
</div>
<div class="d-flex flex-column ms-2">
<h5 style="font-size: 0.8rem; font-family: normal normal 600 13px/18px Nunito Sans;">Jhone Doe</h5>
<span style="font-size: 0.7rem; color: grey;">CEO</span>
</div>
</div>
<div class="d-flex">
<div style="width: 10px;">
<img src="./image/rating.png" alt="rating" style="width: 100%;"/>
</div>
<div style="width: 10px;">
<img src="./image/rating.png" alt="rating" style="width: 100%;"/>
</div>
<div style="width: 10px;">
<img src="./image/rating.png" alt="rating" style="width: 100%;"/>
</div>
<div style="width: 10px;">
<img src="./image/rating.png" alt="rating" style="width: 100%;"/>
</div>
</div>
</div>
<p class="my-5 mt-4 mb-1" style="font-size: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed commodo est. Pellentesque eu placerat mauris. Etiam ut maximus ante. Suspendisse varius dolor nec bibendum dignissim. Proin in diam a justo sollicitudin mattis eu sagittis nunc. In hac habitasse platea dictumst.</p>
</div>
</div>
<div class="card" style="width: 250px;box-shadow: 0px 16px 48px #00000029;height: fit-content; border-radius: 25px;border: none;">
<div class="card-body">
<div class="d-flex justify-content-between">
<div class="d-flex">
<div style="width: 30px;">
<img src="./image/a2.png" alt="avatar" class="rounded" style="width: 100%;"/>
</div>
<div class="d-flex flex-column ms-2">
<h5 style="font-size: 0.8rem; font-family: normal normal 600 13px/18px Nunito Sans;">Amanda green</h5>
<span style="font-size: 0.7rem; color: grey;">Operations Manager</span>
</div>
</div>
<div class="d-flex">
<div style="width: 10px;">
<img src="./image/rating.png" alt="rating" style="width: 100%;"/>
</div>
<div style="width: 10px;">
<img src="./image/rating.png" alt="rating" style="width: 100%;"/>
</div>
<div style="width: 10px;">
<img src="./image/rating.png" alt="rating" style="width: 100%;"/>
</div>
<div style="width: 10px;">
<img src="./image/rating.png" alt="rating" style="width: 100%;"/>
</div>
</div>
</div>
<p class="my-5 mt-4 mb-1" style="font-size: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed commodo est. Pellentesque eu placerat mauris. Etiam ut maximus ante. Suspendisse varius dolor nec bibendum dignissim. Proin in diam a justo sollicitudin mattis eu sagittis nunc. In hac habitasse platea dictumst.</p>
</div>
</div>
<div class="card" style="width: 250px;box-shadow: 0px 16px 48px #00000029;height: fit-content; border-radius: 25px;border: none;">
<div class="card-body">
<div class="d-flex justify-content-between">
<div class="d-flex">
<div style="width: 30px;">
<img src="./image/a3.png" alt="avatar" class="rounded" style="width: 100%;"/>
</div>
<div class="d-flex flex-column ms-2">
<h5 style="font-size: 0.8rem; font-family: normal normal 600 13px/18px Nunito Sans;">Sam Cooper</h5>
<span style="font-size: 0.7rem; color: grey;">Customer Service Manager</span>
</div>
</div>
<div class="d-flex">
<div style="width: 10px;">
<img src="./image/rating.png" alt="rating" style="width: 100%;"/>
</div>
<div style="width: 10px;">
<img src="./image/rating.png" alt="rating" style="width: 100%;"/>
</div>
<div style="width: 10px;">
<img src="./image/rating.png" alt="rating" style="width: 100%;"/>
</div>
<div style="width: 10px;">
<img src="./image/rating.png" alt="rating" style="width: 100%;"/>
</div>
</div>
</div>
<p class="my-5 mt-4 mb-1" style="font-size: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed commodo est. Pellentesque eu placerat mauris. Etiam ut maximus ante. Suspendisse varius dolor nec bibendum dignissim. Proin in diam a justo sollicitudin mattis eu sagittis nunc. In hac habitasse platea dictumst.</p>
</div>
</div>
</div>
<span style="position: absolute; right: -15px; bottom: 20%; width: 15px; height: 15px; padding: 20px; border-radius: 100%; display: flex;justify-content: center; align-items: center; background-color: rgb(255, 255, 255); box-shadow: 0.5px 0.5px 10px black
;"><img style="width: 20px; height: 20px;" src="./image/leftArr.png" alt="leftArr"></span>
</div>
</div>
<h3 class="sixth-heading">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</h3>
<div style="width: 60%; padding-bottom: 100px; padding-top: 100px;" class="last-row d-flex justify-content-between mx-auto align-items-center">
<div>
<img style="width: 80px; height: 80px; padding-bottom: 10px;" src="./image/fire.png" alt="fire">
<h5>Forms On Fire</h5>
</div>
<div>
<img style="width: 80px; height: 80px; padding-bottom: 10px;" src="./image/electro.png" alt="fire">
<h5>ElectroNeek Studio IDE</h5>
</div>
<div>
<img style="width: 80px; height: 80px; padding-bottom: 10px;" src="./image/jot.png" alt="fire">
<h5>Jot form</h5>
</div>
</div>
<div class="text-white d-flex justify-content-center align-items-end" style="background: #000000 0% 0% no-repeat padding-box; padding-top: 250px; padding-bottom: 50px;">
<div class="d-flex justify-content-between" style="width: 11%;">
<h5 style="font-family: normal normal normal 18px/24px Nunito Sans; font-size: 20px;">©</h5>
<h5 style="font-family: normal normal normal 18px/24px Nunito Sans; font-size: 20px;">Helplama 2021</h5>
</div>
</div>
</div>
</body>
</html>
//// SCSS ////
********
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
// $heading:
// #000000,
// normal normal 900 40px/54px Nunito Sans;
h5{
margin-bottom: 0!important;
}
.msg-img {
width: 10rem;
display: block;
}
hr {
height: 20px;
background-color: aqua;
}
.first-container {
width: 40%;
}
.first-heading {
color: #000000;
font-family: normal normal 900 40px/54px Nunito Sans;
font-weight: bold;
}
.first-para {
font: normal normal normal 18px/24px Nunito Sans;
}
.first-button,
.cont-container-button {
font-family: normal normal 600 23px/31px Nunito Sans;
border-radius: 30px;
border: none;
padding: 10px 30px;
font-size: large;
}
.second-img {
width: 40%;
height: 450px;
margin-right: 40px;
}
.second-heading {
color: #000000;
font-family: normal normal bold 35px/47px Nunito Sans;
font-weight: bold;
}
.third-heading {
font-family: normal normal bold 35px/47px Nunito Sans;
font-weight: bold;
color: #000000;
padding: 100px 0 50px 0;
}
.cards {
width: 21%;
margin: 30px;
padding: 20px 15px 10px 15px;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 20px;
border: 1px solid rgb(230, 223, 223);
}
.cards-2 {
width: 21%;
margin: 30px;
padding: 20px 15px 10px 15px;
display: flex;
flex-direction: column;
// align-items: center;
border-radius: 20px;
// border: 1px solid rgb(230, 223, 223);
.title {
font-size: 16px;
font-weight: bold;
}
}
.mt-3 {
font-size: 15px;
}
.third-1 {
width: 200px;
height: 200px;
padding-bottom: 30px;
}
.third-2 {
width: 200px;
height: 200px;
padding-bottom: 30px;
}
.third-3 {
padding-bottom: 30px;
width: 200px;
height: 200px;
}
.fourth-heading, .sixth-heading{
font-family: normal normal bold 35px/47px Nunito Sans;
font-weight: bold;
color: #000000;
padding: 100px 0 50px 0;
text-align: center;
}
.sixth-heading{
font-family: normal normal bold 35px/47px Nunito Sans;
font-weight: bold;
color: #000000;
padding: 100px 0 50px 0;
text-align: center;
margin-top: 200px;
}
.fifth-heading{
font-family: normal normal bold 35px/47px Nunito Sans;
color: #000000;
padding: 100px 0 50px 0;
text-align: center;
}
.cont-1-main-container {
width: 50%;
padding-left: 100px;
margin-right: auto;
}
.cont-2-main-container {
width: 50%;
padding-right: 100px;
margin-left: auto;
}
.cont-3-main-container {
width: 50%;
padding-left: 100px;
margin-right: auto;
}
.cont-4-main-container {
width: 50%;
padding-right: 100px;
margin-left: auto;
}
.cont-container {
width: 65%;
display: flex;
justify-content: space-between;
align-items: center;
}
.cont-container-heading {
font-family: normal normal bold 24px/32px Nunito Sans;
color: #000000;
}
.cont-container-para {
font-family: normal normal normal 21px/28px Nunito Sans;
color: #000000;
font-size: 17px;
padding: 20px 0;
}
.main-1-box-heading{
font-family: normal normal bold 24px/32px Nunito Sans;
color: #000000;
font-weight: bold;
}
.main-1-box-img {
width: 64px;
}
@media screen and (max-width: 600px) {
ul {
width: 30%;
border: 1px solid red;
display: flex;
}
.fs-5{
font-size: 5%;
}
}
@include media-breakpoint-up(sm) {
.nav-link {
font-size: 2px;
}
}Editor is loading...