e-commerce gd types type-responsive

HTML

<!DOCTYPE html>

<head>

<title>GD CREATIVES</title>

rel="stylesheet">

</head>

<body>

</div>

<nav>

<li> <a href="">About</a> </li>

<li> <a href="">Contact</a> </li>

</ul>

</nav>

</div>

<h1>Give Yourself <br>A New Style</h1>

<p class="quote"> "What you wear is how you present yourself to the world, especially today,<br>

when human contacts are so quick. Fashion is instant language."<br> <br> —Miuccia Prada</p>

<a href="#" class="btn">Explore Now </a>

</div>

</div>

<img src="https://images.unsplash.com/photo-1485230895905-ec40ba36b9bc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"

alt="">

</div>

<img src="https://images.unsplash.com/photo-1543087903-1ac2ec7aa8c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=774&q=80"

alt="">

</div>

<img src="https://images.unsplash.com/photo-1530286910461-6a1960d1e83a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"

alt="">

</div>

<h2 class="title">Products</h2>

<img src="https://images.unsplash.com/photo-1544274270-3e0f956a2556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=337&q=80"

alt="">

<h3>OG Gucci T-shirt</h3>

</div>

<p>Price: $22.45</p>

</div>

<img src="https://images.unsplash.com/photo-1568658175897-22c7c272cd29?ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80"

alt="">

<h3>"CREATIVE" text T-shirt</h3>

</div>

<p>Price: $19.30</p>

</div>

<img src="https://images.unsplash.com/photo-1519330377309-9ee1c6783348?ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80"

alt="">

<h3>Anchor T-shirt</h3>

</div>

<p>Price: $23.40</p>

</div>

<img src="https://images.unsplash.com/photo-1566332594052-55e042931266?ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80"

alt="">

<h3>Samurai T-shirt</h3>

</div>

<p>Price: $19.50</p>

</div>

<h2 class="title"> Latest Products</h2>

<img src="https://images.unsplash.com/photo-1542296153-d2d387514d97?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"

alt="">

<h3>Blue T-shirt</h3>

</div>

<p>Price: $23.45</p>

</div>

<img src="https://images.unsplash.com/photo-1554568218-0f1715e72254?ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80"

alt="">

<h3>White T-shirt</h3>

</div>

<p>Price: $15.30</p>

</div>

<img src="https://images.unsplash.com/photo-1578587018452-892bacefd3f2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"

alt="">

<h3>Orange T-shirt</h3>

</div>

<p>Price: $33.40</p>

</div>

<img src="https://images.unsplash.com/photo-1580991584164-a4e12c31521d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"

alt="">

<h3>Pink T-shirt</h3>

</div>

<p>Price: $19.50</p>

</div>

<img src="https://images.unsplash.com/photo-1492288991661-058aa541ff43?ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80"

alt="">

<h3>Grey T-shirt</h3>

</div>

<p>Price: $12.45</p>

</div>

<img src="https://images.unsplash.com/photo-1546913199-58737a256cbd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"

alt="">

<h3>Black T-shirt</h3>

</div>

<p>Price: $14.30</p>

</div>

<img src="https://images.unsplash.com/photo-1519058082700-08a0b56da9b4?ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80"

alt="">

<h3>Green T-shirt</h3>

</div>

<p>Price: $26.40</p>

</div>

<img src="https://images.unsplash.com/photo-1561390454-a0a2c09386cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"

alt="">

<h3>Black T-shirt</h3>

</div>

<p>Price: $28.50</p>

</div>

</div>

<p>Exclusively available on GD Creatives</p>

<h1>Red and Black</h1>

<small>This premium T-shirt is as close to perfect as can be. It's optimized for all types of print

and will quickly become your favorite T-shirt. Soft, comfortable and durable.</small>

</div>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci ipsum quisquam ipsam quis fuga

maiores aut numquam harum quidem ex</p>

</div>

<img src="https://images.unsplash.com/photo-1584418879404-85eb6c39c30c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"

alt="">

<h2>Paul Davis</h2>

</div>

<p>Lorem quis fuga maiores aut numquam harum quidem ex quas voluptatem labore, sed odit a? Corporis

voluptatibus in voluptatum!</p>

</div>

<img src="https://images.unsplash.com/photo-1542909168-82c3e7fdca5c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"

alt="">

</div>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci ipsum quisquam ipsam quis fuga

maiores aut numquam harum quidem ex quas </p>

</div>

<img src="https://images.unsplash.com/photo-1569007889977-42e2392850d7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=501&q=80"

alt="">

<h2>Paula Scheer</h2>

</div>

</div>

</div>

</div>

</div>

</div>

<!--

<h2>Download Our Application</h2>

<p>Download our App for Android and iOS device</p>

</div>

<p>Our purpose is to deliver high quality of clothing in least price possible. </p>

</div>

<h3>Useful Links</h3>

<ul>

<li>Coupons</li>

<li>Blogpost</li>

<li>Return Policy</li>

<li>Join Affiliate</li>

</ul>

</div>

<h3>Follow Us</h3>

<ul>

<li>Instagram</li>

<li>Twitter</li>

<li>Facebook</li>

<li>Snapchat</li>

</ul>

</div>

</div> -->

<!-- <div class="nav-footer">

items

</div>

items

</div>

items

</div>

items

</div>

</div> -->

</div>

var MenuItems = document.getElementById("MenuItems")

MenuItems.style.maxHeight = "0px";

function menutoggle(){

if (MenuItems.style.maxHeight == "0px")

{

MenuItems.style.maxHeight = "200px";

}

else

{

MenuItems.style.maxHeight = "0px";

}

</script>

</body>

</html>

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

CSS

margin: 0px;

padding: 0px;

box-sizing: border-box;

}

