Scribd
Upload
56 views23 pages

Codsoft

Uploaded by

gopalkrishnamurthy1122
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
56 views23 pages

Codsoft

Uploaded by

gopalkrishnamurthy1122
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 23

PROTOFOLIA

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/
all.min.css"/>
<title>Portfolio</title>

</head>

<body>
<nav>
<div class="container nav-container">
<a href="" class="logo">
<h2>Meher<span> Satyaveni</span></h2>
</a>
<ul>
<li><a href="#About">About </a></li>
<li><a href="#Services">Services</a></li>
<li><a href="#Blog">Blog</a></li>
<li><a href="#Contact">Contact </a></li>

</ul>
</div>
</nav>
<header>
<div class="header-container container">
<div class="header-left">
<h1>
Hello,

<p class="name"> I am <span>Meher</span></p>


</h1>
<p>Proficient in HTML,CSS, Javascript and React.js with
experience in windows and linux<br> environmenst
committed to deliveing hight-quality and driving organzation growth.
</p>

<h5>Frontend Developer</h5>
<br>
<div class="header-action-aria">
<a href="C:\Users\R. Meher SatyaVeni\Documents\Downloads\cv.pdf" class="btn btn-
primary">Download CV</a>
<a href="" class="btn">Read more</a>
</div>
</div>
<div class="header-right">
<img src="pic22.jpeg" alt="">
</div>
</header>
<section id="About">
<h1><span>A</span>BOUT</h1>
<div class="container about-container">
<p>I'm a diligent <span>Frontend Developer </span>, passionately committed to refining my
<span> CSS, HTML,
</span> and <span> React </span> skills. My
relentless dedication drives me to continually learn and adapt, staying at the forefront of
<span>web
development</span> trends. My goal is to create captivating, responsive, and user-friendly
web
interfaces.</p>
</div>
<div class="about-content">
<article class="about-article">
<img src="man.png" alt="">
<h5>FULL NAME</h5>
<p>R.Meher Satyaveni</p>

</article>
<article class="about-article">
<img src="email.png" alt="">
<h5>EMAIL</h5>
<p>[email protected] </p>

</article>
<article class="about-article">
<img src="linkedin.png" alt="">
<h5>Linkedin</h5>
<p>https://www.linkedin.com/in/meher-satyaveni-rimmalapudi-973aa5294/</p>

</article>
<article class="about-article">
<img src="telephone-call.png" alt="">
<h5>PHONE </h5>
<p>+918328282623</p>

</article>
</div>
</section>

<section id="Services">
<h1><span>W</span>hat I Do</h1>

<div class="container services-container">


<article class="services-article">
<img src="software.png" alt="">
<h2>Software Development</h2>
<p>Software development services encompass designing, coding, testing, and maintaining
applications to
meet specific client needs, delivering tailored software solutions.</p>
</article>
<article class="services-article">
<img src="coding.png" alt="">
<h2>Web
Development</h2>
<p>Web development
Crafting websites by coding, designing, and optimizing for functionality, performance, and
user
experience, enabling online presence and interaction.</p>
</article>
<article class="services-article">
<img src="python.png" alt="">
<h2>Python Programming</h2>
<p>

Python is extensively applied in data science, data analysis, machine learning, data
engineering, web development, software development, and other fields.</p>
</article>
</div>
</section>

<section id="skills">
<h1> <span>M</span>y Skills</h1>
<div class="container skills-container">
<article class="skill-article">

<h4>HTML </h4>
</article>
<article class="skill-article">

<h4>CSS</h4>
</article>
<article class="skill-article">

<h4>Javascript</h4>
</article>
<article class="skill-article">

<h4>MySql</h4>
</article>
<article class="skill-article">

<h4>Python</h4>
</article>
<article class="skill-article">

<h4>WebDesign</h4>
</article>
<article class="skill-article">

<h4>Testing</h4>
</article>
<article class="skill-article">

