Skip to content

Commit

Permalink
fdsaf
Browse files Browse the repository at this point in the history
  • Loading branch information
@neerajrekwar
neerajrekwar committed Oct 23, 2023
1 parent 592aeb1 commit 43b59c5
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 105 deletions.
149 changes: 62 additions & 87 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,36 +131,38 @@
</header>
<main class="main_container">
<section class="viewBox_container">
<div class="bio_box">
<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
<h2 class="auto-type-set">
let's start to success<br />
your in-house small business on Google <br>
<span class="auto-type"></span>
<script>
var typed = new Typed(".auto-type", {
strings: [
"I will help you customer finds you well",
"Unlock Success Online",
"Transforming Clicks into Customers",
"Digital Strategies for Modern Businesses",
"Masterful Marketing Strategies Await!",
"Get local potential customers"
],
typeSpeed: 100,
backSpeed: 10,
loop: true,
});
</script>
<div class="front-ifo">
<div class="bio_box">
<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
<h2 class="auto-type-set">
let's start to success<br />
your in-house small business on Google <br>
<span class="auto-type"></span>
<script>
var typed = new Typed(".auto-type", {
strings: [
"I will help you customer finds you well",
"Unlock Success Online",
"Transforming Clicks into Customers",
"Digital Strategies for Modern Businesses",
"Masterful Marketing Strategies Await!",
"Get local potential customers"
],
typeSpeed: 100,
backSpeed: 10,
loop: true,
});
</script>

</div>
<div class="img_box">
<img src="/images/photos/Online world-bro.svg" alt="">
</div>
<div class="img_box">
<img src="/images/photos/Online world-bro.svg" alt="">
</div>
</div>
<div class="connet-btn">
<button class="learn-more">
<span class="circle" aria-hidden="true">
<span class="icon arrow"></span>
<span class="icon arrow"></span>
</span>
<span class="button-text">connect to initiative</span>
</button>
Expand All @@ -177,75 +179,48 @@ <h2 class="auto-type-set">
<section class="services_box">
<div class="info_box">
<div class="info_cards">

