task-html-and-css-basics/index.html at master · Chasemoose/task-html-and-css-basics · 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
<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nova</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&display=swap" rel="stylesheet">
    <link
        href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Montserrat:ital,wght@0,700;1,700&display=swap"
        rel="stylesheet">

    <link rel="stylesheet" href="./css/style.css">

</head>

<body>
    <section class="section header__section">
        <nav class="header__navbar">
            <img src="./images/logo.svg" alt="Logo sign" class="nav-logo">
            <div class="menu">
                <ul class="menu__links">
                    <a href="#" class="menu__link">
                        <li class="menu__link-item">The Team</li>
                    </a>
                    <a href="#" class="menu__link">
                        <li class="menu__link-item">Pricing</li>
                    </a>
                    <a href="#" class="menu__link">
                        <li class="menu__link-item">Features</li>
                    </a>
                </ul>
            </div>
        </nav>
        <div class="header__hero">
            <div class="header__hero-left">
                <h1 class="hero-left-heading">Beautiful Free Nova Template</h1>
                <p class="hero-left-paragraph">A top notch premium quality template for your next web project.</p>
                <button class="hero-left-cta-button">Download FREE!</button>
            </div>
            <img src="./images/screen.png" alt="Blueprint of a phone with some text" class="hero-right-image">
        </div>
    </section>
    <section id="features" class="section features-section">
        <h2 class="features__heading">Features</h2>
        <div class="features__cards">
            <div class="features-cards-item">
                <div class="img-box">
                    <img src="./images/responsive.svg" alt="Mobile phone logo" class="card__item-img">
                </div>
                <h3 class="card__item-heading">Fully responsive</h3>
                <p class="card__item-paragraph">Looks amazing on any device: smartphone, tablet, laptop and desktop.</p>
            </div>
            <div class="features-cards-item">
                <div class="img-box">
                    <img src="./images/customizable.svg" alt="Logo tools" class="card__item-img">
                </div>
                <h3 class="card__item-heading">Customizable</h3>
                <p class="card__item-paragraph">Change the colors,pictures or any of the sections to suit your needs.
                </p>
            </div>
            <div class="features-cards-item">
                <div class="img-box">
                    <img src="./images/design.svg" alt="Award sign logo" class="card__item-img">
                </div>
                <h3 class="card__item-heading">Slick and beautiful design</h3>
                <p class="card__item-paragraph">Trendy and fresh design, fits any website.</p>
            </div>
        </div>
    </section>

    <section class="section logos-section">
        <div class="logos__section-inner">
            <img src="./images/logos.png" alt="Group of logos" class="logos-img">
        </div>
    </section>

    <section class="section mac-section">
        <div class="mac__left-section">
            <img src="./images/imac.png" alt="Mac graphic" class="mac__left-section-img">
        </div>
        <div class="mac__right-section">
            <h3 class="mac__right-section-heading">Simple and Beautiful</h3>
            <p class="mac__right-section-para">Use Nova theme for your next web project. It is completely customizable
                so you can change any of the sections to fit your needs. Nova Theme is Free for any kind of use,
                personal or commercial. Have fun ang good luck!</p>
        </div>
    </section>

    <section id="pricing" class="section pricing-section">
        <div class="pricing__section-top">
            <h3 class="pricing__section-top-heading">Choose your pricing plan</h3>
            <p class="pricing__section-top-paragraph">Pick any of our super affordable pricing plans</p>
        </div>
        <div class="pricing__section-bottom">
            <div class="pricing__section-bottom-card">
                <h4 class="pricing-card-desc">Basic</h4>
                <h2 class="pricing-card-price">$15</h2>
                <p class="pricing-card-desc2">per month</p>
                <div class="offer-desc">
                    <p class="pricing-card-desc3">Up to 7 projects</p>
                    <p class="pricing-card-desc3">2 additional Developers</p>
                </div>
                <button class="pricing-card-button">Get Started</button>
            </div>
            <div class="pricing__section-bottom-card highlighted">
                <h4 class="pricing-card-desc">Agency</h4>
                <h2 class="pricing-card-price">$55</h2>
                <p class="pricing-card-desc2">per month</p>
                <div class="offer-desc">
                    <p class="pricing-card-desc3">Up to 25 projects</p>
                    <p class="pricing-card-desc3">2 additional Developers</p>
                    <p class="pricing-card-desc3">Unlimited Support</p>
                </div>
                <button class="pricing-card-button">Get Started</button>
            </div>
            <div class="pricing__section-bottom-card">
                <h4 class="pricing-card-desc">pro</h4>
                <h2 class="pricing-card-price">$75</h2>
                <p class="pricing-card-desc2">per month</p>
                <div class="offer-desc">
                    <p class="pricing-card-desc3">Up to 25 projects</p>
                    <p class="pricing-card-desc3">2 additional Developers</p>
                    <p class="pricing-card-desc3">Unlimited Support</p>
                    <p class="pricing-card-desc3">1.5GB Disk Space</p>
                </div>
                <button class="pricing-card-button">Get Started</button>
            </div>
        </div>
    </section>

    <section class="section team-section">
        <h1 class="team__section-heading">The team</h1>
        <div class="team__section-cards">
            <div class="team__section-card">
                <img src="./images/cto.png" alt="CTO" class="team-card-img">
                <h4 class="team-card-heading">CTO</h4>
                <p class="team-card-para1">Johnny B Good</p>
                <p class="team-card-para2">The brains behind the whole operation</p>
                <div class="team__section-card-icons">
                    <img src="./images/team-twitter.svg" alt="twitter logo" class="team-twitter-logo">
                    <img src="./images/team-facebook.svg" alt="facebook logo" class="team-facebook-logo">
                </div>
            </div>
            <div class="team__section-card">
                <img src="./images/ceo.png" alt="CEO" class="team-card-img">
                <h4 class="team-card-heading">CEO</h4>
                <p class="team-card-para1">Roll Over Beethoven</p>
                <p class="team-card-para2">The one that puts it all together</p>
                <div class="team__section-card-icons">
                    <img src="./images/team-twitter.svg" alt="twitter logo" class="team-twitter-logo">
                    <img src="./images/team-facebook.svg" alt="facebook logo" class="team-facebook-logo">
                </div>
            </div>
            <div class="team__section-card">
                <img src="./images/cfo.png" alt="CFO" class="team-card-img">
                <h4 class="team-card-heading">CFO</h4>
                <p class="team-card-para1">Chuck Berry</p>
                <p class="team-card-para2">The guy with his hand on the wallet</p>
                <div class="team__section-card-icons">
                    <img src="./images/team-twitter.svg" alt="twitter logo" class="team-twitter-logo">
                    <img src="./images/team-facebook.svg" alt="facebook logo" class="team-facebook-logo">
                </div>
            </div>
        </div>
    </section>

    <section class="section footer-section">
        <p class="footer__section-para">A free template by</p>
        <img src="./images/webscope.svg" alt="Webscope logo" class="footer-logo">
    </section>
</body>

</html>