<h4>Promt Engineering</h4>
</article>

</div>
</section>

<section id="Blog">
<div class="row">
<div class="header">
<h1>B<span>log</span></h1>
<p>Welcome to the dynamic world of front-end development, web design, and web
development. In this
concise guide, we'll delve into the key aspects of this exciting field.</p>
</div>
<div class="content">
<div class="card">

<img src="web design (1).jpg" alt="">


<br>
<p>
Web design is the art of crafting visually appealing and user-friendly websites, blending
elements like typography, color theory, and layout to create memorable online
experiences. HTML,
CSS, and JavaScript are the cornerstone languages that enable us to build interactive and
responsive websites, making them not only look great but also function seamlessly on
various
devices interface.

</p>
</div>
<div class="card">

<img src="web design (2).jpg" alt="">


<br>
<p>
Responsive web design ensures that websites adapt effortlessly to different screen sizes,
offering a consistent experience across platforms. As you progress, you can explore
frameworks
like Bootstrap or delve into user-centric design principles to create intuitive interfaces.
Web
accessibility creativity and innovation, waiting for you to explore world-wide.

</p>
</div>
</div>
</div>
</section>
<section id="Contact">
<h1> <span>Get</span> In Touch</h1>
<div class="contatact-container container">
<form>
<div class="form-top">
<input type="text" placeholder=" First Name" required>
<input type="text" placeholder="Last Name" required>
<input type="email" placeholder="Email" required>
<input type="number" placeholder="Phone Number" required>

</div>
<div class="form-bottom">
<textarea name="message" placeholder="message"></textarea>
<button type="submit" class="btn btn-primary">Sumbit Now</button>
</div>
</form>
</div>
</section>
<footer>
&copy;Meher Satyaveni

</footer>
<script src="script.js"></script>

</body>
</html>

APP.CSS