<div class="card">
<span>Image here</span>
<h4>SEO Audit</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi minima laudantium, officia fugiat
voluptates iure suscipit excepturi mollitia recusandae doloremque eligendi est impedit! Sapiente fuga
minus tempore totam distinctio officia!</p>
</div>
<div class="info_cards">
<div class="card">
<span>Image here</span>
<h4>SEO Audit</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi minima laudantium, officia fugiat
voluptates iure suscipit excepturi mollitia recusandae doloremque eligendi est impedit! Sapiente fuga
minus tempore totam distinctio officia!</p>
</div>
</div>
<div class="info_cards">
<div class="card">
<span>Image here</span>
<h4>SEO Audit</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi minima laudantium, officia fugiat
voluptates iure suscipit excepturi mollitia recusandae doloremque eligendi est impedit! Sapiente fuga
minus tempore totam distinctio officia!</p>
</div>
</div>
<div class="info_cards">
<div class="card">
<span>Image here</span>
<h4>SEO Audit</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi minima laudantium, officia fugiat
voluptates iure suscipit excepturi mollitia recusandae doloremque eligendi est impedit! Sapiente fuga
minus tempore totam distinctio officia!</p>
</div>
<div class="card">
<span>Image here</span>
<h4>SEO Audit</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi minima laudantium, officia fugiat
voluptates iure suscipit excepturi mollitia recusandae doloremque eligendi est impedit! Sapiente fuga
minus tempore totam distinctio officia!</p>
</div>
<div class="info_cards">
<div class="card">
<span>Image here</span>
<h4>SEO Audit</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi minima laudantium, officia fugiat
voluptates iure suscipit excepturi mollitia recusandae doloremque eligendi est impedit! Sapiente fuga
minus tempore totam distinctio officia!</p>
</div>
<div class="card">
<span>Image here</span>
<h4>SEO Audit</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi minima laudantium, officia fugiat
voluptates iure suscipit excepturi mollitia recusandae doloremque eligendi est impedit! Sapiente fuga
minus tempore totam distinctio officia!</p>
</div>
<div class="info_cards">
<div class="card">
<span>Image here</span>
<h4>SEO Audit</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi minima laudantium, officia fugiat
voluptates iure suscipit excepturi mollitia recusandae doloremque eligendi est impedit! Sapiente fuga
minus tempore totam distinctio officia!</p>
</div>
<div class="card">
<span>Image here</span>
<h4>SEO Audit</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi minima laudantium, officia fugiat
voluptates iure suscipit excepturi mollitia recusandae doloremque eligendi est impedit! Sapiente fuga
minus tempore totam distinctio officia!</p>
</div>
<div class="info_cards">
<div class="card">
<span>Image here</span>
<h4>SEO Audit</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi minima laudantium, officia fugiat
voluptates iure suscipit excepturi mollitia recusandae doloremque eligendi est impedit! Sapiente fuga
minus tempore totam distinctio officia!</p>
</div>
<div class="card">
<span>Image here</span>
<h4>SEO Audit</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi minima laudantium, officia fugiat
voluptates iure suscipit excepturi mollitia recusandae doloremque eligendi est impedit! Sapiente fuga
minus tempore totam distinctio officia!</p>
</div>
<div class="info_cards">
<div class="card">
<span>Image here</span>
<h4>SEO Audit</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi minima laudantium, officia fugiat
voluptates iure suscipit excepturi mollitia recusandae doloremque eligendi est impedit! Sapiente fuga
minus tempore totam distinctio officia!</p>
</div>
<div class="card">
<span>Image here</span>
<h4>SEO Audit</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi minima laudantium, officia fugiat
voluptates iure suscipit excepturi mollitia recusandae doloremque eligendi est impedit! Sapiente fuga
minus tempore totam distinctio officia!</p>
</div>
</div>
</div>
Expand Down Expand Up @@ -299,7 +274,7 @@ <h1>Contact Us</h1>
<path d="M4 4m0 4a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z"></path>
<path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
<path d="M16.5 7.5l0 .01"></path>
</svg></a>
</svg></a>
<a class="social-link" href="https://www.linkedin.com/in/neerajrekwar">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-linkedin" width="28"
height="28" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round"
Expand All @@ -311,15 +286,15 @@ <h1>Contact Us</h1>
<path d="M12 16l0 -5"></path>
<path d="M16 16v-3a2 2 0 0 0 -4 0"></path>
</svg>
</a>
</a>
<a class="social-link" href="https://twitter.com/neerajrekwar"><svg xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-brand-twitter-filled" width="28" height="28" viewBox="0 0 24 24"
stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M14.058 3.41c-1.807 .767 -2.995 2.453 -3.056 4.38l-.002 .182l-.243 -.023c-2.392 -.269 -4.498 -1.512 -5.944 -3.531a1 1 0 0 0 -1.685 .092l-.097 .186l-.049 .099c-.719 1.485 -1.19 3.29 -1.017 5.203l.03 .273c.283 2.263 1.5 4.215 3.779 5.679l.173 .107l-.081 .043c-1.315 .663 -2.518 .952 -3.827 .9c-1.056 -.04 -1.446 1.372 -.518 1.878c3.598 1.961 7.461 2.566 10.792 1.6c4.06 -1.18 7.152 -4.223 8.335 -8.433l.127 -.495c.238 -.993 .372 -2.006 .401 -3.024l.003 -.332l.393 -.779l.44 -.862l.214 -.434l.118 -.247c.265 -.565 .456 -1.033 .574 -1.43l.014 -.056l.008 -.018c.22 -.593 -.166 -1.358 -.941 -1.358l-.122 .007a.997 .997 0 0 0 -.231 .057l-.086 .038a7.46 7.46 0 0 1 -.88 .36l-.356 .115l-.271 .08l-.772 .214c-1.336 -1.118 -3.144 -1.254 -5.012 -.554l-.211 .084z"
stroke-width="0" fill="currentColor"></path>
</svg></a>
</svg></a>
<a class="social-link" href="http://github.com/neerajrekwar"><svg xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-brand-github-filled" width="28" height="28" viewBox="0 0 24 24"
stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
Expand All @@ -342,7 +317,7 @@ <h1>Contact Us</h1>
<li><span class="material-symbols-outlined">
location_on
</span><a href="http://" target="_blank" rel="noopener noreferrer">Dwarka sector 7 New Delhi</a></li>
<li><input type="text" value=""></li>
<li><input type="text" value=""></li>
</ul>
<ul class="contact_support">
<b class="icons-format"><span class="material-symbols-outlined contac-circle">
Expand Down
45 changes: 27 additions & 18 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@ section {
max-width: 100%;
margin: 0 12px;
/* border: 2px solid yellowgreen; */
color: #519E8A;
}

