Hey there guys , so I decided to give a tutorial about building a Landing Page Website in HTML CSS JavaScript , now a landing page website is more like a single page website which is mostly used for affiliate marketing to advertise digital or physical products which there is a link to purchase the item or to make an action but these days Landing Page Website are now used for a lot of things like single page portfolio, information page , articles just to mention a few..
So we are going to be using the past tutorials example to build a demo Landing Page to discuss about an Amazon product ( disclaimer : I do not sell this product this is just a simple demo of what a landing page wouldook like in our case a Landing page for affiliate marketing of an Amazon product ).
First we design the page , designing a web page before time gives us developer and web design a broad perspective of what the project would look like after designing it and save us the stree of having to guess where each element should be thus making our development time faster and easier and more fun .
Let's start:
Here is the design of the landing page using illustrator.
Here is the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="wclassth=device-wclassth, initial-scale=1.0">
<title>Creatine Landing Page </title>
</head>
<body>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>
<a href="#home"> HOME </a>
</li>
<li>
<a href="#about"> ABOUT </a>
</li>
<li>
<a href="#testimonial"> TESTIMONIAL </a>
</li>
<li>
<a href="#contact"> CONTACT </a>
</li>
</ul>
</div>
<div class="headshot" id="home">
<h2> THE BEST CREATINE PRODUCT </h2>
<a class="btn" href="https://www.amazon.com/Nutricost-Creatine-Monohydrate-Micronized-Powder/dp/B00GL2HMES/ref=sr_1_3_sspa?keywords=creatine&qid=1662578808&sr=8-3-spons&psc=1&smid=A2YD2H3KGK1F4L&spLa=ZW5jcnlwdGVkUXVhbGlmaWVyPUFCRExNWktHM0dEMTUmZW5jcnlwdGVkSWQ9QTA0OTI4OTAzVENWRUlSSkJCMzJDJmVuY3J5cHRlZEFkSWQ9QTAxNjk5MTcxQjdKUllWTVkyVUk1JndpZGdldE5hbWU9c3BfYXRmJmFjdGlvbj1jbGlja1JlZGlyZWN0JmRvTm90TG9nQ2xpY2s9dHJ1ZQ=="> BUY NOW </a>
<div class="head-img">
<img src="creatine.png" alt="/" />
</div>
</div>
<section id="section" id="about">
<h3> About Creatine </h3>
<P class="product-info">
ipsum illum
labore autem amet dolorem veniam class similique, fuga obcaecati consequuntur? Aliquclass, nobis. Tenetur,
perspiciatis pariatur.
</P>
<div class="about-img">
<img src="creatine.png" alt="/" />
</div>
<div class="INFO-SECT">
<div class="cont-1">
<h5> Features </h5>
<div> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam esse hic quclassem maiores
fugiat vero amet molestias blanditiis voluptatibus, </div>
</div>
<div class="cont-1">
<h5> How It Works </h5>
<div> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam esse hic quclassem maiores
fugiat vero amet molestias blanditiis voluptatibus!</div>
</div>
</div>
</section>
<section id="testimonial">
<h3> Testimonials</h3>
<div class="slclasser">
<div class="slider">
<div class="slides">
<div class="slide-1"> 1 </div>
<div class="slide-1"> 2 </div>
<div class="slide-1"> 3 </div>
<div class="slide-1"> 4 </div>
<div class="slide-1"> 5 </div>
<div class="slide-1"> 6 </div>
<div class="slide-1"> 7 </div>
</div>
</div>
</div>
</section>
<section id="contact">
<h3>Get In Touch </h3>
<div class="contact-form">
<form>
<label for="name"> Name </label><br />
<input type="text" placeholder="Enter your name..." /><br />
<label for="name"> Email Address </label><br />
<input type="text" placeholder="Enter your email..." /><br />
<label for="name"> Message </label><br />
<textarea message class="message" placeholder="Enter Your Message Here...."> </textarea>
<button type="submit"> SEND </button>
</form>
</div>
<div class="cont-info">
<h3> SandersSmith@example.com</h3>
<h3> 20 Jackson VIlle Street</h3>
</section>
<footer>
<p> ©copyright 2025 . All Rights Reserverd | Designed By foxlead </p>
</footer>
</body>
</html>
<style>
Here is the CSS code:
body {
max-width: 1440px;
min-width: 320px;
display: flexbox;
overflow-x: hidden;
margin: 0 auto 0 auto;
position: relative;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
* {
text-decoration: none;
list-style: none;
}
h2 {
color: #fff;
font-weight: bolder;
text-transform: uppercase;
font-size: 53px;
position: absolute;
width: 50%;
top: 5%;
left: 5%;
}
nav {
position: absolute;
top: 10px;
right: 35px;
display: inline-block;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color: #fff;
cursor: pointer;
}
.headshot {
background: #152d7a;
width: 100%;
height: 500px;
display: block;
margin: 0 auto;
}
h3 {
display: block;
font-weight: 500;
font-size: larger;
}
.btn {
color: #ffff;
background: #f49916;
padding: 8px 12px;
border: none;
border-radius: 5px;
position: absolute;
cursor: pointer;
top: 16%;
left: 30%;
font-size: large;
font-weight: 500;
}
.head-img {
width: 30%;
height: 350px;
display: block;
position: absolute;
right: 35px;
top: 90px;
}
section {
display: block;
width: 100%;
text-align: center;
height: auto;
position: relative;
}
.head-img img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: contain;
aspect-ratio: 1;
}
h5 {
text-align: left;
display: inline-block;
width: 100%;
}
#section {
height: 800px;
width: 100%;
display: block;
}
#sidebarMenu {
position: absolute;
right: 35px;
top: 10px;
}
.sidebarMenuInner li a {
color: #fff;
}
.sidebarMenuInner li {
display: inline-block;
padding: 10px;
}
.product-info {
width: 50%;
margin: 0 auto;
display: inline-block;
text-transform: capitalize;
margin: 10px;
text-align: center;
}
input[type=checkbox] {
display: none;
visibility: hidden;
}
.slider {
/*styling for the slider container */
margin: 0 auto 0 auto;
position: relative;
}
.Slider {
margin-top: 30px;
/* specifying the actual slider but using the case sensitivity */
width: auto;
text-align: center;
cursor: grab;
overflow: hidden;
}
.slides {
display: flex;
text-align: center;
overflow-x: auto;
border: 1px solid #fff;
width: 100%;
margin: 0 auto 0 auto;
scrollbar-width: 300px;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
/* specify whether to use native scrollin in ans overflowing element */
}
.slides::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.slides::-webkit-scrollbar-thumb {
background: white;
border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides>div {
scroll-snap-align: center;
/* this is the main value scroll-snap-align which will align the contents to the center just like the carousel used in the portfolio */
flex-shrink: 0;
/* responsiible for shringking the contents*/
width: 700px;
/* width of the card */
height: 400px;
/* height of th card */
margin-right: 20px;
border-radius: 10px;
background: #ece;
/* color of the card */
transform-origin: center;
/* not necessary but still valuable */
transform: scale(1);
/* not necessary but still valuable */
transition: ease 0.5s;
/* not necessary but still valuable */
position: center;
/* responsible for aligning the contents inside the cards */
display: flex;
/* not necessary but still valuable */
justify-content: center;
/* responsible for aligning the contents inside the cards */
align-items: center;
/* responsible for aligning the contents inside the cards */
font-size: 100px;
z-index: ;
}
::-webkit-scrollbar-thumb {
background: #fff;
}
h4 {
font-size: large;
}
.about-img {
width: 45%;
height: 450px;
display: block;
left: 35px;
position: absolute;
}
.about-img img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.contact-form {
width: 50%;
display: block;
height: auto;
margin-left: 35px;
text-align: left;
padding: 10px;
}
input {
width: 80%;
padding: 10px;
border: none;
display: block;
border: none;
border-bottom: 2px solid #152d7a;
}
textarea {
height: 250px;
resize: none;
width: 80%;
border: none;
border-bottom: 2px solid #152d7a;
}
button {
color: #fff;
background: #152d7a;
padding: 15px;
border-radius: 5px;
font-weight: 500;
cursor: pointer;
font-size: large;
border: none;
margin: 20px;
}
.INFO-SECT {
width: 45%;
height: auto;
padding: 10px;
text-align: left;
position: absolute;
right: 35px;
text-transform: capitalize;
}
.INFO-SECT h5 {
font-weight: 500;
font-size: large;
}
.cont-1 {
display: block;
margin: 5px;
padding: 3px;
text-transform: capitalize;
}
.cont-1 div {
width: 80%;
margin: 0 auto 0 auto;
display: block;
}
.cont-info {
position: absolute;
right: 10%;
text-align: center;
margin-top: -300px;
}
label {
font-size: larger;
font-weight: 500;
}
footer {
margin-top: 20%;
background: #152d7a;
text-align: center;
text-align: center;
height: 50px;
color: #fff;
}
@media screen and (max-width: 1024px) {
body {
max-width: 1024px;
height: auto;
min-width: 320px;
}
.slides {
width: 90%;
}
.about-img {
left : 0;
}
.slides>div {
width: 300px;
height: 250px;
}
#sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top:-10px;
z-index: 99;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background: linear-gradient(180deg, #FC466B 0%, #3F5EFB 100%);
}
.sidebarMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li {
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
display: block;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span {
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a {
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked~#sidebarMenu {
transform: translateX(0);
}
input[type="checkbox"]:checked ~ .sidebarIconToggle {
transform: translateX(250px);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
border-radius : 10px ;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.cont-info{
display : none ;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
}
@media screen and (max-width : 600px) {
body{
max-width : 600px ;
height : auto ;
}
h2{
font-size : 45px ;
}
*{
font-size : small ;
}
.btn
{
position: relative ;
top : 85% ;
}
}
@media screen and (max-width : 500px ) {
body{
max-width : 500px ;
height : auto ;
}
text-area {
width : 100% ;
}
}
@media screen and (max-width : 360px) {
body{
max-width : 360px ;
height : auto ;
}
.head-img{
width : 70% ;
top : 0;
right : 0;
}
.section{
height : 750px ;
}
.about-img{
width : 70% ;
height : 50% ;
}
.cont-1{
margin : 0;
}
.cont-1 > div {
font-size : x-small ;
height : 100px ;
}
.product-info{
width : 90% ;
}
section{
margin : 20px ;
}
.contact-form{
width : 90% ;
margin : 0;
}
input{
width : 90% ;
}
button{
font-size : small ;
}
}
code at once:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="wclassth=device-wclassth, initial-scale=1.0">
<title>Creatine Landing Page </title>
</head>
<body>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>
<a href="#home"> HOME </a>
</li>
<li>
<a href="#about"> ABOUT </a>
</li>
<li>
<a href="#testimonial"> TESTIMONIAL </a>
</li>
<li>
<a href="#contact"> CONTACT </a>
</li>
</ul>
</div>
<div class="headshot" id="home">
<h2> THE BEST CREATINE PRODUCT </h2>
<a class="btn" href="https://www.amazon.com/Nutricost-Creatine-Monohydrate-Micronized-Powder/dp/B00GL2HMES/ref=sr_1_3_sspa?keywords=creatine&qid=1662578808&sr=8-3-spons&psc=1&smid=A2YD2H3KGK1F4L&spLa=ZW5jcnlwdGVkUXVhbGlmaWVyPUFCRExNWktHM0dEMTUmZW5jcnlwdGVkSWQ9QTA0OTI4OTAzVENWRUlSSkJCMzJDJmVuY3J5cHRlZEFkSWQ9QTAxNjk5MTcxQjdKUllWTVkyVUk1JndpZGdldE5hbWU9c3BfYXRmJmFjdGlvbj1jbGlja1JlZGlyZWN0JmRvTm90TG9nQ2xpY2s9dHJ1ZQ=="> BUY NOW </a>
<div class="head-img">
<img src="creatine.png" alt="/" />
</div>
</div>
<section id="section" id="about">
<h3> About Creatine </h3>
<P class="product-info">
ipsum illum
labore autem amet dolorem veniam class similique, fuga obcaecati consequuntur? Aliquclass, nobis. Tenetur,
perspiciatis pariatur.
</P>
<div class="about-img">
<img src="creatine.png" alt="/" />
</div>
<div class="INFO-SECT">
<div class="cont-1">
<h5> Features </h5>
<div> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam esse hic quclassem maiores
fugiat vero amet molestias blanditiis voluptatibus, </div>
</div>
<div class="cont-1">
<h5> How It Works </h5>
<div> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam esse hic quclassem maiores
fugiat vero amet molestias blanditiis voluptatibus!</div>
</div>
</div>
</section>
<section id="testimonial">
<h3> Testimonials</h3>
<div class="slclasser">
<div class="slider">
<div class="slides">
<div class="slide-1"> 1 </div>
<div class="slide-1"> 2 </div>
<div class="slide-1"> 3 </div>
<div class="slide-1"> 4 </div>
<div class="slide-1"> 5 </div>
<div class="slide-1"> 6 </div>
<div class="slide-1"> 7 </div>
</div>
</div>
</div>
</section>
<section id="contact">
<h3>Get In Touch </h3>
<div class="contact-form">
<form>
<label for="name"> Name </label><br />
<input type="text" placeholder="Enter your name..." /><br />
<label for="name"> Email Address </label><br />
<input type="text" placeholder="Enter your email..." /><br />
<label for="name"> Message </label><br />
<textarea message class="message" placeholder="Enter Your Message Here...."> </textarea>
<button type="submit"> SEND </button>
</form>
</div>
<div class="cont-info">
<h3> SandersSmith@example.com</h3>
<h3> 20 Jackson VIlle Street</h3>
</section>
<footer>
<p> ©copyright 2025 . All Rights Reserverd | Designed By foxlead </p>
</footer>
</body>
</html>
<style>
body {
max-width: 1440px;
min-width: 320px;
display: flexbox;
overflow-x: hidden;
margin: 0 auto 0 auto;
position: relative;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
* {
text-decoration: none;
list-style: none;
}
h2 {
color: #fff;
font-weight: bolder;
text-transform: uppercase;
font-size: 53px;
position: absolute;
width: 50%;
top: 5%;
left: 5%;
}
nav {
position: absolute;
top: 10px;
right: 35px;
display: inline-block;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color: #fff;
cursor: pointer;
}
.headshot {
background: #152d7a;
width: 100%;
height: 500px;
display: block;
margin: 0 auto;
}
h3 {
display: block;
font-weight: 500;
font-size: larger;
}
.btn {
color: #ffff;
background: #f49916;
padding: 8px 12px;
border: none;
border-radius: 5px;
position: absolute;
cursor: pointer;
top: 16%;
left: 30%;
font-size: large;
font-weight: 500;
}
.head-img {
width: 30%;
height: 350px;
display: block;
position: absolute;
right: 35px;
top: 90px;
}
section {
display: block;
width: 100%;
text-align: center;
height: auto;
position: relative;
}
.head-img img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: contain;
aspect-ratio: 1;
}
h5 {
text-align: left;
display: inline-block;
width: 100%;
}
#section {
height: 800px;
width: 100%;
display: block;
}
#sidebarMenu {
position: absolute;
right: 35px;
top: 10px;
}
.sidebarMenuInner li a {
color: #fff;
}
.sidebarMenuInner li {
display: inline-block;
padding: 10px;
}
.product-info {
width: 50%;
margin: 0 auto;
display: inline-block;
text-transform: capitalize;
margin: 10px;
text-align: center;
}
input[type=checkbox] {
display: none;
visibility: hidden;
}
.slider {
/*styling for the slider container */
margin: 0 auto 0 auto;
position: relative;
}
.Slider {
margin-top: 30px;
/* specifying the actual slider but using the case sensitivity */
width: auto;
text-align: center;
cursor: grab;
overflow: hidden;
}
.slides {
display: flex;
text-align: center;
overflow-x: auto;
border: 1px solid #fff;
width: 100%;
margin: 0 auto 0 auto;
scrollbar-width: 300px;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
/* specify whether to use native scrollin in ans overflowing element */
}
.slides::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.slides::-webkit-scrollbar-thumb {
background: white;
border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides>div {
scroll-snap-align: center;
/* this is the main value scroll-snap-align which will align the contents to the center just like the carousel used in the portfolio */
flex-shrink: 0;
/* responsiible for shringking the contents*/
width: 700px;
/* width of the card */
height: 400px;
/* height of th card */
margin-right: 20px;
border-radius: 10px;
background: #ece;
/* color of the card */
transform-origin: center;
/* not necessary but still valuable */
transform: scale(1);
/* not necessary but still valuable */
transition: ease 0.5s;
/* not necessary but still valuable */
position: center;
/* responsible for aligning the contents inside the cards */
display: flex;
/* not necessary but still valuable */
justify-content: center;
/* responsible for aligning the contents inside the cards */
align-items: center;
/* responsible for aligning the contents inside the cards */
font-size: 100px;
z-index: ;
}
::-webkit-scrollbar-thumb {
background: #fff;
}
h4 {
font-size: large;
}
.about-img {
width: 45%;
height: 450px;
display: block;
left: 35px;
position: absolute;
}
.about-img img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.contact-form {
width: 50%;
display: block;
height: auto;
margin-left: 35px;
text-align: left;
padding: 10px;
}
input {
width: 80%;
padding: 10px;
border: none;
display: block;
border: none;
border-bottom: 2px solid #152d7a;
}
textarea {
height: 250px;
resize: none;
width: 80%;
border: none;
border-bottom: 2px solid #152d7a;
}
button {
color: #fff;
background: #152d7a;
padding: 15px;
border-radius: 5px;
font-weight: 500;
cursor: pointer;
font-size: large;
border: none;
margin: 20px;
}
.INFO-SECT {
width: 45%;
height: auto;
padding: 10px;
text-align: left;
position: absolute;
right: 35px;
text-transform: capitalize;
}
.INFO-SECT h5 {
font-weight: 500;
font-size: large;
}
.cont-1 {
display: block;
margin: 5px;
padding: 3px;
text-transform: capitalize;
}
.cont-1 div {
width: 80%;
margin: 0 auto 0 auto;
display: block;
}
.cont-info {
position: absolute;
right: 10%;
text-align: center;
margin-top: -300px;
}
label {
font-size: larger;
font-weight: 500;
}
footer {
margin-top: 20%;
background: #152d7a;
text-align: center;
text-align: center;
height: 50px;
color: #fff;
}
@media screen and (max-width: 1024px) {
body {
max-width: 1024px;
height: auto;
min-width: 320px;
}
.slides {
width: 90%;
}
.about-img {
left : 0;
}
.slides>div {
width: 300px;
height: 250px;
}
#sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top:-10px;
z-index: 99;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background: linear-gradient(180deg, #FC466B 0%, #3F5EFB 100%);
}
.sidebarMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li {
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
display: block;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span {
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a {
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked~#sidebarMenu {
transform: translateX(0);
}
input[type="checkbox"]:checked ~ .sidebarIconToggle {
transform: translateX(250px);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
border-radius : 10px ;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.cont-info{
display : none ;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
}
@media screen and (max-width : 600px) {
body{
max-width : 600px ;
height : auto ;
}
h2{
font-size : 45px ;
}
*{
font-size : small ;
}
.btn
{
position: relative ;
top : 85% ;
}
}
@media screen and (max-width : 500px ) {
body{
max-width : 500px ;
height : auto ;
}
text-area {
width : 100% ;
}
}
@media screen and (max-width : 360px) {
body{
max-width : 360px ;
height : auto ;
}
.head-img{
width : 70% ;
top : 0;
right : 0;
}
.section{
height : 750px ;
}
.about-img{
width : 70% ;
height : 50% ;
}
.cont-1{
margin : 0;
}
.cont-1 > div {
font-size : x-small ;
height : 100px ;
}
.product-info{
width : 90% ;
}
section{
margin : 20px ;
}
.contact-form{
width : 90% ;
margin : 0;
}
input{
width : 90% ;
}
button{
font-size : small ;
}
}
</style>
Here is the view of our project
Now this are screenshots for he view , i'll drop the live preview of the webpage soon thanks for your time . cheers ......
Alexander ...