*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
outline: none;
}
:root{
--color-white:#ffffff;
--color-light:#828282;
--color-primary:#12e12e;
--color-dark:#212121;
--color-border:#7e686895;
--color-bg:#171717;

}
body{
background: var(--color-bg);
color: var(--color-white);
}
h1{
font-size: 35px;
font-weight: 400;
color: white;
line-height: 30px;
margin: 1rem 0;

}
h2{
font-size: 36px;
font-weight: 500;
line-height: 30px;
color:var(--color-border);

}
h4{
font-size: 20px;
font-weight: 600;
line-height: 31px;
color:var(--color-primary);
}
h5{
font-size: 18px;
font-weight: 500;
line-height: 20px;
color:white;

}
p{
color:var(--color-white);
font-size: 17px;
line-height: 23px;
}
.btn{

display: inline-block;
width: fit-content;
border: 1px solid white;
padding: 12px 30px;
font-size: 15px;
font-weight: 500;
transition: .4s ease;
color:#ffff;
border-radius: 6px;
}
.btn:hover{
background: white;
color: var(--color-bg);
border-color:transparent ;
}
.btn-primary{
background: var(--color-primary);
border-color: transparent;

}
.container{
max-width: 160px;
width: 90%;
margin: 0 auto;

}
nav{
height: 5rem;
width: 100%;
position:fixed ;
top:0;
right: 0;

}
.nav-container {

height: 100%;
justify-content: center;
align-items: center;
display: flex;
}

ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 950px;
margin-inline-end:100px;
padding-inline-start: 40px;

}
.logo h2{
color: white;
font-size: 32px;
}
.nav-container ul{
display: flex;
align-items: center;
gap:40px;
}
.nav-container ul li a{
color: #ffffff;
font-size: 16px;
font-weight: 400;
transition: .4s ease;

}
.nav-container ul li a:hover{
color:var(--color-primary);
}
span{

color: var(--color-primary);
text-shadow:0 0 10px blueviolet;

}
header{
margin-top: 190px;

.header-container{
display: grid;
grid-template-columns: 548% 120%;
align-items: center;
margin-left: 10%;
}
img{
width: 170%;
display: block;

}
.header-container p{
width: 90%;
margin: 2rem 0 1rem;
font-style:normal;
}
.name{
width: 50px;
font-size: 60px;
font-weight: 500;
}
.header-container h5{
margin: 1rem 0;
color: var(--color-light);
}
.header-action-aria{
display: flex;
gap: 10px;
align-items: center;
}
#About{
padding-top:70px;
}
section>h1{
text-align: center;
margin-bottom: 44px;
margin-top: 158px;
}
.about-container p{

margin: 4px auto;


width: 62%;
position: absolute;
margin-left: -26%;
font-style:normal;
font-weight: 55px;
text-align: center;
font-size: 25px;

.about-content{
margin-top: 600%;
display: grid;
margin: 280px 18%;
grid-template-columns: repeat(4,1fr);
justify-content: center;
align-items: center;

}
.about-article{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: auto;
gap: 10px;
text-align: center;
}
.about-article img{
width: 62px;
}
#Services{
padding-top: 8px;

.services-container{
display: grid;
grid-template-columns: repeat(3,1fr);
gap:60px;
margin-top: 100px;
justify-content: center;
}
.services-article{
background: var(--color-dark);
display: flex;
flex-direction: column;
gap: 30px;
padding: 50px;
border-bottom: 4px solid transparent;
}
.services-article:hover{
border-color: var(--color-primary);
}
.services-article img{
width: 40px;
}
.services-article p{
font-family:'Times New Roman', Times, serif;
}

#skills{
padding-top: -1px;

.skills-container{
display: grid;
grid-template-columns: repeat(4,1fr);
gap:60px;
margin-top: 100px;
justify-content: center;
text-align: center;

}
.skill-article{
background: var(--color-dark);
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
padding:16px 90px;
border-radius: 14px;

border-bottom: 4px solid transparent;


}
.skill-article:hover{
border-color: var(--color-primary);

#Blog .row{
width: 80%;
margin: auto;
}
#Blog .row .header{
width: 60%;
text-align: center;
margin: auto;
}
#Blog .row .header h1{
padding-top: 280px;
gap: 19px;
}
.header h1{
margin:29px ;
}
#Blog .row .header p{
margin-top: 15px;
font-size: 18px;
line-height: 1.3;
}
.content .card img{
width: 100% ;
height: auto;
}
.content .card p{
font-size: 20px;
line-height: 1.2;
}
.content{
display: flex;
align-items:center;
justify-content:space-between;
margin: 44px;

}
.content .card{
flex: 2;
margin: 50px 50px;
box-shadow: 0px 4px 0px rgba(0,0,0,0,1);
background-color: #212121;
border-radius: 19px;
}

#Contact{
padding-top: 120px;
}
.contatact-container{
margin-top: 80px;
}
form{
width: 60%;
margin: 0 auto;
position: absolute;
margin-left: -25%;
}
.form-top{
display: grid;
grid-template-columns: 1fr 1fr;
gap:40px
}
form input{
padding: 10px;
background: transparent;
margin-bottom: 30px;
color: var(--color-light);
border: none;
box-shadow: 0 1px 0 0 var(--color-border);
transition: .4s ease;
font-size: 15px;
line-height: 18px;
font-weight: 500;
}
form input:focus{
border-bottom: 1px solid blueviolet;
color:var(--color-primary);
box-shadow: none;
}
.form-bottom{
display: flex;
flex-direction: column;
gap: 30px;
align-items: center;
}
.form-bottom textarea{
width: 100%;
padding: 9px;
height: 100px;
background: transparent;
resize: none;
font-size: 14px;
line-height: 18px;
font-weight: 500;
margin-top: 17px;
border: 1px solid var(--color-border);
color: var(--color-primary);
}
.form-bottom textarea :focus{
border-bottom: 1px solid blueviolet;
}

footer{
margin-top:500px ;
margin-bottom: 40px ;
text-align: center;
color:var(--color-border);
}
.naWinScroll{
background: var(--color-dark);
box-shadow: 0 0.1rem rgba(0,0,0,0,7);
}

///////////////////////////script.js

let nav=document.querySelector('nav');

window.addEventListener('scroll',()=>{
nav.classList.toggle('naWinScroll',window,scrollY>0)
}
)

Cal

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta charset="utf-8">
<title>Simple Calculator using HTML, CSS and JavaScript</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>

<table class="calculator" >


<tr>
<td colspan="3"> <input class="display-box" type="text" id="result" disabled /> </td>

<!-- clearScreen() function clears all the values -->


<td> <input type="button" value="C" onclick="clearScreen()" id="btn" /> </td>
</tr>
<tr>
<!-- display() function displays the value of clicked button -->
<td> <input type="button" value="1" onclick="display('1')" /> </td>
<td> <input type="button" value="2" onclick="display('2')" /> </td>
<td> <input type="button" value="3" onclick="display('3')" /> </td>
<td> <input type="button" value="/" onclick="display('/')" /> </td>
</tr>
<tr>
<td> <input type="button" value="4" onclick="display('4')" /> </td>
<td> <input type="button" value="5" onclick="display('5')" /> </td>
<td> <input type="button" value="6" onclick="display('6')" /> </td>
<td> <input type="button" value="-" onclick="display('-')" /> </td>
</tr>
<tr>
<td> <input type="button" value="7" onclick="display('7')" /> </td>
<td> <input type="button" value="8" onclick="display('8')" /> </td>
<td> <input type="button" value="9" onclick="display('9')" /> </td>
<td> <input type="button" value="+" onclick="display('+')" /> </td>
</tr>
<tr>
<td> <input type="button" value="." onclick="display('.')" /> </td>
<td> <input type="button" value="0" onclick="display('0')" /> </td>

<!-- calculate() function evaluates the mathematical expression -->


<td> <input type="button" value="=" onclick="calculate()" id="btn" /> </td>
<td> <input type="button" value="*" onclick="display('*')" /> </td>
</tr>
</table>

<script type="text/javascript" src="script.js"></script>

</body>

</html>

STYLES.CSS

@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');

.calculator {
padding: 10px;
border-radius: 1em;
height: 500px;
width: 400px;
margin: auto;
background-color: #191b28;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.display-box {
font-family: 'Orbitron', sans-serif;
background-color: #dcdbe1;
border: solid black 0.5px;
color: black;
border-radius: 5px;
width: 100%;
height: 65%;
}

#btn {
background-color: #fb0066;
}
input[type=button] {
font-family: 'Orbitron', sans-serif;
background-color: #64278f;
color: white;
border: solid black 0.5px;
width: 100%;
border-radius: 5px;
height: 70%;
outline: none;
}

input:active[type=button] {
background: #e5e5e5;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
}

SCRIPT.JS
// This function clears all the values
function clearScreen() {
document.getElementById("result").value = "";
}

// This function displays the values


function display(value) {
document.getElementById("result").value += value;
}

// This function evaluates the expression and returns the result


function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}