.header {
Expand Down Expand Up @@ -146,13 +145,13 @@ footer {

.auto-type-set,
.auto-type {
font-size: 4rem;
font-size: 3rem;
color: #519E8A;

}

.auto-type-set {
font-size: 4rem;
font-size: 3rem;
color: #404040;
}

Expand Down Expand Up @@ -205,32 +204,41 @@ footer {
}

.viewBox_container {
margin: 0 auto;
margin: 0 auto;
width: 80%;
/* max-width: 60%; */
/* background-color: #e9cea5; */
/* background-color: #ece07591; */
/* border-radius: 15px; */

padding: 10px;
padding: 30px 10px;
height: auto;
/* border: solid 2px yellow; */

}

.front-ifo{
padding-top: 50px;
display: flex;
}
.bio_box {
margin: 0 auto;
width: 97%;
height: 50vh;
height: 40vh;
font-size: 2.5rem;
/* border: 2px solid green; */
}
.img_box{
display: flex;
}
.img_box img{
height: 100%;
height: 20rem;
width: 100%;
}
.viewBox_container .bio_box .img_box{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: 2px solid goldenrod;
}

.profile_image {
/* border: solid 1px #EF7B45; */
display: block;
Expand All @@ -244,7 +252,7 @@ footer {
.info_cards {
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(50vh, 2fr));
grid-template-columns: repeat(auto-fit, minmax(255px, 2fr));
/* grid-template-rows: repeat(auto-fit, minmax(436px, 2fr)); */
gap: 10px;
justify-content: space-between;
Expand All @@ -258,11 +266,8 @@ footer {
align-items: center;
text-align: center;
background-color: rgba(194, 214, 103, 0.507);
backdrop-filter: blur(1px);
border-radius: 15px;
padding: 5px;
margin: 24px 0;
box-shadow: h-offset v-offset blur spread color inset;
/* border: 2px solid green; */
}

button {
Expand Down Expand Up @@ -327,7 +332,7 @@ button {
button.learn-more .button-text {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
top: -6px;
left: 0;
right: 0;
bottom: 0;
Expand All @@ -354,6 +359,7 @@ button {
.services_box {
margin: 0 auto;
width: 90%;
/* border: 2px solid tomato; */
}

.connet-btn {
Expand Down Expand Up @@ -580,6 +586,9 @@ li a:hover{
/* border: 5px solid rgb(82, 207, 89); */
margin: 10px;
}
.front-ifo{
display: contents;
}
.contact_box {
display: flex;
justify-self: center;
Expand All @@ -604,7 +613,7 @@ li a:hover{

.auto-type,
.auto-type-set {
font-size: 3rem;
font-size: 2.5rem;
}
}

Expand Down

0 comments on commit 43b59c5

Please sign in to comment.