Web imitating Apple’s official website homepage HTML and CSS

Hits: 0

According to the imitation of the homepage of the official website, the renderings will not be posted.
The specific code of the HTML part:

<!DOCTYPE html>
<html>
<head>
    <title>Apple</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <div id="all">
        <div id="nav">
            <ul>
                <li>
                    <a href="">
                        <svg enable-background="new 0 0 14 44" height="44" viewBox="0 0 14 44" width="14" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h14v44h-14z" fill="none"/><path d="m13.0729 17.5214c-.093.0723-1.7248.9915-1.7248 3.0364 0 2.3651 2.0759 3.2017 2.1379 3.2223-.0103.0516-.3305 1.1464-1.0948 2.2618-.6816.9812-1.3943 1.9623-2.4787 1.9623s-1.3633-.63-2.613-.63c-1.2187 0-1.6525.6507-2.644.6507s-1.6835-.9089-2.4787-2.0243c-.9192-1.3117-1.6628-3.3463-1.6628-5.2776 0-3.0984 2.014-4.7406 3.9969-4.7406 1.0535 0 1.9313.692 2.5923.692.63 0 1.6112-.7333 2.8092-.7333.4545.0001 2.0864.0415 3.1605 1.5803zm-3.7284-2.8918c.4957-.5887.8469-1.4046.8469-2.2205 0-.1136-.0103-.2272-.031-.3202-.8056.031-1.7661.5371-2.3445 1.2084-.4544.5164-.8779 1.3323-.8779 2.1586 0 .1239.0207.2479.031.2892.0516.0103.1343.0207.2169.0207.723-.0001 1.6318-.4855 2.1586-1.1362z" fill="#fff"/></svg>
                    </a>
                </li>
                <li>
                </li>
                <li>
                    <a href="">Mac</a>
                </li>
                <li>
                    <a href="">iPad</a>
                </li>
                <li>
                    <a href="">iPhone</a>
                </li>
                <li>
                    <a href="">Watch</a>
                </li>
                <li>
                    <a href="">AirPods</a>
                </li>
                <li>
                </ 
                li<>li> 
                    < a  href = "" > Apple Exclusive </ a > 
                </ li > 
                < li > 
                    < a  href = "" > Accessories </ a > 
                </ li > 
                < li > 
                    < a  href = "" > Technical Support < / a > 
                </ li > 
                < li > 
                    < a  href = "" >
                        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="88" viewBox="0 0 15 88"><rect width="15" height="44" fill="none"/><path d="M13.98,27.343l-3.5-3.5a5.436,5.436,0,1,0-.778.777l3.5,3.5a.55.55,0,1,0,.778-.778ZM1.959,20.418a4.319,4.319,0,1,1,4.319,4.32A4.323,4.323,0,0,1,1.959,20.418Z" fill="#fff"/><rect y="44" width="15" height="44" fill="none"/><path d="M13.98,71.593l-3.5-3.5a5.436,5.436,0,1,0-.778.777l3.5,3.5a.55.55,0,1,0,.778-.778ZM1.959,64.668a4.319,4.319,0,1,1,4.319,4.32A4.323,4.323,0,0,1,1.959,64.668Z" fill="#86868b"/></svg>
                    </a>
                </li>
                <li>
                    <a href="">
                        <svg height="44" viewBox="0 0 13 44" width="13" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m0 44h13v-44h-13z"/><path d="m12 25.9c0 .6-.5 1.1-1.1 1.1h-8.8c-.6 0-1.1-.5-1.1-1.1v-7.9c0-.5.5-1 1.1-1h8.9c.6 0 1.1.5 1.1 1.1v7.8zm-5.5-11.9c1.2 0 2.1.9 2.3 2h-4.6c.2-1.1 1.1-2 2.3-2zm4.4 2h-1.1c-.2-1.7-1.6-3-3.3-3s-3.1 1.3-3.3 3h-1.1c-1.2 0-2.1.9-2.1 2.1v7.9c0 1.1.9 2 2.1 2h8.9c1.1 0 2.1-.9 2.1-2.1v-7.9c-.1-1.1-1-2-2.2-2z" fill="#fff"/></g></svg>
                    </a>
                </li>
            </ul>
        </div>
        <p id="advertise">
            There is still a chance, hurry to buy holiday gifts. Pick up at an Apple Retail Store or enjoy free shipping.
            < a  href = "" > Shop Now > </ a > 
        </ p > 
        < div  id = "contents" > 
            < div  id = "content1" > 
                < div  id = "content1_1" > 
                    < img  src = "images/ logo2.jpg" > 
                    < h2 > Timely gift, everyone loves it </ h2 > 
                    < a  href = "" >Shopping Gifts> </ a >
                </div>
                <div id="content1_2">
                    <img src="images/gift.jpg">
                </div>
            </div>
            <div id="content2">
                <div id="content2_1">
                    <h2>iPhone 13 Pro</h2>
                    < Learn more>>""=hrefa</a>
                </div>
                <div id="content2_2">
                    <img src="images/iphone13pro.jpg">
                </div>  
            </div>
            <div id="content3">
                <div id="content3_1">
                    <h2>iPhone 13</h2>
                    <h3 > Unlock Superpowers < / h3 > 
                    <a  href="" > Learn More > </a> <a href="" > Buy > </a> < / 
                    div > <  div id = " content3_2 " > < img _ _ src = "images/iphone13.jpg" > </ div > </ div > < div id = "content4"><div






                 id = "content4_1" > 
                    < h3 > WATCH </ h3 > 
                    < h6 > SERIES 7 </ h6 > 
                    < h4 > Once the system is upgraded, single-channel ECG can be recorded. </ h4 > 
                    < a  href = "" > Learn more > </ a > 
                    < h5 > 
                        Product Name: Mobile ECG Atrial Fibrillation Prompt Software. Please read the product manual carefully or purchase and use it under the guidance of medical personnel. < br > For the contraindicated content or precautions, please refer to the instruction manual. Shanghai Machinery Guangshen (Text) No. 260620-21895
                     </ h5 > 
                <
                div  id = "content4_2" > 
                    < h3 > AirPods </ h3 > 
                    < h4 > The new AirPods support spatial audio, < br > Let this ceremony sing a holiday song. < / h4 > 
                    <a href="" >  Learn More > </a> 
                    <a href="" > Buy > </a> < / div > <  / div > < _ _ _ _



                < div  id = "content5_1" > 
                    < h1 > HomePod mini </ h1 > 
                    < a  href = "" > Learn more> </ a > 
                    < a  href = "" > Buy> </ a > 
                </ div > 
                < div  id = "content5_2" > 
                    < h1 > MacBook Pro </ h1 > 
                    < h4 >The strong of the strong </ h4> 
                    < a  href = "" > Learn more> </ a > 
                    < a  href = "" > Buy> </ a > 
                </ div > 
            </ div > 
            < div  id = "content6" > 
                < div  id = "content6_1 " > 
                    < h1 > iPad mini </ h1 > 
                    < h4 > lowercase uppercase </h4>
                    <a href= "" > Learn more> </a> 
                    < a  href = "" > Buy> < / 
                a > </ div > 
                < div  id 
                    = "content6_2" > < h1 > AirTag < / h1 > 
                    < h4 > Get lost A stunt, to be lost. < / h4 > 
                    <a href="" >  Learn more > </a> < 
                    _ _ buy> </ a > 
                </ div > 
            </ div > 
        </ div > 
        < div  id = "footer" > 
            < div  id = "lists" > 
                < div  class = "list" > 
                    < ul > 
                        < li > buy and learn about </ li > 
                        < li > 
                            < a  href = "" > Store </a>
                        </li>
                        <li>
                            <a href="">Mac</a>
                        </li>
                        <li>
                            <a href="">iPad</a>
                        </li>
                        <li>
                            <a href="">iPhone</a>
                        </li>
                        <li>
                            <a href="">Watch</a>
                        </li>
                        <li>
                            <a href="">AirPods</a>
                        </li>
                        <li>
                        </li>
                        <li>
                            <a href="">iPod touch</a>
                        </li>
                        <li>
                            <a  href = "" > AirTag </ a > 
                        </ li > 
                        < li > 
                            < a  href = "" > Accessories </ a > 
                        </ li > 
                        < li > 
                            < a  href = "" > App Store Recharge Card </ a > 
                        </ li > 
                    </ ul > 
                </ div > 
                <div class="list">
                    <ul>
                        <li>
                            <a href="">Apple Music</a>
                        </li>
                        <li>
                            <a href="">iCloud</a>
                        </li>
                        <li>
                            <a href="">Apple Pay</a>
                        >li</
                        <li>
                        </li>
                        <li>
                            <a href="">App Store</a>
                        </li>
                    </ul>
                    <ul>                        
                        <li>
                            <a href="">a</Manage your Apple ID>
                        </li>
                        <li>
                        </li>
                        <li>
                            <a href="">iCloud.com</a>
                        </li>
                    </ul>
                </div>
                <div class="list">
                    <ul>
                        <</Apple Store store>lili > 
                        < li > 
                            < a  href = "" > Find a retail store </ a > 
                        </ li > 
                        < li > 
                            < a  href = "" > Genius Bar </ a > 
                        </ li > 
                        < li > 
                            < a  href = "" > Today at Apple </ a > 
                        </ li > 
                        < li > 
                            <a  href ="" > Apple Summer Camps </ a > 
                        </ li > 
                        < li > 
                            < a  href = "" > Apple Store App </ a > 
                        </ li > 
                        < li > 
                            < a  href = "" > Refurbishments and Deals </ a > 
                        </ li > 
                        < li > 
                            < a  href = "" > Installments </a>
                        </li>
                        < li > 
                            < a  href = "" > Apple Trade In Redemption Program </ a > 
                        </ li > 
                        < li > 
                            < a  href = "" > Order Status </ a > 
                        </ li > 
                        < li > 
                            < a  href = "" > Shopping Help </ a > 
                        </ li > 
                    </ ul > 
                </ div >
                <div class= "list" > 
                    < ul > 
                        < li > Business Apps </ li > 
                        < li > 
                            < a  href = "" > Apple and Business </ a > 
                        </ li > 
                        < li > 
                            < a  href = "" > Business Options buy </ a > 
                        </ li > 
                    </ ul > 
                    < ul > 
                        < li >Educational applications </ li >
                        < li > 
                            < a  href = "" > Apple and Education </ a > 
                        </ li > 
                        < li > 
                            < a  href = "" > College Teachers and Students Shopping </ a > 
                        </ li > 
                    </ ul > 
                </ div > 
                < div  class = "list" > 
                    < ul > 
                        < li > Apple Values </ li >
                        < li >
                            < a  href = "" > Accessibility </ a > 
                        </ li > 
                        < li > 
                            < a  href = "" > Environmental Responsibility </ a > 
                        </ li > 
                        < li > 
                            < a  href = "" > Privacy </ a > 
                        </ li > 
                        < li > 
                            < a  href = "" >Supplier Responsibility </ a >
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <a href="">Newsroom</a>
                        </li>
                        <li>
                        </li>
                        <li>
                            <a href="">Job Opportunities </ a > 
                        </ li > 
                        < li > 
                            < a  href = "" > Job Creation </ a > 
                        </ li > 
                        < li > 
                            < a  href = "" > Business Ethics and Compliance </ a > 
                        < / li > 
                        < li > 
                            <a href="">  activity </a> < 
                        / li
                         > _ _ _ _< li >
                            <a href =  "" > Contact Apple </a> 
                        < / li
                     > < / ul
                 > </ div
             > < / div
             > < 
                p > <a  href="" > Find an Apple Store near you < / 
                a > < a  href = "" > More stores </ a > 
            </ p > 
            < hr > 
            <p id="pa">
                Copyright © 2021 Apple Inc. All rights reserved.
                < a  href = "" > Privacy Policy </ a > 
                < a  href = "" > Terms of Use </ a > 
                < a  href = "" > Sales Policy </ a > 
                < a  href = "" > Legal Information </ a > a > 
                < a  href = "" > Sitemap </ a > 
            </ p > 
            <p>
                Beijing ICP No. 10214630 Business License Radio Transmission Equipment Sales Record No. 11201910351200
            </p>
        </div>
    </div>  