LANDINGPAGE.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fruit Shop Landing Page</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles1.css" />
</head>
<body>
<header id="header">
<div class="header-content-div">
<a href="#home-sec">
<img
src="https://i.ibb.co/KsztxWq/logo1.png"
alt="Company Logo"
id="header-img"
/></a>
<nav id="nav-bar">
<a href="#about" class="nav-link">ABOUT</a>
<a href="#varieties" class="nav-link">VARIETIES</a>
<a href="#our-service" class="nav-link">OUR SERVICE</a>
<a href="#benefits" class="nav-link">BENEFITS</a>
</nav>
</div>
</header>
<main>
<section id="home-sec" class="flexible home-sec">
<div class="eye-grabber-img">
<img src="https://i.ibb.co/T4czpqY/apples-red-fresh-mellow-juicy-perfect-whole-on-white-
desk.jpg" alt="Image of Apples" />
</div>
<div class="eye-grabber">
<h1>Fresh, Crispy, Heavenly.</h1>
<h2>
100% Organic, vivid varieties of apples grown in Kashmir aka The
Heaven of Earth.
</h2>
<button class="btn" onclick="window.location.href = '#contact';">
Buy Now
</button>
</div>
</section>
<section id="about" class="sec-padding">
<h3 class="section-heading">ABOUT US</h3>
<div class="sec-content-div flexible">
<p>
We are a group of people with decades of experience in growing and
selling apples. We know what a good apple looks like and how they
are grown. This essential fruit requires a temperate climate, loamy
soil that is rich in organic matter apart from needing proper
drainage and aeration facilities. Lucky for us we live in Kashmir
which is proudly known as paradise of earth is also home to
temperate fruits like apple for which the state is very famous
across globe. The main factor which influence temperate fruit
bearing trees is soil, climate and environment which are highly
favorable and unparalleled in the province of Kashmir. Kashmiri
apples a unique look, taste, flavor, size and color.
</p>
<img src="https://i.ibb.co/SyKVC8M/about-img.jpg" alt="A man plucking apples from the
tree" />
</div>
</section>
<section id="varieties" class="sec-padding">
<h3 class="section-heading">VARIETIES</h3>
<div class="sec-content-div flexible">
<div class="tile">
<img src="https://i.ibb.co/t2x706V/amber.jpg" alt="photo of amber apples" />
<h4>Amber</h4>
<p>
This red, medium-sized fruit becomes fully ripe in mid-October. It
is mostly grown in Shopian and Kulgam.
</p>
</div>
<div class="tile">
<img
src="https://i.ibb.co/H4Cnh7v/american-trel.png"
alt="photo of american trel apples"
/>
<h4>American Trel</h4>
<p>
A small, rounded, very crispy and sweet fruit variety that ripens
in mid-September.
</p>
</div>
<div class="tile">
<img src="https://i.ibb.co/jTDgqYB/red-delicious.png" alt="photo of red delicious apple" />
<h4>Red Delicious</h4>
<p>
A very popular and widely cultivated variety of apple that ripens
in mid-September. Its flesh is greenish white, grainy and juicy.
</p>
</div>
<div class="tile">
<img src="https://i.ibb.co/MSvg1QN/maharaja.png" alt="photo of Maharaej apples" />
<h4>Maharaej</h4>
<p>
A large apple with red and green color. It tastes a bit sour but
sweetens with time and is available by late October.
</p>
</div>
<div class="tile">
<img src="https://i.ibb.co/zVR1LB2/hazal.png/" alt="photo of Hazratbael apples" />
<h4>Hazratbael</h4>
<p>
A quickly perishable variety that ripens in early July. It is the
oldest variety of apples cultivated in the valley and is mostly
consumed domestically
</p>
</div>
<div class="tile">
<img src="https://i.ibb.co/BNFrnZn/golden.png" alt="photo of Golden Delicious apples" />
<h4>Golden Delicious</h4>
<p>
A variety with comparatively longer shelf life, it is crispy,
juicy and has thick greenish-white flesh which turns golden upon
ripening. It is available till January.
</p>
</div>
</div>
</section>
<section id="our-service" class="sec-padding">
<h3 class="section-heading">OUR SERVICE</h3>
<div class="sec-content-div">
<div class="bars">
<div class="icon-container">
<img src="https://i.ibb.co/w6H542X/Fresh.png" alt="" />
</div>
<div class="txt-container">
<h5>Fresh</h5>
<p>We deliver fresh apples with a 100% guarantee of freshness.</p>
</div>
</div>
<div class="bars">
<div class="icon-container">
<img src="https://i.ibb.co/FKNq4Qr/delivered.png" alt="" />
</div>
<div class="txt-container">
<h5>Fast</h5>
<p>
We deliver your orders as fast as possible, delivery procedure
begins as soon as apple is plucked from tree.
</p>
</div>
</div>
<div class="bars">
<div class="icon-container">
<img src="https://i.ibb.co/HHQK1wV/happy.png" alt="" />
</div>
<div class="txt-container">
<h5>Satisfying</h5>
<p>
We guarantee 100% customer satisfaction. We do our best to make
your purchase experience smooth. But if we mess up somehow you
will get compensated for every inconvenience.
</p>
</div>
</div>
</div>
<section class="sec-padding" id="contact">
<h3 class="section-heading">CONTACT</h3>
<div class="sec-content-div flexible">
<h6>To make an order or just to know more contact us :</h6>
<form
id="form"
action="https://www.freecodecamp.com/email-submit"
method="POST"
>
<input
type="email"
name="email"
id="email"
placeholder="Your Email Address"
required
/>
<input type="submit" class="btn" id="submit" value="Know More" />
</form>
</div>
</section>
</main>
<footer>
Created by
<a href="#">Meher Satyaveni</a>
</footer>
</body>
</html>

