を使用して排他的な製品ランディングページを作成する
90023 ワード
こんにちは親愛なる開発者は、今日のブログでは、どのように排他的な製品のランディングページをHTML CSS＆Javascriptを使用してあなたのウェブサイトを確認します.
HTML＆CSSを使用してランディングページを作るのはかなり簡単＆簡単な作業ですが、私たちのポストは、より排他的になります知っていました!さて、議論しましょう.
しかし、その前に、コードチュートリアルでデモをしてください.下の動画を見ることができます.
コードチュートリアル
それで、より多くの時間を浪費することなく、これをコード化する方法を見ましょう.
この投稿のソースコードは
最初に始まるのは基本的に以下の3つのファイルだけです.
それで、あなたの大好きなコードエディタでこれらのファイルを作成した後に、同様にルート要素を考慮することによって我々のCSSファイルで若干のHTMLリセットをすることに飛び込んでください.
1 HTMLで作る構造
CSSで2番目のスタイルを追加する
上記コードから出力!偉大な我々は進行中!
だから今我々の左のコンテナでは、我々は様々な子供たちの別のタグと私たちのランディングページに関する情報を運んでいる.
それで、すぐに最初に我々は我々の左容器のためにすべてのHTMLとCSS部分をカバーします、そして、我々の右容器を探します.
左コンテナ用HTML
左容器用
左容器の結果
私はそれがいくつかの方法を知っている高速ですが、あなたがこのポストの開始時にリンク上のステップテュートリアルを見たい場合は!
今すぐ右コンテナを終了するには
右コンテナ用HTML
右コンテナ用
右コンテナの結果
それで、ここであなたは我々がまだされていると思っています、しかし、まだ、我々がキーワード特ダネとしてこのポストを始めたのを思い出してください.
ので、我々はいくつかのファンシーアニメーションを再び我々は我々は、JSアニメーションのための強力なアニメーションライブラリの1つを使用しているこのポストでは、いくつかのファンシーアニメーションを実装するために
GSAPは無料で、非常に簡単で使いやすいです、あなたは彼らのウェブサイトを訪問することによってこれに関してより多くのユーザースタンドをすることができます、しかし、我々がCDNJsからCDN(Content Delivery Network)を使用しているこのポストのために.コム
全体終了結果
ハッピーコーディングをめちゃくちゃ!
HTML＆CSSを使用してランディングページを作るのはかなり簡単＆簡単な作業ですが、私たちのポストは、より排他的になります知っていました!さて、議論しましょう.
しかし、その前に、コードチュートリアルでデモをしてください.下の動画を見ることができます.
コードチュートリアル
If you want to see more web design tutorial just like these ! Please consider out YT Channel.
それで、より多くの時間を浪費することなく、これをコード化する方法を見ましょう.
この投稿のソースコードは
github with all images and much more ソースコードを取得するには以下のリンクをご覧ください最初に始まるのは基本的に以下の3つのファイルだけです.
index.html , style.css & main.js .それで、あなたの大好きなコードエディタでこれらのファイルを作成した後に、同様にルート要素を考慮することによって我々のCSSファイルで若干のHTMLリセットをすることに飛び込んでください.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', sans-serif;
}
body{
height: 100vh;
width: 100%;
overflow: hidden;
}
ul li {
list-style-type: none;
}
a {
text-decoration: none;
}
button{
cursor: pointer;
outline: none;
border: none;
}
1 HTMLで作る構造
<section class="wrapper">
<! ---- LEFT-CONTAINER --->
<main class="left_container">
</main>
<! ---- RIGHT-CONTAINER --->
<main class="right_container">
</main>
</section>
CSSで2番目のスタイルを追加する
.wrapper{
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 65% 35%;
}
.left_container{
width: 100%;
background-color: #EDF3F8;
height: 100%;
z-index: 1;
}
.right_container{
width: 100%;
height: 100%;
background-color: #B6E2F8;
z-index: 10;
}
上記コードから出力!偉大な我々は進行中!
だから今我々の左のコンテナでは、我々は様々な子供たちの別のタグと私たちのランディングページに関する情報を運んでいる.
それで、すぐに最初に我々は我々の左容器のためにすべてのHTMLとCSS部分をカバーします、そして、我々の右容器を探します.
左コンテナ用HTML
<div class="left_container">
<nav>
<div class="logo_content">
<img src="./logo.png" alt="logo" class="nike_logo">
</div>
<ul class="nav_content">
<li><a class="nav_links active" href="javascript:void(0)">man</a></li>
<li><a class="nav_links" href="javascript:void(0)">women</a></li>
<li><a class="nav_links" href="javascript:void(0)">kids</a></li>
<li><a class="nav_links" href="javascript:void(0)">customize</a></li>
</ul>
</nav>
<br>
<main class="tools">
<div class="search">
<input type="text" class="search_input" placeholder="Search here....">
<button class="search_btn">
<div class="slider">
<i class="ri-search-line"></i>
</div>
</button>
</div>
<div class="discount">
<span class="discount_percentage">60%</span>
<div class="seprator"></div>
<span class="save_up">save up to</span>
</div>
</main>
<section>
<main class="brand_type">
<div class="large_text">
<h2>stylist <br>sneakers</h2>
</div>
<div class="sliders">
<button class="slider_btn" disabled>
<i class="ri-arrow-left-s-line"></i>
</button>
<button class="slider_btn">
<i class="ri-arrow-right-s-line"></i>
</button>
</div>
</main>
</section>
<br>
<section class="bottom_shoes_slider">
<ul class="bottom_shoes_card">
<li class="card_shoe">
<div class="shoe_content">
<img src="./shoe_img/nike-air-force.png" alt="nike-air-force" class="shoe">
</div>
<div class="desc_product">
<div class="transparent_bg">
<div class="add_to_cart">
<i class="ri-add-line"></i>
</div>
</div>
<div class="desc">
<span class="card_product_name">nike air force</span>
<span>3 colors</span>
<span class="price"><i class="ri-money-euro-circle-line"></i> 230.00</span>
</div>
</div>
</li>
<li class="card_shoe">
<div class="shoe_content" style="background-color: #c93849;">
<img src="./shoe_img/nike-air-force-1-high.png" alt="nike-air-force-1-high" class="shoe">
</div>
<div class="desc_product">
<div class="transparent_bg">
<div class="add_to_cart" style="background-color: #c93849;">
<i class="ri-add-line"></i>
</div>
</div>
<div class="desc">
<span class="card_product_name">air force 1 high</span>
<span>3 colors</span>
<span class="price"><i class="ri-money-euro-circle-line"></i> 230.00</span>
</div>
</div>
</li>
<li class="card_shoe">
<div class="shoe_content" style="background-color: #78787C;">
<img src="./shoe_img/air-max-270.png" alt="air-max-270" class="shoe">
</div>
<div class="desc_product">
<div class="transparent_bg">
<div class="add_to_cart" style="background-color: #78787C;">
<i class="ri-add-line"></i>
</div>
</div>
<div class="desc">
<span class="card_product_name">air max 270</span>
<span>3 colors</span>
<span class="price"><i class="ri-money-euro-circle-line"></i> 230.00</span>
</div>
</div>
</li>
<li class="card_shoe">
<div class="shoe_content" style="background-color: black;">
<img src="./shoe_img/air-max-excee-.png" alt="air-max-excee-" class="shoe">
</div>
<div class="desc_product">
<div class="transparent_bg">
<div class="add_to_cart" style="background-color: black;">
<i class="ri-add-line"></i>
</div>
</div>
<div class="desc">
<span class="card_product_name">air max excee</span>
<span>3 colors</span>
<span class="price"><i class="ri-money-euro-circle-line"></i> 230.00</span>
</div>
</div>
</li>
<li class="card_shoe">
<div class="shoe_content" style="background-color: #959ebd;">
<img src="./shoe_img/nike-span-2.png" alt="nike-span-2" class="shoe">
</div>
<div class="desc_product">
<div class="transparent_bg">
<div class="add_to_cart" style="background-color: #959ebd;">
<i class="ri-add-line"></i>
</div>
</div>
<div class="desc">
<span class="card_product_name">nike span 2</span>
<span>3 colors</span>
<span class="price"><i class="ri-money-euro-circle-line"></i> 230.00</span>
</div>
</div>
</li>
</ul>
</section>
</div>
左容器用
nav{
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 1rem;
}
.logo_content{
width: 100px;
height: 100px;
}
.logo_content .nike_logo{
width: 100%;
height: 100%;
object-fit: cover;
}
.nav_content{
display: flex;
}
.nav_content .nav_links{
padding: 0 20px;
color: rgb(99, 99, 99);
text-transform: capitalize;
font-size: 16px;
letter-spacing: 0.5px;
transition: 0.5s;
}
.nav_links:hover{
color: black;
}
.nav_links.active{
color: black;
font-weight: 600;
}
.tools{
margin-top: 1rem;
width: 100%;
height: 90px;
display: flex;
align-items: center;
justify-content: space-between;
}
.search{
display: flex;
}
.search_input{
width: 299px;
height: 47px;
border-radius: 7px;
border: none;
padding-left: 12px;
font-size: 16px;
margin-left: 2.5rem;
margin-right: -1.1rem;
outline: none;
}
.search_btn{
width: 45px;
height: 45px;
border-radius: 7px;
border: none;
padding-left: 12px;
font-size: 16px;
background-color: black;
}
.slider{
margin-left: -0.8rem;
margin-top: .2rem;
text-align: center;
overflow: hidden;
}
.slider i{
color: white;
font-size: 18px;
}
.discount{
display: flex;
flex-direction: column;
position: relative;
}
.discount_percentage{
font-size: 30px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding-bottom: 2px;
width: 100px;
}
.seprator{
width: 100%;
height: 2px;
background-color: black;
position: relative;
}
.seprator::before{
content: "";
position: absolute;
top: -3px;
left: -2px;
background-color: black;
width: 7px;
height: 7px;
border-radius: 50%;
}
.save_up{
font-size: 12px;
color: black;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 7px;
}
.brand_type{
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
padding: 2rem;
}
.sliders{
margin-top: 5rem;
}
.large_text{
font-size: 50px;
text-transform: capitalize;
letter-spacing: 0.5px;
text-shadow: 4px 10px #d6eefc;
line-height: 1;
}
.slider_btn{
width: 35px;
height: 35px;
border-radius: 50%;
outline: none;
border: 1px solid gray;
background-color: transparent;
cursor: pointer;
}
.slider_btn i {
font-size: 22px;
}
.bottom_shoes_slider{
width: 940px;
height: 200px;
position: absolute;
right: 30%;
z-index: -1;
margin-top: 1rem;
}
.bottom_shoes_card{
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
}
.card_shoe{
width: 150px;
height: 200px;
max-height: 100%;
border-radius: 20px;
box-shadow: 1px 0px 19px 2px rgba(202, 202, 202, 1);
}
.shoe_content{
width: 150px;
height: 100px;
position: relative;
background-color: #f5ddc9;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.shoe_content .shoe{
width: 100%;
height: 111px;
object-fit: cover;
transform: rotate(-25deg);
position: absolute;
top: -2.5rem;
right: 1rem;
overflow: hidden;
filter: drop-shadow(2px 2px 0.10rem rgb(82,82,82));
}
.desc_product{
width: 98.5%;
min-height: 50%;
background-color: white;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
display: flex;
justify-content: center;
position: relative;
}
.transparent_bg{
content: "";
position: absolute;
width: 30px;
height: 30px;
background-color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
top: -13.6px;
}
.add_to_cart{
width: 20px;
height: 20px;
background-color: #f5ddc9;
border-radius: 50%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.add_to_cart i {
color: white;
font-size: 12px;
margin-top: 2px;
}
.desc{
margin-top: 0.50rem;
z-index: 100;
position: absolute;
top: 20%;
text-align: center;
}
.card_product_name
{
font-size: 15px;
text-transform: uppercase;
font-family: 'Poppins';
letter-spacing: 0.5px;
display: block;
font-weight: 600;
}
.desc > span:nth-child(2){
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
display: block;
color: gray;
}
.price{
font-size: 16px;
text-transform: uppercase;
font-family: 'Poppins';
letter-spacing: 0.5px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 3px;
}
.price i{
margin-right: 3px;
color: gray;
}
左容器の結果
私はそれがいくつかの方法を知っている高速ですが、あなたがこのポストの開始時にリンク上のステップテュートリアルを見たい場合は!
今すぐ右コンテナを終了するには
右コンテナ用HTML
<main class="right_container">
<nav class="right_nav">
<ul class="right_nav_content">
<li class="r_nav_links">
model : ck5828-400
</li>
<button class="cart_btn"><i class="ri-shopping-bag-fill"></i></button>
</ul>
</nav>
<section class="selected_product">
<div class="circle1">
<div class="icon_">
<i class="ri-add-line"></i>
<div class="product_tag">
<p class="offer1">99%</p>
<p>comfortable</p>
</div>
</div>
</div>
<div class="circle2">
<div class="icon_">
<i class="ri-add-line"></i>
<div class="product_tag">
<p class="offer2">rare high percentage</p>
</div>
</div>
</div>
<div class="selected_product_content">
<img src="./shoe_img/air-max-90.png" alt="nike-air-max-90" class="selected_product_img">
</div>
<div class="size_product">
<main class="content">
<ul class="size_list">
<li class="size_item">
<span>39</span>
</li>
<li class="size_item">
<span>40</span>
</li>
<li class="size_item">
<span>41</span>
</li>
<li class="size_item">
<span>42</span>
</li>
<li class="size_item">
<span>43</span>
</li>
</ul> <br><br>
<div class="text">
<h3 class="selected_product_text">nike air max 90</h3>
</div>
<div class="reviews">
<span>reviews 1k+</span>
<ul class="stars_list">
<li><i class="ri-star-fill"></i></li>
<li><i class="ri-star-fill"></i></li>
<li><i class="ri-star-fill"></i></li>
<li><i class="ri-star-fill"></i></li>
<li><i class="ri-star-fill"></i></li>
</ul>
</div>
</main>
</div>
</section>
</main>
右コンテナ用
.right_nav_content{
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 1rem;
}
.r_nav_links{
text-transform: uppercase;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.5px;
}
.cart_btn{
width: 40px;
height: 40px;
background-color: black;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.cart_btn i {
color:white;
font-size: 20px;
}
.selected_product{
width: 100%;
height: 380px;
position: relative;
}
.selected_product_content{
width: 100%;
height: 380px;
padding: 1rem;
position: relative;
}
.selected_product_img{
width: 100%;
height: 100%;
max-height: 100%;
object-fit: cover;
transform: rotate(-25deg);
position: absolute;
top: -3rem;
right: 1.5rem;
}
.size_product{
width: 100%;
min-height: 210px;
background-color: black;
}
.content{
width: 100%;
height: 100%;
padding: 2rem;
}
.text{
width: 100%;
height: 50px;
display: flex;
align-items: center;
margin-top: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgb(92, 92, 92);
}
.selected_product_text{
color: white;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 28px;
}
.size_list{
color: rgb(155, 155, 155);
list-style: none;
display: flex;
justify-content: space-between;
}
.size_item{
font-size: 17px;
}
.size_item:nth-child(3){
transform: translateY(-1rem);
color: #eee;
font-size: 20px;
position: relative;
}
.size_item:nth-child(3)::after{
content: "";
position: absolute;
top: 3rem;
right: 0.1rem;
font-size: 10px;
width: 10px;
height: 10px;
background-color: #eee;
border-radius: 50%;
}
.reviews{
margin-top: 0.5rem;
width: 100%;
padding: 10px;
height: fit-content;
display: flex;
align-items: center;
justify-content: space-between;
}
.reviews span{
text-transform: capitalize;
color: rgb(209, 209, 209);
letter-spacing: 1px;
}
.stars_list{
display: flex;
}
.stars_list li i{
color: rgba(223, 223, 2, 0.89);
font-size: 15px;
padding: 0 5px;
}
.circle1, .circle2{
position: absolute;
width: 40px;
height: 40px;
background-color: #fffafa2c;
border-radius: 50%;
border: 2px;
border-style: solid;
border-color: #eee;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.circle1{
left: 144px;
top: 65%;
}
.circle2{
right: 100px;
top: 25%;
}
.icon_{
width: 15px;
height: 15px;
background-color:white;
border-radius: 50%;
position: relative;
}
.icon_ i{
font-size: 15px;
}
.circle1 .product_tag, .circle2 .product_tag{
width: 100px;
height: 60px;
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.37);
position: absolute;
bottom: 35px;
right: -2.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}
.product_tag p:nth-child(1){
color: white;
}
.product_tag p:nth-child(2){
font-size: 13.5px;
color: #eee;
text-transform: capitalize;
}
.offer2{
display: block;
text-align: center;
font-size: 13px;
text-transform: capitalize;
color: #eee;
}
右コンテナの結果
それで、ここであなたは我々がまだされていると思っています、しかし、まだ、我々がキーワード特ダネとしてこのポストを始めたのを思い出してください.
ので、我々はいくつかのファンシーアニメーションを再び我々は我々は、JSアニメーションのための強力なアニメーションライブラリの1つを使用しているこのポストでは、いくつかのファンシーアニメーションを実装するために
GSAPは無料で、非常に簡単で使いやすいです、あなたは彼らのウェブサイトを訪問することによってこれに関してより多くのユーザースタンドをすることができます、しかし、我々がCDNJsからCDN(Content Delivery Network)を使用しているこのポストのために.コム
<!-- ==== GSAP CDN ==== -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
main.js これらのアニメーションを実装するスクリプトを以下に示します.gsap.from('nav', {opacity:0, delay:1.6, duration:2.5, ease: "elastic.out(1,0.3)", y:-100});
gsap.from('.search', {opacity:0, delay:1.8, duration:2.8, ease: "elastic.out(1,0.3)", y:-100});
gsap.from('.brand_type', {opacity:0, delay:2.2, duration:3, ease: "elastic.out(1,0.3)", y:-100});
gsap.from('.discount', {opacity:0, delay:1, scale:.1, duration:2.4, rotation:180,
ease: "expo.inOut", x:100});
gsap.from('.bottom_shoes_card', {opacity:0, delay:2.6, duration:3.5, ease: "elastic.out(1,0.3)", x:100});
gsap.from('.selected_product_img', {opacity:0, delay:3, duration:4, ease:"elastic.out(1,0.3)", y:100});
gsap.from('.size_product', {opacity:0, delay:3.5, duration:0.5, ease:"Expo.In", y:100});
gsap.from('.circle1', {opacity:0, delay:4.5, scale:.1, duration:.7, ease:"expo.In"});
gsap.from('.circle2', {opacity:0, delay:4.8, scale:.1, duration:.7, ease:"expo.In"});
全体終了結果
Final Words :
Thank you so much watching my post ! Please consider subscribing it motivates making more content just like these...
ハッピーコーディングをめちゃくちゃ!
Reference
この問題について(を使用して排他的な製品ランディングページを作成する), 我々は、より多くの情報をここで見つけました https://dev.to/ananiket/exclusive-product-landing-page-using-html-css-2l0mテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol