Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sir-ct
Sir-ct committed Nov 10, 2020
0 parents commit ff40198
Show file tree
Hide file tree
Showing 11 changed files with 255 additions and 0 deletions.
1 change: 1 addition & 0 deletions images/bg-pattern-bottom-desktop.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions images/bg-pattern-bottom-mobile.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions images/bg-pattern-top-desktop.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions images/bg-pattern-top-mobile.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/favicon-32x32.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions images/icon-star.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/image-anne.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/image-colton.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/image-irene.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
114 changes: 114 additions & 0 deletions index.html
@@ -0,0 +1,114 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png"/>
<link href="https://fonts.googleapis.com/css2?family=Spartan:wght@400;500;700&display=swap" rel="stylesheet">

<title>Frontend Mentor | Social proof section</title>
<link rel="stylesheet" href="./style.css/main.css"></link>
<style>
.attribution {
font-size: 11px;
text-align: center;
grid-column-start: 1;
grid-column-end: 3;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
</head>
<body>
<div id="bodywrap">
<div id="headtext">
<h1>10,000+ of our users love our products.</h1>
<p>We only provide great products combined with excellent customer service. See what our satisfied customers are saying about our services.</p>
</div>

<div id="ratesectioncover">
<div class="ratedivs">
<div class="starscontainer">
<img src="./images/icon-star.svg" alt="icon-star">
<img src="./images/icon-star.svg" alt="icon-star">
<img src="./images/icon-star.svg" alt="icon-star">
<img src="./images/icon-star.svg" alt="icon-star">
<img src="./images/icon-star.svg" alt="icon-star">
</div>
<span>Rated 5 Stars In Reviews</span>
</div>
<div class="ratedivs">
<div class="starscontainer">
<img src="./images/icon-star.svg" alt="icon-star">
<img src="./images/icon-star.svg" alt="icon-star">
<img src="./images/icon-star.svg" alt="icon-star">
<img src="./images/icon-star.svg" alt="icon-star">
<img src="./images/icon-star.svg" alt="icon-star">
</div>
<span> Rated 5 Stars in Report Guru</span>
</div>
<div class="ratedivs">
<div class="starscontainer"><img src="./images/icon-star.svg" alt="icon-star">
<img src="./images/icon-star.svg" alt="icon-star">
<img src="./images/icon-star.svg" alt="icon-star">
<img src="./images/icon-star.svg" alt="icon-star">
<img src="./images/icon-star.svg" alt="icon-star"></div>
<span>Rated 5 Stars in BestTech</span>
</div>
</div>

<div id="testimonysection">
<div class="testimonydivs">
<div class="testifierdetails">
<div class="testimonyimgdiv"><img src="./images/image-colton.jpg" alt="colton"></div>
<div class="testimonytext">
<h4>Colton Smith</h4>
<span>Verified Buyer</span>
</div>
</div>
<p>
"We needed the same printed design as the one we had ordered a week prior.
Not only did they find the original order, but we also received it in time.
Excellent!"
</p>
</div>

<div class="testimonydivs">
<div class="testifierdetails">
<div class="testimonyimgdiv"><img src="./images/image-irene.jpg" alt="Irene"></div>
<div class="testimonytext">
<h4>Irene Roberts</h4>
<span>Verified Buyer</span>
</div>
</div>
<p>
"Customer service is always excellent and very quick turn around. Completely
delighted with the simplicity of the purchase and the speed of delivery."
</p>
</div>

<div class="testimonydivs">
<div class="testifierdetails">
<div class="testimonyimgdiv"><img src="./images/image-anne.jpg" alt="anne"></div>
<div class="testimonytext">
<h4>Anne Wallace</h4>
<span>Verified Buyer</span>
</div>
</div>
<p>"Put an order with this company and can only praise them for the very high standard. Will definitely use them again and recommend them to everyone!"</p>
</div>
</div>

<div class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by <a href="#">Sir-Ct</a>.
</div>

</div>
</body>
</html>
136 changes: 136 additions & 0 deletions style.css/main.css
@@ -0,0 +1,136 @@
body{
margin: 0;
padding: 0;
background-image: url("../images/bg-pattern-top-mobile.svg");
background-position: -60px 0px;
background-repeat: no-repeat;
font-family: 'Spartan', sans-serif;
}
#bodywrap{
width: 100%;
height: 100%;
background: url("../images/bg-pattern-bottom-mobile.svg");
background-repeat: no-repeat;
background-position-y: 100%;
}
#headtext{
width: 90%;
margin: auto;
padding-top: 50px;
text-align: center;
}
#headtext h1{
color: hsl(300, 43%, 22%);
font-weight: 700;
}
#headtext p{
font-size: 12px;
line-height: 1.5;
font-weight: 500;
color: hsl(303, 10%, 53%);
}
#ratesectioncover{
width: 90%;
margin: auto;
padding-top: 50px;
}
.ratedivs{
text-align: center;
padding: 10px;
background: hsl(300, 24%, 96%);
margin-bottom: 10px;
border-radius: 7px;
}
.ratedivs span{
color: hsl(300, 43%, 22%);
font-weight: 700;
}
.starscontainer{
padding-bottom: 5px;
}
#testimonysection{
width: 90%;
margin: auto;
margin-top: 50px;
padding-bottom: 80px;
}
.testimonydivs{
padding: 25px;
background: hsl(300, 43%, 22%);
margin-bottom: 10px;
border-radius: 7px;
}
.testimonydivs p{
color: hsl(300, 24%, 96%);
font-size: 12px;
font-weight: 400;
line-height: 1.5;
}
.testifierdetails{
display: flex;
}
.testimonyimgdiv{
width: 50px;
border-radius: 50%;
margin-right: 20px;
font-size: 12px;
}
.testimonyimgdiv img{
width: 100%;
border-radius: 50%;
}
.testimonytext h4{
margin: 5px;
margin-left: 0;
color: hsl(0, 0%, 100%);
}
.testimonytext span{
color: hsl(303, 10%, 53%);
}
@media (min-width: 770px) {
body{
background-image: url("../images/bg-pattern-top-desktop.svg");
padding-left: 100px;
padding-right: 100px;
}
#bodywrap{
background-image: url("../images/bg-pattern-bottom-desktop.svg");
background-position-x: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
}
#headtext{
width: 50%;
margin: 10%;
text-align: left;
}
.ratedivs{
width: 70%;
display: flex;
justify-content: space-around;
}
.ratedivs:nth-child(2){
margin-left: 50px;
}
.ratedivs:nth-child(3){
margin-left: 100px;
}
#testimonysection{
grid-column-start: 1;
grid-column-end: 3;
display: flex;
}
.testimonydivs{
position: relative;
padding: 25px;
background: hsl(300, 43%, 22%);
border-radius: 7px;
margin-right: 10px;
}
.testimonydivs:nth-child(2){
top: 15px;
}
.testimonydivs:nth-child(3){
top: 30px;
}
}

1 comment on commit ff40198

@vercel
Copy link

@vercel vercel bot commented on ff40198 Nov 10, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.