body{

font-family: 'Poppins', sans-serif;

}

.navbar{

display: flex;

align-items: center;

padding: 5px;

/* border: 2px solid black; */

}

nav{

flex: 1;

text-align: right;

}

nav ul{

display: inline-block;

/* border: 2px solid red; */

list-style: none;

}

nav ul li a:hover{

color: #000;

}

nav ul li{

display: inline-block;

margin-right: 20px;

font-size: 1.3rem;

}

color: #555;

text-decoration: none;

margin:10px ;

}

color: #555;

font-size: 22px;

}

.container{

max-width: 1300px;

margin: auto;

padding: 0px 25px;

/* border: 2px solid black; */

}

.quote{

margin-top: 10px;

}

.row{

display: flex;

align-items: center;

flex-wrap: wrap;

justify-content: space-around;

}

.col-2{

flex-basis: 50%;

min-width: 300px;

align-items: center;

}

.col-2 img{

max-width: 100%;

padding: 2px 0px;

}

.col-2 h1{

font-size: 50px;

line-height: 60px;

margin: 25px 0px;

}

.btn{

display: inline-block;

background: #ff523b;

color: #fff;

padding: 8px 30px;

margin: 30px 0px;

border-radius: 30px;

transition: background 0.5s;

}

.btn:hover{

background: #563434;

}

.header{

background: radial-gradient(#fff,#ffd6d6);

}

.header .row{

margin-top: 50px;

}

.categories{

margin: 50px 0px;

}

.col-3{

flex-basis: 30%;

min-width: 250px;

margin-bottom: 30px;

}

.col-3 img{

width: 100%;

}

.small-container{

max-width: 1080px;

margin:auto ;

padding: 15px 0px;

}

.col-4{

flex-basis: 25%;

padding: 10px;

margin-bottom: 50px;

min-width: 200px;

transition: transform 0.5s;

}

.col-4 img{

width: 100%;

/* height: 200px; */

}

.title{

text-align: center;

margin: 0pc auto 70px;

position: relative;

line-height: 60px;

color: #555;

font-size: 2.3rem;

}

.title::after{

content: '';

width: 80px;

background:#ff523b;

height: 5px;

border-radius: 5px;

position: absolute;

bottom: 0;

left: 50%;

transform: translate(-50%);

}

h3{

font-weight: normal;

color: #555;

}

.col-4 p{

font-size: 17px;

}

.rating .fa{

color: #ff523b;

}

.col-4:hover{

transform: translateY(-5px);

}

small{

font-size: 1rem;

color: #555;

}

.offer{

background: radial-gradient(#fff,#ffd6d6);

/* margin-top: 50px; */

/* padding: 30px 0px; */

}

.col-2 .offer-img{

padding: 0px;

}

.testimonial{

padding-top: 100px;

}

.testimonial .col-3{

text-align: center;

padding: 40px 20px ;

box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.1);

transition: all 0.5s;

cursor: pointer;

}

.testimonial .col-3:hover{

transform: translateY(-10px);

}

.testimonial .col-3 img{

width: 100px;

border-radius: 50%;

margin-top: 20px;

}

.fa.fa-quote-left{

font-size: 35px;

color: #ff523b;

}

.col-3 p{

font-size: 17px;

margin: 12px 0px;

color: #777;

}

.testimonial .col-3 h2{

font-weight: 600;

color: #555;

font-size: 18px;

}

.col-5 img{

width: 100%;

cursor: pointer;

filter: grayscale(100%);

}

.col-5 img:hover{

filter: grayscale(0%);

}

.brands{

margin: 100px auto;

}

.col-5 {

width: 160px;

}

.footer{

background: #000;

color: #8a8a8a;

font-size: 17px;

padding: 60px 0 20px;

display: flex;

}

.footer p{

color: #8a8a8a;

}

.footer h2{

color: #fff;

margin-bottom: 20px;

}

.footer-col-1 ,.footer-col-2, .footer-col-3, .footer-col-4{

min-width: 250px;

margin-bottom: 20px;

}

.footer-col-1{

flex-basis: 30%;

}

.footer-col-2{

flex: 1;

text-align: center;

}

.footer-col-2 img{

width: 100px;

margin-bottom: 20px;

}

.footer-col-3, .footer-col-4{

flex-basis: 12%;

text-align: center;

}

.box{

border: 2px solid red;

align-items: center;

align-content: space-between;

}

.nav-footer{

display: flex;

align-items: center;

justify-content: center;

margin: auto;

align-content: space-between;

}

.end{

height: 150px;

background: #000;

width: 100%;

}

.menu-icon{

width: 30px;

margin-left: 20px;

display: none;

}

@media only screen and (max-width:800px){

nav ul{

position: absolute;

top: 70px;

left: 0px;

background: #333333;

width: 100%;

overflow: hidden;

transition: max-height 0.5;

}

nav ul li{

display: block;

margin-right: 50px;

margin-top: 10px;

margin-bottom: 10px;

}

nav ul li a {

color #fff

}

.menu-icon{

display:block;

cursor: pointer;

}

@media only screen and (max-width:600px){

.row{

text-align: center;

}

.col-2, .col-3, .col-4{

flex-basis: 100%;

margin: 5px;

}

.item{

text-align: center;

justify-content: center;

}

.item p{

color: #fff;

position: relative;

top: 20px;

}

Search This Blog

meracode

e-commerce gd types type-responsive

HTML

CSS

Comments

Post a Comment

Popular posts from this blog

ANGLESMEDIDATION

(Content) Welcome website background

Theories