Capstone/index.html at main · Suhaani-19/Capstone · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

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

    <nav class="navigationbar">

<!-- Logo section -->
        <a href="#">
          <div class="logo">
            <img src="./Images/logo.png" />
          </div>
        </a>

        <!-- Navigation links -->
        <div class="navLinks">
          <div class="navItems">
            <a href="#home">home</a>
            <a href="#projects">portfolio</a>
            <a href="#about">about</a>
            <a href="#contact">contact</a>
          </div>
        </div>

        <!-- Hamburger menu icon for mobile view -->
        <div class="ham">
          <i class="fa-solid fa-bars"></i>
        </div>
    </nav>

    <!-- Home / Hero section -->
    <section class="home" id="home">
        <div class="header">
          <h1>Connecting with Nature Through Design</h1>
        </div>

        <!-- Main hero image -->
        <div class="img">
          <img src="./Images/main.png" />
        </div>
    </section>

    <!-- Projects / Portfolio section -->
    <section class="projects" id="projects">

        <!-- Individual project card -->
        <div class="projs image1">
          <img src="./Images/img1.png" />
          <p>Forest Retreat</p>
          <p>Architecture</p>
        </div>

        <div class="projs image2">
          <img src="./Images/img2.png" />
          <p>Urban Oasis</p>
          <p>Interior Design</p>
        </div>

        <div class="projs image3">
          <img src="./Images/img3.png" />
          <p>Eco-Friendly Office</p>
          <p>Office Design</p>
        </div>

        <div class="projs image4">
          <img src="./Images/img4.png" />
          <p>Green Living Room</p>
          <p>Interior Design</p>
        </div>

        <div class="projs image5">
          <img src="./Images/img5.png" />
          <p>Sustainable Kitchen</p>
          <p>Interior Design</p>
        </div>

        <div class="projs image6">
          <img src="./Images/img6.png" />
          <p>Botanical Garden</p>
          <p>Landscape Design</p>
        </div>

        <div class="projs image7">
          <img src="./Images/img7.png" />
          <p>Nature-Inspired Bedroom</p>
          <p>Interior Design</p>
        </div>

        <div class="projs image8">
          <img src="./Images/img8.png" />
          <p>Eco-Friendly Workspace</p>
          <p>Office Design</p>
        </div>

        <div class="projs image9">
          <img src="./Images/img9.png" />
          <p>Zen Garden</p>
          <p>Landscape Design</p>
        </div>
    </section>

    <!-- Designer philosophy / description section -->
    <section class="paragraph">
        <div class="para">
          <p>
            I blend the tranquility of nature with modern design to create
            spaces that inspire and rejuvenate.
          </p>
        </div>
    </section>

    <!-- Project summary section -->
    <section class="projectsummary">
        <div class="projsum">
          <div class="head">
            <h3>Project Summary</h3>
          </div>

          <!-- Summary details -->
          <div class="detail">
            <div class="item1">
              <p>Type Of Work</p>
              <p>Interior Design</p>
            </div>
            <div class="item2">
              <p>Team</p>
              <p>Aurelia Greenleaf</p>
            </div>
            <div class="item3">
              <p>Date</p>
              <p>August 2023</p>
            </div>
          </div>
        </div>
    </section>

    <!-- About section -->
    <section class="abt" id="about">
        <h2>
          Aurelia Greenleaf is a biophilic designer with a passion for creating
          nature-inspired spaces.
        </h2>
    </section>

    <!-- Call-to-action / Contact section -->
    <section class="creations" id="contact">
        <h1>Discover the Harmony of Nature and Design</h1>
        <p>Explore my portfolio to see how I bring the beauty of nature into every project.</p>
        <button>Discover My Work</button>
    </section>

    <!-- Footer section -->
    <footer>
        <div class="footer">
          <img src="./Images/footer.png" />
        </div>
        <div>
          <button>Follow Me</button>
        </div>
    </footer>

    <!-- Font Awesome icons script -->
    <script
      src="https://kit.fontawesome.com/39c8f3f5e0.js"
      crossorigin="anonymous">
    </script>

</body>
</html>