Skip to content

A
ArchitectWebsite2021
Commit 2f42c0c6 by Tiarro Elprida Tamba
Options

first commit

parents
Showing with 655 additions and 0 deletions
css/style.css 0 → 100644
body{
background-color: rgb(255, 255, 255);
margin: 0;
font-family: 'Poppins', sans-serif;
}
.hero{
background: url(../images/bg.jfif);
background-size: cover;
}
.box{
width: 1200px;
max-width: 90%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.logo{
color: white;
width: 200px;
}
.menu{
display: flex;
width: 800px;
}
.menu a {
width: 100px;
padding: 30px 5px;
text-decoration: none;
color: white;
text-align: center;
transition: 0.5s;
}
.menu a:hover{
background: rgb(228, 228, 228, 0.3);
}
.content-title{
width: 40%;
margin: 5% 0 0;
}
.content-hero{
padding: 5% 0 10%;
}
.content-title h2{
color: white;
font-size: 3em;
font-weight: 200;
}
.content-desc{
color: white;
width: 55%;
margin: 5% 0 0 5%;
}
.content-desc p{
line-height: 25px;
font-size: 16px;
}
.content-desc a{
margin: 10% 0 0;
background-color: rgb(52, 52, 160);
display: inline-block;
color: white;
padding: 10px 30px;
text-decoration: none;
border-radius: 50px;
}
/*Main*/
.main{}
.inner{
padding: 100px 100px 100px;
background: white;
width: 100%;
margin: -80px 0 90px;
border: 1px solid #f5f5f5;
border-bottom: none;
}
.main-title{
text-align: center;
}
.main-title h4{
font-weight: 600;
color: rgb(52, 52, 160);
}
.main-title h2{
font-size: 3em;
margin-top: 10px;
}
.main-content{
justify-content: space-between;
display: flex;
}
.main-content .desc{
line-height: 120%;
width: 45%;
font-size: 16px;
align-self: center;
}
.main-content .desc p.strong{
font-weight: 700;
color: rgb(20, 20, 160);
}
.main-content .image{
width: 45%;
}
.main-content .image img{
width: 100%;
border-radius: 10px;
box-shadow: 6px 2px 13px 4px #d6d6d682;
}
/*Feature*/
.feature{
background: rgb(244, 244, 253);
padding: 5% 0;
}
.feature-list{
margin: -15% 0 0;
display: flex;
justify-content: space-between;
}
.feature-item{
width: 30%;
}
.feature-item .image{
position: relative;
}
.feature-item .image .number{
position: absolute;
z-index: 2;
top: 0;
right: 0;
color: white;
background: rgb(52, 52, 160);
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.feature-item .image img{
width: 100%;
height: 330px;
overflow: hidden;
}
.feature-item .content h4{
border-left: 5px solid rgb(52, 52, 160);
padding: 0 0 0 20px;
}
.feature-item .content{
font-size: 16px;
color: rgb(53, 53, 53);
line-height: 25px;
}
/*slider*/
.sliders{
}
.slides{
height: 600px;
width: 100%;
padding: 100px 0 0;
position: relative;
}
.bg-quote{
position: absolute;
right: 10%;
opacity: 0.2;
z-index: 6;
}
.slide-item{
display: flex;
height: 600px;
}
#slide1,#slide2,#slide3{
display: none;
}
.slide-1,.slide-2,.slide-3{
position: absolute;
opacity: 0;
transition: 0.5s;
z-index: 1;
}
.controls{
position: absolute;
top: 68%;
right: 10%;
display: flex;
justify-content: space-between;
width: 160px;
z-index: 6;
}
.controls label{
height: 10px;
width: 50px;
background: white;
z-index: 5;
display: inline-block;
opacity: 0.5;
}
.slide-item-image{
width: 40%;
margin-top: -10%;
}
.slide-item-image img{
width: 100%;
}
.slide-item-desc{
width: 50%;
padding: 10%;
background:rgb(41, 41, 100);
color: white;
}
.profile{
display: flex;
width: 150px;
justify-content: space-between;
align-items: center;
}
.profile-image{
width: 50px;
height: 50px;
overflow: hidden;
border-radius: 50px;
}
#slide1:checked ~ .slide-1,
#slide2:checked ~ .slide-2,
#slide3:checked ~ .slide-3{
opacity: 1;
z-index: 5;
}
#slide1:checked ~ .controls label:nth-child(1),
#slide2:checked ~ .controls label:nth-child(2),
#slide3:checked ~ .controls label:nth-child(3){
opacity: 1;
}
#slide1:checked ~ .arrows label:nth-child(3),
#slide2:checked ~ .arrows label:nth-child(1),
#slide3:checked ~ .arrows label:nth-child(2){
background: rgb(41, 41, 100) url(../images/left-arrow.jfif)
no-repeat center center;
width: 50px;
height: 50px;
display: block;
float: left;
}
#slide1:checked ~ .arrows label:nth-last-child(2),
#slide2:checked ~ .arrows label:nth-last-child(1),
#slide3:checked ~ .arrows label:nth-last-child(3){
background: rgb(28, 28, 66) url(../images/right-arrow.jfif)
no-repeat center center;;
width: 50px;
height: 50px;
display: block;
float: right;
}
.arrows{
width: 100px;
height: 50px;
position: absolute;
z-index: 6;
background: rgb(26, 26, 26);
overflow: hidden;
top: 85%;
left: 31.5%;
}
/*Service*/
.service{
padding: 80px 0 ;
}
.service-title,.service-item{
width: 45%;
}
.service-title h4{
color: rgb(52, 52, 160);
}
.service-title h2{
font-size: 3em;
}
.service-item{
width: 45%;
display: flex;
}
.service-item,.item-icon{
width: 20%;
}
.item-desc{
font-size: 16px;
}
.service-item,.item-desc{
width: 80%;
}
/* Subscribe */
.subscribe{
background: rgb(228, 228, 253);
padding: 100px 0;
}
.subscribe-title{
text-align: center;
}
.subscribe-title h4{
color:rgb(52, 52, 160);
}
.subscribe-title h2{
font-size: 3.5em;
}
.subscribe-form{
display: flex;
align-self: center;
justify-content: center;
}
.form{
display: flex;
width: 500px;
background: white;
padding: 10px;
border-radius: 50px;
box-shadow: 3px 7px 10px 5px rgb(207, 207, 235);
overflow: hidden;
}
.subscribe-form input{
padding: 20px;
width: 80%;
border: none;
}
.subscribe-form input:focus, .subscribe-form button:focus{
outline: none;
}
.subscribe-form button{
padding: 10px;
background-color: rgb(52, 52, 160);
border: none;
border-radius: 30px;
}
.subscribe-content{
text-align: center;
margin: 20px 0 0;
}
.footer{
padding: 5% 0;
}
.footer-items{
display: flex;
width: 57%;
justify-content: space-between;
align-items: center;
margin-left: 40%;
}
.social{
width: 250px;
display: flex;
justify-content: space-between;
}
.social a img{
width: 40px;
}
\ No newline at end of file
images/1.jfif 0 → 100644
File added
images/2.jfif 0 → 100644
File added
images/3.jfif 0 → 100644
File added
images/bg.jfif 0 → 100644
File added
images/bg1.jfif 0 → 100644
File added
images/ela.jfif 0 → 100644
File added
images/t1.jfif 0 → 100644
File added
images/t2.jfif 0 → 100644
File added
images/t3.jfif 0 → 100644
File added
index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scaled=1.0">
<title>Membuat Website Dengan Flex</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--Hero-->
<div class="hero">
<header>
<div class="box">
<h1 class="logo">Arsitek</h1>
<div class="menu">
<a href="">Home</a>
<a href="">About</a>
<a href="">Gallery</a>
<a href="">Contact Us</a>
</div>
</div>
</header>
<section class="content-hero">
<div class="box">
<div class="content-title">
<h2>Great Real Estate Agent On Indonesia</h2>
</div>
<div class="content-desc">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam nostrum maiores cumque, nam sequi dolore quo beatae animi magni reprehenderit sapiente iste, distinctio itaque dolorem amet perferendis voluptas pariatur quis!</p>
<a href="">Read More</a>
</div>
</div>
</section>
</div>
<!--End Hero-->
<!--Main-->
<div class="main">
<div class="box">
<div class="inner">
<div class="main-title">
<h4>About Us</h4>
<h2>Buying Modern House With<br>Affordable Price</h2>
</div>
<div class="main-content">
<div class="desc">
<p class="strong">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Id pariatur odit, vitae vel fugiat voluptatibus deleniti quis dolores incidunt voluptatem ipsum aperiam, rem rerum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae asperiores, dignissimos quia sapiente
sunt nostrum magni optio nisi minima debitis dolor consequuntur, sed, libero cupiditate porro maiores itaque aspernatur alias.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero iusto facilis magnam mollitia quod doloribus,
repellat vel animi, necessitatibus neque harum ducimus ipsam architecto laborum magni. Autem ut natus facere?
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus suscipit modi enim officiis provident blanditiis
dolorum quidem aliquid distinctio corporis quisquam qui, necessitatibus beatae nulla quasi eius aut similique? Molestias.</p>
</div>
<div class="image">
<img src="images/bg1.jfif">
</div>
</div>
</div>
</div>
<!--End Main-->
<!--Feature-->
<div class="feature">
<div class="box">
<div class="feature-list">
<div class="feature-item">
<div class="image">
<div class="number">1</div>
<img src="images/1.jfif" alt="">
<div class="content">
<h4>Made By Customer Order</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident sapiente neque,
iure error quis cumque illo dolores, facere iusto assumenda possimus saepe.</p>
</div>
</div>
</div>
<div class="feature-item">
<div class="image">
<div class="number">2</div>
<img src="images/2.jfif" alt="">
<div class="content">
<h4>Special Price for Interior</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident sapiente neque,
iure error quis cumque illo dolores, facere iusto assumenda possimus saepe.</p>
</div>
</div>
</div>
<div class="feature-item">
<div class="image">
<div class="number">3</div>
<img src="images/3.jfif" alt="">
<div class="content">
<h4>Using High Quality Resource</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident sapiente neque,
iure error quis cumque illo dolores, facere iusto assumenda possimus saepe.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End Feature-->
<!--slider-->
<div class="sliders">
<div class="box">
<div class="slides">
<div class="bg-quote">
<img src="images/quote.png" alt="">
</div>
<input type="radio" name="slider" id="slide1" checked>
<input type="radio" name="slider" id="slide2">
<input type="radio" name="slider" id="slide3">
<div class="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
</div>
<div class="arrows">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
</div>
<div class="slide-item slide-1">
<div class="slide-item-image">
<img src="images/t1.jfif" alt="">
</div>
<div class="slide-item-desc">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur,
quas consectetur assumenda esse amet ducimus quisquam eum, dicta
possimus commodi quia deleniti distinctio molestiae doloribus iure
magni provident rerum dolorem.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Necessitatibus voluptas nemo eveniet.
Aut quibusdam modi sint culpa reprehenderit laboriosam natus, eos distinctio, incidunt fugit maiores ipsam eligendi quo
tenetur quaerat nisi dicta! Delectus cupiditate sequi, commodi unde sed officia minima provident porro, laudantium voluptatibus,
non ipsa dolorum veritatis tempora maxime?</p>
<div class="profile">
<div class="profile-image">
<img src="images/ela.jfif" alt="">
</div>
<div class="profile-name">
Tiarro Elp
</div>
</div>
</div>
</div>
<div class="slide-item slide-2">
<div class="slide-item-image">
<img src="images/2.jfif" alt="">
</div>
<div class="slide-item-desc">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur,
quas consectetur assumenda esse amet ducimus quisquam eum, dicta
possimus commodi quia deleniti distinctio molestiae doloribus iure
magni provident rerum dolorem.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Necessitatibus voluptas nemo eveniet.
Aut quibusdam modi sint culpa reprehenderit laboriosam natus, eos distinctio, incidunt fugit maiores ipsam eligendi quo
tenetur quaerat nisi dicta! Delectus cupiditate sequi, commodi unde sed officia minima provident porro, laudantium voluptatibus,
non ipsa dolorum veritatis tempora maxime?</p>
<div class="profile">
<div class="profile-image">
<img src="images/ela.jfif" alt="">
</div>
<div class="profile-name">
Tiarro Elp
</div>
</div>
</div>
</div>
<div class="slide-item slide-3">
<div class="slide-item-image">
<img src="images/t3.jfif" alt="">
</div>
<div class="slide-item-desc">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur,
quas consectetur assumenda esse amet ducimus quisquam eum, dicta
possimus commodi quia deleniti distinctio molestiae doloribus iure
magni provident rerum dolorem.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Necessitatibus voluptas nemo eveniet.
Aut quibusdam modi sint culpa reprehenderit laboriosam natus, eos distinctio, incidunt fugit maiores ipsam eligendi quo
tenetur quaerat nisi dicta! Delectus cupiditate sequi, commodi unde sed officia minima provident porro, laudantium voluptatibus,
non ipsa dolorum veritatis tempora maxime?</p>
<div class="profile">
<div class="profile-image">
<img src="images/ela.jfif" alt="">
</div>
<div class="profile-name">
Tiarro Elp
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End Slider-->
<!--service-->
<div class="service">
<div class="box">
<div class="service-title">
<h4>Our Service</h4>
<h2>Build Better House With Our Service</h2>
</div>
<div class="service-item">
<div class="item-icon">
<img src="images/blueprint1.png" alt="">
</div>
<div class="item-desc">
<h3>Live Is Better With Hommy Home</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam fugit commodi atque?
Deserunt vel consectetur voluptas eligendi. Aperiam eaque blanditiis delectus deserunt eligendi
fugit veritatis repellat voluptate impedit a. Dicta reprehenderit doloremque possimus quia dignissimos.</p>
</div>
</div>
<div class="service-item">
<div class="item-icon">
<img src="images/paint-roller.png" alt="">
</div>
<div class="item-desc">
<h3>Live Is Better With Hommy Home</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam fugit commodi atque?
Deserunt vel consectetur voluptas eligendi. Aperiam eaque blanditiis delectus deserunt eligendi
fugit veritatis repellat voluptate impedit a. Dicta reprehenderit doloremque possimus quia dignissimos.</p>
</div>
</div>
<div class="service-item">
<div class="item-icon">
<img src="images/sketch.png" alt="">
</div>
<div class="item-desc">
<h3>Live Is Better With Hommy Home</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam fugit commodi atque?
Deserunt vel consectetur voluptas eligendi. Aperiam eaque blanditiis delectus deserunt eligendi
fugit veritatis repellat voluptate impedit a. Dicta reprehenderit doloremque possimus quia dignissimos.</p>
</div>
</div>
</div>
</div>
<!--End Service-->
<!--Subscribe-->
<div class="subscribe">
<div class="box">
<div class="subscribed">
<div class="subscribe-title">
<h4>Subscribe Now</h4>
<h2>Subscribe Our Feed T Get More Useful
Article On Your Email</h2>
</div>
<div class="subscribe-form">
<form action="" class="form">
<input type="text" name="" id=""
placeholder="Input Your Email">
<button type="submit">
<img src="images/direct.png" alt="">
</button>
</form>
</div>
<div class="subscribe-content">
<p>Are you a house owner? He want to hear your unique story</p>
<p><a href="">Share Your Story Now</a></p>
</div>
</div>
</div>
</div>
<!--End Subscribe-->
<!--Footer-->
<div class="footer">
<div class="box">
<div class="footer-items">
<div class="social">
<a href="">
<img src="images/facebook.png" alt="">
</a>
<a href="">
<img src="images/twitter.png" alt="">
</a>
<a href="">
<img src="images/youtube.png" alt="">
</a>
</div>
<div class="copy-right">
2021 &copy; Tiarro Elprida Tamba
</div>
</div>
</div>
</div>
<!--End Footer-->
</div>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment