Skip to content

Commit

Permalink
added more pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sandile-Dev01
Sandile-Dev01 committed Jul 30, 2023
1 parent e7d4f8b commit 8926e34
Show file tree
Hide file tree
Showing 5 changed files with 196 additions and 17 deletions.
101 changes: 97 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,6 @@
<div class="navbar-brand logo">WEDESIGN</div>

<ul class="nav">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">WORK</a>
</li>
Expand All @@ -57,7 +54,7 @@
</nav>

<div class="content">
<h1 class="text-center">Elegance.</h1>
<h1 class="text-center">Elegant.</h1>
<p>
Welcome to We Design, where modern elegance meets architectural
mastery. We are a premier architecture firm dedicated to
Expand All @@ -77,5 +74,101 @@ <h1 class="text-center">Elegance.</h1>
</div>
</div>
</div>
<div class="container-fluid" id="one">
<div class="overlay container">
<div class="row">
<div class="col-md-12">
<div class="content">
<h1 class="text-center">Innovative.</h1>
<p>
At We Design, innovation is at the very core of our DNA. We take
pride in being pioneers in the field of modern mansion design,
consistently pushing the boundaries of what is possible and
reimagining the concept of luxury living.
</p>
<a
class="home_button"
href="https://www.sandilendimande.com/"
target="_blank"
>Get Started</a
>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="two">
<div class="overlay container">
<div class="row">
<div class="col-md-12">
<div class="content">
<h1 class="text-center">Modern.</h1>
<p>
At our company, modernity is not just a word; it's a driving
force that permeates every aspect of our operations. We pride
ourselves on being at the forefront of architectural innovation,
embracing cutting-edge technologies, and continuously pushing
the boundaries of design to create modern living spaces that are
second to none.
</p>
<a
class="home_button"
href="https://www.sandilendimande.com/"
target="_blank"
>Get Started</a
>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="three">
<div class="overlay container">
<div class="row">
<div class="col-md-12">
<div class="content">
<h1 class="text-center">Brilliant.</h1>
<p>
At our company, brilliance is not just a claim; it's an inherent
quality that shines through in everything we do. We take immense
pride in our unwavering commitment to excellence, relentless
pursuit of perfection, and the ability to transform
architectural dreams into awe-inspiring reality.
</p>
<a
class="home_button"
href="https://www.sandilendimande.com/"
target="_blank"
>Get Started</a
>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="four">
<div class="overlay container">
<div class="row">
<div class="col-md-12">
<div class="content">
<h1 class="text-center">Luxury.</h1>
<p>
The designs crafted by our company epitomize luxury in every
sense of the word. Each architectural masterpiece is
meticulously planned and executed to offer an unparalleled
living experience that indulges the senses and celebrates
opulence.
</p>
<a
class="home_button"
href="https://www.sandilendimande.com/"
target="_blank"
>Get Started</a
>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
17 changes: 9 additions & 8 deletions sass/mixins/_mixins.scss
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
@mixin positioning($position, $width, $height){
position: $position;
width: $width;
height: $height;
@mixin positioning($position, $width, $height) {
position: $position;
width: $width;
height: $height;
}

@mixin background($position, $size) {
background-position: $position;
background-size: $size;
background-position: $position;
background-repeat: no-repeat;
background-size: $size;
background-attachment: fixed;
filter: contrast(1.2);
}


55 changes: 54 additions & 1 deletion sass/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,68 @@ body {
box-sizing: border-box;
margin: 0;
color: white;
scroll-behavior: smooth;
}

::-webkit-scrollbar {
display: none;
}

@media (min-width: 0px) {
#container {
background-image: url(https://cdn.homedit.com/wp-content/uploads/2021/11/Modern-Mansion.jpg);
position: relative;
width: 100%;
height: 100dvh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(https://cdn.homedit.com/wp-content/uploads/2021/11/Modern-Mansion.jpg);
background-attachment: fixed;
filter: contrast(1.2);
}
#one {
background-image: url("https://cdn.homedsgn.com/wp-content/uploads/2014/05/Modern-Mansion-on-Sunset-Plaza-Drive-06.jpg");
position: relative;
width: 100%;
height: 100dvh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
filter: contrast(1.2);
}
#two {
background-image: url("https://images.squarespace-cdn.com/content/v1/58487dc4b8a79b6d02499b60/d779760a-5028-4209-ac02-6c72b19e6455/Francis+York+Bespoke+Modern+Mansion+in+the+Hills+of+Bel+Air+4.jpg");
position: relative;
width: 100%;
height: 100dvh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
filter: contrast(1.2);
}
#three {
background-image: url("https://e0.pxfuel.com/wallpapers/235/719/desktop-wallpaper-modern-mansions-background-1920x1080-mansion.jpg");
position: relative;
width: 100%;
height: 100dvh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
filter: contrast(1.2);
}
#four {
background-image: url("https://images.squarespace-cdn.com/content/v1/5e30b4c769dcbf426b421101/1627933275320-72S5CGBXSZ8248X2K9X0/01-Bundy-Drive-Brentwood-Luxury-Poolside-Living.jpg");
position: relative;
width: 100%;
height: 100dvh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
filter: contrast(1.2);
}
.navbar-brand {
font-family: "Orbitron";
Expand All @@ -35,6 +85,9 @@ body {
.nav li a {
color: #ffffff;
}
.nav li a:hover, .nav li a:active, .nav li a:focus {
color: #ebc590;
}
.content {
position: absolute;
bottom: 10%;
Expand Down
2 changes: 1 addition & 1 deletion sass/styles.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

38 changes: 35 additions & 3 deletions sass/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@ body {
box-sizing: border-box;
margin: 0;
color: white;
scroll-behavior: smooth;
}

::-webkit-scrollbar {
display: none;
}

$light-clr: #ffffff;
Expand All @@ -16,12 +21,33 @@ $accent-clr-3: #ebc590;

@media (min-width: 0px) {
#container {
background-image: url(https://cdn.homedit.com/wp-content/uploads/2021/11/Modern-Mansion.jpg);
@include positioning(relative, 100%, 100dvh);
@include background(center, cover);
}

background-image: url(https://cdn.homedit.com/wp-content/uploads/2021/11/Modern-Mansion.jpg);
background-size: cover;
background-repeat: no-repeat;
#one {
background-image: url("https://cdn.homedsgn.com/wp-content/uploads/2014/05/Modern-Mansion-on-Sunset-Plaza-Drive-06.jpg");
@include positioning(relative, 100%, 100dvh);
@include background(center, cover);
}

#two {
background-image: url("https://images.squarespace-cdn.com/content/v1/58487dc4b8a79b6d02499b60/d779760a-5028-4209-ac02-6c72b19e6455/Francis+York+Bespoke+Modern+Mansion+in+the+Hills+of+Bel+Air+4.jpg");
@include positioning(relative, 100%, 100dvh);
@include background(center, cover);
}

#three {
background-image: url("https://e0.pxfuel.com/wallpapers/235/719/desktop-wallpaper-modern-mansions-background-1920x1080-mansion.jpg");
@include positioning(relative, 100%, 100dvh);
@include background(center, cover);
}

#four {
background-image: url("https://images.squarespace-cdn.com/content/v1/5e30b4c769dcbf426b421101/1627933275320-72S5CGBXSZ8248X2K9X0/01-Bundy-Drive-Brentwood-Luxury-Poolside-Living.jpg");
@include positioning(relative, 100%, 100dvh);
@include background(center, cover);
}

.navbar-brand {
Expand All @@ -43,6 +69,12 @@ $accent-clr-3: #ebc590;

a {
color: $light-clr;

&:hover,
&:active,
&:focus {
color: $accent-clr-3;
}
}
}
}
Expand Down

0 comments on commit 8926e34

Please sign in to comment.