Skip to content

Yolomy Website #2

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
Annaliskirwa wants to merge 26 commits into
base: master
Choose a base branch
from
Open

Yolomy Website #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
e3b36d9
initializing index file
Annaliskirwa Aug 30, 2021
8f6fdc3
Initializing html file
Annaliskirwa Aug 30, 2021
64ac9aa
It will set the required meta tags
Annaliskirwa Aug 30, 2021
e51cf14
it will add the link to bootstrap css
Annaliskirwa Aug 30, 2021
b4115e7
it will add the home background image
Annaliskirwa Aug 30, 2021
3d3eb2b
It will add the logo
Annaliskirwa Aug 31, 2021
8b7daab
It will add the navbar toggler icon
Annaliskirwa Aug 31, 2021
2764fe0
It will add the navbar menu
Annaliskirwa Aug 31, 2021
248f9ff
It will add the contents on the homepage
Annaliskirwa Aug 31, 2021
5f2171e
It will add the style the homepage
Annaliskirwa Aug 31, 2021
0da5926
It will change the nav menu color to white
Annaliskirwa Aug 31, 2021
c274401
It will align the texts in the home section to center and edit color …
Annaliskirwa Aug 31, 2021
c321e62
a slight change
Annaliskirwa Aug 31, 2021
34fe5b0
It will center the button at the bottom of the page
Annaliskirwa Aug 31, 2021
33b9d50
it will create the button and the checkboxes
Annaliskirwa Aug 31, 2021
0e561bc
it will add and style the horizontal line
Annaliskirwa Aug 31, 2021
e7b64d4
It will add the icons and style them to the left
Annaliskirwa Aug 31, 2021
4c40672
It will add the items cards
Annaliskirwa Aug 31, 2021
d115326
it will add the product images and prices
Annaliskirwa Aug 31, 2021
8f16974
It will add and style the ladies clothes category
Annaliskirwa Sep 2, 2021
48e977d
It will add the about section
Annaliskirwa Sep 2, 2021
e6a37e4
It will add the about text and border
Annaliskirwa Sep 2, 2021
ea34dc7
It will add and style the promo details
Annaliskirwa Sep 3, 2021
b1879ea
It will add the social media icons
Annaliskirwa Sep 3, 2021
1b27231
It will add the footer
Annaliskirwa Sep 3, 2021
b78376a
It will create a licence
Annaliskirwa Sep 3, 2021
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
157 changes: 157 additions & 0 deletions Assignment_1/assets/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
/*navbar styling*/
.nav-link{
color: white;
}
/* home section styling */
.home{
display: flex;
background: url("backgrounds/hero.jpg") no-repeat center;
height: 100vh;
color: #fff;
min-height: 500px;
background-size: cover;
background-attachment: fixed;
font-family: 'Ubuntu', sans-serif;
}
.home .max-width{
margin: auto 0 auto 30px;
}
.home .home-content .text-1{
font-size: 27px;
}
.home .home-content .text-2{
font-size: 70px;
font-weight: 600;
margin-left: 40px;
text-align: center;
padding-bottom: 50px;
}
.home .home-content .text-3{
font-size: 35px;
margin: 10px 20px;
text-align: center;
}
.home .home-content .text-3 span{
color: crimson;
font-weight: 500;
}
.home .home-content a{
display: inline-block;
background: crimson;
color: #fff;
font-size: 25px;
padding: 12px 36px;
margin-top: 20px;
font-weight: 400;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
text-decoration: none;
}
.home .home-content a:hover{
color: crimson;
background: none;
}
.home .img{
position: absolute;
bottom: 30PX;
left: 50%;

}
/*Styling the products*/

.products .checkboxes{
background: #c4c4c4;
padding: 50px;
}
/*Styling the button*/
.products .btn{
background-color: crimson;
color: white;
position: absolute;
right: 70px;
}
/*Styling the items*/
.products .items{
padding: 50px;
}
.products .items p{
display: flex;
flex-basis: 100%;
align-items: center;
color:black;
margin: 8px 0px;
}
.products .items p::after{
content: "";
flex-grow: 1;
background: rgba(0, 0, 0, 0.35);
height: 3px;
font-size: 0;
line-height: 0px;
margin: 0px 8px;
}
.products .left{
position: relative;
left: 93%;
}
.products .itemss p{
display: flex;
flex-basis: 100%;
align-items: center;
color:black;
margin: 8px 0px;
padding-top: 50px;
padding-bottom: 50px;
}
.products .itemss p::before{
content: "";
flex-grow: 1;
background: rgba(0, 0, 0, 0.35);
height: 3px;
font-size: 0;
line-height: 0px;
margin: 0px 8px;
}
.products .left2{
position: relative;
left: 3%;
}
.about{
padding-top: 100px;
}
/*Styling the about section*/
.about {
position: relative;
text-align: center;
color: white;
}
.about .centered{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-style: solid;
border-color: gray;

}
.sale {
background-color:rgba(88, 87, 87, 0.767);
color: white;

}
.sale .container{
padding: 20px;
justify-content: space-around;
}
.contacts{
background-color:rgb(29, 37, 46);
color: white;
}
.column{
float: left;
width: 33.33%;
padding: 30px;
text-align:justify;
}

