Skip to content

Still working on it #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Jor4291 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Still working on it #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
219 changes: 219 additions & 0 deletions css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,219 @@
/*CSS Reset*/
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

*{
box-sizing: border-box;
padding:0;
margin:0;
max-width:100%;
/* border:1px solid grey; */
}

/*General Styles*/
html{
font-size:62.5%;
}
body{
font-size:1.8rem;
line-height:1.5;
color:#4f4f4f;
background-color:#FBFFFB;
font-family: 'Source Sans Pro', sans-serif;
}
h1{
color:#FBFFFB;
font-size:6rem;
font-family: 'Oxygen', sans-serif;
}
h2{
font-size:3rem;
}
h3{
font-size:2.2rem;
}
h2, h3{
color:#266035;
text-align:center;
font-family: 'Oxygen', sans-serif;
margin-bottom:5%;
}
a{
text-decoration: none;
color:#266035;
font-family: 'Source Sans Pro', sans-serif;
}
button{
font-family: 'Source Sans Pro', sans-serif;
font-size:1.8rem;
padding:2% 4%;
margin-top:4%;
}
section, footer{
padding:4% 0;
}
/*helper classes*/
.bg-img{
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

/*header section styles*/
nav{
display:flex;
justify-content: space-between;
position:fixed;
width:100%;
top:0;
z-index: 999; /*everything should scroll behind this*/
background-color:rgba(255, 255, 255, 0.8);
}
.logo{
width:5%;
}
.links{
width:50%;
display:flex;
justify-content: space-evenly;
align-items: center;
}

/*top section styles*/
#top{
height:90vh;
background-image: url('../images/header.jpg');
background-position: bottom;
display:flex;
justify-content: center;
align-items: center;
text-align:center;
}
#top button{
border:2px solid #266035;
color:#266035;
background-color:#fff;
transition:2s;
}
#top button:hover{
color:#fff;
background-color:#266035;
border:2px solid #fff;
}

/*About Section Styles*/
#about{
height:85vh;
background-image:url('../images/about-img.jpg');
display:flex;
justify-content: flex-end;
align-items: center;
}
#about div{
width:20%;
margin-right:10%;
}

/*Shop Section Styles*/
#shop{
padding-bottom:0;
}
.container{
display:flex;
flex-wrap:wrap;
}

.cacti, .tropicals, .succulants, .text{
width:50%;
}
.text{
padding:5%;
display:flex;
justify-content: center;
text-align:center;
}
.text div{
width:60%;
}
.text button{
background-color:#266035;
color:#fff;
border:2px solid #266035;
transition:2s;
}
.text button:hover{
background-color:#fff;
color:#266035;
}
.succulants{
background-image:url('../images/succulants.jpg');
}
.cacti{
background-image:url('../images/cacti.jpg');
}
.tropicals{
background-image:url('../images/tropicals.jpg');
}

/*footer section styles*/
footer{
background-color:#266035;
display:flex;
flex-wrap:wrap;
color:#fff;
}
footer h2{
color:#fff;
width:100%;
}
footer a, footer h3{
color:#fff;
text-align:left;
}
.right, .left{
width:50%;
display:flex;
justify-content: center;
align-items: center;
}
.left div.info{
width:60%;
line-height:2.5;
}
.right img{
width:60%;
}
.bottom{
width:100%;
text-align:right;
}
.bottom p{
margin-right:5%;
margin-top:2%;
83 changes: 81 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,94 @@
@@ -1,15 +1,90 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Add Google Fonts here-->

<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=Oxygen&family=Source+Sans+Pro&display=swap" rel="stylesheet">
<!--Link your stylesheet here-->

<link rel="stylesheet" href="css/index.css">
<title>Document</title>
</head>
<body>


<header>
<nav>
<div class="logo">
<img src="images/logo.png" alt="illustration of a watering can">
</div>
<div class="links">
<a href="#top">Home</a>
<a href="#about">About</a>
<a href="#shop">Plants</a>
<a href="#contact">Contact</a>
</div>
</nav>
</header>
<section id="top" class="bg-img">
<div class="titles">
<h1>The Watering Can</h1>
<button>Shop Our Indoor Plant Sale</button>
</div>
</section>
<section id="about" class="bg-img">
<div>
<h2>Our Story</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam eius minima suscipit nihil aperiam amet, maxime possimus magnam voluptatibus vel, et modi corrupti, dicta quae sequi impedit quasi omnis vitae! Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae eaque nesciunt tempora impedit cumque porro placeat esse modi totam distinctio commodi veritatis at, doloribus numquam. Tempora ullam vero tenetur reiciendis.</p>
</div>
</section>
<section id="shop">
<h2>Our Plants</h2>
<div class="container">
<div class="bg-img succulants"></div> <!--empty div for background image-->
<div class="text">
<div>
<h3>Succulants</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur soluta iure iusto minima deserunt, eos voluptatem ad temporibus quae quasi accusantium similique pariatur neque autem nostrum quas dicta velit ullam!</p>
<button>Shop Now!</button>
</div>
</div><!--this closes the text div-->
<div class="text">
<div>
<h3>Cacti</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque ducimus suscipit, harum doloribus molestias quis magnam eum laborum incidunt pariatur aperiam dolorum facilis aliquam! Impedit eos delectus architecto beatae ullam.</p>
<button>Shop Now!</button>
</div>
</div><!--this closes the text div-->
<div class="bg-img cacti"></div><!--empty div for the background image-->
<div class="bg-img tropicals"></div><!--empty div for background image-->
<div class="text">
<div>
<h3>Tropicals</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, hic obcaecati facilis, itaque assumenda aperiam consequuntur repudiandae, aliquam illo provident nobis maiores quis dolore. Possimus exercitationem nemo explicabo ut repudiandae.</p>
<button>Shop Now!</button>
</div>
</div>
</div><!--this closes the container-->
</section>
<footer id="contact">
<h2>Get In Touch!</h2>
<div class="left">
<div class="info">
<h3>Find Us Here:</h3>
<address>123 Plant Lane<br>
Bloomfield Ontario<br>
Canada L2G 0X7</address>
<a href="tel:+1-613-978-8282">613-978-8282</a><br>
<a href="mailto:[email protected]">[email protected]</a>
<p>@thewateringcan on the socials</p>
</div>
</div>
<div class="right">
<img src="images/shop.jpg" alt="inside of the front room of the watering can shop">
</div>
<div class="bottom">
<p>&copy copyright Brit Hemming 2021</p>
</div>
</footer>
</body>
</html>
</html>