css-practice/index.html at main · Razan-am/css-practice · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scorilo</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <header>
        <h1>SCORILO</h1>
        <nav>
            <ul>
                <li>
                    <a href="#">HOME</a>
                </li>
                <li>
                    <a href="#">SHOP</a>
                </li>
                <li>
                    <a href="#">PRODUCT</a>
                </li>
                <li>
                    <a href="#">CHECKOUT</a>
                </li>
                <li>
                    <a href="#">CONTACT</a>
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <article>
                <img src="https://www.royalcitytours.com/wp-content/uploads/2020/07/SKYLINE-NIGHT-2-scaled.jpg"
                    alt="nySkyline">
                <h2>
                    INCREASE DIGITAL SALES </br> <span>Boost revenue with Scorilo</span>
                </h2>
            </article>
            <article id="second">
                <section id="first">
                    <i class="fas fa-shopping-cart"></i>
                    <img src="https://image.freepik.com/free-vector/illustration-shopping-online_53876-5906.jpg"
                        alt="cartIcon">
                    <h4>CHOOSE OUR PRODUCTS</h4>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt neque nihil excepturi consectetur
                        magnam! Natus similique sequi itaque nobis. Facere cum praesentium itaque modi neque doloribus
                        nam quibusdam recusandae dolorem!</p>
                </section>
                <section id="scnd">
                    <img src="https://img-premium.flaticon.com/png/512/759/759983.png?token=exp=1621107372~hmac=842d3e49df080ab618d901e43bf62140"
                        alt="giftIcone">
                    <i class="fas fa-gift"></i>
                    <h4>PAY WITH PAYPAL OR CARD</h4>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt neque nihil excepturi consectetur
                        magnam! Natus similique sequi itaque nobis. Facere cum praesentium itaque modi neque doloribus
                        nam quibusdam recusandae dolorem!</p>
                </section>
                <section id="third">
                    <img src="https://img-premium.flaticon.com/png/512/2810/2810387.png?token=exp=1621107564~hmac=123312ccb1a81b1929ed74c0c83955b1"
                        alt="downloadIcone">
                    <i class="fas fa-download"></i>
                    <h4>GET INSTAND DOWNLOAD</h4>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt neque nihil excepturi consectetur
                        magnam! Natus similique sequi itaque nobis. Facere cum praesentium itaque modi neque doloribus
                        nam quibusdam recusandae dolorem!</p>
                </section>
                <section id="fourth">
                    <p>LATEST ITEAMS</p>
                    <img src="https://img-premium.flaticon.com/png/512/149/149763.png?token=exp=1621107856~hmac=23983fdce4255bba028e0f61e7eac91e"
                        alt="star">
                    <img src="https://img-premium.flaticon.com/png/512/149/149763.png?token=exp=1621107856~hmac=23983fdce4255bba028e0f61e7eac91e"
                        alt="star">
                    <img src="https://img-premium.flaticon.com/png/512/149/149763.png?token=exp=1621107856~hmac=23983fdce4255bba028e0f61e7eac91e"
                        alt="star">
                    <img src="https://img-premium.flaticon.com/png/512/339/339879.png?token=exp=1621108093~hmac=0583757603ebe5ed4b5aa37f37782983"
                        alt="lineLeft" id="lineLeft" />
                    <img src="https://img-premium.flaticon.com/png/512/339/339879.png?token=exp=1621108093~hmac=0583757603ebe5ed4b5aa37f37782983"
                        alt="lineRight" id="lineRight" />
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                </section>
            </article>
            <article id="theme">
                <section>
                    <img src="https://cdn.mhthemes.com/wp-content/uploads/2014/10/Calypso-WordPress-Theme-480x360.jpg"
                        alt="calypso">
                    <h5>CALYPSO THEME</h5>
                    <img src="https://img-premium.flaticon.com/png/512/339/339879.png?token=exp=1621108093~hmac=0583757603ebe5ed4b5aa37f37782983"
                        alt="lineRight" class="imageLine" />
                    <p>$94.00</p>
                </section>
                <section>
                    <img src="https://templates-website.net/wp-content/uploads/2016/02/fastsell.png" alt="fastsell">
                    <h5>FASTSELL THEME</h5>
                    <img src="https://img-premium.flaticon.com/png/512/339/339879.png?token=exp=1621108093~hmac=0583757603ebe5ed4b5aa37f37782983"
                        alt="lineRight" class="imageLine" />
                    <p>$94.00</p>
                </section>
                <section>
                    <img src="https://img.themesinfo.com/i/1/5/biscaya-wordpress-blog-template-bfta-o.jpg"
                        alt="biscaya">
                    <h5>BISCAYA THEME</h5>
                    <img src="https://img-premium.flaticon.com/png/512/339/339879.png?token=exp=1621108093~hmac=0583757603ebe5ed4b5aa37f37782983"
                        alt="lineRight" class="imageLine" />
                    <p>$94.00</p>
                </section>
                <!-- <section class="hover">
            <h6>Iteam Name</h6>
            <p>This is a short excerpt to generally describe </br> what the iteam is about. </p>
            <p>PURCHASE</p>
            <p>DETAILS</p>
        </section> -->
            </article>
            <article>
                <button>Browse All Products</button>
                <img src="237-star-rating-morph.gif" alt="star">
            </article>
            <article id="contact">
                <section>
                    <img src="https://img-premium.flaticon.com/png/512/709/709682.png?token=exp=1621113958~hmac=a0d8ffc84e2b68743995d9d8fc458a27"
                        alt="mic">
                    <h4>GENERAL QUESTIONS</h4>
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eos deserunt possimus suscipit ipsa
                        autem nisi et esse molestiae beatae sunt tempore facilis ea, saepe, error dignissimos veritatis
                        cupiditate illo aliquid!</p>
                    <a href="#">Get in Touch</a>
                </section>
                <section>
                    <img src="https://img-premium.flaticon.com/png/512/4093/4093044.png?token=exp=1621114160~hmac=60be05076f4f6f39fca46c13b6dd1652"
                        alt="message">
                    <h4>THEME SUPPORT</h4>
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eos deserunt possimus suscipit ipsa
                        autem nisi et esse molestiae beatae sunt tempore facilis ea, saepe, error dignissimos veritatis
                        cupiditate illo aliquid!</p>
                    <a href="#">Select Theme</a>
                </section>
                <section>
                    <img src="https://img-premium.flaticon.com/png/512/2838/2838760.png?token=exp=1621114191~hmac=bbc3dfded571e7320fc89ad9b4411cd5"
                        alt="speaker">
                    <h4>HIRE US</h4>
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eos deserunt possimus suscipit ipsa
                        autem nisi et esse molestiae beatae sunt tempore facilis ea, saepe, error dignissimos veritatis
                        cupiditate illo aliquid!</p>
                    <a href="#">Get in Touch</a>
                </section>
            </article>
            <article>
                <h3>AWESOME SUPPORT</h3>
                <img src="https://t3.ftcdn.net/jpg/03/64/30/08/360_F_364300805_12s0dlvl0cfCqjT9hyEqz9RKOAI4LXOC.jpg"
                    alt="girlImage">
                <p>The support...I can only say it's awesome.You make a product and you help people<br />out any way you
                    can even if it means that you have to log in on thier dashboard to <br />sort out any problems that
                    customer might have.Simply Outstanding!</p>
                <img src="https://img-premium.flaticon.com/png/512/149/149763.png?token=exp=1621107856~hmac=23983fdce4255bba028e0f61e7eac91e"
                    alt="star" class="star" />
                <img src="https://img-premium.flaticon.com/png/512/149/149763.png?token=exp=1621107856~hmac=23983fdce4255bba028e0f61e7eac91e"
                    alt="star" class="star" />
                <img src="https://img-premium.flaticon.com/png/512/149/149763.png?token=exp=1621107856~hmac=23983fdce4255bba028e0f61e7eac91e"
                    alt="star" class="star" />
                <img src="https://img-premium.flaticon.com/png/512/149/149763.png?token=exp=1621107856~hmac=23983fdce4255bba028e0f61e7eac91e"
                    alt="star" class="star" />
                <img src="https://img-premium.flaticon.com/png/512/149/149763.png?token=exp=1621107856~hmac=23983fdce4255bba028e0f61e7eac91e"
                    alt="star" class="star" />
            </article>
        </section>
    </main>
    <footer>
        <section>
            <p>Promote Iteams Area Give Discount to Buyers</p>
            <p>WOW24TH</p>
        </section>
        <section>
            <h6>Connect with Scrilo</h6>
            <a href="#"><img
                    src="https://img-premium.flaticon.com/png/512/159/159832.png?token=exp=1621117655~hmac=6db433029b566ae4973fbf1d7635a6c6"
                    alt="phone" class="online" /></a>
            <a href="#"><img
                    src="https://img-premium.flaticon.com/png/512/1077/1077041.png?token=exp=1621117343~hmac=e5e15ab99fc65008aafb905dc5766d9a"
                    alt="fb" class="online" /></a>
            <a href="#"><img
                    src="https://img-premium.flaticon.com/png/512/1051/1051382.png?token=exp=1621117737~hmac=930115813984495cabe57b6518ffb096"
                    alt="twitter" class="online" /></a>
            <a href="#"><img
                    src="https://img-premium.flaticon.com/png/512/324/324095.png?token=exp=1621117820~hmac=ef18c98deee0afc2253d466f2c31bbd7"
                    alt="gPlus" class="online" /></a>
            <a href="#"><img
                    src="https://img-premium.flaticon.com/png/512/160/160178.png?token=exp=1621117857~hmac=69d5149cb2ec4f3ae867b47a3b01db52"
                    alt="pintrest" class="online" /></a>
            <p> <img src="https://img-premium.flaticon.com/png/512/106/106852.png?token=exp=1621118240~hmac=0176e40332889aa05d25cf504f565d46"
                    alt="cridet">2045 Your Website Name <br />
                Template by<span>WowThemes</span></p>
        </section>
    </footer>
</body>

</html>