21 changes: 21 additions & 0 deletions LICENSE
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2021 Annalis Kirwa

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
199 changes: 199 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,199 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="Assignment_1/assets/style.css">
<title>Yolomy Website</title>
</head>
<body>
<div class = "container-fluid">
<nav class = "navbar navbar-expand-lg fixed-top">
<div class = "container">
<a href = "#home" class = "navbar-brand">
<img src = "Assignment_1/assets/logo/logo.png" >
</a>
<button class = "navbar-toggler" type="button" data-toggle="offcanvas"
data-bs-toggle="collapse"
data-bs-target="#navmenu">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navmenu">
<ul class = "navbar-nav ms-auto">
<li class = "nav-item">
<a href = "#home" class = "nav-link">Home</a>
</li>
<li class = "nav-item">
<a href = "#products" class = "nav-link">Products</a>
</li>
<li class = "nav-item">
<a href = "#about" class = "nav-link">
<img src = "Assignment_1/assets/logo/shop.png">
</a>
</li>
</ul>
</div>
</div>
</nav>

<div class = "home" id="home">
<div class = "max-width">
<div class = "home-content">
<div class = "text-2">Our clothing, your comfort</div>
<div class = "text-3">We understand that you need to look good and feel great.<br>
It all starts with what you are wearing.</div>
<div class = "img" >
<img src ="Assignment_1/assets/mouse_click.png" height="30px" width = "30px">
</div>
</div>
</div>
</div>
<div class = "products" id = "products">
<div class = "checkboxes">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">MEN</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">WOMEN</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">CHILDREN</label>
</div>

<input class = "btn" type = "button" value="SEE ALL PRODUCTS">
</div>
<div class = "items">
<p>MEN</p>
</div>
<span class = "left">1/5
<br>
<i class="fa fa-code" style="color:black;"> </i>
</span>
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">SIZE <i class="fa fa-angle-down" style="color:black;"> </i></h5>
<img src="Assignment_1/assets/products/tshirt.png" class="card-img-top" alt="tshirt" height="400px">
<p class="card-text">TSHIRT</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">SIZE <i class="fa fa-angle-down" style="color:black;"> </i></h5>
<img src="Assignment_1/assets/products/pants.png" class="card-img-top" alt="pants" height="400px">
<p class="card-text">PANTS FORCLAZ</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">10LITRI</h5>
<img src="Assignment_1/assets/products/backpack.png" class="card-img-top" alt="backpack" height="400px">
<p class="card-text">BACKPACK</p>
</div>
</div>
</div>

</div>
<div class = "itemss">
<p>WOMEN</p>
</div>
<span class = "left2">1/5
<br>
<i class="fa fa-code" style="color:black;"> </i>
</span>
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">SIZE <i class="fa fa-angle-down" style="color:black;"> </i></h5>
<img src="Assignment_1/assets/products/giacket.png" class="card-img-top" alt="jacket" height="400px">
<p class="card-text">GIACKET</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">SIZE <i class="fa fa-angle-down" style="color:black;"> </i></h5>
<img src="Assignment_1/assets/products/trekkingshoes.png" class="card-img-top" alt="pants" height="400px">
<p class="card-text">TREKKING SHOES</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">SIZE <i class="fa fa-angle-down" style="color:black;"> </i></h5>
<img src="Assignment_1/assets/products/tshirt_ladies.png" class="card-img-top" alt="backpack" height="400px">
<p class="card-text">T-SHIRT</p>
</div>
</div>
</div>
</div>
<div class = "about" id = "about">
<img src = "Assignment_1/assets/backgrounds/about.jpg">
<div class = "centered">
<fieldset>
<h2><legend>ABOUT US</legend></h2>
<h3>This is where high fashion clothing is designed and crafted from the heart of amazing team of craftsmen and designers who understand what fashion is </h3>
</fieldset>
</div>
</div>
<div class = "sale">
<div class = "container">
<p><img src = "Assignment_1/assets/social_icons/twitter_bird.png"> * SALE: Buy anything for 45% off. Use the promo CODE YOLOMY45 when you buy items* </p>
</div>
</div>
<div class = "contacts">
<div class = "container">
<div class = "row">
<div class = "column" id = "column1">
<br>
<br>
<br>
<h4>YOLOMY</h4>
<p>WE ARE YOLOMY- WE UNDERSTAND<BR>
FASHION AND STYLE. WE CRAFT OUR<BR>
PRODUCTS WITH LOVE AND INTELLIGENCE</p>
</div>
<div class = "column">
<br>
<p>We are social</p>
<p><img src ="Assignment_1/assets/social_icons/g_plus.png">
<img src="Assignment_1/assets/social_icons/facebook.png">
<img src = "Assignment_1/assets/social_icons/you_tube.png">
<img src = "Assignment_1/assets/social_icons/stumble_upon.png"></p>
<p><img src = "Assignment_1/assets/social_icons/skype.png">
<img src= "Assignment_1/assets/social_icons/flickr.png">
<img src = "Assignment_1/assets/social_icons/twitter.png">
<img src = "Assignment_1/assets/social_icons/pinterest.png"></p>
<br>
<br>
COPYRIGHT 2015 YOLOMY.INC
</div>
<div class = "column">
<br>
<br>
<br>
<br>
CREDITS | PRIVACY | ABOUT | CONTACT
<BR>
Yolomy: We mean fashion
</div>
</div>
</div>
</div>
</div>
</body>
</html>