<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//bootswatch.com/4/minty/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <link href="assets/custome.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" crossorigin="anonymous"></script> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <a class="navbar-brand" href="#">GetEnvato.net <span class="badge badge-danger">BETA</span> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarColor01"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> </ul> <div class="btn-group" role="group" aria-label="Sign Form"> <button type="button" class="btn btn-secondary my-2 my-sm-0" data-toggle="modal" data-target="#signform">Sign In</button> <button type="button" class="btn btn-warning my-2 my-sm-0" data-toggle="modal" data-target="#signform">Sign Up</button> </div> </div> </nav> <div class="container-fluid gedf-wrapper"> <div class="row"> <div class="col-md-3"> <div class="card"> <div class="card-body"> <div class="accordion" id="accordionExample"> <div class="card z-depth-0 bordered"> <div class="card-header" id="headingOne"> <h5 class="mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">What is GetEnvato.net?</button> </h5> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body">Not everyone can afford to get paid/premium solutions, even tho Elements is pretty cheap some peopel can't afford it. After successfully running a closed community free of charge service we decided to open our doors to the public and help designers/creators around the world get their hands on quality material for free!</div> </div> </div> <div class="card z-depth-0 bordered"> <div class="card-header" id="headingTwo"> <h5 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Do we get a licence?</button> </h5> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body">Technically YES! And NO!. In order to download the files our little friend Hank is smashing the keyboard so hard in order to generate a licence. In the future we might provide the nonsence he writes so you can get some sort of licence, till than please go and buy the products you really like and show some to the Developers.</div> </div> </div> <div class="card z-depth-0 bordered"> <div class="card-header" id="headingThree"> <h5 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">What can i get from Envato Elements?</button> </h5> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body">Everything, litteraly everything they have to offer. And guess what? IT'S ALL FOR FREE! Graphic Templates, Fonts, Add-ons, Web Templates, CMS Templates, Wordpress stuff, 3D Projects, Music, Sound Effects, Stock Video, Video Templates. Their Database is counting over 1.000.000 Products and on average they are adding over 15.000 New products every week!</div> </div> </div> </div> </div> <ul class="list-group list-group-flush"> <li class="list-group-item"> <div class="h6 text-muted">Downloads Today</div> <div class="h5">5.234</div> </li> <li class="list-group-item"> <div class="h6 text-muted">Total Downloads</div> <div class="h5">6.758</div> </li> <li class="list-group-item"> <button class="btn btn-primary">Powered by: VPSNet.com</button> </li> </ul> </div> </div> <div class="col-md-6 gedf-main"> <div class="card gedf-card"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="posts-tab" data-toggle="tab" href="#posts" role="tab" aria-controls="posts" aria-selected="true">Make a publication</a> </li> <li class="nav-item"> <a class="nav-link" id="images-tab" data-toggle="tab" role="tab" aria-controls="images" aria-selected="false" href="#images">Images</a> </li> </ul> </div> <div class="card-body"> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="posts" role="tabpanel" aria-labelledby="posts-tab"> <div class="form-group"> <label class="sr-only" for="message">post</label> <textarea class="form-control" id="message" rows="3" placeholder="What are you thinking?"></textarea> </div> </div> <div class="tab-pane fade" id="images" role="tabpanel" aria-labelledby="images-tab"> <div class="form-group"> <div class="custom-file"> <input type="file" class="custom-file-input" id="customFile"> <label class="custom-file-label" for="customFile">Upload image</label> </div> </div> <div class="py-4"></div> </div> </div> <div class="btn-toolbar justify-content-between"> <div class="btn-group"> <button type="submit" class="btn btn-primary">share</button> </div> <div class="btn-group"> <button id="btnGroupDrop1" type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-globe"></i> </button> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDrop1"> <a class="dropdown-item" href="#"> <i class="fa fa-globe"></i> Public </a> <a class="dropdown-item" href="#"> <i class="fa fa-users"></i> Friends </a> <a class="dropdown-item" href="#"> <i class="fa fa-user"></i> Just me </a> </div> </div> </div> </div> </div> <div class="card gedf-card"> <div class="card-header"> <div class="d-flex justify-content-between align-items-center"> <div class="d-flex justify-content-between align-items-center"> <div class="mr-2"> <img class="rounded-circle" width="45" src="https://picsum.photos/50/50" alt=""> </div> <div class="ml-2"> <div class="h5 m-0">@LeeCross</div> <div class="h7 text-muted">Miracles Lee Cross</div> </div> </div> <div> <div class="dropdown"> <button class="btn btn-link dropdown-toggle" type="button" id="gedf-drop1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-ellipsis-h"></i> </button> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="gedf-drop1"> <div class="h6 dropdown-header">Configuration</div> <a class="dropdown-item" href="#">Save</a> <a class="dropdown-item" href="#">Hide</a> <a class="dropdown-item" href="#">Report</a> </div> </div> </div> </div> </div> <div class="card-body"> <div class="text-muted h7 mb-2"> <i class="fa fa-clock-o"></i> 10 min ago </div> <a class="card-link" href="#"> <h5 class="card-title">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit consectetur deserunt illo esse distinctio.</h5> </a> <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam omnis nihil, aliquam est, voluptates officiis iure soluta alias vel odit, placeat reiciendis ut libero! Quas aliquid natus cumque quae repellendus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, excepturi. Doloremque, reprehenderit! Quos in maiores, soluta doloremque molestiae reiciendis libero expedita assumenda fuga quae. Consectetur id molestias itaque facere? Hic!</p> <div> <span class="badge badge-primary">JavaScript</span> <span class="badge badge-primary">Android</span> <span class="badge badge-primary">PHP</span> <span class="badge badge-primary">Node.js</span> <span class="badge badge-primary">Ruby</span> <span class="badge badge-primary">Paython</span> </div> </div> <div class="card-footer"> <a href="#" class="card-link"> <i class="fa fa-gittip"></i> Like </a> <a href="#" class="card-link"> <i class="fa fa-comment"></i> Comment </a> <a href="#" class="card-link"> <i class="fa fa-mail-forward"></i> Share </a> </div> </div> </div> <div class="col-md-3"> <div class="card gedf-card"> <div class="card border-success mb-3"> <div class="card-header">Header</div> <div class="card-body"> <h4 class="card-title">Success card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <div class="card gedf-card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> </div> </div> </div> <div class="modal fade" id="signform" tabindex="-1" role="dialog" aria-labelledby="signform" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">Sign In or Sign Up</h4> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <div class="row"> <div class="col-md-8" style="border-right:1px dotted #C2C2C2;padding-right:30px"> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link" a href="#Login" data-toggle="tab">Login</a> </li> <li class="nav-item"> <a class="nav-link" a href="#Registration" data-toggle="tab">Registration</a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="Login"> <form class="border border-light p-5"> <p class="h4 mb-4 text-center">Sign in</p> <input type="email" id="defaultLoginFormEmail" class="form-control mb-4" placeholder="E-mail"> <input type="password" id="defaultLoginFormPassword" class="form-control mb-4" placeholder="Password"> <div class="d-flex justify-content-between"> <div> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="defaultLoginFormRemember"> <label class="custom-control-label" for="defaultLoginFormRemember">Remember me</label> </div> </div> <div> <a href="">Forgot password?</a> </div> </div> <button class="btn btn-info btn-block my-4" type="submit">Sign in</button> </form> </div> <div class="tab-pane" id="Registration"> <form class="border border-light p-5"> <p class="h4 mb-4 text-center">Sign up</p> <input id="defaultRegisterFormLastName" class="form-control" placeholder="Username" aria-describedby="defaultRegisterFormPasswordHelpBlock"> <small id="defaultRegisterFormPhoneHelpBlock" class="form-text text-muted mb-4">Pick a unique username!</small> <input type="email" id="defaultRegisterFormEmail" class="form-control mb-4" placeholder="E-mail"> <input type="password" id="defaultRegisterFormPassword" class="form-control" placeholder="Password" aria-describedby="defaultRegisterFormPasswordHelpBlock"> <small id="defaultRegisterFormPhoneHelpBlock" class="form-text text-muted mb-4">Minimal 8 characters lenght</small> <input type="password" id="defaultRegisterFormPassword" class="form-control" placeholder="Password" aria-describedby="defaultRegisterFormPasswordHelpBlock"> <small id="defaultRegisterFormPhoneHelpBlock" class="form-text text-muted mb-4">Confirm your password</small> <button class="btn btn-info my-4 btn-block" type="submit">Sign up</button> <hr> <p>By clicking <em>Sign up</em> you agree to our <a href="" target="_blank">terms of service</a> and <a href="" target="_blank">terms of service</a>. </p> </form> </div> </div> </div> </div> </div> </div> </div> </div>

body { background-color: #eeeeee; } .h7 { font-size: 0.8rem; } .gedf-wrapper { margin-top: 0.97rem; } @media (min-width: 992px) { .gedf-main { padding-left: 4rem; padding-right: 4rem; } .gedf-card { margin-bottom: 2.77rem; } } /**Reset Bootstrap*/ .dropdown-toggle::after { content: none; display: none; } .nav-tabs { margin-bottom: 15px; } .sign-with { margin-top: 25px; padding: 20px; } #OR { height: 30px; width: 30px; border: 1px solid #C2C2C2; border-radius: 50%; font-weight: bold; line-height: 28px; text-align: center; font-size: 12px; float: right; position: absolute; right: -16px; top: 40%; z-index: 1; background: #DFDFDF; }