STYLES.CSS
@import url("https://fonts.googleapis.com/css2?
family=Montserrat:ital,wght@0,400;0,500;0,600;0,800;1,600&display=swap");
@import url("https://fonts.googleapis.com/css2?
family=Open+Sans:wght@400;600;700&display=swap");
:root {
font-size: 10px;
font-family: "Open Sans", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
}
#header {
height: max-content;
font-family: "Montserrat", sans-serif;
width: 100%;
background-color: white;
padding: 1rem 0;
position: sticky;
z-index: 99;
top: 0;
left: 0;
box-shadow: 0 6px 31px -2px rgba(0, 0, 0, 0.1);
}
@media (max-width: 800px) {
#header {
text-align: center;
height: auto;
}
}
.header-content-div {
max-width: 95rem;
width: auto;
margin: 0 auto;
}
@media (max-width: 991px) {
.header-content-div {
max-width: 75rem;
}
}
#header-img {
height: 5rem;
width: auto;
}
@media (max-width: 800px) {
#header-img {
height: 4rem;
}
}
nav {
position: relative;
top: 0.8rem;
float: right;
font-size: 1.6rem;
font-weight: 500;
padding: 1.5rem 0;
}
@media (max-width: 800px) {
nav {
position: static;
float: none;
font-size: 1.4rem;
padding: 0.5rem 1rem;
}
}
.nav-link {
text-decoration: none;
color: #333;
margin: 0 0.5rem;
padding: 0 0.6rem;
transition: border-bottom 0.2s;
}
@media (max-width: 475px) {
.nav-link {
margin: 0 0.2rem;
padding: 0 0.2rem;
font-size: 1.2rem;
}
}
.nav-link:hover {
color: #e23d3d;
border-bottom: 2px solid #e23d3d;
}
.nav-link:active {
color: #f84848;
}
.flexible {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
text-align: center;
}
.home-sec {
font-family: "Montserrat", sans-serif;
background-color: #ffffff;
text-align: start;
min-height: 60rem;
height: auto;
margin: 0 auto 5rem auto;
justify-content: start;
max-width: 95rem;
color: #333;
}
@media (max-width: 800px) {
.home-sec {
flex-flow: column wrap;
max-width: 100%;
}
}
.eye-grabber {
flex: 1;
padding: 0 2rem;
}
@media (max-width: 800px) {
.eye-grabber {
max-width: max-content;
padding-bottom: 8rem;
}
}
.eye-grabber h1 {
font-size: 5rem;
line-height: 1.5;
font-weight: 600;
}
.eye-grabber h2 {
font-size: 2.4rem;
font-weight: 500;
color: #666;
}
.eye-grabber-img {
flex: 1;
}
@media (max-width: 800px) {
.eye-grabber-img {
width: 100%;
}
}
.eye-grabber-img img {
max-width: 100%;
}
.btn {
border: none;
font-size: 2rem;
border-radius: 0.4rem;
padding: 2rem;
background-color: #e23d3d;
color: #fafafa;
outline: 0;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
transition: all 0.2s;
}