</body>
</html>

The specific code of the CSS part:

*{
    margin: 0;
    padding: 0;
}
ul,li{
    list-style: none;
}
h1{
    font-size: 40px;
    color: #1d1d1f;
}
h2{
    font-size: 56px;
    font-weight: 600;
    color: #1d1d1f;
    display: block;
    width: 100%;    
}
h3{
    color: #1d1d1f;
    font-size: 28px;
    font-weight: 400;
    margin-top: 6px;
    text-align: center;
    width: 100%;
}
h4{
    color: #1d1d1f;
    font-size: 21px;
    font-weight: 400;
    width: 100%;
    margin-top: 6px;
    margin-bottom: 6px;
}
h5{
    color: #6e6e73;
    font-size: 10px;
    text-align: center;
    line-height: 20px;
}
a{
    text-decoration: none;
    color: #06c;
    font-weight: 400;
}
a:hover{
    text-decoration: underline;
}
#all{
    min-width: 1280px;
}
#all #nav{
    width: 100%;
    height: 50px;
    background: rgba(0,0,0,0.8);
    font-size: 14px;
}
#all #nav ul{
    width: 1200px;
    height: 50px;
    margin: 0 auto;
    overflow: hidden;
}
#all #nav ul li{
    float: left;
    line-height: 50px;
    width: 92px;
    text-align: center;
}
#all  #nav  ul  li  svg {
     margin-top : 5px ;
}
#all #nav ul li a{
    color: white;
}
#all p#advertise{
    width: 100%;
    height: 50px;
    font-size: 14px;
    line-height: 50px;
    text-align: center;
    background-color: #e34140;
    color: white;
}
#all p#advertise a{
    color: white;
}
#all #contents #content1{
    width: 100%;
    height: 630px;
    background: #eaf3fc;
}
#all #contents #content1 #content1_1{
    width: 100%;
    height: 235px;
    padding-top: 47px;
    text-align: center;
}
#all #contents #content1 #content1_2{
    width: 100%;
    height: 345px;
}
#all #contents #content1 #content1_1 img{
    width: 70px;
    height: 88px;
    display: block;
    margin: 0 auto;
}
#all #contents #content1 #content1_1 h2{
    margin-top: 20px;
}
#all #contents #content1 #content1_1 a{
    font-size: 21px;
}
#all #contents #content1 #content1_2 img{
    height: 345px;
    display: block;
    margin: 0 auto;
}
#all #contents #content2{
    width: 100%;
    background: #fbfbfd;
    margin-top: 15px;
}
#all #contents #content2 #content2_1{
    width: 100%;
    padding-top: 47px;
    text-align: center;
}
#all #contents #content2 #content2_1 h3{
    margin-bottom: 20px;
}
#all #contents #content2 #content2_1 a{
    font-size: 21px;
}
#all #contents #content2 #content2_2 img{
    width: 100%;
    display: block;
    margin: 0 auto;
}
#all #contents #content3{
    width: 100%;
    background: #35283c;
    margin-top: 15px;
}
#all #contents #content3 #content3_1{
    width: 100%;
    padding-top: 47px;
    text-align: center;
}
#all #contents #content3 #content3_1 h2{
    color: white;
}
#all #contents #content3 #content3_1 h3{
    margin-bottom: 20px;
    color: #fec2eb;
}
#all #contents #content3 #content3_1 a{
    font-size: 21px;
    color: #2997ff;
}
#all #contents #content3 #content3_2 img{
    width: 100%;
    display: block;
    margin: 0 auto;
}
#all #contents #content4,#content5,#content6{
    width: 100%;
    height: 580px;
    margin-top: 15px;
    text-align: center;
}
#all #contents #content4 #content4_1{
    width: 49.5%;
    height: 580px;
    background: url("../images/watch.jpg") no-repeat;
    background-position: center;
    float: left;
}
#all #contents #content4 #content4_1 h3:first-child{
    font-weight: 600;
}
#all #contents #content4 #content4_1 h6{
    color: #d0343a;
    font-size: 13px;
}
#all #contents #content4 #content4_1 h5{
    margin-top: 415px;
}
#all #contents #content4 #content4_2{
    width: 49.5%;
    height: 580px;
    float: right;
    background: url("../images/airpods.jpg") no-repeat;
    background-position: center;
    padding-top: 390px;
    box-sizing: border-box;
}
#all #contents #content4 #content4_2 h3{
    color: white;
    font-size: 40px;
}
#all #contents #content4 #content4_2 h4{
    color: white;
}
#all #contents #content4 #content4_2 a{
    color: white;
}
#all #contents #content5 #content5_1{
    width: 49.5%;
    height: 580px;
    background: url("../images/homepodmini.jpg") no-repeat;
    background-position: center;
    float: left;
}
#all #contents #content5 #content5_2{
    width: 49.5%;
    height: 580px;
    background: url("../images/macbookpro.jpg") no-repeat;
    background-position: center;
    float: left;
}
#all #contents #content6 #content6_1{
    width: 49.5%;
    height: 580px;
    background: url("../images/ipadmini.jpg") no-repeat;
    background-position: center;
    float: left;
}
#all #contents #content6 #content6_2{
    width: 49.5%;
    height: 580px;
    background: url("../images/airtag.jpg") no-repeat;
    background-position: center;
    float: left;
}
#all #footer{
    width: 100%;
    /*height: 200px;*/
    background: #f5f5f7;
    margin-top: 15px;
    padding-top: 20px;
}
#all #footer div#lists{
    width: 900px;
    height: 350px;
    margin: 0px auto;
}
#all #footer div#lists div.list{
    width: 180px;
    height: 100%;
    float: left;
    font-size: 12px;
    line-height: 26px;
    color: #424245;
}
#all #footer div#lists div.list ul li:first-child{
    font-weight: bold;
}
#all #footer div#lists div.list ul li a{
    color: #424245;
}
#all #footer p{
    width: 900px;
    height: 30px;
    font-size: 14px;
    margin: 0 auto;
}
#all #footer p#pa a{
    color: #424245;
    border-right: 1px solid #424245;
    padding-right: 5px;
}
#all #footer p#pa a:last-child{
    border: none;
}

The specific pictures used will not be posted. The file names are as follows:
Download pictures from the official website as needed.

You may also like...

Leave a Reply

Your email address will not be published.