.btn:hover {
background-color: #f84848;
cursor: pointer;
}
.btn:active {
transform: scale(0.9);
}
.section-heading {
font-size: 2.5rem;
font-family: "Montserrat", sans-serif;
font-weight: 500;
line-height: 1.2;
margin: 0;
padding: 5rem 0 5rem 0;
text-align: center;
}
.sec-content-div {
font-size: 2rem;
text-align: start;
padding: 0 2rem 5rem 2rem;
width: auto;
justify-content: space-around;
max-width: 95rem;
margin: 0 auto;
}
.sec-padding {
padding: 8rem 0 10rem 0;
}
#about {
background-color: #fafafa;
}
#about img {
max-width: 100%;
height: auto;
background-color: white;
border-radius: 0.5rem;
box-shadow: 0 6px 31px -2px rgba(0, 0, 0, 0.1);
}
#varieties {
background-color: #e3e3e3;
}
.tile {
background-color: #fafafa;
height: 40rem;
width: 25rem;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
border-radius: 0.5rem;
transition: all 0.2s;
padding: 1.5rem;
margin: 1.5rem;
}
@media (max-width: 680px) {
.tile {
width: auto;
max-width: 100%;
min-width: 20rem;
margin: 1.5rem auto;
height: auto;
}
}
.tile img {
width: 100%;
max-width: 48rem;
border-radius: 0.5rem;
}
.tile h4 {
font-size: 2rem;
font-weight: 600;
padding: 1rem 0;
color: #e23d3d;
margin: 0;
}
.tile p {
font-size: 1.6rem;
padding: 0;
margin: 0;
}
.tile:hover {
transform: scale(1.05);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.19), 0 16px 16px rgba(0, 0, 0, 0.23);
}
#our-service {
background-color: #ee6f57;
}
.bars {
height: max-content;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-content: flex-start;
margin: 2rem;
width: 100%;
}
@media (max-width: 990px) {
.bars {
flex-flow: column wrap;
}
.icon-container {
margin: 0 2.5rem;
}
}
.bars .icon-container {
max-width: 10rem;
flex: 1;
}
.icon-container img {
max-height: 100%;
max-width: 100%;
}
.bars .txt-container {
flex: 2;
padding: 3rem;
}
.txt-container h5 {
font-size: 4rem;
font-weight: 500;
padding: 0;
margin: 0;
font-family: "Montserrat", sans-serif;
}
.txt-container p {
font-size: 2.3rem;
}
#benefits {
background-color: #f84848;
}
#benefits iframe {
outline: 0;
border: none;
width:100%;
border-radius: 0.4rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.19), 0 16px 16px rgba(0, 0, 0, 0.23);
}
#contact {
background-color: #cb3737;
color: #fafafa;
}
#contact h6 {
font-size: 3rem;
font-weight: 500;
}
input[type="email"] {
border: none;
outline: 0;
font-size: 2rem;
border-radius: 0.4rem;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
padding: 2rem;
}
@media (max-width: 520px) {
#contact h6 {
font-size: 2rem;
}
#contact input[type="submit"],
#contact input[type="email"] {
margin: 1rem 1rem 0 1rem;
}
}
footer {
font-size: 1.4rem;
background-color: #ce2f2f;
text-align: center;
padding: 2rem;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
color: #fafafa;
}
footer a {
color: #e3e3e3;
text-decoration: none;
}

You might also like